Overview
The emails you send supporters should be engaging and easy to read. When drafting email newsletters in NationBuilder you should focus on the simplicity and quality of your content, as that is what will engage supporters; not big header graphics.
Create the blast and theme
The best theme to start from is one of our mobile -responsive stock themes (you can edit the raw HTML later if you need).
1. Navigate to the Communications tab, and select Create New Blast. Fill out the details to create your blast.
2. Select a mobile responsive theme. Basic with Logo will automatically pull in the logo you have stored in NationBuilder.
3. Now you’re in the Content section of the email blast, and you can customize the subject line, sender name, as well as previewing how the email will look on different devices.
Now we’re ready to customize the email content, and this will start to look more like a newsletter!
Add the newsletter layout content
Every newsletter you send out is going to be a little different. Because of this, it needs to be easy and painless to swap in content like articles and links.
We’ll be adding some custom code to the email blast content editor, rather than the theme. The content editor will automatically render this code, so you can edit images and text easily.
1. Navigate to the email blast content editor on the right hand side of the page. You will see a Source Code button.
2. Click the Source Code button. You will see a code editor popup. Copy and Paste the code below, into the Source Code editor. This will add code for the newsletter layout.
<p>{{recipient.first_name_or_friend}} --</p>
<h2><img src="https://d3n8a8pro7vhmx.cloudfront.net/services/mailings/65/attachments/original/zoltan-tasi-675280-unsplash_%281%29.jpg?1549296295" alt="" /></h2>
<h2>Headline: Visit the headline, it's extremely headline</h2>
<p>You might love headlines, but body content isn't too shabby. You might love headlines, but body content isn't too shabby. You might love headlines, but body content isn't too shabby. </p>
<div class="nb-tmce-btn" style="width: 200px; display: block; margin-left: auto; margin-right: auto;" contenteditable="false"><strong> <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com🏢word" href="www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#ffffff" fillcolor="#ff0000">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Continue Reading</center>
</v:roundrect>
<![endif]--> <a style="background-color: #ff0000; border: 1px solid; border-color: #ffffff; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all; height: 40px;" href="www.google.com">Continue Reading</a> </strong></div>
<p> </p>
<hr />
<h2><img src="https://d3n8a8pro7vhmx.cloudfront.net/services/mailings/65/attachments/original/frank-mckenna-291046-unsplash_%281%29.jpg?1549296315" alt="" /></h2>
<h2>Headline: Visit the headline, it's extremely headline</h2>
<p>You might love headlines, but body content isn't too shabby. You might love headlines, but body content isn't too shabby. You might love headlines, but body content isn't too shabby. </p>
<div class="nb-tmce-btn" style="width: 200px; display: block; margin-left: auto; margin-right: auto;" contenteditable="false"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#ffffff" fillcolor="#ff0000">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Continue Reading</center>
</v:roundrect>
<![endif]--> <a style="background-color: #ff0000; border: 1px solid; border-color: #ffffff; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all; height: 40px;">Continue Reading</a></div>
<p> </p>
<hr />
<h2><img src="https://d3n8a8pro7vhmx.cloudfront.net/services/mailings/65/attachments/original/benjamin-davies-332625-unsplash_%281%29.jpg?1549296335" alt="" /></h2>
<h2>Headline: Visit the headline, it's extremely headline</h2>
<p>You might love headlines, but body content isn't too shabby. You might love headlines, but body content isn't too shabby. You might love headlines, but body content isn't too shabby. </p>
<div class="nb-tmce-btn" style="width: 200px; display: block; margin-left: auto; margin-right: auto;" contenteditable="false"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com🏢word" href="" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#ffffff" fillcolor="#ff0000">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Continue Reading</center>
</v:roundrect>
<![endif]--> <a style="background-color: #ff0000; border: 1px solid; border-color: #ffffff; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all; height: 40px;">Continue Reading</a></div>
<hr />
<p>All the best,<br />{{broadcaster.name}}<br /><a href="{{settings.site.full_url}}"></a><a href="{{settings.site.full_url}}"></a><a href="{{settings.site.full_url}}"></a><a href="{{settings.site.full_url}}"></a><a href="{{settings.site.full_url}}"></a><a href="{{settings.site.full_url}}">{{settings.site.full_url}}</a></p>
3. Save the content to see a preview of the email on different devices.
Now your newsletter email blast is ready! You can swap out the content, adding links, text and images, then get ready to hit send.
When making future email newsletters, you can clone this email blast to use the same theme and example content.