How to Add and Customize a Menu Block in Emails
Content:
- What is the Purpose of a Menu Block and How to Add It?
- How to Create a Menu with Icons, Text, or a Combination?
- How to Upload an Icon for the Menu?
- How to Add a Text and a Link to a Menu Item?
- How to Add More Items to the Menu?
- How to Configure the Position and Size of the Icon in the Menu?
- How to Change the Text Style in the Menu Block?
- How to Set Up a Divider for Menu Items?
- How to Change the Distance Between Menu Items, Align, and Padding?
- How to Hide the Menu Block?
- How to Convert a Menu Block to HTML?
- Mobile Settings for the Menu Block
- Menu Settings for Dark Mode
What is the Purpose of a Menu Block and How to Add It?
A menu block consists of a set of links and/or icons with links. It is most commonly used for:
- Quick navigation from the email to the website. The menu block is placed in the header, and the most important sections of the site are added to it.
- An informational block with useful additional information. For example, for information about delivery, returns, and loyalty programs.
To add a menu block to your email, go to the tools & modules section, navigate to the blocks tab. Click and drag the menu block to the desired location in the email.
How to Create a Menu with Icons, Text, or a Combination?
You can create a menu using text with icons, text only, or icons only. To change the type of menu, click on the menu block and in the right settings panel of the block, select the appropriate menu type.
How to Upload an Icon for the Menu?
If you have chosen the menu type as text with an icon or icon only, you need to upload an image for the icon. To do this, click on the block and in the block settings on the right, click on the image replacement icon and upload an image from your computer.
Alternatively, click on the URL button and upload the image using a link.
To delete an image, click delete button.
How to Add a Text and a Link to a Menu Item?
To add text for the menu and a link, click on the menu block within the email, and in the right panel, under the menu item section, add the link and the text that will be displayed over the link.
How to Add More Items to the Menu?
To add more items to the menu, click on the menu block and in the right panel, scroll to the end of the existing menu items, then click on the 'add menu item' button. This will add an additional menu item.
How to Configure the Position and Size of the Icon in the Menu?
To change the position of the icon relative to the text in the menu block, as well as to modify the size of the icon (set the width in pixels), click on the menu block within the email and in the right settings panel, scroll to the Icons section. There, you can set the location of the icon (right, above, or left of the text) and adjust the width of the icon in pixels, either by moving the slider or entering a numeric value.
How to Change the Text Style in the Menu Block?
To change the text style in the menu block, click on the menu block within the email and in the right settings panel, scroll to the Link Style section. Here, you can set the font, weight (boldness), italicization, size, and color of the text.
How to Set Up a Divider for Menu Items?
You can set a separator (divider) for menu blocks. It appears as a line - solid, dotted, or dashed. By default, a separator is not set for the menu block. To set one, click on the menu block within the email and in the right panel, scroll to the separator section. There, you can assign the style, thickness, and color of the separator.
How to Change the Distance Between Menu Items, Align, and Padding?
You can modify the distance between menu items, the alignment of the menu block, and the space above, below, and on the sides of the menu block. To do this, click on the menu block within the email, and in the right settings panel, find the position section. Here, set the distance between items in pixels, change the alignment, or adjust the padding.
How to Hide the Menu Block?
Menu block can be hidden just like the other blocks. To find out how to hide blocks, read this article.
How to Convert a Menu Block to HTML?
Mobile Settings for the Menu Block
To ensure your email looks perfect in the mobile version, you can edit the mobile version of the menu block. To do this, switch to the mobile version of the editor and click on the menu block. On the right in the settings panel, you will be able to edit:
- the size of the icons
- the size of the text
- the alignment of the menu block
- the size of the gaps between menu items
- the paddings
- make the menu block adaptive for mobile mode
For more details on editing the mobile version of the menu block, refer to this article.
Menu Settings for Dark Mode
For the best appearance of your email in dark mode, we recommend checking and editing the menu block in the dark version of the editor. To do this, switch to the dark version of the editor and click on the menu block in your email. A settings panel will appear on the right where you can change:
Read more about this in this article.