Fine-Tune Your Layout

The Drag & Drop Editor enables you to adjust the following design elements of your layout and track your changes:

• Column Padding
• Editor Block Padding
• Spacer Blocks
• Divider Blocks
• Duplicate and Delete
• Revision History

Learn more about how you can create space and rhythm in your email design by reviewing each of these Drag & Drop Editor features below.

Padding

Padding is transparent space between elements. Padding is the main tool you can use to achieve precise placement of items within a row and column. Padding is applied between the edges of a row’s columns and the elements within those columns.

There are two different levels of padding available. You can set padding at the level of the column and at the level of an editor block. Padding is additive, so both kinds of padding are added together for each editor block.

In all places where you can add padding, you have the option to either have the padding be equal on all sides, or you can press More Options to set padding for each side individually.

Column Padding

You can set the padding around all the elements of a single column in a row. In Row Properties, click on the individual column to set the padding for the entire column.

The Drop content blocks here box will give you a clear sense of how the padding impacts layout. The easiest way to visualize column padding is before you’ve added any elements to the row. But if you’ve already created your content, you can always add a row below the content you’re working on to picture the padding more clearly.

Editor Block Padding

You can also set the padding around a single editor block. When you select an editor block, you will see a rectangle showing you the size of the element. All padding is relative to this rectangle. The padding for an individual editor block will not change the width of the column, since that’s set in the row’s properties.

Vertical Spacing and Dividers

To control the spacing between individual rows, or elements within a column, you can use spacers and dividers.

Spacer Blocks

Spacer blocks create an invisible space between editor blocks. They occupy the full width of their column. You can only change their height, and they have no padding around them.

If you want to create space between two editor blocks in a single column, it’s easier to use one spacer block instead of adjusting padding on the two elements individually.

Watch the following video to see how you can insert a spacer block to add more space between sections and create a nicer visual balance.

Divider Blocks

Divider blocks create a horizontal bar between editor blocks in a column. The following video show how you can insert a divider to create a distinct section in your email.

You can adjust the color, width, and padding of a divider block. Click through the accordion below to learn more about the changes you can make.

Duplicate and Delete

You can duplicate any row or editor block by clicking on it, and then clicking the duplicate button as shown in the video below. The copy will have the same properties as the original, minus any comments.

To delete any component, click on it and then click the trashcan icon.

Revision History

Each time you change your email, Braze keeps track of it in the changes log, which you can find by clicking the clock icon in the lower left of the middle panel. This button shows a list of all the changes made in the email. You can go back to a specific point in the timeline of changes, or use the undo and redo buttons to move to the previous or next change.