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.
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 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.
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.
- Set the color with Site background in 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 Blog author display in 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 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.
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.
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.
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 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
- 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 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.
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 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.
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.