Divi Menu Express [Beta] Documentation

Getting Started With Divi Menu Express

First, install and activate the plugin in WordPress as you would with any other. Once the plugin is installed it is time to alter the labels on your menu.

1. In the WordPress Dashboard go to Appearance and then ‘Menus’.
2. Usually your menu items would look like they do in the example below, however due to the unique way that these menu effects work we must rename them. Failing to rename your menu items will mean that they simply will not animate.



Click on the arrow next to your menu item and note the Navigation Label, we will change this now.

Change the Navigation Label so that it reads like this –<span>LABEL</span><span>LABEL</span>

Replace the ‘LABEL’ parts with your actual menu labels, for example ‘Home’ or ‘About’. The result should look like this –

Each menu item has a ‘before’ and ‘after’ state. So the first label is what will be shown when your user is simply viewing your site, the second label is what your user will see when they interact with your menu item.

For most menus you will want these labels to be the same but you can achieve some fun effects by using different ones too. For example you might want a menu item to read ‘Contact’ by default but read ‘Hi there!’ when a user rolls over it. You can achieve this by using two different spans labels.

3. Once your menu is set up you should access the settings for Divi Menu Express through the ‘Settings’ tab in your WordPress Dashboard.

4. The beta version of the Divi Menu Express plugin is very basic and should be easy to navigate.

The plugin settings are split into three distinct sections:

1) The menu style selector. Choose your menu style from the options available.
2) Menu demonstration. Here you will see an animated representation of how the menu looks by default. When you select a different menu style you will see the representation of it here.
3) Menu options. Each menu style has a set of options so that you can easily customise the look and feel of it. *Please note, descriptions for each option should be clear but if it is not then please let us know by using the feedback form here.

5. Once you have made your selection and changed the options to your liking you can click on ‘Save Changes’ to make the changes immediately live on your site.

6. You can change the menu anytime you like and all changes should be instant (if not then be sure to clear your cache). You can also turn off the custom menus by selecting ‘Off’ in the menu style selector.

Change Log & Bug Fixes

Version 1.2 General Release (in development)

  • Add option to easily adjust menu search icon alignment.

Version 1.1.2 Beta (in development)

  • Fixes to be announced.

Version 1.1.1 Beta

  • Changed default styles for Menu Style 1.
  • Removed ‘Background Colour’ option for Menu Style 1 (not required).
  • Changed default styles for Menu Style 2.

Version 1.1 Beta

  • Beta version released.

Version 1.0 Beta

  • 4 new menu styles added.