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.
HTML: _partial_video_gallery.html, pages_show_basic.html, pages_show_basic_wide.html
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).
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!
img: x.png, loadingiframe.gif
The standard NationBuilder feature slider doesn’t support videos:
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.
HTML: pages_show_blog.html, pages_show_blog_wide.html
The standard bootstrap blog page looks like this:
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.
JS: jquery.ui.effect-slide.min.js, jquery.ui.effect.min.js, staged-donations.js
The standard bootstrap donation page looks like this:
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…