Skip to main content

Making a newsletter in NationBuilder out of a Google template

Hey! Guess what I just learned? Google has some 'newsletter' templates in google docs! 

Someone asked me if I could mock up a newsletter in Google docs and then paste it into NationBuilder - I said I'd try but alas, the answer is nope.

So I did it myself! Here we go.

Official response from

I took the 'plum' newsletter from google docs - 

And added some of my own stuff so it looks like this (in Google Docs) - 

So! Here's what I want to bring over to my NationBuilder email - 

  • The header 
  • The main image floating to the left 
  • A few examples of content blocks I can have in my email 
  • A way to make a photo caption kind of work 

I'm not bringing over - 

  • This exact font (without coding that in)
  • The page 1/2/3 bars at the bottom (because I don't know why that would make sense in an email blast)

Here's what it looks like in NationBuilder - 

Pretty close?

So now that I have this newsletter I can clone it as a template and update the links texts and images for all my other newsletters! 

You can use it too! Just choose the BASIC theme for your email, delete out the liquid that is in there by default, and copy THIS HTML into your source code. 

And you'll get the email blast above! Then replace the pictures etc with your own text! (don't forget to do that or you'll be sending an email with my signature!)

You can copy and paste the text & headers to add more sections & clone your email blast to use over again! 


A couple hints -- 

  1. My header is a screenshot of the header from google docs - I put my logo in the top right and changed the color of the 'NEWSLETTER' font and took a screenshot (you can do this with any image that you want to be your header! I like even doing something simple in Google Drawings). 

  2. All my images are a % instead of pixels - so '100% x nothing' --- rather than '123 x 345' pixels.

  3. My first image is aligned left with a margin. (float: left; margin: 0px 10px 0px 10px;)

  4. My photo caption is 'header 5' to make it small  

  5. The purple line is just an image of purple - so if you want a different color take a screenshot of a screen full of a color and just insert it in - like I did in my email made of screenshots

 

Share this post

Showing 2 reactions

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