Content Designer
Click here to see this page in full context

 Content Designer

Overview

The Content Designer provides a graphical, user-friendly interface for building email content. The Content Designer is primarily intended to be used by marketers who prefer not to work with HTML. The Content Designer automatically produces responsive email messages that adapt automatically to small screens, such as that of a smartphone.

Note: The Content Designer is an optional feature that must be enabled within your client account. Please speak to your Client Services Representative for more details.

The Marigold Help Center provides access to a wide range of enablement videos on many Marigold solutions that you can take as needed. Click here to browse to the video on how to use the Content Designer.   

Structure vs. Content

For maximum flexibility, the Content Designer separates the structure of the message from its content. This means, for example, that you can have rows of content that use different formatting for different sections of the message (e.g. full-width background colors, a different number of columns, etc.) without negatively impacting the responsiveness of the message on mobile devices.

The Content Designer is divided into two main areas: the main message editing stage in the center of the screen (referred to as the "Workspace"), and a panel on the right. The right-hand panel serves a dual purpose -- a menu of element types, and a set of properties and options available for a selected element.

In general, you drag content elements from the right-hand menu, and drop them onto the Workspace. The tool uses highlighting and the label "Drag it here" to help guide you toward valid drop targets. If you then click on the element within the Workspace, the property options specific to that element type are displayed in the right-hand panel.  

In addition to the content (text, images, etc.), the Content Designer allows you to define the structural elements (rows, columns) in your email message. Rows with different structures allow you to organize content in a way that is different from the preceding and following rows. For instance, you may need:

Whenever you need to switch to a different number of columns, you will introduce a new section by using the Rows panel.

The right-hand panel is divided into three tabs:

Access

The Content Designer is not a standalone screen, and therefore isn't directly accessible from the System Tray. The Content Designer is available for the following features:

Note: If you don't have the Content Designer feature enabled in your account, the Advanced Editor is displayed, instead of the Content Designer.

Features

This section describes the features and options available within the Content Designer. Content Designer supports the language that is set your Engage+ profile. The following languages are available for selection:

Working with Designs

When you use the Content Designer, you can save the content as a repeatable asset called a "Design." The features related to Designs are described below. You can also manage your Designs from the Designs screen. 

In the Content tab, you will be provided with the options to select between Content Designer and Advanced Editor. Once you select Use Advanced Editor to create the content, you can NOT toggle back to the Content Designer.

Select Use Content Designer to use the following features:  

 Select an Existing Template from Template Library

Click hereClick here

When building the content for an Email Campaign, you can select an existing Template from the Template Library and use it as the basis for the Campaign. You can choose from an expansive library of over 1500 beautiful and professionally designed templates.

To use an existing Tempate:

  1. On the Campaigns screen, click the "Content" tab.

  2. Click Use Content Designer. Then click Template Library in the displayed options.

  3. In the displayed pop-up window search for the required template that is suitable for your campaign, using the search option.

  4. Click Preview to preview the required template from the displayed list.

  5. In the displayed Preview modal, click Use This Template to use the template.The selected template will be applied to your content. To select another template from the list, click Close.

  6. Edit further as required with other Content Designer options or switch to Advanced Editor to use HTML options.

You can save this as a Design in Engage+ for future use. 

 

 Select an Existing Design

Click hereClick here

When you use the Content Designer, you can save the content as a repeatable asset called a  "Design." When marketers are building the content for an Email Campaign, they can select an existing Design, and use it as the basis for the Campaign.

To select an existing Design:

  1. On the Campaigns screen, click the "Content" tab.

  2. Click Use Content Designer. Then click Existing design in the displayed options. The "Select Design" pop-up window is displayed.

  3. Click on the desired Design from the displayed list, or alternatively search for the Design using its Tag.

  4. To preview the Design before applying, click Preview.  

  5. After selecting the required Design, click select.

  6. The Content Designer is displayed and populated with the details of this Design. 

 

 Create a New Design

Click hereClick here

To create a new Design:

  1. On the Campaign screen, click the "Content" tab.

  2. Click Use Content Designer. Then click Create your own in the displayed options. The Content Designer is displayed, with a blank Workspace.

  3. Build the content for your new Design (see below for more details on the specific features of the Content Designer tool).

  4. Click save as design. The "Save as Design" pop-up window is displayed.

  5. In the "Name" field, enter the name of the new Design.

  6. Select the folder where you want to save the new Design.

  7. Click save.

Note: To overwrite an existing Design, enter the name of the existing Design in the "Name" field, and select the same folder where the existing Design is saved. The platform displays a warning dialog box; click save and overwrite.

 

 

 Add Content Elements to a Design

Click hereClick here

To add a Content-related item to your Design:

  1. Click the "Content" tab.

  2. Optionally, if you want more space on the screen to build your Design, click the "Expand Advanced Editor" button. The system collapses several of the user interface elements in order to make the Workspace larger. Click this button again to revert back.

  3. Drag-and-drop the desired content item from the menu on the right, into the desired location in the Workspace.

    Note: The custom fonts uploaded in the campaign's setting will be available for selection for the Content Elements: Title, Paragraph, List and Menu. This can be selected from the Font family list in the Content Properties. To upload custom fonts, see Email Campaign > Upload Custom Fonts.

Add a TitleAdd a Title

A Title is a special type of Text Block. The output HTML renders the Title with heading tags "H1," "H2," and "H3." 

To add a Title to your Design:

  1. Drag-and-drop the "Title" item into the desired location in the workspace. The system adds a new Title block with the default text: "I'm a new title block."

  2. Click the new Title block. The system displays a text editor tool bar with common text-formatting options, such as typeface, color, and links. Enter your text.

  3. While the Title block is selected, additional properties for the Title block are displayed in the right-hand pane, allowing you to configure the following properties:

  • Title -- Select a heading style of H1, H2, or H3. 

  • Font family and size -- Unlike in a Text Block, these settings are always applied to the entire Title block. If you set the font family to "Global Font," this Title block will inherit the default font family defined under the "Settings" tab (see "Configure Design Properties" below for more details on the "Settings" tab). By setting Title blocks to "Global Font," you can change the font family for multiple elements at once, just by changing that property in the "Settings" tab

  • Text color and link color 

  • Alignment -- Unlike in a Text Block, this setting is always applied to the entire Title block. 

  • Line height

  • Letter spacing -- Define the spacing in pixels between letters, including negative values.

  • Text direction -- Unlike in a Text Block, this setting is always applied to the entire Title block

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Personalization Fields

You can also add personalization fields into the text:

  1. Position your cursor within the text where you want to insert the personalization field.

  2. From the text editor tool bar, select More > Add Personalization and Library Tag. The "Content" pop-up window is displayed.

  3. Within the "Browse Fields" list, navigate to and select the desired personalization field. You can also search for a field using the "Search" field in the top-right corner of the pop-up window.

  4. Optionally, enter a default value for this personalization field in the "Default" text box. The default value is used if a record doesn't have a valid value in the field being used to personalize the message.

  5. Optionally select a formatting mask from the "Formatter" drop-down menu. The formatting mask is used to control the appearance of the text in the personalization field. For example, you can format date fields as "mm/dd/yyyy." The system includes formatting masks for dollar amounts, dates, numbers, and URLs. You can also use a formatting mask to truncate or encode the personalization field.

  6. Click save. The system inserts the Merge Symbol into the text at the current cursor position.

A Merge Symbol is a textual representation of the personalization field, consisting of the field name enclosed in double-brackets. For example: {(first_name)}. If you defined a default value above in step 4, this value is also displayed within the Merge Symbol. For example: {(first_name|Customer)}. If you selected a formatting mask above in step 5, the formatting mask is displayed within the Merge Symbol using a special code. For example, the "mm/dd/yy" date field format mask is represented by the code: "d:d." Therefore, the Merge Symbol for this field would be: "{(date_field||d:d)}."

 

Messaging Assets

You can also insert other Messaging assets into the text block:

  1. Position your cursor within the text where you want to insert the Messaging asset.

  2. From the text block editor tool bar, select More > Add Personalization and Library Tag. The "Content" pop-up window is displayed.

  3. Click the "Library" tab.

  4. From the "Object Type" drop-down menu, select the asset type.

  5. Browse to and select the desired asset. You can also search for an asset using the "Search" field.

  6. Click save. The system displays the Merge Symbol beneath the asset icon.

A Merge Symbol is a textual representation of the asset, consisting of the asset's name and Object Reference ID enclosed in double-brackets. For example: {[Logo_Header|8687]}.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add a ParagraphAdd a Paragraph

Enables creating text with multiple font weights, enhanced copy/paste support, quick reformatting and more.

To add a Paragraph to your Design:

  1. Drag-and-drop the "Paragraph" item into the desired location in the workspace. The system adds a new Paragraph block.

  2. Click the Paragraph block. The system displays a paragraph editor tool bar.

  3. Select the desired options in the tool bar to add and modify text content.

Add a ListAdd a List

Allows you to create easy numbered and bullet lists.

To add a List to your Design:

  1. Drag-and-drop the "List" item into the desired location in the workspace. The system adds a new List block.

  2. Click the List block. The system displays a list tool bar.

  3. Select the desired list type from the options in the tool bar.

Add a Text BlockAdd a Text Block

To add a Text block to your Design: 

  1. Drag-and-drop the "Text" item into the desired location in the workspace. The system adds a new Text block with the default text: "I'm a new Text block ready for your content."

  2. Click the new Text block. The system displays a text editor tool bar with common text-formatting options, such as font, size, typeface, indentation, and links. Enter your text.

Note: From within the text editor tool bar, if you set the font family to "Global Font," this text block will inherit the default font family defined under the "Settings" tab (see "Configure Design Properties" below for more details on the "Settings" tab). By setting text blocks to "Global Font," you can change the font family for multiple elements at once, just by changing that property in the "Settings" tab.

  1. While the text block is selected, additional properties for the text block are displayed in the right-hand pane, allowing you to configure the following properties:

  • Text color

  • Link color (the default link color is inherited from the Design properties in the "Settings" tab; you can optionally override the global settings within an individual text block)

  • Line height

  • Letter spacing -- Define the spacing in pixels between letters, including negative values

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types. 

Personalization Fields

You can also add personalization fields into the text:

  1. Position your cursor within the text where you want to insert the personalization field.

  2. From the text editor tool bar, select More > Add Personalization and Library Tag. The "Content" pop-up window is displayed.

  3. Within the "Browse Fields" list, navigate to and select the desired personalization field. You can also search for a field using the "Search" field in the top-right corner of the pop-up window.

  4. Optionally, enter a default value for this personalization field in the "Default" text box. The default value is used if a record doesn't have a valid value in the field being used to personalize the message.

  5. Optionally select a formatting mask from the "Formatter" drop-down menu. The formatting mask is used to control the appearance of the text in the personalization field. For example, you can format date fields as "mm/dd/yyyy." The system includes formatting masks for dollar amounts, dates, numbers, and URLs. You can also use a formatting mask to truncate or encode the personalization field.

  6. Click save. The system inserts the Merge Symbol into the text at the current cursor position.

A Merge Symbol is a textual representation of the personalization field, consisting of the field name enclosed in double-brackets. For example: {(first_name)}. If you defined a default value above in step 4, this value is also displayed within the Merge Symbol. For example: {(first_name|Customer)}. If you selected a formatting mask above in step 5, the formatting mask is displayed within the Merge Symbol using a special code. For example, the "mm/dd/yy" date field format mask is represented by the code: "d:d." Therefore, the Merge Symbol for this field would be: "{(date_field||d:d)}."

 

Messaging Assets

You can also insert other Messaging assets into the text block:

  1. Position your cursor within the text where you want to insert the Messaging asset.

  2. From the text block editor tool bar, select More > Add Personalization and Library Tag. The "Content" pop-up window is displayed.

  3. Click the "Library" tab.

  4. From the "Object Type" drop-down menu, select the asset type.

  5. Browse to and select the desired asset. You can also search for an asset using the "Search" field.

  6. Click save. The system displays the Merge Symbol beneath the asset icon.

A Merge Symbol is a textual representation of the asset, consisting of the asset's name and Object Reference ID enclosed in double-brackets. For example: {[Logo_Header|8687]}.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

 

Add an ImageAdd an Image

To add an image to your Design:

  1. Drag-and-drop the "Image" item into the desired location in the Workspace.

  2. Click browse. The "File Manager" pop-up window is displayed.

  3. Navigate to the desired Hosted Item folder within your account

  4. Click the desired image, then click insert. The image is displayed within the Workspace.

Note: For more details on uploading images into your account, see Upload Hosted Items.

  1. Click the image to select it.

  2. Optionally, to apply image effects, click apply effects & more. See below for more details on using the Image Editor.

  3. While the image is selected, additional content properties for the image are displayed in the right-hand pane, allowing you to adjust the following:

  • Image width (or "auto-width")

  • Alignment

  • Dynamic -- see below for more details on dynamic images

  • Alternate text

  • Change the image -- either click change image and browse to a new image file, or enter the URL to the desired image file

  • Click action

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Dynamic Images

When you insert an image into the Content Designer, you can flag that image as “dynamic.” Dynamic images change depending on one or more values that are passed to the system that delivers them. The link to the image is no longer a static URL, but rather a URL that contains some variables, such as an email, a customer ID, a date, etc. The variables are entered as merge tags in the URL and are replaced with actual values (e.g. the ID of a customer, the email of the recipient, the name of the person, etc.) when the email message is deployed.

To set up a dynamic image:

  1. Insert the image as described above.

  2. Click on the image within the Workspace to select it.

  3. In the content properties pane, click the dynamic image toggle button.

  4. In the "Dynamic URL" filed, enter the URL along with the desired merge tags.

Add a ButtonAdd a Button

To add a button to your Design:

  1. Drag-and-drop the "Button" item into the desired location in the workspace. The system adds a new button with the default label: "Button."

  2. Click the new button to select it. The system displays a text editor tool bar with common text-formatting options, such as font, size, and typeface. Enter the button label.

  3. While the button is selected, additional content properties for the button are displayed in the right-hand pane, allowing you to adjust the following:

  • Click action

  • Width (or "auto-width")

  • Background color

  • Text color

  • Alignment

  • Line height

  • Letter spacing -- Define the spacing in pixels between letters, including negative values.

  • Border radius

  • Content Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Border color and width -- Border settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle

  • Block Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types .

Add a TableAdd a Table 

To add a table to your Design:

  1. Drag-and-drop the "Table" item into the desired location in the workspace. The system adds a new table to the workspace.

  2. Click the new table to select it. 

  3. While the table is selected, additional content properties for the table are displayed in the right-hand pane, allowing you to define the following:

  • Header: The Table content block includes the option to add headers to the first row of the table. 

  • Structure: The following options are available:

  • Columns: Add or remove columns to the right of your table. The maximum number of columns you can add is eight.

  • Rows: Add or remove rows to the bottom of the table. There is no maximum number of rows you can add.

  • Background color: Edit the table’s background color.

  • Border: Customize your border style. You have the option to choose from solid, dotted, and dashed. You can also select a custom border color and size. For dotted and dashed border styles,  use a border thickness of five or less for best results. 

  • Striped Rows: You can use the Striped Rows content property to create rows with alternating colors. Toggle Striped Rows to ON and then select the background color you want to apply for the alternating rows. The initial table background color you select will be the other alternating color in your table. 

  • Content: The following options can be customized in the content:

  • Font Family

  • Font Weight

  • Font Size

  • Text Color

  • Link Color

  • Align

  • Line Weight

  • Letter Spacing

  • Text direction 

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types .

Add a DividerAdd a Divider

Dividers are horizontal lines used to help create visual separation between design elements. To add a divider to your Design:

  1. Drag-and-drop the "Divider" item into the desired location in the Workspace. The system adds a new divider line.

  2. Click the new divider to select it.

  3. While the divider is selected, additional content properties for the divider are displayed in the right-hand pane, allowing you to adjust the following:

  • Transparency

  • Line width and color

  • Alignment

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add a SpacerAdd a Spacer

Spacers, as the name implies, simply adds space to your design. With this, you can more easily streamline the process of adding space to your design. To add a spacer to your Design:

  1. Drag-and-drop the "Spacer" item into the desired location in the Workspace. The system adds a new spacer block.

  2. Click the new spacer to select it.

  3. While the spacer is selected, additional content properties for the spacer are displayed in the right-hand pane, allowing you to adjust the following:

  • Height

  • Hide on -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add Social Media ButtonsAdd Social Media Buttons

To add Social Media buttons to your Design:

  1. Drag-and-drop the "Social" item into the desired location in the workspace. The system adds the default set of Social Media buttons (Facebook, Twitter, Instagram, and LinkedIn) to the Workspace.

  2. Click the Social Media button to select it.

  3. While the Social Media button is selected, additional content properties for the Social Media buttons are displayed in the right-hand pane, allowing you to adjust the following:

  • Icon set (square, round, monochrome, etc.)

  • Within the right-hand pane, adjust the sequence of the buttons by dragging a button and dropping it in its desired location.

  • Click "Delete" to remove a button.

  • Click "Add New Icon" to add buttons for other social media products and platforms.

  • Click "More options" then adjust the button's name, alternate text, and destination URL.

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add a Personalization FieldAdd a Personalization Field

Personalization fields are used to populate a portion of your message with content pulled from your marketing database. For example, instead of "Dear Customer" as a greeting, you could replace the word "Customer" with the customer's actual first name.

Note: You can also add personalization fields within text; see Add a Text Block or Add a Title above more details on this method.

To add a personalization field to your Design:

  1. Drag-and-drop the "Library" item into the desired location in the Workspace. The system adds an icon representing the position of the personalization field.

  2. Within the Workspace, click the new personalization icon. The Merge Symbols for any previously-defined personalization fields in this Design are displayed within the right-hand pane. Optionally, select one of these fields.

  3. If you need to define a new personalization field, within the right-hand pane, click add personalization and library tag. The "Content" pop-up window is displayed.

  4. Within the "Browse Fields" list, navigate to and select the desired personalization field. You can also search for a field using the "Search" field in the top-right corner of the pop-up window.

  5. Optionally, enter a default value for this personalization field in the "Default" text box. The default value is used if a record doesn't have a valid value in the field being used to personalize the message.

  6. Optionally select a formatting mask from the "Formatter" drop-down menu. The formatting mask is used to control the appearance of the text in the personalization                       field. For example, you can format date fields as "mm/dd/yyyy." The system includes formatting masks for dollar amounts, dates, numbers, and URLs. You can also use a formatting mask to truncate or encode the personalization field.

  7. Click save. The system displays the Merge Symbol beneath the personalization icon.

A Merge Symbol is a textual representation of the personalization field, consisting of the field name enclosed in double-brackets. For example: {(first_name)}. If you defined a default value above in step 5, this value is also displayed within the Merge Symbol. For example: {(first_name|Customer)}. If you selected a formatting mask above in step 6, the formatting mask is displayed within the Merge Symbol using a special code. For example, the "mm/dd/yy" date field format mask is represented by the code: "d:d." Therefore, the Merge Symbol for this field would be: "{(date_field||d:d)}."

  1. Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  2. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add Other Messaging AssetsAdd Other Messaging Assets

The Content Designer allows you to insert other Messaging assets (such as Content Blocks, Opt-Out Messages, etc.) into the Design.

Note: You can also add Messaging assets within text; see Add a Text Block or Add a Title above more details on this method.

To add a Messaging asset to your Design:

  1. Drag-and-drop the "Library" item into the desired location in the Workspace. The system adds an icon representing the position of the asset.

  2. Within the Workspace, click the new asset icon. The Merge Symbols for any previously-defined assets in this Design are displayed within the right-hand pane. Optionally, select one of these assets.

  3. If you need to define a new asset, within the right-hand pane, click add personalization and library tag. The "Content" pop-up window is displayed.

  4. Click the "Library" tab.

  5. From the "Object Type" drop-down menu, select the asset type.

  6. Browse to and select the desired asset. You can also search for an asset using the "Search" field.

  7. Click save. The system displays the Merge Symbol beneath the asset icon.

A Merge Symbol is a textual representation of the asset, consisting of the asset's name and Object Reference ID enclosed in double-brackets. For example: {[Logo_Header|8687]}.

  1. Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  2. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add Custom HTMLAdd Custom HTML

To add custom HTML code to your Design:

  1. Drag-and-drop the "HTML" item into the desired location in the Workspace. The system adds a new line of HTML code consisting of the text string: "I'm a new HTML block."

  2. Click the new HTML block to select it.

  3. While the HTML block is selected, additional content properties are displayed in the right-hand pane:

  •  In the code editor, enter your custom HTML code.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add a VideoAdd a Video

To add a link to a video within your Design:

  1. Drag-and-drop the "Video" item into the desired location in the Workspace.

  2. Click add a video url.

  3. Additional content properties for the video are displayed in the right-hand pane, allowing you to configure the following:

  • Enter the Video URL.

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Add an IconAdd an Icon

An Icon element consists of a small image and optionally a corresponding text string. You can use Icons to create visual bullet lists, ratings, properties, logo galleries, etc. A group of related icons is referred to as an "icon collection." All of the icons in the collection can be configured with the same formatting parameters.

To add an icon within your Design:

  1. Drag-and-drop the "Icon" item into the desired location in the Workspace.

  2. Click add new icon to define the first icon in the icon collection. The system adds a pre-defined icon image to the Workspace.

  3. To select the icon image, click change image. The "File Manager" pop-up window is displayed.

  4. Navigate to the desired Hosted Item folder within your account.

  5. Click the desired image, then click insert. The icon image is displayed within the Workspace.

Note: For more details on uploading images into your account, see Upload Hosted Items.

  1. Click the icon to select it.

  2. To configure the icon properties, click the more options toggle. Enter the following properties:

  • Image URL: The filepath to the Hosted Item you selected above is displayed here.

  • Alternate Text: Enter the text that appears if a user hovers their mouse cursor over the icon image.

  • Icon Text: Enter the text associated with the icon.

  • Text Position: Select where you want the icon text to appear in relation to the icon image -- top, bottom, left, or right.

  • Link Type: To make the icon a clickable link, select a link type.

  • URL: To make the icon a clickable link, enter the destination URL. Or optionally, click "Link File" and browse to and select a file.

  1. Optionally to remove the icon, click "Delete."

  2. Optionally, to apply image effects, click apply effects & more. See below for more details on using the Image Editor.

  3. Repeat the above steps as needed to define additional icons in this icon collection.

  4. To rearrange the icon sequence within the collection, click-and-drag on the "handle" to the left of the icon thumbnail, and move the icon into the desired position in the collection.  

  5. While the icon collection is selected, additional content properties are displayed in the right-hand pane, allowing you to adjust the following options. These options are applied to all icons within the icon collection.

  • Alignment

  • Font family, size, and color

  • Icon size and spacing

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types .

Add a MenuAdd a Menu

A Menu element consists of a series of one or more text strings, optionally configurable as links. All of the items in the Menu can be configured with the same formatting parameters.

To add a Menu within your Design:

  1. Drag-and-drop the "Menu" item into the desired location in the Workspace.

  2. Click the Menu item in the Workspace to select it.

  3. Click add new item to define the first item in the Menu.

  4. Enter the following properties:

  • Text: Enter the text for this Menu item.

  • Link Type: To make the text a clickable link, select a link type.

  • URL: To make the text a clickable link, enter the destination URL. Or optionally, click "Link File" and browse to and select a file.

  1. Optionally to remove the item, click "Delete."

  2. Repeat the above steps as needed to define additional items to this Menu.

  3. To rearrange the item sequence within the Menu, click-and-drag on the "handle" to the left of the item name, and move the item into the desired position in the Menu.  

  4. While the Menu is selected, additional content properties are displayed in the right-hand pane, allowing you to adjust the following options. These options are applied to all items within the Menu.

  • Font family, size, and color

  • Link color

  • Alignment

  • Layout (horizontal or vertical)

  • Separator

  • Mobile menu -- If enabled, the Menu will collapse on a mobile device, and be displayed as an expandable icon. Select the desired icon and color options.

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types .

Add a GIFAdd a GIF

To add a GIF within your Design:

  1. Drag-and-drop the "GIF" item into the desired location in the Workspace.

  2. Click search to search the Giphy library. Enter your search text, then click on the desired GIF.

  3. Click the GIF item in the Workspace to select it.

  4. While the GIF is selected, additional content properties for the GIF are displayed in the right-hand pane, allowing you to adjust the following:

  • GIF width (or "auto-width")

  • Alignment

  • Dynamic -- see below for more details on dynamic GIFs

  • Alternate text

  • Click action

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Note: Animated GIFs are not supported in MS Outlook 2007, 2010 and 2013. Only the first frame will be displayed in these email clients, so ensure that the first frame is what you want the recipient to see.

Dynamic GIFs

When you insert a GIF into the Content Designer, you can flag that GIF as “dynamic.” Dynamic GIFs change depending on one or more values that are passed to the system that delivers them. The link to the GIF is no longer a static URL, but rather a URL that contains some variables, such as an email, a customer ID, a date, etc. The variables are entered as merge tags in the URL and are replaced with actual values (e.g. the ID of a customer, the email of the recipient, the name of the person, etc.) when the email message is deployed.

To set up a dynamic GIF:

  1. Insert the GIF as described above.

  2. Click on the GIF within the Workspace to select it.

  3. In the content properties pane, click the dynamic image toggle button.

  4. In the "Dynamic URL" filed, enter the URL along with the desired merge tags.

Add a StickerAdd a Sticker

To add a sticker within your Design:

  1. Drag-and-drop the "Stickers" item into the desired location in the Workspace.

  2. Click search to search the sticker library. Enter your search text, then click on the desired sticker.

  3. Click the sticker item in the Workspace to select it.

  4. While the sticker is selected, additional content properties for the sticker are displayed in the right-hand pane, allowing you to adjust the following:

  • Sticker width (or "auto-width")

  • Alignment

  • Dynamic -- see below for more details on dynamic stickers

  • Alternate text

  • Click action

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Hide item -- Optionally, you can configure this item to be hidden when the recipient views the message on a desktop, or on a mobile device.

  1. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

Note: Animated stickers are not supported in MS Outlook 2007, 2010 and 2013. Only the first frame will be displayed in these email clients, so ensure that the first frame is what you want the recipient to see.

Dynamic Stickers

When you insert a sticker into the Content Designer, you can flag that sticker as “dynamic.” Dynamic stickers change depending on one or more values that are passed to the system that delivers them. The link to the sticker is no longer a static URL, but rather a URL that contains some variables, such as an email, a customer ID, a date, etc. The variables are entered as merge tags in the URL and are replaced with actual values (e.g. the ID of a customer, the email of the recipient, the name of the person, etc.) when the email message is deployed.

To set up a dynamic sticker:

  1. Insert the sticker as described above.

  2. Click on the sticker within the Workspace to select it.

  3. In the content properties pane, click the dynamic image toggle button.

  4. In the "Dynamic URL" filed, enter the URL along with the desired merge tags.

 Add LiveContentAdd LiveContent  

LiveContent activates data into personalized content and makes emails more interactive, personalized, and timely.  With LiveContent integrated into Engage+, the real-time personalization powered by LiveContent integration is a seamless way to insert LiveContent elements in email campaigns. For more details visit liveclicker.com.

Note 1: To use this feature, you must have Content Desginer and LiveContent set up and enabled. Please speak to your Client Services Representative for more details. 

Note 2: In order to add LiveContent content in a Engage+ email campaign, you must first create the LiveContent content element in your LiveContent account.

Note 3:Under the GDPR, LiveContent is a data processor. If applicable, please contact your Marigold Representative for the data processing documentation. When LiveContent content based on the location rule is used, the location of a recipient is derived from the email opener and user agent string.

To add a LiveContent to your Design:

  1. Drag-and-drop the "LiveContent" item into the desired location in the workspace. The system adds a LiveContent content block.

  2. Click Browse in the LiveContent content block, to retrieve the list of published LiveContent campaign. 

  3. From the displayed list, select the desired LiveContent campaign and then the element to use in the Engage+ email campaign.

  4. Click Add Element to insert the element in the Design.

  5. When finished, click the down-arrow icon within the "Content" tab again to return to the menu of element types.

 

Use AI Content AssistantUse AI Content Assistant

 

The Marigold AI Content Assistant provides efficient copywriting using AI  for marketer efficiency.

Ask your Marigold representative for the Marigold AI Content Assistant. You will receive the Generative AI Addendum. This must be esigned or signed, scanned and returned to your Marigold representative. After Marigold receives your signed Generative AI Addendum, the capability will be provisioned to your account.

To use AI Content Assistant in your Design:

  1. Drag-and-drop  a Paragraph block onto the canvas into the desired location in the workspace. The feature is only available from Title, Paragraph, List blocks and Buttons. It is not available in the older Text block these blocks replaced.

  2. Click into the new Paragraph block and then click on the blue button that says: Write with AI.

  3. You need to write a good quality prompt to specifically tell the AI what to do. 

    Your AI Prompt for Marketing Copy should always include: Desired Voice + # of Words  + Target Audience + Desired Outcome

    The voice: With an active, persuasive marketer voice (you can also say compelling, same idea). 

    If you have brand guidelines on voice, note them here. You can also say, in the marketing voice of mycompany.com (your company website URL or other example), write…

    Directly state how many words: in 60 words

    Who is the target audience: Describe who the customer for this product is, as well as you can. Is this going to a particular segment? If yes, describe it. Otherwise, just say “customer.”

    What is the desired outcome: What do we want the customer to know about and what do we want them to do?

  1. Click on the blue Generate button.

  2. If you are happy with the result, click on the blue Apply button.

  3.  If you want the AI to rewrite the content, click into the box with the prompt “What would you like to write about?”

  4. A selection of presets will appear. You can choose one, or type something original in.

  5. Click on the blue Generate button. Then click on the blue Apply button. 

For more detailed information and power-tip for marketer efficiency, refer Using the Marigold AI Content Assistant with Best Practices for AI-Assisted Copywriting.

  1. By default, the Workspace shows the Desktop version of the message content. Optionally, click the "Mobile" toggle in the top-left corner of the Workspace to see the Mobile version of the message content. The Mobile version automatically applies content item settings, such as "Hide Item." To switch back to the Desktop view, click the "Desktop" toggle. 

  2. If you need to roll back a change to the Design:

  • To undo the last change, click the "Undo"  button in the lower-left corner of the Workspace.

  • To revert back to an earlier version, click the "History" button in the lower-left corner of the Workspace. The pop-up menu displays a timeline of changes including a description of the change, and a date / time stamp. Select the desired version.

  1. In the Tool Bar, click save.

Clone a Content Item

To create a duplicate of a content item:

  1. Click on the desired content item to select it.

  2. Within the Workspace, click the clone button (or click the clone button within the content properties panel). The tool creates a duplicate of the content item.

Rearrange Content Item

To move a content item within the Workspace:

  1. Click on the desired content item to select it.

  2. Click and hold on the "handle" icon to the right of the selected content item.

  3. Drag the content item to its new location, and drop it.

Delete a Content Item

To delete a content item from the Design:

  1. Click on the desired content item to select it.

  2. Within the Workspace, click the delete button (or click the delete button within the content properties panel). The tool removes the selected content item.

 

 Using the Image Editor

Click hereClick here

The Content Designer provides a built-in Image Editor for Image and Icon content items. The Image Editor allows you to apply a variety of different options and effects to an image, such as filters, stickers, and text.

To access the Image Editor:

  1. Add an Image or Icon content item as described above, then click on it.

  2. Select the image you want to use for the Image or Icon item.

  3. Click apply effects & more. The Image Editor is displayed.

  4. Select the desired editing tool from the Image Editor tool bar:

  • Filter: Select a pre-defined filter to change the look of the image.

  • Resize: Adjust the height / width of the image.

  • Crop: Select a portion of the image that you want to use.

  • Transform: Rotate or flip the image.

  • Draw: Draw on the image using a variety of brush colors, types, and sizes.

  • Text: Add a text box to the image.

  • Shapes: Add shapes to the image.

  • Stickers: Add stickers to the image.

  • Frame: Configure the borders of the image.

  • Corners: Round the image corners.

  1. Using the selected tool, make any necessary changes or additions to the image.

  2. Click apply to see the changes and return to the main Image Editor tool bar. Or, to close the selected tool and return to the main Image Editor tool bar, click close.

  3. Click save to save your changes and close the Image Editor.

 

 Add Structural Elements to a Design

Click hereClick here

To add a structure-related item to your Design:

  1. Optionally click show structure. When this feature is toggled on, the tool displays dashed lines representing the rows and columns in your Design. This view can be helpful when adding content into the Design. To toggle off this view, click hide structure.

  2. Click the "Rows" tab.

  3. Drag-and-drop the desired row type from the right-hand panel into the Workspace. The Content Designer supports a variety of rows featuring one, two, three, or four columns.

  4. Click the row to select it.

  5. While the row is selected, additional properties for the row are displayed in the right-hand pane, allowing you to adjust the following:

  • Row background color

  • Content background color

  • Vertical Alignment (top, center or bottom alignment)

  • Mobile stacking

  • Reverse stack order on mobile (this setting is beneficial for layouts with alternating images and text; enabling this option will ensure that on a mobile devices, images are consistently on top of their accompanying copy)

  • Row background image

  1. If the row has multiple columns, you can use the Customize Columns widget to adjust the column properties. This widget supports the following features:

  • Resize column widths by dragging the divider icon in between two columns to the left or right. The minimum column width is 2.

  • Add a column by clicking "Add new." The platform adds the new column to the far right, with a default width of 2. The maximum number of columns is six.

  1. If the row has multiple columns, you can define properties specific to a single column. Click the desired column within the Customize Columns widget, then configure the following properties:

  • Column background color

  • Padding -- Padding settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Border -- Border settings can be configured for all sides of the selected element. If you need to configure the sides separately, click the "More Options" toggle.

  • Delete the column by clicking "Delete." When a column is deleted, the nearest column on the left is automatically widened to encompass the width of the deleted column. The delete action is not available if the row has only one column.

Note: You can set global properties, such as a background color, that get applied to every row and column. You can then optionally override the global setting at an individual row / column level. For more details on global properties, see "Configure Design Properties" below.

  1. When finished, click the down-arrow icon within the "Rows" tab again to return to the menu of row options.

  2. If you need to roll back a change to the Design:

  • To undo the last change, click the "Undo"  button in the lower-left corner of the Workspace.

  • To revert back to an earlier version, click the "History" button in the lower-left corner of the Workspace. The pop-up menu displays a timeline of changes including a description of the change, and a date / time stamp. Select the desired version.

  1. In the Tool Bar, click save.

Clone a Row

To create a duplicate of a row

  1. Click on the desired row to select it.

  2. Within the Workspace, click the clone button (or click the clone button within the content properties panel). The tool creates a duplicate of the row beneath the selected row.

Rearrange Rows

To rearrange the sequence of rows within the Workspace:

  1. Click on the desired row to select it.

  2. Click and hold on the "handle" icon to the left of the selected row.

  3. Drag the row to its new location, and drop it.

Delete a Row

To delete a row from the Design:

  1. Click on the desired row to select it.

  2. Within the Workspace, click the delete button (or click the delete button within the content properties panel). The tool removes the selected row.

Delete a Row

To save a row as a reusable element for future use and for sharing with other marketers:

  1. Click on the desired row to select it.

  2. Within the Workspace, click the Save button.

  3. In the displayed Save Row popup window, enter the following details.

  • Name: Name of the row

  • Category: The category of the row such as header, footer 

  • Tags: Tag to assign the row

  1. Click OK, to save the row.

The Name and Category can be edited when required.

To use the saved row in a design, from the Row tab select the Category and then the required saved row from the filtered list of rows. Drag and drop the row to the Content Designer. 

 

 

 Configure Design Properties

Click hereClick here

Global properties are used to define various options and default settings that are applied to the entire Design. In many cases, the global-level option can optionally be overridden at the individual item level.

To configure global properties related to the entire Design:

  1. Click the "Settings" tab.

  2. Configure the desired options:

  • Content area width: Define the width of the area where content elements can be dropped. According to email marketing best practices, it should typically be set to 600px or less. Please note that this is the maximum width that will be used on larger devices. When the device’s screen is smaller, the message will adjust automatically to it.

  • Background color: Select the message background color. This setting is effective only for rows and columns where a color has not been specified; otherwise, the background color specified for that structure element will be used.

  • Content area background color: Select the background color for the content area. This setting is effective only for rows and columns where a color has not been specified; otherwise, the background color specified for that structure element will be used.

  • Default font: Select the default font that will be used when another font family has not been specified. This setting is effective only for text blocks and buttons where a font has not been specified; otherwise, the font specified for that item will be used.

  • Link color: Select the link color. This setting is effective only for links where a color has not been specified; otherwise, the color specified for that link will be used.

  • Email Details - Subject and Preheader (Optional Properties): Use the Marigold AI Assist to create the Subject Line and Preheader based on your content. Click the Marigold Assistive AI Magic wand icon and select one of the options to generate Subject line, Preheader or both. In the displayed Generate Email Details popup window, you can select the required  tone of voice from the available list and click Apply All. The Subject Line and Preheader will be created based on your content and also applied to the campaign’s subject line and preheader on the campaign’s envelope. 

  1. In the Tool Bar, click save.

 

 

 Clear Content from a Design

Click hereClick here

The platform currently doesn't allow you to delete a Design, but you can clear all of the content from within a Design:

  1. Click clear content. A confirmation dialog box is displayed.

  2. Click clear content.

 

 

 Quick View - Dark Mode

Click hereClick here

Dark Mode is a device or application-specific setting that some recipients may prefer to use. It causes text and transparent image content to display with a light-color scheme on a dark-colored background. To view the design in dark mode:

  1. Click Quick View. A Preview mode panel is displayed. This view will not display objects created outside of the Campaign. 

  2. Toggle Dark Mode Preview button to simulate the current design in dark mode.

  3. Click X to close the Preview mode panel. 

 

 

 Switch to the Advanced Editor

Click hereClick here

The Content Designer allows you to toggle to the Advanced Editor, if you need to view or edit the message's underlying HTML code.

Warning: If you toggle over to the Advanced Editor to view the message's source code, you can NOT toggle back to the Content Designer.

  1. In the Tool Bar, click Actions > Advanced Edit.

  2. A conformation dialog box is display, warning you that you won't be able to return to the Content Designer.

  3. Click save & confirm.

 

 

Working with Format Versions

Messaging allows you to define HTML and Plain Text format versions of your email message content in order to accommodate the different devices and applications used by consumers to view your message. If a consumer has an email application that's not configured to view HTML messages, he or she can still see the Plain Text version of your message. For more details, please see Format Versions. The features related to format versions are described below.

 Create a New Format Version

Click hereClick here

Within the Content Designer, each version of your message is displayed as a separate tab. Simply select a tab to see the content for that version.

Most of the format versions in Messaging are actually groups containing multiple sub-options. For example, the "HTML" version contains options for:

  • Email Message: The standard email option, for viewing messages within an email client software application.

  • Web: The content to be displayed in a web browser if the user clicks a "View as Web Page" link.

  • Mobile Web: The content to be displayed in a mobile device web browser, for non-Apple devices, if the user clicks a "View as Web Page" link while reading the email on a mobile device.

  • iPhone: The content to be displayed in a mobile device web browser, for an Apple device, if the user clicks a "View as Web Page" link while reading the email on an Apple device.

  • Viral: If the original recipient forwards the email message to a friend (via a "Share Message" Web Form), this is the email message content to be displayed when the friend receives the message.

  • Share to Social: The content to be displayed if the recipient clicks a "Share to Social" link.

By default, all of these options are contained within the parent HTML version, meaning that the same HTML content will be used for all of those different contexts.

Optionally, you can pull one or more of those options out of the parent version, and create a new, separate format version. This process is referred to as "promoting" a format option into a new group. See "Promote a Format Option" below for more details.

By default, the platform will create an HTML version of your message content. You can (and typically should) also create a Plain Text version.

To create a new Plain Text format version:

  1. Click the options button (gear icon). The system displays a menu showing the HTML version and all of its supported options ("Email," "Social," etc.), and the Plain Text version and all of its supported options.

  2. Under the Plain Text version, enable at least one option by clicking on it. The system creates a new tab for the Plain Text version.

  3. Click Generate Text from HTML to generate plain text content from the corresponding HTML option content.

  4. Optionally, you can preview the different format versions to verify that the content is being displayed correctly for. 

Note: While working on a Plain Text version, the Content Designer right-hand pane is not displayed, as this pane is relevant only to HTML versions. If you select a tab for an HTML format version, the Content Designer right-hand pane will again be displayed.

 

 

 Delete a Format Version

Click hereClick here

To delete a format version of your message content:

  1. Click the options button (gear icon). The system displays a menu showing the HTML version and all of its supported options ("Email," "Social," etc.), and the Plain Text version and all of its supported options. Any options you previously selected are highlighted.

  2. Toggle off every option beneath the desired format version. The system removes the tab for that version from the Content Designer.

 

 

 Promote / Demote a Format Option

Click hereClick here

The HTML and Plain Text format versions in Messaging are actually groups containing multiple sub-options. For more details, please see Format Versions.

Optionally, you can pull one or more of those options out of the parent version, and create a new, separate format version. This process is referred to as "promoting" a format option into a new group.

For example, if you need the "Mobile" version of your HTML content to be different than the "Email" HTML content, you could promote "Mobile" to its own format version. Within the user interface, the system displays a new tab on the Content Designer with the label "HTML 2 - Mobile."

Note: The platform allows you to promote as many format versions, and create as many new groups, as you want. Continuing the above example, you could add the "iPhone" option into the "HTML 2 - Mobile" group. Or you could further promote "iPhone" into its own version, and the system would create a new tab named "HTML 3 - iPhone."

Conversely, format options can be "demoted," which moves them back into their previous format version group.

To promote a format option into its own version:

  1. Click the options button (gear icon). The system displays a menu showing the HTML version and all of its supported options ("Email," "Social," etc.), and the Plain Text version and all of its supported options.

  2. Hover your mouse cursor over the desired format option. A green "handle" appears on the left-hand side of this format option.

  3. Click the green handle, and drag it to the right. The system displays a new blank tab. If you want to move this option into another existing group, drop the option onto that group. Or, if you want to create a new group, drop the option onto the new blank tab.

To demote a format option:

  1. Click the options button (gear icon). The system displays a menu showing the HTML version and all of its supported options ("Email," "Social," etc.), and the Plain Text version and all of its supported options.

  2. If the desired format option is NOT the only option in its current group, you can drag-the-drop the format option from its current group into any other format version. If the desired format IS the only option in its present group, then you can't drag-and-drop it. Instead, click on the option to disable it; the system automatically moves it back into its default format version.

 

 

 Disable / Enable a Format Option

Click hereClick here

Messaging allows you to define HTML and Plain Text format versions of your email message content in order to accommodate the different devices and applications used by consumers to view your message. If a consumer has an email application that's not configured to view HTML messages, he or she can still see the Plain Text version of your message. For more details, please see Format Versions.

The format versions in Messaging are actually groups containing multiple sub-options. Optionally, you can disable these options so that they're not used within your Campaign.

To disable a format option:

  1. Click the options button (gear icon). The system displays a menu showing the HTML version and all of its supported options ("Email," "Social," etc.), and the Plain Text version and all of its supported options. Any options you previously selected are highlighted.

  2. Click on the desired option to toggle it off.

To enable a previously disabled format option:

  1. Click the options button (gear icon). The system displays a menu showing the HTML version and all of its supported options ("Email," "Social," etc.), and the Plain Text version and all of its supported options. Any options you previously disabled are low-lighted.

  2. Click on the desired option to toggle it on.

Note: Optionally, you can pull one or more of these options out of the parent version, and create a new, separate format version. This process is referred to as "promoting" a format option into a new group. See "Promote / Demote a Format Option" above for more details.