A comprehensive guide to using the Elementor editor to improve the navigation menu of foreign trade independent websites

When working on a foreign trade standalone site, we often need to add more menu functionality, which allows the various pages of the site to link more closely to each other. While we usually think of the main navigation menu at the top, some people use in-page anchor text for page jumps. However, this approach may not be as visually or functionally rich as a navigation menu.

In order to provide more flexible design options, Elementor editor introduces a very useful feature - "Nav Menu". This tool allows us to customize the sub-navigation menu according to our design needs.

1. Add the "Nav Menu" function element in Elementor editor to the content editing section.

To add the "Nav Menu" feature to the Elementor editor, you can follow these simple steps:

1. Find the "Nav Menu" element in Elementor's element library.
2. Use the left mouse button to click on the element and hold it down.
3. Drag the mouse to the content editing area of the page. When you see the border line in the editing area change from a gray dotted line to a blue dotted line, release the left mouse button.
4. Thus, the "Nav Menu" element has been successfully added to the content editing area.

2. Set the main function of the "Nav Menu" function element in the Elementor editor.

There are a few key configuration options to understand when setting up submenus in the Elementor editor:

1. Menu::
   • Here you choose the source of content for your submenu. First, create and name your submenus in WordPress under Appearance > Menus. Once you're done, these menus will appear in Elementor's drop-down menu options.
2. Layout::
   • You can choose how the submenu is presented: Horizontal, Vertical or Dropdown.
3. Align::
   • Sets the alignment of the submenu, including left, center, right, or both.
4. Pointer::
   • This refers to the effects that occur when the mouse hovers over menu items such as Underline, Overline, Doubleline, Framed, Background and Text. Choose an effect that suits your style.
5. Animation::
   • Dynamic effects on mouse hover. These dynamic effects cannot be shown in screenshots, you need to try and experience them yourself.
6. Submenu Indicator::
   • This setting is used to indicate the presence of a sub-menu, but the exact change may be less obvious.
7. Breakpoint::
   • Sets the display breakpoint on different devices such as tablets or cell phones. When the screen width is less than this value, a horizontal single-line submenu becomes a multi-line display.
8. Full Width::
   • Determines whether the submenu is displayed in full line width after a breakpoint. Normally, full line width is not recommended.
9. Align::
   • Set the alignment again, either left (Aside) or center (Center).
10. Toggle Button::
    • Set how the submenu is displayed, such as none (None) or Hamburger menu (Hamburger). When the Hamburger menu is selected, an icon is displayed that pops up the submenu when clicked.
11. Toggle Align::
    • Set the position of the toggle button icon, either left, center or right.

3. Style the "Nav Menu" functional element in the Elementor editor.

1. "Dropdown" project configuration

When styling a dropdown menu (Dropdown) in the Elementor editor, you'll be dealing with several different states and some specific style settings. Let's simplify and explain these configurations in layman's terms:

Three state settings for the main menu:

1. Normal (NORMAL): The default display state of the menu when it is not interacted with.
2. Hover state (HOVER): The display state when the mouse is moved over the menu item.
3. State of activity (ACTIVE): The display state of the menu item when it is clicked.

In these three states, you can adjust the following settings:

• Text Color: Change the text color of all menu items in the drop-down menu, including the icon for the collapsed menu.
• Background color (Background): Sets the background color of the menu items. In the "Active" state, you can also specify the background color of the menu when clicked.
• Typography: Adjust the font, size, and other typographic properties of the menu text.

The style of the dropdown menu:

• Horizontal Padding: Sets the space of the menu item from the left side.
• Vertical Padding: Sets the space between the upper and lower boundaries of the menu item on the line it is on.
• Space Between: Sets the distance between the menu items in each row.
• Border Radius: Sets the roundness of the corners of the menu item, the larger the value the more rounded the corners.

Additional configurations for drop-down menus:

• Border Type: Sets the outer border style for the entire dropdown menu.
• Box Shadow: Add a three-dimensional shadow effect to the drop-down menu to make it stand out.
• Divider: Add separators between individual menu items.
• Distance: Sets the distance between menu items.

2. "Toggle Button" project configuration

Configuring the Toggle Button (Toggle Button) for a drop-down menu in the Elementor editor involves a few simple visual settings. This button is usually a hamburger menu icon (three horizontal lines), and you can adjust its appearance to better fit into your site design. Here are the specific configuration options:

1. Color::
   • This setting changes the color of the hamburger menu icon (three horizontal lines).
2. Background Color::
   • This is the background color of the Hamburger Menu icon. Choosing a color can make the icon stand out more or harmonize with the overall style of the site.
3. Size::
   • Resize the hamburger menu icon to harmonize it with your web design and other elements of the user interface.
4. Border Width::
   • Sets the thickness of the icon's outer border. This can help the icon be more visible or blend more subtly into the background.
5. Border Radius::
   • Adjusts how much the corners of the icon borders are rounded. The higher the value, the more rounded the corners will be. For example, a setting of 50 will cause the icon to be completely rounded, giving the appearance of a rounded button.

Conclusion:

Enhance and optimize the navigation menu of your foreign trade standalone site with the Elementor editor. We cover how to add and configure the "Nav Menu" feature, including setting the source, layout and alignment of submenus, as well as customizing the styles on hover and active. In addition, we also discussed how to configure the various visual effects of the drop-down menu, such as background color, border and animation, and how to adjust the size, color and shape of the toggle buttons, to ensure that the navigation menu is not only fully functional, but also visually coordinated with the overall design and style of the website.