Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Native Style Editor tweaks

This guide is a reference for all Style Editor tweaks in the Native template. To learn how to use the Style Editor, visit Making style changes.

Note: The Squarespace platform is constantly evolving to give you the best possible tools for building your website. We update these guides frequently, but if the platform has recently changed you may see slightly different options than the ones listed below. The best way to learn the functionality of any tweak is to experiment with it and see what changes on your site.

General

Tweaks for the background and general layout of your site.

  • Site Background - Set the color of the site background
  • Site Background Image - Add an image as your site background. For styling help, visit Adding a background image.
  • Site Outer Padding  
  • Site Width  
  • Borders Color - Adjust the transparency to show border lines around the Main Navigation and between blog posts.

Site Header

The site header in Native is where the site title, tag line, and site description live.

  • Site Title - Adjust the font style of the site title.
  • Site Title Size  
  • Site Title Color  
  • Site Tag Line - Adjust the font style of the tag line.
  • Site Tag Line Size  
  • Site Tag Line Color  
  • Description - Adjust the font style of the page description.
  • Description Size  
  • Site Description Color  
  • Logo Width - Adjust the logo size if you’ve replaced the site title with a logo.
  • Header Spacing - Adjust the space between the Main Navigation and page content.

Site Navigation

Adjust the font style for Native’s Main Navigation and product navigation.

  • Navigation - Adjust the font style of the site title.
  • Navigation Size  
  • Navigation Link Color  
  • Navigation Active Link Color  

Main Content

Adjust the text font styles throughout your site.

  • Headings - Headings includes blog post, album, and events titles.
  • Headings Size  
  • Headings Color  
  • Body Text  
  • Body Text Size  
  • Body Text Color  
  • Body Link Color  
  • Body Link Hover Color  
  • Underline Body Links  
  • Quotes - Affects the Quote Block
  • Quotes Size  
  • Page Content Width - Adjust the content width on Regular Pages

Blog

These tweaks appear when you’re on a Blog Page. For more information, visit Blogging with Squarespace.

  • Meta tweaks adjust the metadata for your posts, such as the post date and tags.
  • Meta Text  
  • Meta Text Size  
  • Meta Text Color  
  • Blog Meta Data: Split, Bottom - Move all metadata below the post or split top and bottom.
  • Article Spacing - Adjust the space between blog posts
  • Blog Content Width  
  • Hide Icons - Removes the icons next to the metadata.
  • Hide Author - Hide the byline on blog posts.
  • Hide Tags Categories  
  • Disable Promoted Gallery Color - Hide the color that displays behind uncropped images if your Promoted Gallery Block is set to Grid.

Footer

Tweaks for styling the footer, the area at the bottom of the page.

  • Footer Text Size  
  • Footer Text Color  
  • Footer Link Color  
  • Footer Link Hover Color  
  • Social Icon Style: Normal, Square, Round
  • Social Icon Size  
  • Social Icon Color  
  • Social Icon Hover Color  

Products

These tweaks appear when you’re on a Products Page. For in-depth information, visit Styling the Products Page.

  • Show Category Navigation - Hide or display the category navigation.
  • Product Background Color - The color behind the product image.
  • Product Overlay Color - Set the color of the on-hover overlay when Product List Titles: Overlay is enabled.
  • Products Per Row - Set the number of products per row on the Products Page.
  • Product List Titles: Under, Overlay - Set the title and price to display under the thumbnail image or on hover.
  • Product List Alignment: Center, Left - Set text to Center or Left when Product List Titles: Under is enabled.
  • Product Item Size - Set the image ratio (width:height) for photos on the Products Page.
  • Product Image Auto Crop - Crop product images to the aspect ratio set with the Product Item Size tweak.
  • Product Gallery Size - Set the image ratio (width:height) for photos on product item pages.
  • Product Gallery Auto Crop - Crop images on product item pages to the aspect ratio set with the Product Gallery Size tweak.
  • Show Product Price - Show or hide prices on the Product Page. If unchecked, the price will still appear on product item pages.
  • Show Product Item Nav - Display a navigation link back to the Products Page.
  • Product Social Sharing - Add or remove Share buttons from product item pages.

Gallery Styles

These tweaks appear when you’re on a Gallery Page. For general help, visit Styling a Gallery Page.

  • Use the Gallery Design tweak to set the layout.

Gallery Design: Grid

  • Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide.
  • Grid Spacing - Increase the padding between individual images in your grid.
  • Min Column Width - Set the width of columns in your grid.
  • Lightbox Style: Dark, Light

Gallery Design: Slideshow

  • Gallery Navigation: Thumbnails, Bullets, Numbers, Circles, Simple, None - The type of navigation provided on the page.
  • Gallery Info Overlay: Always Show, Show on Hover, Hide - For image titles and captions
  • Gallery Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide. Use with the Gallery Auto Crop tweak.
  • Gallery Arrow Style: Round Corners, Rectangular, Circular, No Background - Style the arrows used to cycle through the slides.
  • Gallery Transitions: Fade, Scroll
  • Gallery Show Arrows  - Uncheck to hide arrows on your gallery display.
  • Gallery Auto Crop - Auto-crops images to the aspect ratio set with the Gallery Aspect Ratio tweak.
  • Gallery Autoplay - Cycle gallery images automatically without user interaction.
  • Gallery Loop - Enable a gallery to cycle through to the first slide after the last slide.
  • Gallery Autoplay Speed (sec)
  • Gallery Thumbnail Size - Set the height of gallery navigation thumbnail images.
  • Gallery Arrow Background
  • Gallery Arrow Color
  • Gallery Circle Color
  • Gallery Info Background - The color used as the background for the image titles and captions.

Events

These tweaks appear when you’re on an Events Page. For general help, visit Styling the Events Page.

  • Disable Item Pages - Disable the title link for individual events. When unchecked, clicking an event's title opens the individual event page.
  • Show past Events  
  • Show Thumbnails - Show the thumbnail image for each event on the Event Page to the left of the event.
  • Thumbnail Size
  • Show Date Tag - The date tag highlights event dates. It displays to the left of each event in on the Event Page.
  • Show Date Tag w/ Time  
  • Show Categories  
  • Show Date  
  • Show Time  
  • Show Location  
  • Show Export Links - Export links allow visitors to export event details to Google Calendar or iCal.
  • Show Social Buttons  
  • Show Excerpt - Excerpts display a brief description of an event in the Events Page list view
  • Show Button  
  • Show Back Link - Appears when you’re on the page for a specific event. When checked, shows the 'Back To All Events’ link on individual event pages.
  • 24-Hour Time  
  • Stacked View - Display your events as a stacked list with thumbnails appearing above the event at full-width.

Album Options

These tweaks appear when you’re on an Album Page.

  • Album Text Color  
  • Hide Album Share Link  

Cover Pages

Cover Pages are styled independently of a site’s template. Visit Styling a Cover Page for more information.

Block tweaks

Tweaks for certain blocks will also display in the Style Editor. For more information about available style changes, visit What are blocks? to find help content for your specific block.

Was this article helpful?
0 out of 4 found this helpful
Native Style Editor tweaks