Create an email template

Products
Marketing

A template is the content your target audience will receive via email. You can create templates that display the same content for all recipients (static content) and templates whose content changes depending on the audience segment (dynamic content).

Note. You can only edit the template before you start sending the email.

Create email templates in the Content Designer, a visual block-based drag&drop editor that allows you to create and set up email templates that look great on desktop and mobile devices.

You can use the Content Designer to design templates with complex layouts, such as marketing emails, newsletters, greeting cards, etc. Working in the Content Designer does not require an in-depth understanding of HTML. Creatio generates the code automatically based on the layout that you design in the visual editor.

An email template consists of a series of content blocks with text, images, buttons, separators, and their different combinations. We recommend taking a look at the pre-configured blocks before you start working on a template. If these blocks do not meet your needs, you can edit them or create custom blocks. You can personalize the email content to foster a trust-based relationship with your customers and increase brand loyalty.

Follow these steps to create an email template:

  1. Outline the email structure using the pre-configured blocks.
  2. Add custom content.
  3. Apply the styles and formatting.

The setup procedure described below is similar for all types of email templates, with or without dynamic content. You can also upload ready-made templates to the Content Designer.

Example. Create a mobile-optimized company newsletter template. The template must have a header with the navigation bar, a banner, top 3 features or products, and a call to action button.

Create a new template 

  1. Go to the Marketing workplace and open the Email section.

  2. Click Add and select the type of email you want to create: a bulk email or trigger email.

  3. This will open a new page. Specify the name of the new email on the page.

  4. Click the Open designer button (Fig. 1). Creatio will save the email automatically.

    Fig. 1 Navigate to the email template setup
    sct_open_content_designer_from_email.png

  5. Set up the email structure. Outline the structure from scratch or use a pre-configured template.

    • Follow the instructions in the Set up the template in the Content Designer section to outline the email structure.

    • Click Actions → Select from lookup to use the structure of a pre-configured template (Fig. 2). A box will pop up. Select the template of the structure in the box.

      Fig. 2 Add a pre-configured template to the email
      scr_select_template_from_lookup.png

  6. Once you outline the template structure, add your content to the email. Learn more: Set up the template in the Content Designer

Set up the template in the Content Designer 

  1. Set up the template header (Fig. 3):

    Fig. 3 Adding a header to the template
    scr_end_to_end_add_header.gif

  1. Drag the “Header. Image (50%) + Navbar (50%)” element from the block library to the working area.

    1. Click the navlinks to edit their captions.

    2. Specify the destination of each link in the setup area on the right. Remove the “#” prefix to treat the value as a URL. Leave the prefix to treat the value as a local anchor.

    3. Click Navbar → content_section_item_view_model_remove_icon.png to remove the unnecessary navlinks. Click Add link to add more navlinks.

    4. Select the Hamburger menu checkbox to display the navigation menu as a collapsible hamburger menu on mobile devices.

    5. Click btn_alignment_horizontal_right.png to right-align the menu.

    6. Click Section and select the Reverse the order of columns on mobile checkbox to push the logo under the navigation on mobile devices.

      If the Reverse order of mobile checkbox remains cleared, the image in the left column will display above the navigation menu on mobile devices.

  2. Set up a banner (Fig. 4):

    Fig. 4 Adding a banner
    scr_adding_empty_banner.gif

    1. Drag the Block element from the element library to the working area.

    2. Click Add banner in the setup area on the right.

    3. Click content_section_item_view_model_remove_icon00001.png to the right of Section #1 in the block setup area to remove the section.

    4. Select the checkbox in the background setup area.

    5. Click content_designer_background_color.png, select the background color, and click Apply.

      Note. We recommend setting up a background image of the banner after adding and configuring the banner elements. The background image is invisible if there are no elements in the banner. Also, the content may affect the banner height and, consequently, the way the background image is displayed.

  3. Add an image to the top of the banner (Fig. 5):

    Fig. 5 Adding an image
    scr_adding_banner_image.gif

    1. Drag the Image element from the library to the working area.

    2. Click content_section_item_view_model_remove_icon00002.png to clear the icn_content_designer_background_image.png field in the element setup area.

    3. Upload the image from your computer, provide the image URL, or specify a data URI containing the image.

    4. If necessary, specify the image dimensions in the Size, px area.

      Note. The images with dimensions specified may be displayed incorrectly in older email client versions.

    5. Specify the desired padding settings.

  4. Add a title to the banner (Fig. 6):

    Fig. 6 Adding a title
    scr_adding_banner_title.gif

    1. Drag the Text element from the library to the working area.

    2. Click font_color_picker.png in the Font property of the element setup area to open the font color picker. Select the font color in the color picker and click Apply.

    3. Replace the placeholder text with the title text.

    4. Specify the font size in the Size, px field.

    5. Click icon_text_align_center.png to align the text.

    6. Specify the desired padding settings.

  5. Add a subtitle to the banner (Fig. 7):

    Fig. 7 Adding a subtitle
    scr_adding_banner_subtitle.gif

    1. Drag the Text element from the library to the working area.

    2. Repeat steps b through f from the title setup instruction, using a different value for the font size.

  6. Add a button to the banner (Fig. 8):

    Fig. 8 Adding a CTA button
    scr_adding_banner_cta_button.gif

    1. Drag the Button element from the library to the working area.

    2. Replace the placeholder text with your CTA.

    3. Specify the destination URL in the Link to open field.

    4. Click font_color_picker00003.png in the Font property of the element setup area to open the font color picker. Select the font color in the color picker and click Apply.

  7. Specify the desired margin settings.

  8. Click content_designer_background_color00004.png in the Background area. Specify the background color of the CTA button and click Apply.

  9. Add a background image to the banner (Fig. 9):

    Fig. 9 Adding a background image to the banner
    scr_adding_banner_background.gif

    1. Use the breadcrumbs to open the banner setup area.

    2. Click content_section_item_view_model_remove_icon00005.png to clear the icn_content_designer_background_image00006.png field in the Background area.

    3. Upload the image from your computer, provide the image URL, or specify a data URI containing the image.

    4. Use the btn_alignment_vertical_top.png, btn_alignment_vertical_middle.png, or btn_alignment_vertical_bottom.png buttons to align the image vertically and the btn_alignment_horizontal_left.png, btn_alignment_horizontal_center.png, or btn_alignment_horizontal_right00007.png buttons to align the image horizontally.

      The background image will keep the aspect ratio but will stretch or shrink to fill the banner otherwise. Depending on the banner aspect ratio, you can align the image either horizontally or vertically, but not both.

  10. Add a subtitle (Fig. 10):

    Fig. 10 Adding a subtitle
    scr_adding_banner_title00008.gif

    1. Drag the Block element from the library to the working area.

    2. Drag the Text element to the Block element.

    3. Replace the placeholder text with your subtitle.

    4. Specify the font of the subtitle in the Font area.

    5. Specify the font size in the Size, px field.

    6. Click icon_text_align_center00009.png to align the text center.

  11. Add a feature block (Fig. 11).

    Fig. 11 Adding a feature block
    scr_adding_features.gif

    1. Drag the “Product list. 3 columns: Image + Text + Button” block to the working area.

    2. Delete the unneeded elements.

    3. Replace the placeholder column text with the description of your products.

  12. Add the summary text (Fig. 12) the same way you added the subtitle after the banner on step 9.

    Fig. 12 Adding the summary text
    scr_adding_feature_text.gif

  13. Save the template.

    As a result, a new template will be created. The templates are optimized for desktop and mobile by default (Fig. 13)

    Fig. 13 The template on desktop and mobile
    scr_mobile_vs_desktop.gif
See also
Set up a content block
Set up fonts in the Content Designer
E-learning courses
Email marketing