How do I add a header image to my email blasts?

I tried using the basic with logo template, but I don't want to use the same logo I have for my site. I'd also prefer to have a header that stretches all the way across the top of the email. How do I accomplish this?

Official response from

The public Newsletter email theme uses the header image from a nation's primary website. Therefore, I would suggest selecting the Newsletter theme and creating a new custom email theme based on it. 

Next, add the header image you want to the theme file section. When editing an email theme, you will see two file areas: one for the individual email blast and the other for the email theme. Be sure to add the image in the email theme files area.

where to add email theme files

Note that the image should be at least 600 px wide. Re-saving your image as 600 px wide will decrease the file size and help ensure it displays as quickly as possible within your email blast.

Go to the HTML template section of the custom theme. Look for lines 46-50 in the code.

Custom email HTML template section adding a header image in the Newsletter theme

1. Delete the if statement from lines 46 and 50. You want to remove the code in green on line 46 that says " {% if settings.site.has_header_image? %}" and the code in green on line 50 that says " {% endif %}" Removing this statement removes the constraint that your primary website must have a header image for the email header image to appear.

2. Read the code on line 48. This is where the template pulls the email header image from your primary site. It also adds a link to this image that sends people to the homepage of your nation's primary website. You can remove the hyperlink entirely, or you can choose a specific page to link. If you have more than one site in your nation, you can choose to link to the homepage of another website. 

Edit or delete "<a style="color:#000000;font-weight:bold;font-family:Helvetica,Arial,sans-serif;text-decoration:none;" href="{{ settings.site.full_url }}">" 

If you delete it, make sure to delete the "</a>" at the end of the line.

3. Find "<img src="{{ settings.site.header_image_url_600 }}" width="600" border="0" alt="{{ settings.official_name }}" title="{{ settings.official_name }}" style="display:block;width:100%;" />"

Confirm the exact name of the file you uploaded and insert it in this statement. The code should read 

<img src="header.jpg" width=600...

Where "header.jpg" is the exact name of the file uploaded. This file name should not include spaces. Remember to remove the opening and closing brackets {{  }} and retain the quote marks. 

This image insertion code includes text to display if the image isn't rendered or if the recipient cannot see the image. The code is pulling the official name of your organization as the alternative text. You can replace the alt and title text with more relevant copy. This is particularly useful if the theme will be used for a single campaign within an organization.

It is important to use a relative link to the name of the header image file, rather than hard-coding what looks like the absolute link to where the file lives. Right-clicking on files in the file section will show an absolute link to the file. Absolute links can change over time, so we never recommend using them.

4. Click the save and publish buttonbutton below the HTML template editor.

5. Be sure to send yourself a test email from the Preview screen to confirm your theme edits are working as expected.

Complete and current information on how to use NationBuilder is available in the documentation section.

Share this post

Showing 5 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.