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

Forte is a portfolio template ideal for creative firms, designers, and artists. With a full-bleed Index Page, you can put your best shots front and center, encouraging visitors to explore your work.

This guide covers the features and design options for the Forte family. Site Styles tweaks are bold, and link to the list of all Forte tweaks to help you navigate the panel.

Tip: Forte's Live Preview page shows real customer sites using this template.

Supported pages

Forte supports these page types:

Header

Branding

The site title or logo and tag line appear in the top-left.

  • Style these elements with Site Title, Logo Image Max-Height, and Tagline in Header.
  • The tag line only displays when the viewport is at least 801 pixels high.
  • The site title and tag line are set to black or white automatically.
  • The logo always stays the same color as the image you upload.

Navigation and social icons

The Main Navigation links and built-in social icons display in the top-right.

  • They're set to black or white automatically.
  • Links have an underline on hover and when active.
  • Style the links with Navigation in Header.

Indexes and folders create drop-down menus:

  • Remove the + icon with Hide Folder Symbol in Header.
  • The menu background color matches the navigation.
  • On Indexes, sub-page links are black or white based on the menu background color.
  • On all other pages, sub-page links match the site background color (Background in Site).

forte-nav-links.png

Background

To set the background:

  • Change the color with Background in Site.
  • Add a site-wide background image with Page Background Image in Site.
  • Gallery Pages always display the background color.
  • Index Pages and Cover Pages have their own background styles.
  • Your background color affects the header's auto-detect colors.

The background displays behind the header, footer, and main content area.

forte-background.png

Auto-detect color feature

Forte automatically sets the color of the header elements to black or white based on how light or dark the background is. This helps your header elements stay visible, even on Index Pages with changing background images.

For background images, the color is based on the overall darkness or brightness of the image. For example, if the area around the navigation links is dark but your image is mostly light, the links will be black.

Footer

The site-wide footer displays on all pages except Gallery and Index Pages. Customize the footer with blocks.

Blog Pages

Forte Blog Pages display as a list of vertically-stacked posts. A sidebar appears on all Blog Pages and posts.

On the landing page:

  • Thumbnail images don't display.
  • Metadata displays below the post, including a "Last Updated" date. Shares and likes don't display.
  • Excerpts display with a Read More link.

On individual posts:

  • Navigation for previous and next posts displays below the comments.
  • The "Last Updated" date doesn't appear.

forte-blog.png

Sidebar

A sidebar displays on landing pages and posts. Customize it with blocks. If you have multiple blogs on your site, the same sidebar displays on all of them.

  • The sidebar scrolls up with the page.
  • Choose the layout, set the width, and choose if author names display in the Blog section.
  • Hide the sidebar with Sidebar Position: Hidden in Blog.
  • On mobile, the sidebar displays below the page content.

The Content Width size for the main content area excludes the sidebar. For example, if your content width is set to 500 pixels, and your sidebar is set to 200 pixels, the width of both together will be 700 pixels.

Gallery Pages

Forte Gallery Pages display images and videos in a carousel. Image captions display below the images and slide up on hover. Large caption areas mean you have plenty of space to describe your images.

  • Gallery Pages always display the background color (Background in Site). They don't display background images.
  • The footer doesn't display.
  • The padding around images or captions isn't adjustable.
  • Left and right navigation arrows appear on hover. At the end, the carousel cycles back to the beginning.
  • For image captions, titles always display. Descriptions slide up over the image on hover.

forte-gallery.png

Lightbox

Open a lightbox slideshow by clicking the + icon that appears on hover in the top-right corner of an image.

  • Use the navigation arrows to click through the images.
  • Image titles and descriptions don't display.
  • Choose how images transition with Lightbox Transition in Gallery.
  • Captions don't display in the lightbox.

More help with Gallery Pages

  • To create a different layout, use a Layout Page with a Gallery Block.
  • They follow the Headings font and color and the Body Text size.
  • Image descriptions slide up over the image on hover. They follow the Body Text font, color, and size.
  • Use clickthrough URLs to turn images into links. Clickthrough URLs don't work in the lightbox.
  • Use deeplink URLs to send visitors directly to any image in the gallery. The gallery loads in carousel view with the chosen image on the left.
  • On mobile, captions display below each image.
  • There isn't a lightbox feature on mobile.

Index Pages

Forte Index Pages create slideshows of full-bleed images, each representing a page on your site. The header, page title, and navigation arrows display over the image.

Add or change the slide background images by adding thumbnails to each sub-page.

  • Pages without thumbnail images have a gray background.
  • Gallery Pages without thumbnail images display the first gallery image.
  • Choose how slideshows move from slide to slide with Index Transition and Auto Play in Index.
  • Choose if clicking the slide opens the connected page or moves to the next slide with Slides Click Through in Index.
  • To help visitors return to an Index slideshow after they've clicked through to a sub-page, add it to your Main Navigation, or set it as your homepage.
  • Navigation arrows are set to black or white automatically.

forte-index.png

Supported pages

You can add the following pages to an Index:

  • Layout Pages
  • Gallery Pages
  • Blog Pages
  • Events Pages
  • Album Pages

Page title

The page title of the Index and its sub-pages display in the bottom-left corner. Set the Index name in Index Page Settings. Set each sub-page's title in its Page Settings.

  • Hide the Index title with Hide Folder Title in Index.
  • Style the font and size with Collection Title in Index.
  • The title background and sub-page titles are set to black or white automatically.
  • The Index title is always gray.
  • To use different text for search results, add an SEO title.

More help with Indexes

  • The header displays over the slideshow.
  • Clicking the Index Page link in the navigation takes you to the slideshow. Clicking a sub-page link takes you to that page's direct URL.
  • Slides don't click through on mobile. Instead, tap the page name to go to the connected page.
  • Background images crop around the focal point on mobile.
  • Navigation arrows display on mobile in most cases.

Structure and style

Layout

Set your site's layout in the Site section:

  • Set the width of the main content area with Content Width
  • Choose the alignment with Content Layout
  • The width and alignment of Gallery Pages and Index Pages can't be changed.
  • All pages have built-in padding around the edges that can't be changed.

Fonts

Style the text in your main content area and footer in the Typography section.

  • Use Body Text set the size of all body text.
  • Heading sizes are relative to the body text.
  • Header elements have separate styles.

Sidebar

A sidebar appears on Blog Pages.

Page titles

Page titles display on Index slides. Page descriptions don't display.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

  • Background images display on mobile. For help with formatting, visit our troubleshooting tips.
  • The navigation displays as a ☰ in the top-right corner. When tapped, it opens as a full-screen overlay.
  • Social icons and your site's business information display below the links in the overlay.
  • Folder and Index links display in sub-menus.
  • The ☰ always displays on mobile, even if the Main Navigation is empty.
  • The overlay menu matches the site background color (Background in Site).
  • The links are set to black or white automatically.
  • You can disable mobile styles (not recommended).

forte-mobile.png

Was this article helpful?
21 out of 42 found this helpful