Sales Creatio, commerce edition
PDF
This documentation is valid for Creatio version 7.16.0. We recommend using the newest version of Creatio documentation.

Block

Content block elements arrange other elements of a template. You need at least one block in your template to be able to add non-block elements. Blocks cannot contain other blocks.

Fig. 1 Sample template layout

scr_template_empty_callouts.png 

Sections and banners

A block has a table-like layout. Blocks can hold two types of “rows”:

  • Sections are multi-column rows. A section can have up to 6 columns. Use sections to arrange most types of content. They are also preferable in general because of their flexibility.

  • Banners are single-column rows. Use banners to insert images that will fill all available space and fit inside the element regardless of the image size. You can align the background image of a banner vertically and horizontally.

Note

As an alternative to using banners, you can specify a background image of an entire block. However, this background image will not stretch or shrink to fit the borders of the block.

By default, a block has one section and no banners. A block must have at least one section or banner. It is not possible to delete the only section or banner of a block.

You can add multiple sections to a single block or add multiple blocks. A template, consisting of a single block with multiple sections will look the same as a template that consists of multiple blocks. We recommend adding any reusable content as separate blocks and saving them to the Block Library for later.

Adding a block

To add a block to a template, drag&drop the [Block] (content_builder_block_view_model_icon.png) element from the element grid onto the working area (Fig. 2).

Fig. 2 Using the content designer

block_use_case.gif 

Unlike other elements, blocks may be tricky to select, since clicking on a block may select one of the elements rather than the block itself. There are two ways to select a block:

  • Click on the right border of the block (Fig. 3).

  • Click any element inside the section or banner, then press [Esc] to go up the navigation tree until the [Block] element is selected.

  • Click any element inside the section or banner, then click “Block” in the breadcrumb navigation in the setup area. Click the leftmost element if “Block” is not yet visible. (Fig. 4).

Fig. 3 Selecting the block by clicking on the right border

selecting_block_by_three_dots_cropped.gif 

Fig. 4 Selecting the block by using the setup area

selecting_block_by_breadcrumbs_cropped.gif 

Block context menu

When a block element is selected, its context menu appears on the right (Fig. 5).

Fig. 5 Block context menu

scr_block_context_menu.png 

  • scr_block_context_menu_move_icon.png - Drag the block up or down to reorder the blocks in the template.

  • scr_block_context_menu_copy_icon.png - Copy the block. A copy block will appear directly under the original block.

  • scr_block_context_menu_remove_icon.png - Remove the block from the template. All changes made to the block will be lost if the block was not saved in the block library.

  • scr_block_context_menu_save_icon.png - Save the block in the Block Library. Creatio will prompt you to enter the name under which the block will be saved.

Block setup area

Use the setup area on the right to configure the [Block] element.

The setup area comprises of three tabs:

  • [Structure] – the default tab available in the Campaign Designer and Process Designer. It is the only tab available when you open the Content Designer from the Process Designer.

  • [Dynamic Content] – this tab is only available in the marketing Content Designer for Marketing Creatio. Use it to set up different variations of a block for different conditions, configured on the [Rules] tab.

  • [Rules] – this tab is only available in the marketing Content Designer for Marketing Creatio. Use it to set up rules that can be used for defining dynamic content.

The [Structure] tab (Fig. 6) includes the following properties:

Fig. 6 Block setup area

scr_content_designer_block_setup_area_steps.png 

Note

Tabs other than the [Structure] tabs are only available in Creatio Marketing and Creatio CRM bundle.

Property

Function

Breadcrumb navigation (1)

Use “breadcrumbs” at the top of the setup area to navigate the parent (template) element

Section constructor

Add, remove, and move the sections and banners of the block.

To access the setup area of a section or banner, click the corresponding item in the section list.

Click [Add section] or [Add banner] to add sections and banners.

Click content_section_item_view_model_remove_icon.png to remove a section or banner (last section or banner cannot be removed).

Background

Set background image and/or color for the entire block. Note that sections and banners can have their own background settings that may cover the background of the block.

Background style settings are disabled by default. Select the checkbox (2) to enable them.

Clear this checkbox to disable all background settings of the current block.

Click content_designer_background_color.png to open the color picker and select the background color.

Click icn_content_designer_background_image.png and enter the URL of the image to display on the background.

Note

If the recipient’s email client fails to load the image, the recipient will see the background color instead.

Banners

A banner is a single-column block “row”. The main purpose of the banner element is to display a background image and some content over it (Fig. 7). Unlike the [Block] element, you can align the banner background image.

Fig. 7 Adding a banner

banner_use_case.gif 

A banner has a fixed height. If it is set to a value that is too large, the banner may not fit the display vertically (Fig. 8).

Fig. 8 600px vs. 320 px banner

scr_banner_600px_vs_320px_on_mobile.png 

The [Banner] setup area comprises of the following setup groups: [Size, px], [Vertical align], [Padding, px], and [Background] (Fig. 9).

Fig. 9 Banner setup area

scr_banner_setup_area.png

Property

Function

Breadcrumb navigation (1)

Use “breadcrumbs” to navigate the parent (block and template) elements.

Size, px

Configure the height of the banner by specifying the [Height] field value.

This value is used to set up the minimum height. If the height of the content of the banner exceeds this value, the banner will stretch vertically.

Vertical align

Align the contents of the banner vertically (top btn_alignment_vertical_top.png, middle btn_alignment_vertical_middle.png, or bottom btn_alignment_vertical_bottom.png).

Padding, px

Specify the distance (in pixels) between the content of the banner and each of its borders.

Padding is specified separately for each side.

Background

Set background image and/or color for the entire banner. Note that elements dropped onto the banner can have their own background settings that may cover the background of the banner.

Background style settings are disabled by default. Select the checkbox (2) to enable them.

Clear this checkbox to disable all background settings of the current banner.

Click content_designer_background_color00002.png to open the color picker and select the background color.

Click content_designer_background_image.png to enter the URL of the image to display on the background.

Note

If the recipient’s email client fails to load the image, the recipient will see the background color instead.

The image will stretch or shrink to fit the banner. We recommend using large or vector images as a background.

Align the background image of the banner vertically (top btn_alignment_vertical_top00003.png, middle btn_alignment_vertical_middle00004.png, or bottom btn_alignment_vertical_bottom00005.png) or horizontally (left btn_alignment_horizontal_left.png, center btn_alignment_horizontal_center.png, or right btn_alignment_horizontal_right.png).

Note

Alignment may produce no visible effect depending on the ratio of the image and the current ratio of the banner.

Sections

A section (Fig. 10) is a multi-column block “row.” This is the default subordinate element of the [Block] element. A section does not have its own background image.

Fig. 10 Adding a section

section_use_case.gif 

The [Section] setup area consists of several groups of settings: [Column constructor], [Padding, px], [Corner radius, px], [Background] and [Borders].

Fig. 11 Section setup area

scr_section_setup_area.png

Property

Function

Breadcrumb navigation (1)

Use “breadcrumbs” at the top of the setup area to navigate the parent (block and template) elements.

Column constructor

Add and delete columns, specify their widths, or equalize them and reverse the order of the columns on mobile devices.

To access the setup area of a column, click the corresponding item in the column list.

Click the “%” field and specify a new value to change the width of a column. The width of the next adjacent column will be adjusted.

Note

The minimal column width is 5%.

Click [Add column] to add a column.

Click content_section_item_view_model_remove_icon00006.png to remove a column (the last column cannot be removed).

Select the [Equalize] checkbox to ensure that all of the columns have equivalent width. If you add or remove a column when this checkbox is selected, the widths of all columns will be adjusted to match each other.

Select the [Reverse the order of columns on mobile] checkbox to reverse the order of ungrouped columns and column groups on mobile devices. Read more in the “Column layout on desktop and mobile” article.

As a result, the last column or column group will be at the top, and the first column or column group at the bottom.

Note

This does not affect columns displayed side-by-side on mobile, i.e., columns inside column groups.

Padding, px

Specify the distance (in pixels) between the content of the section and each of its borders.

Padding is specified separately for each side.

Corner radius, px

Specify the circular radius of the corners of the section. Leave this property empty for sharp corners. This defines the circular radius of all 4 corners of an element.

Note

Use the [HTML] element with inline or embedded CSS styles to specify elliptical corners and other exotic effects.

Background

Set background color for the entire section. Note that elements dropped onto the section can have their own background settings that may cover the background of the section.

Background style settings are disabled by default. Select the checkbox (2) to enable them.

Clear this checkbox to disable all background settings of the current section.

Click content_designer_background_color00007.png to open the color picker and select the background color.

Borders

Configure the borders of the section.

Border style settings are disabled by default. Select the checkbox (3) to enable them.

Click border_color_picker.png to open the color picker and select the border color.

Update the icon_border_width.png field to specify the border width. To hide the border, select the “Hidden” border style.

Use the drop-down menu (4) to select the border style. When the border settings are enabled, the “Solid” style is selected by default. The following styles are available:

  • border_style_hidden.png – Hidden

Note

The border is defined but invisible. The border width effectively equals 0.

  • border_style_dotted.png – Dotted

  • border_style_dashed.png – Dashed

  • border_style_solid.png – Solid

  • border_style_double.png – Double

  • border_style_groove.png – Groove

  • border_style_ridge.png – Ridge

  • border_style_inset.png – Inset

  • border_style_outset.png – Outset

Select or clear [Top], [Bottom], [Left] and [Right] checkboxes to enable or disable the border style settings for the corresponding border.

Columns

A column is a structural element used to arrange other elements in a section. To add a column, click the [Add column] button the [Section] element setup area.

Fig. 12 Working with columns

column_use_case_slow.gif 

The [Column] setup area comprises of the following setup groups: [Vertical align], [Padding, px], [Corner radius, px], [Background] and [Borders].

Fig. 13 Column setup area

scr_column_setup_area.png

Property

Function

Breadcrumb navigation (1)

Use “breadcrumbs” at the top of the setup area to navigate the parent (section, block, and template) elements

Vertical align

Align the contents of the column vertically (top btn_alignment_vertical_top00008.png, middle btn_alignment_vertical_middle00009.png, or bottom btn_alignment_vertical_bottom00010.png).

Attention

Vertical align for a column on mobile may not work in case when the vertical alignment of the highest column in the section is not set to middle.

Padding, px

Specify the distance (in pixels) between the content of the column and each of its borders.

Padding is specified separately for each side.

Corner radius, px

Specify the circular radius of the corners of the column. Leave this property empty for sharp corners. This defines the circular radius of all 4 corners of an element.

Note

Use the [HTML] element with inline or embedded CSS styles to specify elliptical corners and other exotic effects.

Background

Set background color for the entire column. Note that elements dropped onto the column can have their own background settings that may cover the background of the column.

Background style settings are disabled by default. Select the checkbox (2) to enable them.

Clear this checkbox to disable all background settings of the current column.

Click content_designer_background_color00011.png to open the color picker and select the background color.

Borders

Configure the borders of the column.

Border style settings are disabled by default. Select the checkbox (3) to enable them.

Click border_color_picker00012.png to open the color picker and select the border color.

Update the icon_border_width00013.png field to specify the border width. To hide the border, select the “Hidden” border style.

Use the dropdown menu (4) to select the border style. When the border settings are enabled, the “Solid” style is selected by default. The following styles are available:

  • border_style_hidden00014.png – Hidden

Note

The border is defined but invisible. The border width effectively equals 0.

  • border_style_dotted00015.png – Dotted

  • border_style_dashed00016.png – Dashed

  • border_style_solid00017.png – Solid

  • border_style_double00018.png – Double

  • border_style_groove00019.png – Groove

  • border_style_ridge00020.png – Ridge

  • border_style_inset00021.png – Inset

  • border_style_outset00022.png – Outset

Select or clear [Top], [Bottom], [Left] and [Right] checkboxes to enable or disable the border style settings for the corresponding border.

Column layout on desktop and mobile

On the desktop, the columns will be arranged exactly how they are displayed in the Content Designer (Fig. 14).

Fig. 14 The standard layout of a section with 6 columns

6_columns_standard_layout.png 

On mobile devices, columns are normally not displayed side by side. Instead, they are re-arranged vertically (Fig. 15).

Fig. 15 The mobile layout of a section with 6 columns

6_columns_mobile_layout.png 

You can force columns to display side by side on mobile by grouping them. A column group is a sequence of columns displayed side-by-side on mobile.

To group two adjacent columns:

1.Select the [Section] element using the [Section constructor] of a [Block] element or the breadcrumbs navigation of a column or its child elements. btn_link_content_designer_inactive.png buttons will appear between columns (Fig. 16).

Fig. 16 Linking columns

scr_section_link_columns.png 

2.Click the btn_link_content_designer_inactive00023.png (Fig. 16) button between the columns that you want to group.

If one of the columns is already a part of a column group, the ungrouped column will become part of the column group. If both columns are parts of their respective column groups, both column groups will become one column group.

On mobile, grouped columns display side by side. Use the [Preview] tab at the top of the page to view how your email template displays on mobile.

You can also reverse the order of columns on mobile so that the last column is displayed at the top of the section and the first at the bottom. For example, if you have a two-column header with a logo on the right and a title on the left, a mobile device will normally display the title first and the logo second. However, if the order of columns is reversed, the logo will display on top.

To reverse the order of ungrouped columns and column groups on mobile devices, select the [Reverse the order of columns on mobile] checkbox (Fig. 17).

Fig. 17 Reverse on mobile

scr_reverse_on_mobile.png 

Fig. 18 Working with columns

mobile_use_case_slow.gif 

As a result, the last column or column group will be at the top of the section, and the first column or column group at the bottom.

Fig. 19 Normal column order vs. reverse column order

scr_normal_vs_reverse_column_order.png 

Note

This does not affect columns displayed side-by-side on mobile, i.e., columns inside column groups.

Next

Image

Did you find this information useful?

How can we improve it?