Menus

The "Menu" element allows you to create a list of clickable links, typically used for navigation within your email, such as in a header or footer. This guide explains how to add, configure, and style menu items.

Adding a Menu Element

1. Access the Content Tab: Ensure the Content tab is selected in the right-hand sidebar.

2. Drag and Drop: Locate the "Menu" element in the sidebar. Click and drag it onto a suitable column or content area within your email canvas.

   Upon dropping, a placeholder menu (often with a single default item like "Menu" or "Page") will appear on the canvas. Its properties will load in the right-hand sidebar under the "Content" tab, specifically for "Menu Items" and "Styles."

Configuring Menu Items

The "Menu Items" section in the sidebar is where you define each link in your menu.

1. Default Item: A new menu usually starts with one default item.

   • Label: This is the visible text for the menu link (e.g., "Page," changed to "Item 1"). Edit this in the "Label" field.

   • Action Type: Select what happens when the item is clicked. Common options:

     • Open Website (Default): Links to an external URL.

     • Send Email: Creates a mailto: link.

     • Call Phone Number: Creates a tel: link.

     • Send SMS: Creates an sms: link.

   • URL/Link Details: Based on the "Action Type," fill in the necessary details:

     • For Open Website: Enter the full URL in the "URL" field and select a "Target" (Same Tab or New Tab).

     • For Send Email: Fill in "Mail To" (email address), "Subject," and "Body."

     • For Call Phone Number: Enter the phone number in the "Phone" field (including country code, e.g., [phone]).

2. Adding New Items:

   • Click the Add New Item button located below the list of current menu items.

   • A new item block will appear in the list, ready for you to configure its "Label," "Action Type," and associated details as described above.

3. Reordering and Deleting Items:

   • Reorder: Look for drag handles (often a set of dots or lines) next to each menu item in the sidebar. Click and drag these to change the order of items.

   • Delete: Each menu item block in the sidebar typically has a delete icon (trash can) to remove it.

Styling the Menu

The "Styles" section in the sidebar controls the overall appearance of the menu.

• Font Family: Select a font for all menu item text (e.g., "Arial Black").

• Font Weight: Choose the font weight (e.g., "Regular," "Bold" - "Bold" selected in video).

• Font Size: Adjust the size of the menu item text in pixels (e.g., default 14px, increased to 20px).

• Letter Spacing: Control the spacing between characters in the menu item text (e.g., 0px).

• Text Colour: Select the default colour for the menu item text using the color picker.

• Link Colour: Select the colour specifically for the linked text. This might override "Text Colour" if the items are links.

• Align: Choose the horizontal alignment of the menu items within their container:

  • Left

  • Center (Default)

  • Right

• Layout:

  • Horizontal (Default): Menu items are arranged in a row.

  • Vertical: Menu items are stacked one below the other. (Video shows switching to "Vertical").

• Separator: If you want a character to separate horizontal menu items, enter it here (e.g., |, -). This is only applicable when "Layout" is "Horizontal."

• Padding (Internal): This padding applies to the space between the menu items or around each item if laid out vertically.

  • All Sides / More Options: Set padding values (e.g., "All Sides" changed from 5px to 15px in the video for vertical layout, adjusting the space between stacked items).

General

Controls the padding around the entire menu block.

• Container Padding:

  • All Sides: Apply equal padding (e.g., default 10px, increased to 21px).

  • More Options: For individual side padding.

Responsive Design

Manage visibility on different devices.

• Hide on Desktop: Toggle on to hide the menu on desktops.