This article will show you how to access and use the powerful advanced block controls in the Email Designer. These controls will allow you to select an entire block, edit it, and re-order it amongst the other blocks. This article will also provide an overview into the Block Settings menu that allows you to apply formatting to the block itself.
How to select entire blocks
Before you can control an entire block, you first have to ensure that the block itself is selected.
While this seems rudimentary, most email designs are filled with elements and it can be easy to accidentally click on an element when attempting to select the block itself.
Pro tip: the easiest way to ensure you always click on the block itself is to click on the empty block space on the far right or the far left side of the block. Even with four columns of elements in a design, this space will always be present for you to click and select the block itself.
Once you have selected the block, you can now access the block layout menu that you will see in the upper right corner of the block.
This feature will delete the block in question. Simply click the icon and the block will be deleted. Any blocks below the deleted block will be moved up into its place.
Similar to the swapping elements feature, this feature will swap blocks with the blocks either above or below them.
To use this feature, simply click either the or icons, and the selected block will be swapped with either the block above or the block below it.
Drag / Drop Blocks
Alternative, blocks can be rearranged by dragging and dropping them in different locations. This can be done by clicking on a block once selected, holding the mouse button down and dragging it to the desired location in the email design.
Similar to the elements cloning feature, this feature will clone the block and insert it below the selected block. Cloned blocks will contain all the same elements as the block it was cloned from.
To clone a block, simply click the icon and you will see it appear below the selected block.
Editing Block Settings
Once the block has been selected, the “Block Settings” menu will appear on the right side of the designer. This menu will allow you to edit several settings within your block and within your entire design.
Changing block color
In the “Block Settings” menu, there are two fields that will allow you to change the color of the block.
The “Outer Color” field will allow you to change the color of the area of the block where no elements will reside.
The “Inner Color” field will allow you to change the color of the area of the block where there the elements reside.
For both fields, you can change the colors by selecting a color in the field, by inputting a hex code, or by inputting RGB color values.
Adjusting block spacing
The “Block Spacing” setting will let you adjust the spacing between the selected block and any blocks above or below it.
In the “Block Spacing” setting, there are two fields that can be adjusted. The top field will control the spacing between the selected block and the block above it, while the bottom field will control spacing between the selected block and the block below it.
In each field, the spacing can be done by clicking on the [Icon up arrow] or [icon down arrow] to increase or decrease the spacing between the blocks.
If you want to adjust the spacing equally, this can be done by first clicking on the [lock] icon in between the two blocks. Then, increase or decrease the spacing in either field and you will the spacing adjustment mirrored in the opposite field.
Locking a Block
At the top of the block settings menu, you will see a [lock] icon. This feature will allow you to lock the block and prevent it from being edited until the feature is disabled.
We have found that this is a best practice to use when editing a design with multiple users, as it makes it difficult for users to accidentally change blocks that have already been edited.
This feature will allow you to select all the blocks within your design. From here, you can lock all of the blocks, adjust all of their colors, adjust all of their spacing, and delete them all.