Content Elements

Content elements in the Updated Editor are pre-built design components that allow you to create custom email designs quickly and easily. These elements are designed to be modular and can be combined to create a unique and professional-looking email campaign.

Text, Images, Buttons, Dividers, and Loop (Dynamic Content) are available content elements. Each content element has its unique features and customization options, such as font styles, colors, background colors/images, and sizes, enabling you to create visually appealing and effective emails that match your brand and design preferences.

The responsive design of the content elements ensures that your email campaign looks great on any device or screen size.

Adding the Text Content Element

The Text element allows you to add and format text content in your email campaigns.

To add the Text element:

In the Elements tab in the Left Sidebar, find the Text option in the list of content elements available under the Content heading.
Drag and drop the Text element into the email content.
Double-click the Text element to allow entering text into element.
Enter the text content that you want to display in your email campaign. Users can also paste text into the box, however formatting will not carry over in most instances. Users will need to apply formatting within the editor.
Use the formatting toolbar (Text Editor Menu) to customize the appearance of your text content, such as the font style, size, color, and alignment.
Use the list formatting options to create bullet or numbered lists within the text content.
Using the Details panel in the Right Sidebar to customize the background color/image and padding of the Text element if needed.

Text Customization Options

You can edit the text using the Text Editor Menu and Details panel.

Note: The Text Editor Menu should be used to make edits to selected content inside of a text element while the Details panel should be used to apply edits to the entirety of the selected element.

Text Editor Menu

The Text Editor Menu in the Updated Editor is a contextual menu that appears when you have clicked into the editor to edit the content of the text element. To access the Text Editor Menu for the text element:

Select the text element that you want to edit.
Click in the text element to edit the text of the text element and the Text Editor Menu will appear.
Apply any formatting and text customization options from the menu to the selected text element.
- Text Editor Menu Options:
  - Paragraph Format: Add styles to the text (Normal, Header 1, Header 2, and Header3)
  - Bold: Make the selected text bold.
  - Italic: Italicize the selected text.
  - Underline: Underline the selected text.
  - Strikethrough: Strike through the selected text.
  - Font size: Increase or decrease the font size of the selected text.
  - Font color: Change the font color of the selected text.
  - Highlight: Highlight the selected text.
  - Align: Align the selected text to the left, center, or right.
  - Indent: Increase or decrease the indentation of the selected text.
  - Link: Add a hyperlink
  - Token Manager: Access Token Manager to insert tokens.
  - Document Manager: Insert documents from the document manager. You can either choose the available documents or upload a new document.

Creating a List

To create a list and sub-list:

Place your cursor where you want to add the list in the text element.
Click the Text element.
- - Text Editor Menu appears.
Click the Insert Numbered List or Insert Bulleted List from the menu.
Note: You can insert tokens, as a list item or part of a list item, from the Token Manager in the Text Editor Menu.
Type the list item and press "Enter" to create the next item. Repeat this for a single-level list.
To create a sub-list, press "Enter" after the list item under which you want to add a sub-list and indent the item by pressing the "Tab" key on your keyboard before typing the sub-list item. Repeat this step for each sub-list item.
Note: You can have a mix of both ordered and unordered lists. i.e., you can have the main list as ordered and the sub-list as unordered and vice versa.

Adding Style to the List

To add a new numbering style to the list, right-click, select List Properties and select the list styles from the dropdown and then click OK.

Adding Links to the List Items

Highlight the list item.
Click the link icon in the Text Editor Menu.
Verify the Display Text.
Select URL in the Link Type dropdown.
Select appropriate Protocol
Type or paste the link.
Click OK in the bottom right of the pop-up box.

Details Panel

Note: Using the Details Panel allows you to apply edits to the entirety of the selected element.

To access the Details panel for a text block:

Click on the text element you want to edit.
When the text element is selected, the Details panel will appear on the right side of the screen.
In the Details panel, you can customize the selected text element by applying the available options.
Make the required changes in the Details panel and click outside the text block to apply the changes.

Text Element Options in the Details Panel

Body Text Settings

This section provides the following customizing options for the selected text element: Font family, Font size, Line Height, Letter spacing, Link formatting, color, and header levels ( Heading 1, Heading 2, Heading 3). This allows you to format the paragraph styles that are available in the text element's Text Editor Menu.

Note: You can edit font family, font size, line height, color, and letter spacing for the entire text element, and for each header level.

Padding

This section provides options to adjust the padding of the selected text element. By default padding is applied to all sizes of your element, however you can add padding to the top, bottom, left, and right of the text element by flipping the toggle for Separate to be turned on.

Background options: This section provides options to add a background color or an image to the selected text element. Some mail clients will not display background images, so please bear this in mind when choosing to use background images.

Adding Background Color or Image to the Text Element

Select the text element for which you want to add a background image or color.
To set the background color, click the color swatch and select a color from the color picker or enter a hex code.
To set a background image, in the Properties panel and under the Text background section, switch-on the Background image toggle, then either upload an image to the Encompass Image Manager and select it or select a previously uploaded image from Encompass Image Manager.

Image Content Element

The Image content element in the email editor provides several features to help you customize and optimize your email images. Here are some of the key features:

Image Selection: You can upload images to the Encompass Image Manager and select it or you can select a previously uploaded image from the Encompass Image Manager.
Image Size: You can set the size of the image, either by specifying exact dimensions or by adjusting the width and height proportionally. Please note that Microsoft Outlook doesn’t apply size changes that are applied to an image. The best practice is to upload the image at the size that you want to have the image display at.
Image Alignment: You can choose to align the image to the left, right, or center.
Image Margin and Padding: You can add margin and padding to your image to control the space around it.
Image Border: You can add a border to your image to make it stand out from the content within your email.
Image Alt Text: You can add alternative text for your image, which is displayed when the image cannot be loaded, or for accessibility purposes.
Image Link: You can add a hyperlink to the image, which can be either a URL or an email address.
Image Optimization: The editor can automatically optimize your images for faster loading times and better email deliverability.

Adding Image Element

To add an image element:

Click on the Elements tab in the left-hand sidebar.
Select the Image element.
Drag and drop the image element onto your email design where you want the image.
Insert the image into the dragged image element from the image manager.
- To open the image manager, double-click the image element, or click the Image+ icon on the left bottom corner of the element, or click either the Image + or Edit Image icon on the menu above the element.
Select the image from the Encompass Image Manager and click the Insert button in the lower right.
Click on the image to allow the Details panel to display the configurable settings for the image.
Adjust the image size, position, and alignment using the settings in the Details panel.

Adjusting Image Size

To adjust image size:

Note: The changes made in the editor to the image size may not apply when opened in some of the email clients (Microsoft Outlook). Therefore, it is recommended to resize images before uploading.

Click on the image element.
On the Details panel, adjust the size of the image under the Element size section by entering the values in the "Width" and "Height" fields, or sliding the Image size slider. Note: When an image is resized to a width that is smaller than that of a standard mobile device an option for Fluid on mobile will display below the height of the image in the Details panel. If this enabled then the image will automatically be resized up to the width of the mobile device’s viewing window.

Adjusting Image Alignment

To adjust image alignment:

Click on the image element.
On the Details panel, under the Image Alignment Section, select the required alignment option.
- You can apply Left, Center, and Right
- When the Fluid on Mobile option is enabled, the alignment will adjust dynamically according to the various screen sizes on mobile devices providing a seamless and responsive experience. If you disable the toggle switch, the alignment will be fixed on mobile devices, maintaining the set alignment.

Adding Padding, Margins, and Borders

To add padding, margins, and borders to the image element:

Click the image element to access the Details panel on the right.
To add padding to the image, use the Padding dropdown to choose the desired amount of padding on all sides, or select the Separate toggle switch to access Padding top", "Padding right", "Padding bottom", and "Padding left" fields to specify different amounts of padding for each side.
To add margins to the image, use the "Margin" dropdown to choose the desired amount of margin on all sides, or select the Separate toggle switch to access "Margin top", "Margin right", "Margin bottom", and "Margin left" fields to specify different amounts of margin for each side.
To add a border to the image, use the "Border" dropdown to choose the "Border width", "Border style", and "Border color" fields to specify the desired border properties or select the Separate toggle switch to access the "Border width", "Border style", and "Border color" fields for top, right, bottom, and left.

Add Background Color to Image Area

To edit the background color:

Click the image element to access the Details panel.
On the Details panel, scroll down to the "Image background" section.
Click the color swatch next to the "Color" label to open the color picker.
Use the color picker to choose the desired background color for the image element.

Adding Alternative Text and Link to an Image

To add alternative text and a link to an image:

Click the image element.
To add alternative text, on the menu above the image, enter the text in the Alternative Text field.
- Alt Text is used to describe your image and is important for the accessibility of your email's content. Screen readers will read this text to users so that they understand what the image is. This text will also display to the user if the image is not loaded within the users email client.
To add a link to the image
- Click the Add link button in the menu above the image.
- Select the appropriate Protocol.
- Enter the URL.
- Enter Title text. Title text is a description of the page that the user is being navigated to.

Button Element

Buttons allow you to add a call-to-action to your email design. This content element is designed to help you increase the click-through rates of your email campaigns and encourage recipients to take a specific action, such as making a gift, signing up for an event, or visiting your website.

Button style: You can adjust the font, size, color, and shape of the button to create a unique look and feel.
Button text: You can add your own text to the button to communicate the desired call-to-action message. You can also choose the font style, size, color, background color or image, and alignment of the button text.
Button link: You can specify the link destination that the button should lead to when clicked. You can choose to link to a website, landing page, or any other relevant content.
Button behavior: You can specify the behavior of the button, such as whether it should open the linked content in a new window or the same window, or whether it should trigger a specific action.

Adjusting Button Size

To adjust the button size:

Click the button element.
In the Details Panel, under the Element Size section, select the options, Fit to Text or Fixed.
- When you select the option Fit to Text the button size will automatically adjust according to the length of the entered text.
- When you select the option Fixed, you can enter the value to increase the width or use the up and down buttons next to the size to increase or decrease the size of the button.
To proportionally apply the changes to the button size on the mobile view, switch-on the toggle for Fluid on Mobile.

Applying Hover Style to the Button Element

To apply the hover style:

Click the button element.
On the Details panel, scroll down to the Button Background tab.
Switch-on the Hover styling toggle button.
Click the color swatch and select a color from the color picker or enter a hex code.

Content Divider Element

A divider is a content element that is used to separate different sections of an email design in the email editor. It can be a simple line, a graphic element, or a combination of both. Dividers can only be added horizontally within text. If there is the need for a vertical divider between columns of content users can use the border property for the columns of content to insert a divider there.

To add the Divider element:

On the Left Sidebar, drag the Divider element from the Content Elements section and drop the element into the desired location within an existing block or into a new block.
Use the "Paddings, Line, and Divider Background" tabs in the Properties panel to customize the appearance of the divider. You can change the color, thickness, style, and position of the divider, among other options.

Content Loop Element

With the Loop element, you can insert dynamic content for Events, RSS and News feeds into email content.

Note: The dynamic content style can not be edited or customized using the editor's styling or customization options. To edit these users will need to use the Dynamic content style manager that is available within the Email menu of Encompass.

To add dynamic content:

Click on the Elements tab in the left sidebar.
Select the Loop element under the Advanced heading.
Drag and drop the Loop element into your email design.
Note: The Loop element should be nested inside a Box element in your email content. If you have not added a box element, then drag and drop the box element first and then drag the Loop element into the box.
On the Details panel under the Loop section, click the Select Your Expression button.
The Dynamic Content: Select Source Layout and Style modal opens.
- To know more about Dynamic Content, refer to Dynamic Content, Dynamic Content Style Manager – Encompass Support Center.
Select the type of content from the Select Content Source dropdown.
For example, if Events Feed is selected, choose the display formatting from the graphic options shown, then, from the Select Content Style dropdown, select the content style, and finally click Next.
Enter the number of articles to be shown, and from the Sort order dropdown select the order.
Select the Content Type(s) in the box on the left and click the arrow to move the included content to the right box, and click the Place Content button.

IMPORTANT NOTES FOR LOOPS

You can edit the value entered into the Expression field in the Loop Properties however DO NOT ALTER THIS. If this is modified after you have inserted your dynamic content you will find that the dynamic content does not display the way that you are intending.
You are able to modify elements for dynamic content within a loop however these changes WILL NOT BE RENDERED IN YOUR EMAIL. The system will dynamically pull in the styles that you selected at the time of configuring your dynamic content.
To get to the configuration of the loop click any element in side of your dynamic content and then expand Applied Expression in the Details Panel and then click on the text displayed below.

Favorite Block

The Favorite Block feature in the email editor allows users to save frequently used or preferred blocks of content for quick and easy access in future email designs. This feature is useful for users who often use the same or similar blocks in multiple email campaigns, as it saves time and ensures consistency in the design.

Note: Users are only able to select a Complete Block to save. This means that all content within the block will be included in the favorite block. Favorite Blocks cannot be inserted within an existing block. They must be inserted above or below existing blocks. Migrated Templates will have all content within a single block. This means if you need to insert a Favorite block into the middle of the content you will need to break your Migrated Template up into multiple blocks to allow you to insert your favorite block.

Adding Blocks to Favorite Blocks Section

To save blocks as favorites:

Click the block to select it.
Note: You can select the Block by click on it or by selecting it from the breadcrumb at the top of the page. It may be easier to select from the breadcrumbs after selecting content within the block.
Click the Three Dots that are visible to the right of the block.
Click the Folder icon.
- A Panel opens with options to enter the block name and the Folder blocks folder.
Enter the name of the block, select the folder, and then click Save.
- You will see a confirmation message stating that the block is successfully saved.

Accessing, Searching, and Deleting Favorite Blocks

To access a favorite block:

On the left-sidebar, under Elements click Blocks.
- A modal window opens.
Select the Favorite Block folder from the dropdown menu, find the favorite block, and then drag and drop the block into your email design.
Note: When you modify the Favorite blocks the changes will not reflect in the Favorite Blocks folder. To save the modified block as a favorite, you need to add it to the favorite blocks folder.
- - If you have many favorite blocks, you can use the Search field within the windowpane. By entering relevant keywords or the name of the block you are looking for, the search feature will filter the blocks accordingly.
After you drag your favorite block into your email design. You can edit each element. By clicking on the element, you can access the editing panel or sidebar and make changes to the text, images, colors, fonts, and other attributes.
You can move, copy, edit, and delete each element within your email design. When you click on the block, you will see the following options at the corners:
- Move: Relocate by dragging the selected element or block within your email design.
- Copy: Duplicate the selected element or block. When you click on the Copy option, a duplicate of the selected elements or block will be created. You can then place it in another section of your email design.
- Edit: Edit the selected element.
- Delete: Remove the selected element or block from your email template.
In addition to these options, when a block is selected, you will see three dots (...) in the corner, indicating additional actions. These options act on the entire block. When you click on the three dots you will find the following options:
- Move: Move the entire block within your email template.
- Save: Save the selected block as a favorite block.
- Delete: Remove the selected block from your email template.

Building Email Content