Set up a content 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.

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.

  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. There will be no visible differentce for the email recipients. We recommend adding any reusable content as separate blocks and saving them to the Block Library for later.

Create a content block 

To add a block to a template, drag the Block () element from the element grid to the working area (Fig. 1).

There are several ways you can select a block in the working area:

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

• 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. 3).

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

• : change block position. Drag the block up or down to reorder the blocks in the template.

• : copy the block. A copy block will appear directly under the original block.

• : remove the block from the template. This will permanently remove any blocks that have not been saved in the block library. Deleting a block from the template will not delete it from the block library.

• : save the block in the Block Library. Creatio will prompt you to enter the name under which the block will be saved.

Set up a content block 

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. 5) includes the following properties:

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. 6). Unlike the Block element, you can align the banner background image.

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

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

Section 

A section (Fig. 9) 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.

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

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.

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

Column layout on desktop and mobile 

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

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

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. buttons will appear between columns (Fig. 15).

   Fig. 15 Link columns

   

2. Click the (Fig. 15) 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. 16).

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.

Anchors 

The Content Designer lets you use anchors. This enables the audience to navigate through larger emails easier.

Add an anchor 

1. Select template text to use as an anchor.
2. Click on the text toolbar → Web link. This opens a window.
3. Enter the anchor name in the URL field on the Link info tab. For example, “webinars.”
4. Open the Advanced tab → specify the anchor ID in the id field. For example, “webinars.”
5. Click OK.
6. Click on the text toolbar. This opens a window.
7. Delete the “href” attribute of the anchor link together with the attribute value. For example, delete “href="http://webinars"” entirely.
8. Click Save.

Link an anchor 

1. Create an anchor. Learn more: Add an anchor.
2. Select template text to link to the anchor.
3. Click on the text toolbar → Web link. This opens a window.
4. Select “Link to anchor in the text” in the Link Type field.
5. Click OK.
6. Click on the text toolbar. This opens a window.
7. Add the anchor ID to the “href” attribute after the #. For example, “href="#webinars".”
8. Click Save.

As a result, users will be able to click the link to scroll the email to the anchor.