Blocks Overview

Blocks allow you to segment your template into different columns. You can add blocks to create multiple columns within a row. The email builder offers various block formations so you can choose the number of columns you want and select how big or small each column is. This allows you to add images, text, buttons, and other elements in a horizontal alignment.

Properties of Blocks

Like other elements, blocks have their own set of properties. For each column within a block, you can customize the background color, choose to add a border or a background image, and more. These are the different sections of properties you can control in blocks.

Columns

The Columns section allows you to control the layout of the row. You can see which block you chose as well as other options you can swap it out for (red). You also have the option to duplicate a block directly underneath the existing one (green) or delete the block (purple).

Column Properties

Column Properties allow you to further customize each column within the row. Note that any change you make in the column properties section only applies to one column at a time or whichever column you’re clicked into. If you want the property settings to apply to all columns, you will need to click between each column and change the properties for each (red).

For each column, you can modify the following:

Background color

You can change the background of the column by adding a background color. When you click the colored box, you can select from a pre-set color or define your own. When you add other elements to the column, like text or a button, they will have the background color that you chose.

Padding

Padding allows you to add spacing between the border of the column and the content inside of it. Adding padding allows you to have custom spacing to separate items more clearly. By default, there is no padding within a column. You can toggle the “More Options” button (green) to customize how much padding is on the top, right, left, and bottom of the content within your column.

Border

Borders allow you to put a divider along one or more of the edges of the column. By default, there are no borders around a column. You can toggle the “More Options” button (purple) to customize which side(s) should have a border, whether it is a solid or dashed border, the thickness, and the color.

Row Properties

Row Properties allow you to format the row that contains the columns. You can format the background color, content background color, or select an image as the background. If you select an image, you will have options to resize and relocate the image.

You can also add padding to the row. By default, there is no padding within a row. You can toggle the “More Options” button (red) to customize how much padding is on the top, right, left, and bottom of the content within your row.

Responsive Design

With responsive design, you can customize your emails to ensure they display properly across different devices. Blocks can be tailored to display perfectly or be hidden so that they don’t display on a certain device. To customize the email for a specific device, click on the desktop icon or mobile icon, or select the Desktop or Mobile tab at the bottom left of the editor body. You can edit different aspects of the block and elements within it based on the device the recipient is using to view the email.

Under the responsive design section, you can hide the block on a desktop or mobile device. When either "Hide on Desktop" or "Hide on Mobile" is toggled on, the block will appear faded within the email template, making it invisible to participants depending on whether they are viewing the email on a desktop or a mobile device.