Creating, editing and managing content or templates with Email Designer

Overview

Example of the Content editing page

To create email content or a template, or edit and existing message with Email Designer, you need to carry out one or more of the following activities, using the Content editing page:

  1. Define the basic settings, such as the content width, the default font and similar, using the Settings tab.
  2. Create the row and column structure, using the Rows tab, the Editing panel and the Row properties and Column properties controls.
  3. Add different types of content to the row and column structure, using the Content tab, the Editing panel and the Content properties controls.
  4. Add the content, using the Editing panel and the Content properties controls.

See Email Designer interface for more about the Content editing page, the Editing panel, the Sidebar and the tabs.

In general, you need to carry out the following for each use case:

  • Creating email content starting from a blank page.
    You normally need to carry out all four activities described above, in the order given.
    The one exception is when you just require a very simple structure and format. In this case, you can use the blank page that Email Designer opens by default, and simply add the types of content (3) and the content itself (4).
  • Creating a new template.
    You have to carry out activities 1-3, although you may also want to add certain content, such as images (4).
  • Editing an existing template.
    You usually have to carry out activities 2-3, although you may also want to change the basic settings (1) and add certain content, such as images (4).
  • Creating email content from a template.
    Often, you simply need to open the required template and add the content (4). You may, however, also want to add different content types to those already included in the template (3).
  • Editing existing email content.
    Once you have reopened the message, you usually just need to carry out activity (4). You may, however, also want to add different content types (3), or make changes to the basic settings and/or structure (1-2).

Note:
Because creating an email starting from a blank page requires all four activities, it has been used for any examples given in the descriptions.

Once you have created or edited the email content, you can save it to be used immediately by Contactsend, or as a template for future use.

Starting Email Designer

  1. To open the Email Designer interface, do one of the following:
    1. Click Create > Email Designer.
      or:
    2. Go to Create > Email campaign > Message content.
    3. Click Email Designer, positioned under the HTML version panel and fields.
      The Template management page displays in an overlay window.

Example of the Email Designer interface

  1. Follow the instructions given below, depending upon what you want to do.

Managing templates

Existing templates are displayed on the Template management page. They are organized in the following repositories:

  • My Templates.
    The templates that users have created or customized.
  • Custom Templates and Default Templates.
    Templates provided by Contactlab.
  • Shared Templates.
    Only displays for associated companies or brands, when the parent organization has shared a template for general use.
    See Email Designer interface for more about Custom and Preset templates.

My Templates

To Use, Rename, Duplicate or Delete a user-created template, do the following:

  1. Hover your mouse over the template’s image.
    The Action buttons display.

The template Action buttons 

  1. Select the required action.

Custom and Default templates

Custom and Default templates cannot be renamed, duplicated or deleted directly. These templates can be edited, but they must then be saved with a different name in the My Templates repository.

Sharing templates

If your brands or associated companies are organized hierarchically in the platform, the parent organization can share a template with all of its daughters and granddaughters as follows:

  1. Ensure that you are signed in to the parent organization in Send.
  2. Create a new template, or edit an existing one in the normal way, then save it in the My Templates repository.
  3. Hover your mouse over the template’s image to display the Action buttons.
  4. Click Share.
    A confirmation window displays.
  5. Click Share again.
    The relevant template is added to the Shared Templates tab of each daughter and/or granddaughter, and the original is marked as Shared in the parent organization’s My Templates repository.

Example of the Shared Templates tab.

Stop sharing a template

To stop sharing a template, do the following:

  1. Hover your mouse over the template’s image in the parent organization’s My Templates repository, to display the Action buttons.
  2. Click Stop Sharing.
    A confirmation window displays.
  3. Click Stop Sharing again.
    The shared template is removed from the Shared Templates tab of each daughter and/or granddaughter, and the original is no longer marked as Shared in the parent organization’s My Templates repository.
    Note:
    If a shared template is deleted from the parent organization’s My Templates repository, it is also removed from the Shared Templates tab of each daughter and/or granddaughter.

Common use cases

Creating email content starting from a blank page

To create email content without using a template, do the following:

  1. On the Template management page, click Start from scratch.
    The Content editing page displays, with:

    • An empty, single column row block, set to the default Content area width of 500 px, in the Editing panel.
      Note:
      If you just need email content with very simple formatting, you can drag and drop content tiles here, then add the relevant content. For example, a Text block followed by an Image and a link Button.
      The remainder of this example assumes that a more complex format is required.
    • The formatting control tabs, in the Sidebar.
      See Email Designer interface for more about the formatting tabs.
  2. Complete the steps given in the following sections:
    1. Defining the basic settings.
    2. Creating the row and column structure.
    3. Adding different types of content.
    4. Adding the content.
  3. If you want to view a preview of the email content, click Actions then Preview.
    You can select a Desktop or Mobile preview version.
  4. When you are finished, do the following, as required:
    1. If you want to save your work as a template for future use:
      1. Click Actions followed by Save as template.
      2. In the resulting window, enter a name for the template.
        The template is saved in the My library repository.
        Otherwise:
    2. Click Use in Contactsend, followed by the X button to close Email Designer.
      The email content HTML is transferred to the HTML version panel of the Contactsend Message content page.
  5. Continue with the email creation process, using the Contactsend UI.

Creating a new template

To create a new template without editing an existing one, do the following:

  1. On the Template management page, click Start from scratch.
    The Content editing page displays, with:

    • An empty, single column row block, set to the default Content area width of 500 px, in the Editing panel.
      Note:
      If you just need a template with very simple formatting, you can drag and drop content tiles here. For example, a Text block followed by an Image and a link Button.
      The remainder of this example assumes that a more complex format is required.
    • The formatting control tabs, in the Sidebar.
      See Email Designer interface for more about the formatting tabs.
  2. Complete the steps given in the following sections:
    1. Defining the basic settings.
    2. Creating the row and column structure.
    3. Adding different types of content.
  3. See Adding the content if you want to define any content for your template, such as an image, web page links or similar.
  4. If you want to view a preview of the template, click Actions then Preview.
    You can select a Desktop or Mobile preview version.
  5. When you are finished, click Actions followed by Save as template.
  6. In the resulting window, enter a name for the template.
    The template is saved in the My library repository.
  7. Click the X button to close Email Designer.

Editing an existing template

To edit an existing template, do the following:

  1. On the Template management page, locate and click the appropriate template.
    The template displays in the Content editing page.
  2. Complete the steps given in the following sections, to make the changes you require:
    1. Creating the row and column structure.
    2. Adding different types of content.
  3. See Defining the basic settings if you want to change elements such as the email maximum width or default font, and Adding the content if you want to change or add any predefined content.
  4. If you want to view a preview of the template, click Actions then Preview.
    You can select a Desktop or Mobile preview version.
  5. When you are finished, click Actions followed by Save as template.
  6. In the resulting window, enter a new name for the template.
    The template is saved in the My library repository, even if it was originally from the Custom or Preset template repository.
    Note:
    An edited template can be saved with the same name, if it was originally from the My library repository.
  7. Click the X button to close Email Designer.

Creating email content from a template

To create email content using a template, do the following:

  1. On the Template management page, locate and click the appropriate template.
    The template displays in the Content editing page.
  2. Complete the steps given in the following sections, to create email content you require, using the template as a basis:
    1. Adding the content.
    2. See Adding different types of content if you want to add other content types not included in the template, such as an image, social media links or similar.
  3. If you want to view a preview of the message, click Actions then Preview.
    You can select a Desktop or Mobile preview version.
  4. When you are finished, do the following, as required:
    1. If you want to save your work as a template for future use:
      1. Click Actions followed by Save as template.
      2. In the resulting window, enter a name for the template.
        The template is saved in the My library repository.
        Note:
        Ensure that you give the template a new name, otherwise you will overwrite the original if it was from the My library repository.
        Otherwise:
    2. Click Use in Contactsend, followed by the X button to close Email Designer.
      The email content HTML is transferred to the HTML version panel of the Contactsend Message content page.
  5. Continue with the email creation process, using the Contactsend UI.

Note:
You can create email content by simply opening the appropriate template, then immediately clicking Use in Contactsend. You can also continue to edit the email content in the HTML version panel, provided that you do not want to reopen it again later in Email Designer.

Editing existing email content

If you have created email content and clicked Use in Contactsend, or you have left the creation process in Contactsend before completing everything, you can edit the content in Email Designer as follows:

  1. On the Template management page, click Go back to work in progress.
    The relevant email content displays in the Content editing page.
  2. Depending upon the changes that you want to make, complete the steps given in the following sections, as required:
    1. Defining the basic settings.
    2. Creating the row and column structure.
    3. Adding different types of content.
    4. Adding the content.
  3. If you want to view a preview of the edited content, click Actions then Preview.
    You can select a Desktop or Mobile preview version.
  4. When you are finished, click Use in Contactsend, followed by the X button to close Email Designer.
    The email content HTML is transferred to the HTML version panel of the Contactsend Message content page.
  5. Continue with the email creation process, using the Contactsend UI.

Note:
If you save email content for use in Contactsend, then edit the HTML manually, you will not be able to reopen it for further editing in Email Designer.

Basic activities

Defining the basic settings

  1. Click the Settings tab and do the following:
    1. Under Content area width, define how wide the email content should be when it is displayed on a device that has a large screen with a high resolution, for example, a laptop.
      This setting is ignored on small devices such as some mobile phones.
      The default setting is 500 px. The maximum width is 900 px.
    2. Under Background color, click the field to the right to display the color selection window, and choose the color you want to use for the overall background of the message.
      See Email Designer interface > The Settings tab for more about the Color selection controls.
      The color reference is displayed as a hex. The default is White (#FFFFFF).
      The Background color can be overridden at the row, column, and content block level, as required.
    3. Under Content area background color, repeat the instructions as described in (1b) above, to choose the color you want to use for the content area background.
      Note:
      The default background color is Transparent. The Content area background color can be overridden using the Row properties, but not with the Content block controls or the Text editor controls.
    4. Under Default font, select the appropriate font, if required.
      The default is Arial. The font can be overridden at the content block level.
    5. Under Link color, use the color selection window controls, as described in (1b) above, to select the color that should be applied to links in the email content.
      The selected color can be overridden for individual elements.

Creating the row and column structure

  1. Click the Rows tab, and do the following:
    1. Locate the row tile with the column configuration that you require, for example, two equal sized columns.
    2. Drag and drop the tile into position above or below the initial single column row block in the Editing panel, to create a new row block.
    3. Hover your mouse over the block to display its Structure frame, then click it.
      The Row Properties and Column Properties display in the Rows tab.
  2. Under Row Properties, do the following:
    1. Under Row background color, click the field to the right to display the color selection window, and choose the color you want to use for the background of the row.
      See Email Designer interface > The Settings tab for more about the Color selection controls.
      The default background color is Transparent.
      The Row background color overrides the Settings tab Background color, but can itself be overridden at the column and content block level, as required.
    2. Under Content background color, repeat the instructions as described in (2a) above, to choose the color you want to use for the content background.
      The default background color is Transparent.
      The Content background color overrides the Settings tab Content area background color.
    3. Under Do not stack on mobile, click the switch to activate the control, if required.
      Prevents the columns in the row from being stacked on a mobile device.
      See Email Designer interface > The Rows tab > Row Properties for more about the Do not stack on mobile control.
    4. Under Row background image, click the switch to enable an image to be added to the background, if required, then enter the appropriate URL.
      See Email Designer interface > The Rows tab > Row Properties for more about the Row background image controls.
      The Content background color overrides the Row background image.
    5. Under Display condition, click Add condition to control how the row displays.
      A new window opens, where you can enter Before and After conditional statements.
  3. Under Column Properties, do the following for each column in the row:
    1. Under Column background, click the field to the right to display the color selection window, and choose the color you want to use for the background of the row.
      See Email Designer interface > The Settings tab for more about the Color selection controls.
      The default background color is Transparent.
      The Column background overrides the Settings tab Background color and the Row background color, but can itself be overridden at the content block level, as required.
    2. Under Padding, define the padding setting for each side of the column.
      A small graphic displays the result.
      If you want to set the same padding for all sides, turn off the More options switch.
    3. Under Border, define the border style, width and color for each side of the column.
      A small graphic displays the result.
      If you want to define the same border settings for all sides, turn off the More options switch.
      See Email Designer interface > The Settings tab for more about the Color selection controls.

Note:
If you want an exact copy of a row, click the Duplicate button within the row’s Structure frame. See Email Designer interface > The Rows tab for more about the Structure frame and controls.

If you do not require the initial single column row block, or any other row block that you might have added to the email content or template, you can delete it as follows:

  1. Hover your mouse over the block to display the Structure frame.
  2. Click the frame, followed by the Delete button.
    See Email Designer interface > The Rows tab for more about the Structure frame and controls.

Adding different types of content

  1. Click the Content tab, and do the following:
  2. Locate the content tile you require, for example, Text, and drag and drop it into position in the appropriate column and row.
    The resulting content block automatically adjusts to the column width. See Email Designer interface > The Content tab for more about content tiles.
  3. Hover your mouse over the block to display its Content frame, then click it.
    The associated Content properties display in the Content tab.
    Note:
    Each content type has its own set of properties. See Email Designer interface > The Content tab > Content block controls for details.
    The Image properties do not display until an image has been added to the relevant block.
  4. Configure the content properties as required.
  5. Add further content types above or below the ones you have added in the same column, or in different columns and rows, then repeat steps 3 and 4 for each block.

Adding content

Content is always added to the appropriate content block within a column and row in the Editing panel.

For example:

  1. To add an image:
    1. Locate the appropriate Image block then do one of the following:
      1. Drag and drop the appropriate file from your computer to the image block.
        The image displays in the block.
        or:
      2. Click Browse to display the available image folders and/or images.
      3. Locate the appropriate image, then click Insert.
        The image displays in the block.
        Note:
        You can only insert one image in a block. If, when you are locating the appropriate image, you click the image instead of Insert, it displays in a larger window and is not immediately added to the content.
    2. Click the image to display its Content Properties and edit them as required.
      See Email Designer interface > The Content tab > Content block controls for details.
  2. To add text:
    1. Locate and click the appropriate Text block.
      The Text editor controls and Content Properties display.
    2. Enter the required text, using the controls and properties to format it, as required.
      See Email Designer interface > The Content tab > Content block controls for more about the Text editor controls.

All other content blocks are used in a similar way to the Text and Image blocks.