Classic - Menu Block
- Rebecca Kornblum
Analytics
Description
A menu is a graphical element that can be added to an email to visually drive users to website links. Menus can use a combination of icons and links that allow users to access information directly without navigating through different pages. Organizing links into a compact menu saves space and adds an aesthetic element to the email.
Menus in emails are particularly useful for:
Highlighting key products, services, or information to recipients
Helping increase user engagement and encouraging clicks to a website
This article covers the following information about menu blocks:
- 1 Adding a Menu Block to an Email
- 2 Menu Types
- 2.1 Links
- 2.2 Icons
- 2.3 Icon and Links
- 3 Links Menu Type Options
- 3.1 Separator
- 3.2 Text Style
- 3.3 Links Color
- 3.4 Padding
- 3.5 Add an Anchor Link
- 3.6 Item 1, Item 2, and Item 3
- 3.7 Add Menu Item
- 4 Icons Menu Type Options
- 4.1 Size
- 4.2 Separator
- 4.3 Padding
- 4.4 Item 1, Item 2, and Item 3
- 4.5 Add Menu Item
- 5 Icons and Links Menu Type Options
- 5.1 Align
- 5.2 Size
- 5.3 Separator
- 5.4 Text Style
- 5.5 Links Color
- 5.6 Padding
- 5.7 Item 1, Item 2, and Item 3
- 5.8 Add Menu Item
- 6 Learn More About Blocks
- 7 More About the Content Library
Adding a Menu Block to an Email
Drag and drop the menu block into one of the structured containers.
Click on one of the items in the structured container.
The menu block options window opens.
Select a menu type. Users may choose Links, Icons, or Icons and Links.
Select options for the chosen menu type. See the following sections for details on the menu types and options associated with each one.
The menu block options available change with each menu type.
Menu Types
There are three menu types: Links, Icons, or Icons and Links.
Links
A link is a clickable element that directs the user to another webpage or resource.
Icons
An icon used as a link is a small graphic image that, when clicked, directs the user to a specific webpage or resource.
Icon and Links
The Icons and Links menu block displays a combination of icons or small graphics and a clickable link to direct the user to another webpage or resource.
Links Menu Type Options
This section describes the options available for the Links menu type.
Separator
The separator is a divider that can be used to separate the links.
Style: Use the drop-down menu to select a style for the separator.
Thickness: Use the +/- buttons to select a thickness for the separator.
Color: Click inside the hex code box to open the drop-down menu to select a color for the separator.
Text Style
The Text Style options determine the look of the text for the links.
Font: Select the font type from the drop-down menu.
Size: Select the text size from the drop-down menu.
Bold/Italics: Slide the toggle to the B for bold text and the I for italicized text.
Links Color
The Links Color option determines the color of the links.
Click inside the hex code box to open the drop-down menu to select a color for the link.
Padding
The Padding option sets the amount of space at the top and bottom of the link.
Use the up/down arrows to increase or decrease the amount of padding at the top and bottom of the link.
Add an Anchor Link
Anchor hyperlinks in emails take readers to specific paragraphs within the email.
Item 1, Item 2, and Item 3
Several options may be set for each item.
Delete Icon: Click the Delete icon to remove the link.
Item 1 Text Box: Enter the name of the link.
Link: Enter the URL for the link.
Validate Icon: Click the Validate icon to validate the link.
Links Color: Click inside the hex code box to open the drop-down menu to select a color for the link text.
Background Color of Item: Click inside the hex code box to open the drop-down menu to select a color for the background of the item. The default is set to transparent.
Hide Element: The Hide Element option allows users to hide the text on either the desktop or the mobile application. The default setting is No and the text is not hidden.
Click the desktop icon to hide the text on the desktop application.
Click the mobile device icon to hide the text on the mobile application.
Add Menu Item
The Add Menu Item button allows users to add item sections to the menu.
Click the Add menu item button to add additional item sections.
Icons Menu Type Options
This section describes the options available for the Icons menu type.
Size
The Size option allows users to use the up/down arrows to increase or decrease the size of the icon height and/or width.
Separator
The separator is a divider that can be used to separate the icons.
Use the +/- buttons to increase/decrease the size of the separator. Click inside the hex code box to open the drop-down menu to select a color for the separator.
Padding
The Padding option sets the amount of space at the top and bottom of an icon.
Use the up/down arrows to increase or decrease the amount of padding at the top and bottom of the icon.
Item 1, Item 2, and Item 3
Several options may be set for each item.
Delete Icon: Click the Delete icon to remove the link.
Item 1 Text Box: Enter the name of the link.
Link: Enter the URL for the link.
Validate Icon: Click the Validate icon to validate the link.
Links Color: Click inside the hex code box to open the drop-down menu to select a color for the link text.
Background Color of Item: Click inside the hex code box to open the drop-down menu to select a color for the background of the item. The default is set to transparent.
Hide Element: The Hide Element option allows users to hide the text on either the desktop or the mobile application. The default setting is No and the text is not hidden.
Click the desktop icon to hide the text on the desktop application.
Click the mobile device icon to hide the text on the mobile application.
Add Menu Item
The Add Menu Item button allows users to add item sections to the menu.
Click the Add menu item button to add additional item sections.
Icons and Links Menu Type Options
This section describes the options available for the Icons and Links menu type.
Align
The Align option allows users to select the alignment (left, center, right) of the menu text and icon.
Left
Center (default option)
Right
Size
The Size option allows users to increase/decrease the size of the icon height and/or width.
Separator
The separator is a divider that can be used to separate the links.
Style: Use the drop-down menu to select a style for the separator.
Thickness: Use the +/- buttons to select a thickness for the separator.
Color: Click inside the hex code box to open the drop-down menu to select a color for the separator.
Text Style
The Text Style options determine the look of the text for the links.
Font: Select the font type from the drop-down menu.
Size: Select the text size from the drop-down menu.
Bold/Italics: Slide the toggle to the B for bold text and the I for italicized text.
Links Color
The Links Color option determines the color of the links.
Click inside the hex code box to open the drop-down menu to select a color for the link.
Padding
The Padding option sets the amount of space at the top and bottom of the link.
Item 1, Item 2, and Item 3
Several options may be set for each item.
Delete Icon: Click the Delete icon to remove the link.
Item 1 Text Box: Enter the name of the link. Add an image (icon) to the menu.
Link: Enter the URL for the link. Link the icon (image) from the menu to a URL.
Validate Icon: Click the Validate icon to validate the link.
Links Color: Click inside the hex code box to open the drop-down menu to select a color for the link text.
Background Color of Item: Click inside the hex code box to open the drop-down menu to select a color for the background of the item. The default is set to transparent.
Hide Element: The Hide Element option allows users to hide the text on either the desktop or the mobile application. The default setting is No and the text is not hidden.
Click the desktop icon to hide the text on the desktop application.
Click the mobile device icon to hide the text on the mobile application.
Add Menu Item
The Add Menu Item button allows users to add item sections to the menu.
Click the Add menu item button to add additional item sections.