Navigation menu layouts
This topic describes:
- how customer support sets up alternative HTML layouts
- how to select alternative layouts in the navigation menu
- how to edit alternative layouts using in-depth knowledge of HTML, CSS, and Velocity
To receive up to five alternative layouts, contact customer support to set up alternative layouts.
To create HTML layouts, set up alternative layouts for mobile and text versions also. If no alternative layouts are saved for those versions, the default layout is used.
In some cases, some text elements will not be in the order that you want.
Selecting a layout
- To select a default layout or up to five alternative layouts, while editing a message in the Template Kit, on the left side of the preview, in the menu bar of the navigation menu, click Navigation Menu.
- Open the Options tab.
- In the Layout area, in the Layout drop-down list, select the layout you want to use.
- Click Apply.
Editing a layout
You can edit alternative layouts but not the default layout.
If you lack knowledge of HTML, CSS, and Velocity, contact customer support to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings.
- In the preview on the left, click Settings.
- Open the Navigation menu tab. Each layout has source text fields for the desktop, mobile, and text versions.
- Edit the source text of the corresponding layout as needed. See Insert content to learn how to retrieve and place the various content items.
Set up alternative layouts for mobile and text versions also. If no alternative layouts are created for these versions, the default layout is used.
- Click Apply.
Inserting content
Access the content of the navigation menu using Velocity variables and format the transferred content using HTML style attributes.
The following Velocity variables are available:
- Status. Information on current item paragraphs
- Present. For using queries that check for the presence of an element
- Value. For issuing the content
Notes for the creation of new layouts
- Font definitions. If you are using an alternative layout variant, font definitions must exist in the HTML you entered. The texts are not formatted by the Template Kit to give you complete freedom in visual design.
- Widths. Specify a fixed width or a width in percent. You should enter a percentage, because this prevents elements from sticking out of the layout.
- Danger of display errors. If you edit the layouts without in-depth knowledge of HTML, serious display errors may occur in your mailings.
Status variables
| Variable | Type | Description |
|---|---|---|
| $separatorDesktopEnabled | Boolean | Contains true if the Show vertical separator lines in desktop version check box in the Content section of the Separator lines tab is selected, otherwise false. |
| $separatorDisplayVerticalInMobileVersion | Boolean | Contains true if the Show vertical separator lines in mobile version check box in the Content section of the Separator lines tab is selected , otherwise false. |
| $separatorDisplayHorizontalInMobileVersion | Boolean | Contains true if the Show horizontal separator lines in mobile version check box in the Content section of the Separator lines tab is selected , otherwise false. |
| $hamburgerMenuEnabled | Boolean | Contains true if the Show check box in the General section of the Hamburger menu tab is selected, otherwise false. |
| $hamburgerMenuIconRounded | Boolean | Contains true if the Rounding contours check box in the Icon section of the Hamburger menu tab is selected, otherwise false. |
| $navigationItemsAmountValue | Integer | Contains the number of menu items that are displayed. Menu items are only displayed if a link and either the text or the image are specified. |
| $navCurrentParagraphId | Integer | Contains the ID of the respective navigation menu paragraph. This ID is particularly important for the mobile version, because the CSS classes use this ID as a suffix in the name. |
Present Variables
| Variable | Type | Description |
|---|---|---|
| $item1TextPresent – $item10TextPresent | Boolean | Contains true if there is content for the Text box in the Menu item # area, otherwise false. |
| $item1LinkUrlPresent – $item10LinkUrlPresent | Boolean | Contains true if there is content for the URL box in the Menu item # area, otherwise false. |
| $item1ImageUrlPresent – $item10ImageUrlPresent | Boolean | Contains true if there is content for the Image box in the Menu item # area, otherwise false. |
| $item1ColorPresent – $item10ColorPresent | Boolean | Contains true if there is content for the Text color box in the Menu item # area, otherwise false. |
| $item1BackgroundColorPresent – $item1BackgroundColorPresen | Boolean | Contains true if there is content for the Background color box in the Menu item # area, otherwise false. |
| $navigationLinkColorPresent | Boolean | Contains true if there is content for the Color box in the general settings under Font settings > Menu items in the navigation menu, otherwise false. |
| $separatorLayoutThicknessPresent | Boolean | Contains true if there is content for the Thickness box under Separator lines > Layout, otherwise false. |
| $separatorLayoutColorPresent | Boolean | Contains true if there is content for the Color box under Separator lines > Layout, otherwise false. |
| $hamburgerMenuMenuBarHeadlinePresent | Boolean | Contains true if there is content for the Heading box under Hamburger menu > Menu bar, otherwise false. |
| $hamburgerMenuMenuBarPaddingPresent | Boolean | Contains true if there is content for the Padding box under Hamburger menu > Menu bar, otherwise false. |
| $hamburgerMenuMenuBarBackgroundColorPresent | Boolean | Contains true if there is content for the Background color box under Hamburger menu > Menu bar, otherwise false. |
| $hamburgerMenuMenuBarImagePresent | Boolean | Contains true if there is content for the Image box under Hamburger menu > Image, otherwise false. |
| $hamburgerMenuMenuBarImageAltTextPresent | Boolean | Contains true if there is content for the Alternative text box under Hamburger menu > Image, otherwise false. |
| $hamburgerMenuMenuBarImageLinkPresent | Boolean | Contains true if there is content for the Link box under Hamburger menu > Image, otherwise false. |
| $hamburgerMenuIconColorPresent | Boolean | Contains true if there is content for the Color box under Hamburger menu > Icon, otherwise false. |
| $hamburgerMenuIconBackgroundColorPresent | Boolean | Contains true if there is content for the Background color box under Hamburger menu > Icon, otherwise false. |
| $navigationBackgroundImageUrlPresent | Boolean | Contains true if there is content for the URL box under Options > Background image, otherwise false. |
| $navigationItemDesktopBackgroundColorPresent | Boolean | Contains true if there is content for the Background color box under Options > Menu items, otherwise false. |
| $navigationItemDesktopWidthPresent | Boolean | Contains true if there is content for the Background color box under Options > Menu items, otherwise false. |
| $navigationItemDesktopPaddingPresent | Boolean | Contains true if there is content for the Padding box under Options > Menu items, otherwise false. |
| $navigationItemMobileWidthPresent | Boolean | Contains true if there is content for the Width box under Options > Menu items (mobile version), otherwise false. |
| $item1DisplayInMobileVersion – $item10DisplayInMobileVersion | Boolean | Contains true if the Show in mobile version check box under General > Menu item # is selected, otherwise false. |
Value-Variables
| Variable | Type | Environment | Description |
|---|---|---|---|
| $item1TextValue – $item10TextValue | String | Desktop, Mobile, Text | Contains the unformatted content of the Text box from the Menu item # area. |
| $item1TextFormattedValue – $item10TextFormattedValue | String | Desktop, Mobile | Contains the formatted content of the Text box from the Menu item # area.
The text is formatted using the font settings from the general settings and the text color from the menu item itself. |
| $item1LinkUrlValue – $item10LinkUrlValue | String | Desktop, Mobile, Text | Contains the unformatted content of the URL box from the Menu item # area. |
| $item1LinkFormattedValue – $item10LinkFormattedValue | String | Desktop, Mobile | Contains the formatted content of the URL box from the Menu item # area.
The text is formatted using the font settings from the general settings and the text color from the menu item itself. Note: If you have uploaded an image for the menu item and positioned it to the right or left of the text, the link is displayed including text and image. |
| $item1ImageUrlValue – $item10ImageUrlValue | String | Desktop, Mobile, Text | Contains the content of the Image box from the Menu item # area. |
| $item1ColorValue – $item10ColorValue | String | Desktop, Mobile | Contains the content of the Text color box from the Menu item # area. |
| $item1BackgroundColorValue – $item10BackgroundColorValue | String | Desktop, Mobile | Contains the content of the Background color box from the Menu item # area. |
| $navigationLinkColorValue | String | Desktop, Mobile | Contains the content of the Color box from the general settings > Font settings tab > Menu Items in the Navigation Menu area. |
| $separatorLayoutThicknessValue | String | Desktop, Mobile | Contains the content of the Thickness box from the Separator lines tab > Layout area. |
| $separatorLayoutColorValue | String | Desktop, Mobile | Contains the content of the Color box from the Separator lines tab > Layout area. |
| $hamburgerMenuMenuBarHeadlineValue | String | Mobile | Contains the unformatted content of the Heading box from the Hamburger menu tab > Menu bar area. |
| $hamburgerMenuMenuBarHeadlineFormattedValue | String | Mobile | Contains the formatted content of the Heading box from the Hamburger menu tab > Menu bar area. |
| $hamburgerMenuMenuBarPaddingValue | String | Mobile | Contains the content of the Padding box from the Hamburger menu tab > Menu bar area. |
| $hamburgerMenuMenuBarBackgroundColorValue | String | Mobile | Contains the content of the Background color box from the Hamburger menu tab > Menu bar area. |
| $hamburgerMenuIconPositionValue | String | Mobile | Contains the content of the Position box from the Hamburger menu tab > Icon area. |
| $hamburgerMenuIconColorValue | String | Mobile | Contains the content of the Color box from the Hamburger menu tab > Icon area. |
| $hamburgerMenuIconBackgroundColorValue | String | Mobile | Contains the content of the Background color box from the Hamburger menu tab > Icon area. |
| $hamburgerMenuMenuBarImageUrlValue | String | Mobile | Contains the content of the Image box from the Hamburger menu tab > Image area. |
| $hamburgerMenuMenuBarImageAltTextValue | String | Mobile | Contains the content of the Alternative text box from the Hamburger menu tab > Image area. |
| $hamburgerMenuMenuBarImageLinkValue | String | Mobile | Contains the content of the Link box from the Hamburger menu tab > Image area. |
| $navigationAlignmentValue | String | Desktop, Mobile | Contains the content of the Alignment box from the Options tab > Layout area. |
| $navigationBackgroundImageUrlValue | String | Desktop, Mobile | Contains the content of the Image box from the Options tab > Background image area. |
| $navigationBackgroundImageAlignmentValue | String | Desktop, Mobile | Contains the content of the Alignment box from the Options tab > Background image area. |
| $navigationBackgroundImageRepeatValue | String | Desktop, Mobile | Contains the content of the Repeat box from the Options tab > Background image area. |
| $navigationItemDesktopBackgroundColorValue | String | Desktop, Mobile | Contains the content of the Background color box from the Options tab > Menu items area. |
| $navigationItemDesktopWidthValue | String | Desktop, Mobile | Contains the content of the Width (desktop version) box from the Options tab > Menu items area. |
| $navigationItemDesktopPaddingValue | String | Desktop, Mobile | Contains the content of the Padding box from the Options tab > Menu items area. |
| $navigationItemDesktopAlignmentValue | String | Desktop, Mobile | Contains the content of the Text alignment box from the Options tab > Menu items area. |
| $navigationItemDesktopVerticalAlignmentValue | String | Desktop, Mobile | Contains the content of the Text position (next to the image) box from the Options tab > Menu items area. |
| $navigationItemImageBehaviorValue | String | Desktop, Mobile | Contains the content of the Image position box from the Options tab > Menu items area. |
| $navigationItemMobileWidthValue | String | Mobile | Contains the content of the Width box from the Options tab > Menu items (mobile version) area. |
| $navigationItemMobileAlignmentValue | String | Mobile | Contains the content of the Text alignment box from the Options tab > Menu items (mobile version) area. |
| $navigationItemMobileVerticalAlignmentValue | String | Mobile | Contains the content of the Text position (next to the image) box from the Options tab > Menu items (mobile version) area. |
Need help?