Our new drag and drop email builder makes it easy to create and build complex layouts that are great for newsletters. This step-by-step guide will walk you through creating an email template you can use over and over again each month for your newsletter, featuring a header with your logo and colors, images, buttons, and columns.
For something like a newsletter, you'll use 'dummy' content as a placeholder for the content. After you create the email layout and apply it to your next email, you'll be able to edit the text.
Note that creating an email layout is a partner feature. If you would like to become a partner and request access, please go to https://actionnetwork.org/partnerships.
Contents
- Getting Started
- Header
- Intro Block
- Insert image
- Insert text in columns
- Insert button
- Insert divider
- Insert columns with text, hyperlinks, and images
- Sign off
- Bonus: Footer text
- Apply your layout to an email
- Other notes and best practices
Getting Started
1. From the Details tab in the Start Organizing menu, click Email Wrappers & Layouts in the third column from the right. Select your group from the drop down menu. Scroll down to see the Layouts section below the Wrappers section. Click the blue Add New Layout button.
2. Give your email wrapper a name. This is for administrative purposes only, your activists won't be able to see it. For this newsletter template, it should be something like 'Monthly Newsletter'.
3. Select a default button color, default button text color, and/or default body text color. You can enter a hex code or use the color picker.
Note: In order to apply those defaults to your wrapper, you must save the layout you're editing (bottom left) and refresh the page.
Header
1. Scroll down to the email layout. You automatically start with a center row. Click where it says 'No content here. Drag content from right.' On the right, you'll see where you can set row properties, like background color and content background color. Select your organization's color for both the 'background color' and 'content background color'.
You should now see that color across the top row of your email layout. On the menu on the right, click the 'X' to go back to see the content menu.
2. Drag and drop the 'Image' content over to the row you just created in your colors. Then, click in the middle of the grey box that appeared that says 'IMAGE'.
3. On the right, you'll see where you can upload an image -- click the blue hyperlink at the top right to 'Upload Image'. You can select the image from your computer.
Note: Make sure your image has a transparent background so you can see the color through the logo, like our example above. Images saved as PNG file types work best for this.
You should now see your organization's logo centered across the top of your layout, with a color behind it. On the menu on the right, click the 'X' to go back to see the content menu.
Intro block
1. From the menu on the right, click the 'Blocks' tab.
2. Then, drag and drop the first blank block (the one with no columns) over to your email layout, below the header section.
3. Click the blue Add Content button in the row you just created (you can also click the 'X' in the menu on the right).
4. Drag and drop the Text content from the right over to your email layout. Double click the new text block to delete and change the text. Type in the name of your newsletter, like '[Month] [Year] Newsletter'. Note that you will be able to change this text when you apply this layout to future emails, this is just a placeholder.
5. Select the text, and use the text toolbar that appears above/below your text block to change the font size to 20px. Set the text to align center. Make the text bold.
6. From the menu on the right, click on the 'blocks' tab. Drag and drop the first blank block (the one with no columns) over to your email layout, below the block you just created.
7. Click the blue Add Content button in the row you just created. Drag and drop the 'Text' content from the right over to the row.
8. Double click the new text block to delete and change the text. Type in a greeting, like 'Hi'. Then, from the text toolbar that appears above/below your text block, click the 'Clips' drop down menu. Select 'Activist Information: First Name'.
9. Press 'enter' and type in placeholder content. You will be able to edit this text when you apply the layout to future emails.
You should now see the the first section of your email layout, with the header and logo, then a smaller heading that says something like '[Month] [Year] Newsletter' and and an intro paragraph.
On the menu on the right, click the 'X' to go back to see the content menu.
Insert image
1. From the menu on the right, click on the 'blocks' tab. Drag and drop the first blank block (the one with no columns) over to your email layout, below the block you just created.
2. Click the blue 'Add Content' button in the row you just created. Drag and drop the 'Image' content from the right over to the row. Then, click in the middle of the grey box that appeared that says 'IMAGE'.
3. On the right menu, you'll see where you can upload an image -- click the blue hyperlink at the top to 'Upload Image'. You can select the image from your computer.
On the menu on the right, click the 'X' to go back to see the content menu.
Note: Your images should never be wider than your email width. By default, the email width is set to 600px because this is what works best across a variety of email readers and devices.
Insert text in columns
1. From the menu on the right, click on the 'blocks' tab. Drag and drop the second blank block (the one with two equally spaced columns) over to your email layout, below the image you just added.
2. Click the blue 'Add Content' button on one of the rows you just created. Drag and drop the 'Text' content from the right over to the row. Double click to add text.
Repeat for the other column.
On the menu on the right, click the 'X' to go back to see the content menu.
Insert button
1. Click on the 'blocks' tab in the menu on the right. Drag and drop the first blank block (the one with no columns) over to your email layout, below the two text columns you just created.
2. Click the blue 'Add Content' button. Drag and drop the 'Button' content from the menu on the right into your row. Make sure to drag it inside the row block you just created.
3. Double click in the middle of the button where it says 'Button Text'. Type in your own button text here, like 'Read More'.
4. Double click to select all text, then use the text toolbar above/below the button to increase the font size to 24px.
5. On the sidebar on the right, insert a link to the website you want your button to go to. For this newsletter, I have the button linking to a page on my website.
Above where you just inserted the link on the right menu, click 'Same Tab' and select 'New Tab' from the drop down menu. This will make the link open in a new tab/window.
On the menu on the right, click the 'X' to go back to see the content menu.
Insert divider
1. Click on the 'blocks' tab in the menu on the right. Drag and drop the first blank block (the one with no columns) over to your email layout, below the two text columns you just created.
2. Click the blue 'Add Content' button. Drag and drop the 'Divider' content from the menu into your row.
You should now see a light grey line below the button.
Note: Although the divider is not strictly necessary, it is very helpful when people are viewing newsletters on mobile with multiple columns since it helps separate content. Make sure to test how your content appears on multiple devices.
Insert column with text, hyperlinks, and images
1. Click on the 'blocks' tab in the menu on the right. Drag and drop the sixth block (the one with one large column on the left and a smaller column on the right) over to your email layout, below the button you just created.
2. Click the blue 'Add Content' button on the left column you just created. Drag and drop the 'Text' content from the right over to the column. Double click to add text.
3. Let's say you want some text to link to an event on Action Network. Select the text you want to hyperlink and click the insert/edit link icon, which is located in the text formatting toolbar (the button is third from the right).
4. In the pop-up, insert the URL of the website you want to link. Click the 'Target' dropdown menu and select 'New window' so the link opens in a new tab/window.
5. Click the blue 'Add Content' button on the right column you created in this row. Drag and drop the 'Image' content from the right over to the column.
Then, click in the middle of the grey box that appeared that says 'IMAGE'.
On the right menu, you'll see where you can upload an image -- click the blue hyperlink at the top to 'Upload Image'. You can select the image from your computer.
6. Create a second row with another set of columns. Click on the 'blocks' tab in the menu on the right. Drag and drop the fifth block (the one with one small column on the left and a large column on the right) over to your email layout, below the columns you just created.
Drag and drop your text and image content over to the corresponding columns, described in proceeding steps. Highly recommend inserting a picture of your pup eating a pupsicle.
On the menu on the right, click the 'X' to go back to see the content menu.
Sign off
1. Almost done! From the menu on the right, click on the 'blocks tab. Drag and drop the first blank block (the one with no columns) over to your email layout, below the block you just created.
2. Click the blue 'Add Content' button on the row column you just created. Drag and drop the 'Text' content from the right over to the row. Double click to add text.
Add your sign off, and you're done!
Bonus: Footer text
Note: The footer is a great place to put your organization's contact information, so your activists can easily find your email address, phone number, or street address in the future.
1. Add a divider -- click on the 'blocks' tab in the menu on the right. Drag and drop the first blank block (the one with no columns) over to your email layout, below the two text columns you just created.
Click the blue 'Add Content' button. Drag and drop the 'Divider' content from the menu into your row.
On the menu on the right, click the 'X' to go back to see the content menu.
2. Click on the 'blocks tab. Drag and drop the first blank block (the one with no columns) over to your email layout, below the block you just created.
Click the blue 'Add Content' button on the row column you just created. Drag and drop the 'Text' content from the right over to the row. Double click to add text.
3. Add your organization's contact information, or even use personalized clips in the text toolbar to include the activist's contact info so they can update it if they want to.
4. Select all the text in the block, and use the text formatting toolbar to make the text smaller. I made mine 12px. You can also change the text color on the text toolbar (sixth button on the right), or the menu on the right.
Important: Make sure to test your email on multiple different browsers and devices.
Apply your layout to an email
1. From the People tab in the Start Organizing menu, click Emails in the second column from the left. Select your group from the drop down menu.
2. At the top of the page, toggle the Editor Mode switch from Visual/HTML to Drag & Drop.
3. Below the section where you add your subject, from, reply-to, and optional preview text, select your email layout from the Apply an Email Layout drop-down menu. Click the blue Apply button.
4. Click to edit specific blocks, like the text, images, and buttons.
Other notes and best practices:
*Make sure to test your email on multiple different browsers and devices.
For each block, you can scroll down on the menu on the right to the 'content admin' section. From there, you can turn off settings that make that block selectable, draggable, or deletable.
For example, you may toggle selectable, draggable, and deletable to 'Off' for the footer text and the header with your logo at the top so administrators cannot edit this element when they apply the email layout to their emails in the future.
But you need other elements, like the blocks containing images, buttons, links, and text to be selectable and deletable. That way people can edit the text for the newsletter each month, and remove extra columns if they don't need them. But you may not want them to be able to drag the elements to a different place in the email.