A Menu Element is a set of buttons or links on a page that helps you quickly navigate the page (site menu).

In this element's toolbar there are three tabs: General, Menu Items, Advanced.

General

General Settings - In General Settings you can change devices using Display on screen to select the device type you wish to display the menu. This allows you to tailor the page based on which device is used to access the page.

Padding - You can change the indentation of the text within the menu. This function is used if the menu items are inside the frame and you need to move them away from the frame borders.

Menu Settings - In this section you can install:

  • Distribution - This is how the menu will be spread across the page. Choose from the list: stretch, to the beginning, to the end, to the center, equal space between, equal space around. Menu items will be distributed within the menu field according to the selected option.
  • Menu Background - You can set the background for the menu as a whole.
  • Items Background - You can choose a background for menu items.
  • Space between - Adjust the distance between menu items. Note: This is not available if you set the distribution as "equal space between".
  • Collapse Menu - You can minimize the menu to a button. Select from the list: do not collapse, collapse only on mobile, always.
  • Button Lines Color -  If you selected the Collapse Menu option then you can set the color of the lines inside the button.
  • Button Background - Set the background for the Menu button.

Menu Items

This contains the settings for the menu items as a whole. If you select each item separately, then a new panel with settings will be opened for it.

Menu Actions - Here you can change the sequence of buttons in the menu by dragging them to the desired order. If you click the Arrow icon then you are redirected to the individual menu item's settings. This allows you to change the settings for each menu item separately. In the Menu item's settings you can customize the Click Action link, which is where you want the visitor to be redirected to upon clicking the menu item, set the background color, text, font, alignment, and add secondary text.

Items Main Text - In this section, you can edit all menu items at the same time: set the alignment, change the font, color, padding, etc. Edits made here will affect the overall menu style across all your menus. 

Advanced

Border - You can set and customize a partial or full border around the entire menu: set the frame style (solid, dotted, dashed, double, inset, outset), and set the thickness and color of the frame. 

Round  Corners - You can set and customize rounded corners for the menu. Rounding can also be configured from different sides in different ways: only from one corner or from two.

Shadow - Create a shadow for the menu and change the color, size and blur. 

Text Shadow - Create a shadow for the text in the menu, and set the color, size and blur.

Conditional Show - This function will hide or show the selected item from the visitor. For example: if you want to show a special offer to a new user and then hide this offer from then on, you would turn on Conditional Show. Select "Show" if you want to show the item, or "Hide" if you want to hide it from the visitor. Then select the condition: first visit, return visit, the product has a special offer and has already registered.

Menu item settings

If you select one of the individual menu items, a panel with settings for that one menu item opens on the right. This is to edit for that item as opposed the menu as a whole.

General

General Settings - In General Settings you can change devices using Display on screen to select the device type you wish to display the menu. This allows you to tailor the page based on which device is used to access the page.

Click Action - The menu item is an interactive item so you need to set the action that will be taken once the visitor clicks on the item. For example: sends a form, downloads a file, buys a product, etc. You can configure the button as follows:

  • Custom link - The visitor will be redirected to a web page address which you specify in the next field – the Link. Enter in this field the URL address of the page you want to redirect the guest to.
  • Product Link - This sends the visitor to a page inside your Sales Jet funnel. You cannot redirect a visitor to third-party sites. In the Page selection a list of your pages will open. Select the page to which the guest will be redirected.
  • Product File Download Link - By clicking on the button, the visitor will download the file you attach. A list of your products will display for you to select from. If this field is empty, create a file in the Products tab. Read more about creating products in the article "Create a product".
  • Purchase - Will send the visitor to the order payment page. In the box below select from the list the product you want to attach to the purchase (product, service, subscription).
  • Add to Cart - Adds the product to the cart, but does not take the visitor to the payment page. The guest remains on the same page, but the Cart with the product added opens on the right.
  • Show Popup - Will display a pop-up window. Select the popup from the list below. If no popups show in the list you will need to create one under the Popups tab.
  • Scroll to Section - Redirects the visitor to another section on the current web page. For example: the end of the page. Select from the list below the section you want to send the visitor to.

Padding - You can change the indent of text within the menu item. This function is used if the text needs to be moved away from the menu item sides.

Main text - This is the text that is located inside the menu item. In a separate field, you write the text itself. Align its position within the menu item, adjust the padding at the top and bottom. You can set the font style, size, and height.

Secondary text - This is also text inside the menu item, but it is displayed under the primary text, and you can customize it with a different style. The secondary text setting is exactly the same as the primary text setting except that you can choose a different font color for the secondary text.

Advanced

Border - You can set and customize a partial or full border around the entire menu: set the frame style (solid, dotted, dashed, double, inset, outset), and set the thickness and color of the frame. 

Round  Corners - You can set and customize rounded corners for the menu. Rounding can also be configured from different sides in different ways: only from one corner or from two.

Shadow - Create a shadow for the menu and change the color, size and blur. 

Text Shadow - Create a shadow for the text in the menu, and set the color, size and blur.

Conditional Show - This function will hide or show the selected item from the visitor. For example: if you want to show a special offer to a new user and then hide this offer from then on, you would turn on Conditional Show. Select "Show" if you want to show the item, or "Hide" if you want to hide it from the visitor. Then select the condition: first visit, return visit, the product has a special offer and has already registered.