The style and features of the 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 and the section they appear under in the Site Styles panel are bold.

Supported pages

Forte supports these page types:

• Album pages
• Blog pages - List
• Cover pages
• Events pages
• Gallery pages - Carousel
• Index pages - Slideshow
• Layout pages
• Store pages - Classic

Header

Branding

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

• Style these elements with the following Header tweaks: Site title, Logo image max-height, and Tagline.
• The tagline only displays when the viewport is at least 801 pixels high.
• The site title and tagline 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 the Navigation tweak under Header.

Indexes and dropdowns create drop-down menus:

• Remove the + icon with the Hide folder symbol tweak under 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 under Site).

Background

To set the background:

• Change the color with the Background tweak under Site.
• Add a site-wide background image with Page background image under 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.

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:

• Publish date and author name display below the post title. To hide the author name, uncheck the Show author name tweak under Blog.
• Metadata displays below the post, including a "Last updated" date, tags, and categories.
• Excerpts display "Read more" link.
• The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

• Publish date and author name display below the post title. To hide the author name, uncheck the Show author name tweak under Blog.
• Shares, likes, tags, categories, and navigation for previous and next posts display below the comments.
• The "Last updated" date doesn't appear.

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 of site styles.
• Hide the sidebar with the Sidebar position: hidden tweak under 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 under 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.

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 the Lightbox transition tweak under 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.
• Image titles 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 featured images to each sub-page.

• Pages without featured images have a gray background.
• Gallery pages without featured images display the first gallery image.
• Choose how slideshows move from slide to slide with the following Index tweaks: Index transition and Auto play.
• Choose if clicking the slide opens the connected page or moves to the next slide with the Slides click through tweak under 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.

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 the Hide folder title tweak under Index.
• Style the font and size with Collection title tweak under 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 usually display on mobile.

Structure and style

Layout

Set your site's layout in the Site section of site styles:

• 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 of site styles:

• 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.
• Dropdown 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 under Site).
• The links are set to black or white automatically.
• You can disable mobile styles, but we don't recommend it.

Troubleshooting Forte

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

Background image isn't fixed on mobile

Many mobile browsers, including iOS, don't support fixed background images. To achieve a similar effect, experiment with the Size: cover and Size: contain background image style options. Note that background image style settings apply to your site on both mobile and computers.

For more help, visit our responsive design troubleshooting tips.

Can't change text or icon colors

In Forte, there aren't style tweaks to adjust the colors of these elements:

• Site title
• Tagline
• Navigation links
• Drop-down menus
• Social icons

Instead, Forte has an auto-detect feature that detects the brightness of the background and automatically sets these elements to black or white. This takes some of the guesswork out of creating the best design for your site, and helps keep your content visible over changing background images.

Can't see tagline

The tagline is hidden on smaller screens to make room for more imagery. The tagline disappears when the browser window is 800 pixels high or less. It reappears when it's 801 pixels high or more.

Gallery page shows blank space before the first image

Gallery pages on Forte sometimes load with extra blank space to the left of the first image. To fix this, reload the page in your web browser and the extra space will disappear.

You can experiment with the number of images you add to the gallery page. Usually gallery pages with fewer images don't show this issue.

Header padding changes between pages

If your gallery or index page images won't fit in the browser window, your site will shrink the padding to make them fit. This can make the padding look different when switching between pages.

To see the full padding, expand the browser window. It's not possible to adjust site padding.

Index navigation arrows on mobile

Navigation arrows always display on mobile, unless:

1. Hide arrows is checked.
2. The Index is set to Auto play.
3. Index transition is set to Slide.

If your navigation arrows aren't displaying, change one of those tweaks in the Index section of site styles.