The navigation menu bar
The email menu bar (see image below) is on top of the template.
The main components of the menu bar are:
The element hierarchy shows the elements that define the body of your email. The hierarchy starts with the Body - the biggest element of all newsletters. As you add more elements in the body, which are the child elements, they will be shown on the right in the Element hierarchy, next to the Body.
The element that is selected on the Body, is always in bold shown at the end of the Element hierarchy, and the relationship of parent elements will be shown on the left in the hierarchy. See the example below:
Element menu items
Depending on the element that you select on the body, you might see different menu items related to that element, including:
This shows all the keyboard shortcuts that you can use in the Site Builders as below. This item is only applied to the Body.
Click this to see what your design will look like on the mobile. This item is only applied to the Body.
You cannot edit on Mobile view. To continue editing, you need to switch back to Desktop mode by click the Mobile view icon again when you are in Mobile view.
You can select your email background colour here. You can either choose the colour in the grid or enter the HEX code underneath to apply a custom colour that is not available from the grid.
Alternatively, you can choose to upload an image as a background by choosing the “Image” tab
This is the settings of the selected element, which means the settings menu changes based on the different elements that you select. When you open the Settings menu, the heading of the menu indicates the selected element, which also shows in the Element hierarchy.
Often in Settings, you can adjust the padding and margin depending on the selected element:
Padding is the spacing within an element. It pushes the content inside the element further in or out from the border.
The spacing surrounding an element. It pushes other elements further away or closer to each other.
Adjusting padding or margin
Enter the number value and pixel unit to adjust the spacing in the following order: top, right, bottom, left. For example: you want to adjust the text padding in a box as below
which translates to the visual as below
You can add a block of any element under the selected element. You can choose any element from the block menu such as below
Depending on the element, you can align the content within the element or the element itself in the left, right or middle.
When selecting a text element, you can change the text colour by either choosing the colour in the grid or entering the HEX code to apply a custom colour that is not available from the grid.
This is usually applied for a Block, Image or Button element. You can change the radius, width and colour of the border. See the example of a button border settings below:
Border width: enter a number value to set the thickness of the border in pixels for the selected element. The higher the number, the thicker the border.
Colour: choose the colour of the border of the element, NOT the background colour of the element
Radius: enter a number value to set the roundness of the corners in pixels for the selected element. The higher the number, the rounder the corners.
Click this if you want to change or upload an image
This icon is applied for Text element only. It is useful for attaching a link with a text phrase.
This is NOT applicable for Image element. If you want to attach a link with an image, select the image element, then choose “Settings” icon from the menu navigation bar, you can enter the URL that you want to attach to the image there.
This icon is available when you select a Menu or Social media element in the Body. It contains settings that allow you to set up different menu items, or icons (for social media) and attach the links to each item.
How to edit an element
Hover over the element that you want to edit and click to select it.
Alternatively, you can select the element from the Element Hierarchy, in case you can’t select the desired element when hovering over it.
Once an element is selected, you can select the top menu items to edit the element accordingly.
Or from the black vertical side menu of the selected element (see image below), you can also:
Drag to move or reorder the element within the body
Delete the element
Duplicate the element
How to add an element
To add a block in the Body
Select a block in the Body where you want to add a block underneath.
Then click the “Add” icon which will open a menu of all the elements that you can add.
Select the element you want to add to the body.
If needed, choose the Drag icon from the element’s side menu to move the element to wherever you like.
To add an element within a Block or a Parent element
Select an element within a block where you want to add an element.
Then click the “Add” icon which will open a menu of all the elements that you can add,
Select the element you want to add inside the block.
If needed, choose the Drag icon from the element’s side menu to move the element to where you need it to be.
Below is an example of how you can add social links of a team member, underneath the team role, just like the first team member’s details.