Block controls allow you to select an entire block, edit it, and re-order it amongst the other blocks. This article will provide an overview of the Block Settings menu that allows you to apply formatting to the block itself.
In this article, you will learn:
Add and Move Blocks
Design your emails is easy with these simple block controls.
There are two types of blocks you can add to your email designs:
Block Layouts: Empty block designs that you can add the element of your choice to
Quick Blocks: Predesigned blocks that allow you to quickly design your email
To add a block to your email:
- Click, and drag the block type into your email design
- If adding a Block Layout, you will need to drag and drop an element into each block of the layout
Before you can control an entire block, you first have to ensure that the block itself is selected. Click on the block to select.
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.
Bananatip
Select All: 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.
To select all click on the Select All checkbox found in the upper right-hand corner.
Simply click the icon on the block you would like to delete 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.
Click either the or
icons and the selected block will be swapped with either the block above or the block below it.
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 and Design
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.
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.
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 the spacing between the selected block and the block below it
In each field, the spacing can be done by clicking on the or
icons to increase or decrease the spacing between the blocks.
Bananatip
To adjust the spacing equally, click on the lock icon in between the two blocks. Then, increase or decrease the spacing in either field and the spacing adjustment will be mirrored in the opposite field.
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.
Bananatip
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.