Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Native structure and style

This guide walks you through Native’s options for adjusting the look and feel of your site. These options are available in the Site Styles panel.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Tip: In the Home Menu, click Design, and then click Site Styles. To access tweaks specific to a page, navigate to Site Styles when on that specific page.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

The Native template supports these page types:

  • Blog - The list-style Blog Page stacks posts vertically.
  • Regular Page - A blank page you can customize with blocks.
  • Album -  Create a page with playable music tracks and cover art.
  • Events - Create a calendar or list of events.
  • Gallery - Style the gallery as a slideshow or grid.
  • Products (Classic) - Sell goods and services with our integrated Commerce features.
  • Cover Page - A unique landing page styled separately from your template.

Site header and navigation

In Native, the site title, tag line, and site description display centered at the top above the Main Navigation.

Use the tweaks in the Site Header section of Site Styles to adjust the color, size, and font style of the site title, site description, and tag line.

  • The tweaks in the Site Navigation section adjust the color, size and font style of the Main Navigation.
  • The menu background matches the Site Background tweak.

Add drop-down menus to the navigation with folders.

Customize your site title and tag line in the Logo & Title panel.

To adjust the site description, hover over the area below the site title and click Edit. Style it with the Description tweaks in the Site Header section of Site Styles. To remove the site description, delete the text.

You can also replace your site title with a logo. Use the Logo Width tweak in the Site Header section of Site Styles to adjust the logo’s size.

In the General section of the Style Guide, adjust the transparency in the Borders Color tweak to add border lines above and below the Main Navigation. Lines will also appear between blog posts.

Note: To learn how to adjust what pages display in the navigation menu, visit Adding pages to your navigation.

Background

Set the background color of your site with the Site Background tweak in the General section of Site Styles.

Use the Site Background Image tweak to replace the background color with an image. For information about styling the image, visit Adding a background image.

Round images

On Blog Pages, thumbnail images are cropped to circles above post excerpts. On all other pages, images display normally

Footer and social icons

Customize the footer at the bottom with any content using blocks. The footer is site-wide, meaning the same footer content displays on all pages. To learn more, visit Editing footers.

Social icons display by default in the footer. Social icons link to your connected accounts.

Use the tweaks in the Footer section of Site Styles to change the style of the footer and social icons.

Mobile

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices.

Background images can't be fixed in some browsers.

The navigation displays below the site header as a drop-down menu link titled Navigation. The menu that appears looks different on different devices:

ios-and-android.png

On a narrow mobile browser, such as a smartphone, blog post thumbnails don't display.

mobile1.png

Note: You can disable mobile styles.

Next step

Learn about Native Blog Pages.

Was this article helpful?
5 out of 11 found this helpful
Native structure and style