Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Full Width Menu Module with the Website Page Designer

Full Width Menu Module with the Website Page Designer

Use the Full-width menu module of the page designer to place a menu anywhere on your website. This will help your visitors navigate easily within your pages, creating a good user experience.

This module can only be inserted inside full-width sections. After adding one, click on the gray plus sign and select the fullwidth menu module from the list. If you prefer to find the module automatically, it’s also possible to type its name in the search bar on top.

Define contents

The contents tab is the place to define what menu will appear on your module.

Content

Pick a menu to be used with this module. You can add new menus using the Appearance-> Menus option on the left menu bar. All the new menus added will appear as an option on this module’s dropdown selection.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can style your menu.

Layout

Decide where the sub-menus will open. It’s possible to make them open downwards or upwards.

By default, the menu links will extend only to the bounds of the default content width, but you can enable them to extend the full width of the page.

Links

Select the color of the active link, the dropdown menu text, and the mobile menu text. Pick also the text orientation and if it will appear with a dark or light color, depending on the background.

Dropdown menu

Select the color of the dropdown menu background, menu line, and mobile menu background.

Menu text

Customize the font, color, size, spacing, height, and shadow of the menu text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s show an example of how to display a menu after the header.

On the content settings, we can select the options.

  • Background color: #161616
  • Links text orientation: center
  • Menu font weight: semi bold
  • Menu text color: #ffffff

Here it is:

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?