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 and the section they appear under in the Site Styles panel are bold.
Momentum supports these page types:
- Album pages
- Blog pages - List
- Cover pages
- Events pages
- Gallery pages - Slideshow
- Index pages - Slideshow
- Layout pages
- Store pages - Classic
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 the Navigation position tweak under 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.
Style the navigation bar with these Navigation tweaks:
- 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 with the Site title/logo tweaks.
- Style the navigation links with the Navigation tweaks. If there are more links than can fit next to the site title or logo, they move below it.
- Style the social icons with the Social icons tweaks. Icons always display on the right. Uncheck Social icons display to hide them.
- Display or hide the gallery thumbnail icon with Gallery index icon under Gallery styles.
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 the Content background tweak under Main content.
- Set the width and alignment with the Page width and Page alignment tweaks under General.
The site background displays behind and around the main content area.
- Set the color with the Site background tweak under General.
- Add a site-wide background image with Page background image.
Tip: Change the transparency of the Content background tweak to set how much of the site background shows through.
Momentum blog pages display as a list of vertically-stacked posts.
On the landing page:
- Categories, tags, dates, author, comments, shares, and likes display below the post content.
- Excerpts are text only and display with a "Read more" link.
- The full content of individual posts displays under the title for posts without excerpts.
On individual posts:
- Categories, tags, dates, comments, author, shares, likes, and source URLs display below the post content.
- Navigation for previous and next posts displays below the comments.
Style blog pages:
- Change the space between posts on the landing page with Blog post spacing.
- To hide the author on the landing page and all individual posts, uncheck the Blog author display tweak under Blog styles.
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.
Set the image size with the Gallery style tweak under 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.
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 with these Gallery styles tweaks:
- 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.
Style the slideshow with these Gallery styles tweaks:
- 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.
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.
Use the Gallery initial view tweak under 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
- Customize deeplink URLs to send visitors directly to any image in the slideshow.
- Momentum doesn't support clickthrough URLs or lightbox functionality.
- To create a different layout, use a layout page with a Gallery block.
- 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 the Heading 2 tweak 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.
The site-wide footer displays on all pages except gallery and index pages. Customize the footer with blocks.
Page titles and descriptions
Page titles and descriptions can display in the Index and at the top of blog, events, store, and layout pages.
Style the text with these Main content tweaks:
- 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 under General. You can also remove individual page descriptions by deleting them from page settings.
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.
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 I mix full-bleed and centered gallery pages?
To help you maintain a consistent style across your galleries, the Gallery style tweak in the Gallery styles section of site styles applies to all gallery pages on your site. If you switch between options, all gallery pages will have the same design.
As an alternative, use a layout page with a Gallery block.
Gallery navigation arrows disappear after the first slide on mobile devices
This is an intentional part of Momentum's mobile design. Momentum's gallery is designed for swipe navigation. The first arrow in a gallery slideshow is there to encourage visitors to swipe to the next image. After that, they can swipe to continue through the gallery.
Highlighted text is purple
Highlighted content in the Momentum template is purple (in other templates it's blue).
Keep in mind, custom code modifications fall outside the scope of our support. This means we’re unable to help you set up or troubleshoot code-based solutions.