Add a beautiful modal popup to your site so supporters can easily keep up to date with recent news related to your campaigns

Sometimes you want a news or update page to really jump out. By using our animated modal feature you can add an attention-grabbing design to draw your readers into the content you want to highlight.

In this tutorial we will show you how to create a modal containing the latest news items from across your site, complete with a headline, thumbnail image, excerpt text and a read more button. See the Next Steps section below for other ideas and look out for our future tutorials to help incorporate other useful features in your NationBuilder website.

View the live example

How to create your latest news modal

Step 1

Download the relevant files from…


Add a beautiful and hassle-free video gallery to your site so you can easily share your YouTube magic with your community.

View the live example

Relevant Files

HTML: _partial_video_gallery.html, pages_show_basic.html, pages_show_basic_wide.html
SCSS: _video_gallery_styles.scss
JS: videomodal.js

How to build your video gallery

1. Download the relevant files and upload them to your theme.

2. In the theme.scss file, import the _video_gallery_styles.scss partial (the screenshot below shows how to achieve that).

A screenshot of the theme.scss file (the new line to add is the final one visible in this image) or you can copy these styles in your own scss file.

3. In the layout.html file, include the JavaScript files just before the closing </body> tag


Update your slider to support Youtube & Vimeo

We love using videos in feature content sliders for our clients sites and decided we would share the way we include videos from YouTube and Vimeo through NationBuilder’s standard slider tool. Our improved “_features.html” makes it easy to add a great looking video modal. Want to have a mix of images that trigger videos and other images that link to pages, no problems!

View the Live Example

Relevant Files

HTML: _features.html
SCSS: _feature_video_styles.scss
JS: videomodal.js
img: x.png, loadingiframe.gif

The problem?

The standard NationBuilder feature slider doesn’t support videos:

The solution?

1. Download these 3 files, save the two images below and upload them all to your theme.


Our clients who are active NationBuilder bloggers often need a tool to categorise their blog posts by tags and we solve this by using awesome plugins such as Isotope and MixItUp. Both are easy to use and look great so we thought we would share a quick tutorial for you to freshen up your NationBuilder blog pages with the MixItUp plugin.

View the Live Example

Relevant Files

HTML: pages_show_blog.html, pages_show_blog_wide.html
SCSS: _mixitup_styles.scss
JS: jquery.mixitup.min.js

The problem?

The standard bootstrap blog page looks like this:

The standard NationBuilder blog page using the Bootstrap template

The solution?

1. Download these 3 files and upload them to your theme.

2. In the theme.scss file, import the _mixitup_styles.scss partial.


A quick tutorial to update NationBuilder’s staged donation pages for use with the Bootstrap template.

Relevant Files

HTML: pages_show_donation_wide.html
SCSS: _staged-donations.scss
JS: jquery.ui.effect-slide.min.js, jquery.ui.effect.min.js, staged-donations.js

The problem?

The standard bootstrap donation page looks like this:

The standard NationBuilder donation page using the Bootstrap template

The solution?

This is based on the original post by the NationBuilder team that explains how to add a staged process to a donation page on the Aware theme. Our code below includes a few general improvements as well as the necessary updates for use with the Bootstrap theme:

1. Download all 5 files found at this link and upload them to your theme. …


If you’re anything like our favourite progressive clients, you’ve got an excellent blog where your supporters keep up-to-date with your latest news. Your legendary crew are creating winning content for your campaign. People love reading your posts and always want more. Why not add a “Next” button so folk can easily continue through to each subsequent post with a click? You could even add a “Previous” button for all those history buffs! Read on to find out how…

The code snippet below won’t print anything to the page, but it will do the important work of creating 2 new liquid…

Code Nation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store