Create animated modal popups to promote your latest updates
Add a beautiful modal popup to your NationBuilder 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.
How to create your latest news modal
Download the relevant files from this GitHub repository and upload them to your theme:_
_Note: you’ll need to create a custom theme if you don’t already have one.
In the layout.html file, include the new stylesheet before the closing
</head>tag with this line of code:
The screenshot below is a guide to where that additional stylesheet can be included:
Add this CSS file before the closing </head> tag in your layout.html file.
Alternatively, you can copy the contents of that CSS file into your main stylesheet.
Also in the layout.html file, include the modal directly before the closing
</body>tag with this line of code:
Finally, add a button your supporters can click to open the latest news modal. Simply paste the following code wherever you want that button to appear:
One last tip
As you can see from the live example, the modal includes a thumbnail image for each news update. The code uses the social media image from each post as the thumbnail, so you should always make sure to upload a social media share image to all your latest news items.
Here you have seen how to create a latest news modal, but there are plenty of other options for this tool. For example, you can create a modal signup form that opens automatically when a supporter has been on your site for a set period of time or has scrolled down a certain percentage of the page. Check back for our future tutorials to see other implementation options.
In the meantime, all the best with your campaigns!
The animate.css plugin is free for personal work and for non-profit organisations otherwise make sure to purchase the relevant licence.
Have any questions about how all this works? We’re always happy to help. Flick an email to firstname.lastname@example.org or write to us in the comments.
Have any questions? We're always happy to help
Get in touch on email: email@example.com