Skip to main content
All CollectionsWebsiteStock themes
Momentum theme guidelines
Momentum theme guidelines

Learn and customize NationBuilder's second most popular theme, built to last on Bootstrap 4.

Updated over 2 months ago

Momentum will function in English, French, Spanish, Portuguese, and Estonian depending on your NationBuilder site language settings. It's designed with best practices baked-in to encourage maximum engagement and beautifully polished from mobile to desktop to make your organization or movement look sharp. (See a demo.)

Features

  • Forms, activity, and other theme elements automatically display in the language specified within your site language settings

  • 4 default color variations included, and quickly create new custom color schemes based on a single color Hex code

  • Top navigation gracefully and automatically overflows into a “More” dropdown

  • Images uploaded to petition, endorsement, suggestion boxes or profile pages can be cropped

  • Compatible with Google Fonts

  • Event page formatting supports virtual events

  • Elegant floating share functionality copies page URL (including recruiter ID) with a click, or shares to email, Facebook, and Twitter

  • Strong focus on accessibility

  • Form error messages display inline

  • Quickly customize whether to format an action page into two columns with the form aligned to the top, or in a single column with the form beneath content

General guidelines

Configure your site language

  • Navigate to Website > Site settings to configure your site language. Momentum work with English, Spanish and French.

Page tags

  • To override your site language on an individual page, add the tag lang_en for English, lang_es for Spanish, or lang_fr for French.

  • Any page tagged with homepage will display an excerpt on the homepage.

  • Any page tagged with footer_nav will show up in the footer navigation sorted by date modified from newest to oldest

  • While the latest post in the blog will automatically be featured at the top of the Blog page, you can add the tag featured_post to any post in order to feature it instead.

  • To hide the social share widget, you can add a tag hide share widget on a page. You can also disable the share widget globally by adding a tag site: hide share widget on your homepage page.

Sidebars

  • When the sidebar is turned on for these page types, the form will appear in the sidebar, otherwise the form appears below the main body of content: Petition, Signup, Endorsement, Volunteer Signup, Survey, Vote Pledge, Feedback, Moneybomb, and Event. Page sidebars are only available for these page types.

  • Turning the page sidebar on or off for other page types will not change the layout.

Images & Layout

  • On the Donation v2 page the layout will shift to the left if you add a background image—allowing for more image to be seen.

  • If you have a background image set for the whole site under Site settings > Background image, the page content will be contained within a box with a solid color so that it doesn’t compete with the background image of the site.

  • On Blog Posts, uploading an image to the social media thumbnail will result in the image being displayed on the blog post listing, and within the header area of the blog post page. It will create a two column layout which includes the post headline and the image at the top of the blog post unless a featured content slider is uploaded, in which case that featured content slider image will be used instead.

Events

  • An event can be a “virtual event” simply by adding a URL (starting with http or https) as the venue name on an event. Venue city field is still required.

  • When the Show social slider and Show who RSVPed are both checked you will see the avatars along with the number of people who have RSVP'd. Turning off the social slider will then only display the RSVP count.

Featured content

  • Featured content that is image only (e.g. doesn’t have a caption) will show full-width on all page types that support featured content except Blog Posts and Events

  • All featured content needs to be uniform. In other words, you could have slides that are image plus headline or just an image—but not a mix of both. Since the layout changes significantly based on the content, you cannot have some with headings and some without. When there is a mismatch in content, the featured content slider will simply not display.

  • Recommended height will vary depending on the image size ratio, but as a general rule you want these images to be in landscape orientation.

  • A featured content slider with an image and text will put the text and image side-by-side. Below is a table to show the difference setups for featured content sliders.

  • On Blog Post and Event page types you can use the social media thumbnail instead of the featured content slider image. However, if a featured content slide is added it will be used instead of the social media thumbnail.

Featured Content

Suggested Image Size

Description

Text + Image

540px x 430px

The headline along with the image will be place side-by-side within a box with a color background based on the theme/variant. Images will be forced into a 540x430 size image ratio and cropped by CSS using object-fit: cover; to fill the available space within the layout.

Image Only

1600px × 900px

A landscape 16:9 image ratio is recommended.

Image Cropper

  • You can now crop an image to the right size before uploading it to the website. This is available on any page that supports a user image upload (e.g. Petition, Endorsement, and Signup Edit).

  • Image are automatically optimized for the web to ensure the smallest file size while maintaining excellent image quality.

  • The cropping tool is available to all newer themes; Momentum, Raise, and the base theme (Bootstrap v4).

  • To configure the cropper or to get it set up in your v3 or higher theme check out the image cropper documentation.

Did this answer your question?