Welcome to Act-On's new Email Composer!

More styling and formatting options, improved mobile responsiveness, and a sleek new interface offer a better email-building experience. This walkthrough is designed as a step-by-step guide to familiarize you with the new Email Composer.

Let's get started. The steps here will probably take you roughly an hour to complete. We recommend that you open this guide in a separate tab so that you can see the instructions while you work through the steps.

Start a New Email

1. When signed into Act-On, go to Outbound > New Message. A new browser tab opens:

2. Click the Blank message tile (not the menu at the bottom). The new email composer opens: 

Settings

Before we get to the new design features, let's complete the required fields in the Settings tab:

• Enter an Internal email title. This is the email's name within Act-On.
• Enter a Subject line for your email.
• In Sender, select the logged-in user (or your default), and in Reply to select Same as sender.

All your changes are autosaved in the email composer, showing the saved status at the top right:

Design

In the following steps, we'll design an email like the one in the picture above, taking you through many of the features of the new Email Composer.

1. At the top left, click the Design tab.

Global styles

Establish design elements that Rows and Content Blocks will inherit.

2. On the right, click the Global styles tab. We'll set some colors and the font used across the email.
3. Set:
   • Background color to #f0f0f0 a light gray.
   • Content area background color to #ffffff white.
   • Default font to 'Open Sans'.
   • Link color to #0068a5 a blue.

Rows & Columns

Each row has 12 equally sized divisions for arranging columns that line up correctly (learn more about columns here). Our email style will use a 3-column layout split 2-6-4, so let's add some rows for this.

When done, your row design should look like this. Notice how the columns line up so the email content will match:

4. On the right, click the Rows tab.
5. Our first row will be a 2-column, split 2-10, for the logo.
   • Add a 2-column row directly below the header row.
   • Click the left or right side of the row to select it & in the sidebar, scroll down to Columns Structure, & resize the columns to be split 2-10:

6. We'll leave the second, single-column row as it is. Now click the Rows tab again to return to the row selector & under your first 2 rows add the following:
   • A 3-column row, split 2-6-4, for more email content.
   • A single-column row for social links. Copy the previous single column row and drag from the left to move it down:

Content Blocks: Title, Paragraph, Button, Image, & Social

Next, let's add content blocks to the rows.

7. On the right, click the Content tab.
8. Add an Image block to the left column of the top row:

9. To add your logo to this block, either drag and drop a logo image from your desktop, click Browse to access Act-On's image library, or in the sidebar enter an image URL (Learn how to upload images & Organize the Image Library).
10. With the Image block selected, in the sidebar, Align the picture left.
11. A divider in the second column is a way to make the logo display only in the left column on desktop and mobile (stacked).
    • Click the Content tab again to return to the blocks selector & add a Divider block to the right column of the top row. 
    • Select the divider block (not the row) as shown & in the sidebar, set it to Transparent & the Padding on All sides to 0:

That's the first 'logo' row done. Now on to the main part of the email, with introductory text and details of a new case study.

12. In the second, single-column row, add these content blocks: Paragraph, Title, Image, Paragraph, & Button, so the row looks like this:

13. In the first paragraph, we'll add introductory text with personalization using the recipient's first name.
    • Click the Paragraph block and type your introduction.
    • When editing the greeting, click Personalization on the toolbar...
      
      ...select the Contact field First Name and click Next...
      
      ...add some Fallback text, such as "Friend", and click Insert.
      Learn more about email personalization here.
14. In the Title block, type an engaging title for the new case study.
15. In the Image block, add an eye-catching picture relevant to the new case study.
16. Leave the second paragraph for now.
17. We'll make the button a link to download the new case study. Select the Button block, type the button text "GET YOUR COPY", and & in the sidebar: 
    • In Action, set the Link type to 'Open web page' and enter the URL to the new case study download (for example, use Asset Links > Media file & select from your Act-On media library).
    • Scroll down & set the Border radius to 20 to make the button shape round.

Next, we'll add information about previous case studies & a webinar, & also add social links.

18. In the 3-column row:
    • Select the row & in the sidebar and set Vertical align to center.
    • Add an Image block to the left column, a Title and Paragraph block to the middle column, and a Button block to the right column:
      
    • Edit the blocks to add a picture, a title, and a description for a previous case study.
    • Set up the button block to link to a previous case study download in a similar way to step 17 above.
19. Select the previous case study row & copy it twice. Notice how all the row's contents are also copied:

20. In the first copied row, edit the picture, title, description, & button link to be for a second previous case study.
21. In the last copied row, add information about an upcoming webinar in a similar way to step 18 above.
22. In the empty single-column row at the bottom, add a Social block. In the sidebar, configure it for your social channels. For example, remove channels you don't use, add URLs to your social channels, and set icon spacing.

AI Create

Now we'll use AI Create for the new case study's description that we left blank in step 16 above.

23. Below the large picture, select the empty Paragraph block & click  to remove it.
24. In its place, add an AI Create block:

25. Click Create content and enter settings to create the content you want (Details on using AI Create are here). For example, these settings...
          
    ...created this content:
          
26. When you are happy with the AI-generated content, click Insert.

Padding, Background Colors, Rounded Corners, & Dividers

That's the content finished. Now we'll use some features to give your email a distinctive look:

First, let's mark out the new case study from the introductory text with some padding.

27. After the introductory paragraph, select the Title block, and in the sidebar, scroll down to Block options. Toggle More options on, & set the Left & Right Padding to 30.
28. Repeat this setting for the Image block and the Paragraph block that follows.

Let's also add padding to the pictures to keep them from the edges.

29. For each of the three pictures in the 3-column rows, select the Image block & set the Left Padding to 15.

Next, we'll add background colors to define the email's different sections.

30. At the top, select the 'logo' row (not the blocks in the row) & set the Content area background color to transparent. Repeat this for the 'social' row at the bottom.
31. For the two 'previous case study' rows, set the Content area background color to black.
32. For the Title & Paragraph blocks in these rows, set the text color to white.

Now for some rounded corners to set off those email sections:

33. Select the row containing the intro text & new case study, and in the Borders area of the sidebar, set Content area rounded corners > All corners to 15. Repeat this for the 'upcoming webinar' row near the bottom.
34. In the first black row, in Content area rounded corners, toggle More options on & set Top-left & Top-right to 15.
35. In the second black row, set Bottom-left & Bottom-right to 15.
    Now the two black rows appear as one section & the contents stack correctly in mobile view:

Finally, we'll add dividers to put space between our sections.

36. Add a single-column row directly above the black rows and set its Content area background color to transparent.
37. Add a Divider content block to this row. Set it to Transparent, & set the Padding on all sides to 0.
38. Select the row, copy it, and move the copy to be directly below the black rows.

Hide on Mobile or Desktop

Let's hide the large new case study picture for mobile users to make scrolling quicker.

39. Select the large Image block and in the sidebar, scroll down and select Hide on mobile:

40. To see this in action, at the top left, click the Desktop & Mobile buttons & also the Visibility toggle:

Header & Footer

41. We don't need a header for this design, so select and remove the header row.
42. The footer is a common location for email validation elements (such as an opt-out link and a physical mailing address), so if a default footer is not selected, click Browse footers and select the correct one for your organization.
    For more information about this see:
    • How to Validate an Email Message for Sending
    • Create Custom Email Footers
    • How to Add an Opt-Out Link to an Email

Congratulations!
Your email design is complete and should look similar to the picture above.

Preview

At the top right, click Preview to see your email as it will appear to recipients. Notice how the columns line up so the content matches throughout the email.

Try the following:

• Desktop / Mobile (top center)
  See how your email will display on desktop or mobile devices. You can rotate the mobile device portrait or landscape. This is useful to see how elements stack on mobile, & demonstrates any hidden elements.
• Dark mode (bottom left)
  See how your email will display on devices with dark mode enabled. This is useful for highlighting elements that may not display well & can then be edited to suit.
• Preview personalization (Details left tab)
  Toggle on to see any personalization you have applied.