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

This guide walks you through the options for adjusting the look and feel of your Forte site. If you're new to Squarespace, we recommend you start with the guide Making style changes.

Tips: In the Home Menu, click Design, then Style Editor. To access tweaks specific to a page, navigate to the Style Editor 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 Main Navigation.

Forte supports these page types with template-specific features:

  • Index - A slideshow landing page that makes a great portfolio homepage
  • Gallery - Display your images in an interactive carousel
  • Blog - The list-style Blog Page stacks posts vertically

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Events - Create a calendar or list of events
  • Products (Classic) - Sell goods and services with our integrated Commerce features
  • Cover Page - A unique landing page styled separately from your template
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Branding

Branding elements display in the top-left corner of your site.

  • Site title - Use the Site Title tweak to adjust the font and size of your site title
  • Logo - If you replace the site title with a logo, use the Logo Image Max-Height tweak to adjust the size. 
  • Tag line - If you add a tag line, it displays below the site title or logo. Use the Tagline tweak to adjust the font and size. To reduce crowding on smaller browsers, the tag line only displays when the viewport is at least 801 pixels high.

The auto-detect feature determines the color of the site title and tag line. The logo always stays the same color as the image you upload.

Navigation and social icons

The Main Navigation links and social icons display in the top-right corner of your site.

  • Navigation - Your Main Navigation displays pages and other links. Navigation links display an underline on hover and when active. Use the Navigation tweak to adjust the font and size of your links. 
  • Social icons - Social icons for your connected accounts display to the right of the navigation.
  • The auto-detect feature determines the color of the navigation links and social icons.

Index and folders create drop-down menus:

  • Check the Hide Folder Symbol tweak to remove the + icon.
  • The auto-detect feature determines the menu background color.
  • On Indexes, the text matches the auto-detected navigation color.
  • On all other pages, the text matches the site Background Color.

Background

Index Pages and Cover Pages have their own background styles. For the rest of your site, you can set either a background color or a background image to display behind your page content.

  • Use the Background tweak to adjust the background color.
  • Use the Page Background Image tweak to add a site-wide background image to every Album, Blog, Events, Products, and Regular Page on your site. Gallery Pages display the background color instead of background images.

The color of your background determines controls the color of your site branding, navigation, and social icons.

The header, footer, and main content area display over the background. There isn't an adjustable background color for the main content area.

Color auto-detect

Forte uses an auto-detect feature to adjust the color of the header elements, based on how light or dark the background is. This helps ensure that your header elements are always visible, even on Index Pages with changing background images.

  • The site title, tag line, navigation, folder backgrounds, and social icons are automatically set to black or white depending on the background and can't be changed.
  • For background images, the color auto-detection is based on the overall darkness or brightness of the image, not the lightness or darkness of the area around the elements. For example, if the area around the navigation links is dark but your image is mostly light, the links will be black.
  • For Index and folder links, the background color of the drop-down menu is the same color as the navigation. The links in the folder on Indexes are the opposite color (white or black). (On non-indexes, links follow the Background Color.)

Layout

  • Use the Content Width tweak to adjust the width of the main content area of your site.
  • The Content Layout tweak determines if the main content area is left-aligned or centered under the header.

These tweaks don't affect Gallery Pages or Index Pages.

For all pages, Forte has built-in padding around the site that can't be adjusted.

Fonts

Use the tweaks in the Typography section of the Style Editor to style the text in your main content area and footer.

  • Heading sizes are relative to the body text. Adjust the Body Text tweak to adjust the size of all body text and headers.
  • Use the tweaks in the Header section to style the fonts and colors for the navigation links and other header elements.

Sidebar

The sidebar only appears on Blog Pages.

Footer

The footer appears on all pages except Gallery and Index Pages. The footer displays at the same width as the main content area.

To customize a footer, hover over it and click the Edit annotation. Then add content using blocks. To learn more, visit Editing footers.

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. For general information, visit How will my site appear on a mobile device?

  • Background images display on mobile. For help with formatting, visit our troubleshooting tips.
  • The navigation displays as a hamburger icon in the top-right corner. When clicked, it opens as a full-screen overlay. Folder and Index links display in sub-menus. 
  • The navigation overlay color matches the site background color. The auto-detect feature determines the color of the links.
  • Social icons and your site's business information display below the navigation links in the overlay.

mobile2.png

Note: You can disable mobile styles in the Advanced panel.

Next step

Learn how to create a dramatic landing page with the Index Page.

Was this article helpful?
4 out of 15 found this helpful
Forte structure and style