Lesson
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.
To keep our examples simple, we often show emails with static content. In real-world use, many emails would have dynamic content imported via Liquid or Connected Content.
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.
The Drag & Drop Editor measures padding in pixels.
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.
Top and bottom column padding will add padding to the very top and bottom of the column. It will not add padding between individual elements within the column.
The Drop content blocks here box will give you a clear sense of how the padding impacts layout. It's easiest to visualize column padding before you’ve added any elements to the row.
The Row Properties view defaults to the leftmost column in the row. If you’re trying to edit multiple columns, make sure to click on each one in turn.
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.
If an element isn’t showing up in exactly the right place, you should check the padding settings on both the column and editor block.
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.
In the following video, learn 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.
By default, the divider block will have the same color as its background. However, you can change the color of your divider by adjusting the Content Properties for that block.
Duplicate and Delete
You can duplicate any row or editor block by clicking on it, and then clicking the duplicate button. 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. Watch the video below to learn how to duplicate and delete items in the editor.
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.
If you leave your email composition by pressing the Done button, your revision history will be reset. You will not be able to go back into the email again and see changes that happened before you pressed the Done button.