Breadcrumb navigation (1)

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

Image settings

Use the  field to upload an image from your computer or insert the URI of an image.

Note

The [Image] element supports Data URIs. You can insert a base64-encoded image instead of a URL.
Base64-encoded images are part of the HTML code of the message and are not normally filtered by email clients that prevent external images from loading by default.

[Link to open] – specify a URL to use the image as a hyperlink.

[Title] – specify the text to display when the user hovers the mouse pointer over the image.

Note

The title text is often used to describe things unclear at first glance.

[Alternative text] – specify the alternative text. Alternative text is displayed in place of the image when the latter is not available and is supported by some screen readers.

Size, px

Specify the width and height of the image.

By default, both [Width] and [Height] parameters have the “Auto” value. If you leave this parameter unchanged, the image will either stretch or shrink to fit the container.

Change one of the values to resize the image and keep the ratio.

Change both values to force resize the image to the specified height and width disregarding the ratio.

Align

Align the image horizontally (left , center , or right ).

Note

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

Padding, px

Specify the distance (in pixels) between the image and each of the borders of the container.

Padding is specified separately for each side.

Corner radius

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

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

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

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

Note

The background fills the entire container, i.e. if the padding setting values are not set to 0, the background color should be visible around the image. If the image has transparent areas, the background color will be visible through them.

Borders

Configure the borders of the image.

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

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

Update the  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:

• – Hidden

Note

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

• – Dotted

• – Dashed

• – Solid

• – Double

• – Groove

• – Ridge

• – Inset

• – Outset

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