Customizing containers

The “Container” is a category located in the first position of the “Styles” tab in the design pane. Every element, except “Code” has a “Container” category.

A container acts like a box that frames your element. Thanks to it, you can apply a style which will automatically be assigned to the element concerned.

Most customization options are common to all elements with a container. If certain settings are not available, it's because the selected element doesn't allow their application.

The customization options in the “Container” category are divided as follows :

You have two options for setting the width: in pixels or in percentages. To change the unit type, click the arrow next to the value.

Heights should always be set in pixels.

You can set or copy and paste the color code of your choice. Otherwise, click on the square to the right of the field. A pop-in will appear allowing you to select a color, or use an eyedropper (depending on your operating system, this window may be displayed differently).

Set directly the opacity percentage you want. By default, the opacity is set to 100%. The more you decrease this percentage, the more transparent the element becomes.

Click the “Select” button to select a visual from your media library to display it in your container.  You can also directly copy and paste the hosting URL of your visual into the “Source” or “Background Image” field.

Below the “Source” field you also have an “Edit image” button which will allow you to crop your visual.

Set an alternative text here for your visual or video element, for example. This text allows you to display the message you want when the images don’t load. This will improve the accessibility of your email.

Only valid for the button element, here you can define the button label.

To hide an element on a tablet or mobile, simply check the corresponding box.