Navigation menu layouts

  • Updated

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

  1. 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.

    Image: Configuration window

  2. Open the Options tab.
  3. In the Layout area, in the Layout drop-down list, select the layout you want to use.

    Image: Layout drop-down list

  4. 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.

  1. In the preview on the left, click Settings.
  2. Open the Navigation menu tab. Each layout has source text fields for the desktop, mobile, and text versions.

    Image: Navigation menu tab

  3. 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.

  4. 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 settingsMenu items in the navigation menu, otherwise false.
$separatorLayoutThicknessPresent Boolean Contains true if there is content for the Thickness box under Separator linesLayout, otherwise false.
$separatorLayoutColorPresent Boolean Contains true if there is content for the Color box under Separator linesLayout, otherwise false.
$hamburgerMenuMenuBarHeadlinePresent Boolean Contains true if there is content for the Heading box under Hamburger menuMenu bar, otherwise false.
$hamburgerMenuMenuBarPaddingPresent Boolean Contains true if there is content for the Padding box under Hamburger menuMenu bar, otherwise false.
$hamburgerMenuMenuBarBackgroundColorPresent Boolean Contains true if there is content for the Background color box under Hamburger menuMenu bar, otherwise false.
$hamburgerMenuMenuBarImagePresent Boolean Contains true if there is content for the Image box under Hamburger menuImage, otherwise false.
$hamburgerMenuMenuBarImageAltTextPresent Boolean Contains true if there is content for the Alternative text box under Hamburger menuImage, otherwise false.
$hamburgerMenuMenuBarImageLinkPresent Boolean Contains true if there is content for the Link box under Hamburger menuImage, otherwise false.
$hamburgerMenuIconColorPresent Boolean Contains true if there is content for the Color box under Hamburger menuIcon, otherwise false.
$hamburgerMenuIconBackgroundColorPresent Boolean Contains true if there is content for the Background color box under Hamburger menuIcon, otherwise false.
$navigationBackgroundImageUrlPresent Boolean Contains true if there is content for the URL box under OptionsBackground image, otherwise false.
$navigationItemDesktopBackgroundColorPresent Boolean Contains true if there is content for the Background color box under OptionsMenu items, otherwise false.
$navigationItemDesktopWidthPresent Boolean Contains true if there is content for the Background color box under OptionsMenu items, otherwise false.
$navigationItemDesktopPaddingPresent Boolean Contains true if there is content for the Padding box under OptionsMenu items, otherwise false.
$navigationItemMobileWidthPresent Boolean Contains true if there is content for the Width box under OptionsMenu items (mobile version), otherwise false.
$item1DisplayInMobileVersion – $item10DisplayInMobileVersion Boolean Contains true if the Show in mobile version check box under GeneralMenu 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.