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

Momentum is an all-purpose portfolio template built to showcase your work with a clean style. Display images in a full-bleed slideshow gallery with a slide-up navigation grid.

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

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

Supported pages

Momentum supports these page types:

Navigation bar

The navigation bar has the site title or logo, navigation links, and built-in social icons. Choose if it displays at the top or at the bottom of your site with Navigation Position in Navigation.

The navigation bar is fixed, meaning it stays in the same position at all times. Content on the page appears to move beneath it.

To set the style in Navigation:

  • Change the background color with Navigation Background.
  • Change the height with Navigation Padding.
  • Add a thin border line between the navigation bar and the page with Navigation Border Color. You may need to change the transparency.

To style the elements that display in the bar:

  • Style the site title or set the logo height in Site Title/Logo.
  • Style the navigation links in Navigation. If there are more links than can fit next to the site title or logo, they move below it.
  • Style the social icons in Social Icons. Icons always display on the right. Uncheck Social Icons Display to hide them.
  • Display or hide the gallery thumbnail icon with Gallery Index Icon in Gallery Styles.

momentum-nav-bar.png

Background

On Gallery Pages, full-bleed images cover the background of your site. For all other pages, the background has two background areas.

The main content area contains your site's content.

  • Set the color with Content Background in Main Content.
  • Set the width and alignment with Page Width and Page Alignment in General.

The site background displays behind and around the main content area.

Tip: Change the transparency of the Content Background tweak to set how much of the site background shows through.

momentum-background-areas.png

Blog Pages

Momentum Blog Pages display as a list of vertically-stacked posts.

  • Categories, tags, dates, comments, Shares, and likes display below the post content. Source URLs also display on individual posts.
  • Excerpts display with a Read More link.
  • Post thumbnails don't display.
  • On posts, navigation for previous and next posts displays below the comments.
  • To hide the author for all posts, uncheck Blog Author Display in Blog Styles.
  • Change the space between posts with Blog Post Spacing.

momentum-blog-post.png

Gallery Pages

Momentum Gallery Pages create slideshows of images and videos.

  • Scroll through the slideshow with the left or right arrows, or set it to transition automatically.
  • Click the grid icon to open a thumbnail navigation.
  • To combine multiple galleries, add them to an Index Page.
  • Captions display in an info view.

momentum-gallery-page.gif

Image size

Set the image size with Gallery Style in Gallery Styles:

  • Full Bleed - Images fill the height and width of the browser. They may crop, based on the shape of the browser and images.
  • Center - Images display in the center, uncropped.

Thumbnail grid

Click the grid icon in the right of the navigation bar to show the gallery's thumbnail images. Click any thumbnail to go to that image in the slideshow. The navigation bar always displays above the thumbnail grid.

Style the grid in Gallery Styles:

  • Set the shape of the thumbnails with Index Aspect Ratio.
  • To hide the grid icon, so visitors can't access the thumbnail grid, uncheck Gallery Index Icon.

Slideshow

Style the slideshow in Gallery Styles.

  • Choose the arrow style with Gallery Arrows. The color automatically changes from white to black. This auto-detect feature is based on the overall darkness or brightness of the image, not the lightness or darkness of the area around the arrow.
  • Choose if images slide or fade in with Gallery Transition.

Move through the images automatically with Gallery Auto Play.

  • Use the Gallery Play Speed to choose how quickly the images transition.
  • When the slideshow reaches the final image, it loops back to the first image.
  • The slideshow pauses on hover.

Captions

Images with titles and descriptions have an info icon in the right corner. Click the icon to open info view.

  • Images display on the left, and titles and descriptions display on the right.
  • Use the arrows to navigate through the slides in this view.
  • Gallery autoplay works in info view.
  • Click the info icon to go back to slideshow view.
  • If the navigation bar is on the bottom, the info icon is on the top, and vice-versa.

momentum-info-view.png

Initial view

Use Gallery Initial View in Gallery Styles to choose if visitors see the slideshow, thumbnail grid, or info view when they land on a gallery or Index.

Two options are specific to homepages:

  • Slideshow (Homepage) / Grid - The gallery or Index set as the homepage loads as a slideshow. All other pages load with the thumbnail grid open.
  • Slideshow (Homepage) / Infoview - The gallery or Index set as the homepage loads as a slideshow. All other pages load in info view.

More help with Gallery Pages

Index Pages

Adding multiple galleries to an Index is a great way to combine Gallery Pages.

  • Momentum's Index only supports Gallery Pages.

In slideshow view, the images transition seamlessly from one gallery to the next as you move through the slideshow.

In the thumbnail grid view, galleries stack vertically. Each gallery shows its page title and description next to the thumbnails.

  • The page title follows Heading 2 in Main Content.
  • The description text follows Body Text and Body Link.
  • To use different text for search results, add an SEO title and description.

momentum-index.png

Footer

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

momentum-footer.png

Page titles and descriptions

Page titles and descriptions can display in the Index and at the top of Blog, Events, Products, and Layout Pages.

Style the text in Main Content:

  • Page titles follow the Heading 1 tweak.
  • Descriptions follow Body Text tweaks, but are slightly larger than regular body text.

To hide them on all pages, uncheck Page Title/Description in General. You can also remove individual page descriptions by deleting them from Page Settings.

momentum-page-title-description.png

Mobile

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

  • On smartphones and narrow browsers, navigation links collapse to a ☰.
  • Folder sub-pages always display.
  • The main content area's background color displays. If you've changed its transparency, the site background shows through.

For Gallery Pages:

  • Slideshow view, info view, and the thumbnail grid are all supported on mobile.
  • The navigation arrow disappears after the first slide.
  • In info view, the captions slide up from the bottom.

momentum-mobile.png

 

Was this article helpful?
17 out of 38 found this helpful