AC - Content Module Library

Content Module Library

Reference this page for easy identification of modules during the build process.

Modules

Header Modules

View as a Webpage Link

*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Read Online: Adds a web version link of your email and should not be modified.

Desktop

Mobile

Body Modules

Logo Image

This module should be used for logos or images that do not exceed 280px in width.

*Follow the steps for Replace or Add Image to replace or add an image.
*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.

Image Dimensions
Display: width: 250px - Retina-Optimized: width: 500px

Desktop

Mobile

Breadcrumb

This module is for text editing. It features a red background, which can be edited using the block settings

*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text. to enter text.

Desktop

Mobile

Editable Banner

"For this module, it is ideal for the title not to exceed 2 lines and the subtitle not to exceed 3 lines.

*Follow the steps for Replace or Add Image to replace or add an image.
*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.
*Follow the steps for Edit Link to edit the button link.

Image Dimensions
Display: width: 260px - Retina-Optimized: width: 520px

Desktop

Mobile

Banner Image

Any image can be used in this module, but please refer to image dimensions for recommended sizing. Images should be used to separate the header module (above) from additional content modules.

*Follow the steps for Replace or Add Image to replace or add an image.
*For retina-sized images, you can save as JPG with the quality as low as 30% to get the image file size smaller. Maximum individual image file size is 200K, but the total file sizes of all images in the email should be considered.

Image Dimensions
Display: width: 640px - Retina-Optimized: width: 1280px

Desktop

Mobile

Primary Message

The Primary Message Module highlights the most important message you are going to be communicating in your email.

*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps forEdit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.
*Follow the steps for Delete Table Rows to delete a bullet.
*Follow the steps for Edit Link to edit the button link.

Desktop

Mobile

Title with Icon1

This module is for section titles and includes the option to change icons and edit text.

*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.

Desktop

Mobile

Article Content

All content modules can be used for any type of content (products, education, etc.). If you are using multiple content modules, it is recommended to alternate white and grey backgrounds. CTA buttons are not mandatory.

*Follow the steps for Replace or Add Image to replace or add an image.
*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.
*Follow the steps for Edit Link to edit the button link.

Image Dimensions
Display: width: 220px - Retina-Optimized: width: 440px

Desktop

Mobile

Icon Triple

Links in this module can live within the icons and/or the CTA button.

*Follow the steps for Replace or Add Image to replace or add an image.
*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.
*Follow the steps for Edit Link to edit the button link.

Image Dimensions
Display: width: 170px - Retina-Optimized: width: 340px

Desktop

Mobile

Bullet Content

In this module, you have bullets on both the left and right sides. However, when viewed in the mobile version, they are displayed one below the other.

*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.
*Follow the steps for Edit Link to edit the button link.

Desktop

Mobile

Content Image Primary

Image Dimensions
Display: width: 260px - Retina-Optimized: width: 520px

Desktop

Mobile

Content Image Secondary

Image Dimensions
Display: width: 260px - Retina-Optimized: width: 520px

Desktop

Mobile

Card Gray with Image

*Follow the steps for Replace or Add Image to replace or add an image.
*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.
*Follow the steps for Edit Link to edit the button link.

Image Dimensions
Display: width: 280px - Retina-Optimized: width: 560px

Desktop

Mobile

Card Red with Image

Image Dimensions
Display: width: 280px - Retina-Optimized: width: 560px

Desktop

Mobile

Pre footer

*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.
*Follow the steps for Edit Text to enter text.
*Follow the steps to Add a Link or Remove a Link in the body text.
*Follow the steps for Edit Link to edit the button link.

Desktop

Mobile

Footer Modules

Legal

Desktop

Mobile

HOW-TO GUIDE

Content Builder Editor

WYSIWYG Editor Toolbar

Here are the tools you will use the most:
1. Expand or Collapse toolbar
2. Bold, Italics, or Underline text
3. Add a link or Remove a link
4. Insert personalization strings
5. Replace or Add an image with Image Properties
6. Cut, Copy, or Paste text
7. Undo (left arrow) or Redo (right arrow)
8. Search within the text or Spellcheck text

Edit Text

*Text styles (font type, font size, color, and line-height) have been applied and should not be edited.

1. Go to Email Studio > Email > Content and click on your email in Content Builder
2. Select Edit > Edit Content
3. From your email (right hand side), hover over the content block you want to edit and click to edit
4. On Content tab (left hand side), click in the text editor and highlight ONLY the text you want to change and not any surrounding characters
5. Type in your text or Paste as Plain Text*

If copying and pasting from Word (or other text editing programs), it is recommended to Paste as Plain Text so no special formatting or invalid characters are copied and pasted into the content block. You can convert your text by copying and pasting into a simple text editor (e.g. TextEdit, Notepad, etc.) and then pasting into Content Builder or you can use our Paste as Plain Text feature.

To Paste as Plain Text: from the Toolbar, click the Clipboard icon, select Paste as Plain Text

6. Paste your text in the box and click OK

7. Text automatically updates in your email (on the right), click Save (top right)

Insert Personalization Strings
1. Place your cursor where you want the personalization string to appear
2. Type in the personalization string (e.g.) or enter the personalization string using the Toolbar

3. Personalization string has been inserted into your email (on the right), click Save (top right)

Delete Table Cells

*To avoid table formatting issues, table cells should not be added.

1. Place your cursor in the table cell you want to delete

2. Right click and go to Cell
3. Select Delete Cells

The table cell has been deleted:

Delete Table Rows

*To avoid table formatting issues, table rows should not be added.

1. Place your cursor in the table row you want to delete

2. Right click and go to Row
3. Select Delete Rows

The table cell has been deleted:

Link Properties

In Link Properties you will only need to edit:
1. Link to - Select the type of link
2. Link URL - Add or edit URL
3. Link Text - Add or edit link text
4. Tracking Alias - Add/edit/delete name used for tracking the link

Add Link

1. From your email (right hand side), hover over the content block and click to edit
2. On Content tab (left hand side), click in the text editor
3. Highlight ONLY the text you want to hyperlink and not any surrounding characters
4. From the Toolbar, click Link icon
5. In Link Properties, in Link to, select link type*:

*Link type (e.g. https://, mailto:, etc.) is automatically added to URL

6. In Link URL, enter URL (e.g. www.jnj.com)
7. In Tracking Alias, enter unique, descriptive name in Tracking Alias*

*If no tracking alias is entered, the link URL appears in the tracking results

8. In Link Text, you can add or edit the text
9. Click OK, then click Save (top right)

Edit Link

1. From your email (right hand side), hover over the content block and click to edit
2. On Content tab (left hand side), click in the text editor
3. Highlight ONLY the text you want to change and not any surrounding characters and right click
4. Select >Edit Link

5. In Link Properties, in Link to, select link type* (if different):

Link type (e.g. https://, mailto:, etc.) is automatically added to URL

6. In Link URL, enter the new URL (e.g. www.jnj.com)
7. In Tracking Alias, enter a new unique, descriptive name in Tracking Alias*

If no tracking alias is entered, the link URL appears in the tracking results

8. In Link Text, edit the text with the new link text
9. Click OK, then click Save (top right)

Remove Link

1. Highlight ONLY the text you want to unlink and not any surrounding characters
2. Click the Unlink icon in the Toolbar
3. Click OK, then click Save (top right)

Replace or Add Image

1. From your email (right hand side), hover over the content block and click to edit
2. On Content tab (left hand side), select image, from the Toolbar, click Image icon
3. In Image Properties, click Replace
4. Select existing image from your Content Builder Folder (skip to step 9)
5. To Add a new image, click on Create (top right)
6. Choose Upload

7. Select the image from your computer and open
8. Click Upload and Publish
9. Image dimensions automatically update with the image's original size. For retina images, reference the non-retina width number and update the width field.

Example: Update a 368px wide retina image to 184px wide:

10. Click OK, then click Save (top right)

Add Alt Text

1. In Image Properties, enter text in Alt Text
2. Click OK, then click Save (top right)

AC Email Design - Email Template