Creatio base
This documentation is valid for Creatio version 7.16.0. We recommend using the newest version of Creatio documentation.

Configuring an email template

The Content Designer is a visual drag&drop editor that enables creating 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.

Example

Configure a mobile-optimized company news digest email template. The template should have a header with navigation bar, a banner, top 3 features or products and a “call to action” button.

I. Add a new template in the [Email templates] lookup

1.Go to the [Studio] workplace and select [Email templates] (Fig. 1).

Fig. 1 Adding a new template

gif_content_designer_open00076.gif 

2.Click the [New email template] button.

3.On the opened page, specify the template name, e.g., “Introduction email.”

4.Click the [Edit] button next to the [Emil template] block to open the Content Designer.

II. Design your template in the Content Designer

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

Fig. 2 Adding a header

scr_end_to_end_add_header.gif 

a.Drag&drop the “Header. Image (50%) + Navbar (50%)” element from the block library into the working area.

b.Click the navlinks to edit their captions.

c.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.

d.Click [Navbar] –> content_section_item_view_model_remove_icon00077.png to remove extra navlinks. Alternatively, you can add more navlinks by clicking [Add link].

e.Select the [Hamburger menu] checkbox to display the navigation menu as a collapsible hamburger menu on mobile clients.

f.Click btn_alignment_horizontal_right00078.png to make the navigation menu float on the right.

g.Click [Section] and select the [Reverse the order of columns on mobile] checkbox to push the logo under the navigation on mobile clients ().

Note

If the [Reverse the order of columns on 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. 3):

Fig. 3 Adding a banner

scr_adding_empty_banner.gif 

a.Drag&drop the [Block] element from the element toolbar into the working area.

b.Click [Add banner] in the setup area on the right.

c.Click content_section_item_view_model_remove_icon00079.png to the right of the [Section #1] to remove the section.

d.Select the background settings checkbox at the bottom of the setup area.

e.Click content_designer_background_color00080.png under [Background], select the background color of the block and click [Apply].

Note

We recommend setting up a background image of the banner after all banner elements are added and configured. There are two reasons for that: the background image is practically indistinguishable when not a single banner element has been added and the contents of the banner may affect the height of the banner and, consequently, the background image layout.

3.Add an image on top of the banner (Fig. 4):

Fig. 4 Adding an image

scr_adding_banner_image.gif 

a.Drag&drop the [Image] element.

b.Click content_section_item_view_model_remove_icon00081.png to clear the icn_content_designer_background_image00082.png field in the setup area on the right.

c.Upload the image from your computer or provide the URL of the image or a data URI containing the image.

d.Specify the desired width of the image in the [Size, px] property.

e.Specify the desired padding settings.

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

Fig. 5 Adding a title

scr_adding_banner_title.gif 

a.Drag&drop the [Text] element.

b.Click font_color_picker00083.png in the [Font] property in the setup area to open the font color picker. Select the font color and click [Apply].

c.Replace the placeholder text with the title text.

d.Specify the font size using the [Size, px] field.

e.Click icon_text_align_center00084.png to align the text.

f.Specify the desired padding settings.

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

Fig. 6 Adding a subtitle

scr_adding_banner_subtitle.gif 

a.Drag&drop the [Text] element.

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

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

Fig. 7 Adding a CTA button

scr_adding_banner_cta_button.gif 

a.Drag&drop the [Button] element.

b.Replace the default text with your text.

c.Specify the link to open in the [Link] field.

d.Click font_color_picker00085.png in the [Font] property in the setup area to open the font color picker. Select the font color and click [Apply].

e.Use the [Margin, px] property to specify the margin of the button.

f.Click content_designer_background_color00086.png at the bottom to open the color picker. Select the background color of the CTA button and click [Apply].

7.Add the background image to the banner (Fig. 8):

Fig. 8 Adding a banner background image

scr_adding_banner_background.gif 

a.Select the banner using the “breadcrumbs” navigation.

b.Click content_section_item_view_model_remove_icon00087.png to clear the icn_content_designer_background_image00088.png field in the [Background] property.

c.Upload the image from your computer or provide the URL of the image or a data URI containing the image.

d.Use the btn_alignment_vertical_top00089.png, btn_alignment_vertical_middle00090.png, and btn_alignment_vertical_bottom00091.png buttons to align the image vertically and the btn_alignment_horizontal_left00092.png, btn_alignment_horizontal_center00093.png, and btn_alignment_horizontal_right00094.png buttons to align the image horizontally.

Note

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

8.Add a subtitle (Fig. 9):

Fig. 9 Adding a feature subtitle

scr_adding_feature_title.gif 

a.Drag&drop the [Block] element.

b.Drag&drop the [Text] element on the new empty [Block] element.

c.Replace the default text with your text.

d.Specify the font family of your text using the lookup in the [Font] property.

e.Specify the font size using the [Size, px] field.

f.Click icon_text_align_center00095.png to align the text by center.

9.Add a feature block (Fig. 10)

Fig. 10 Adding a feature block

scr_adding_features.gif 

a.Drag&drop the “Product list. 3 columns: Image + Text + Button” block from the Content Library.

b.Delete unneeded elements.

c.Replace the default text in the columns with your text.

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

Fig. 11 Adding summary text

scr_adding_feature_text.gif 

11.Click [Save].

As a result, a new template will be created. It will be already optimized for Desktop and mobile (Fig. 12).

Fig. 12 Template on mobile and desktop:

scr_mobile_vs_desktop.gif 

See also

Block

Sections

Navbar

Image

Text

Button

Personalize email templates with macros

Did you find this information useful?

How can we improve it?