Button Settings
To enable the Divi MadMenu Button One and Button Two elements open the module settings modal, go to Content->Elements section and enable the Enable Button One and Enable Button Two.
When the buttons are enabled their Content, Design and Advanced settings all become available in the module settngs pane. Both Button elements have absolutely identical sets of settings, so, here we'll be exploring the settings of the Button One element only.
1. Content Settings
The Button One element's Content settings are located in the Content->Button One section
Each Button element has two sets of content settings allowing to add different content for the logged out and logged in users.
The button content for the logged out users(displayed to everyone) is added using the settings in the tab labeled Normal, while the logged in user content (or authenticated user content) settings are located in the Auth tab (which stays for Authenticated).
Normal Content
The available options for the normal content are the followings:
- Button One Text
- Enable Button One Icon (disabled by default)
- Button One Type
- Button One Link URL
- Button One Link Target
The Button One Text field is used for adding text to the button, it's a responsive setting allowing to add different text(or no text at all) for different devices. For example, you can add text to the button on Desktop but have an icon-only button on the mobile devices by leaving this field empty for the mobile devices.
Enabling the button icon using the Enable Button One Icon setting reveals additional options allowing to select the icon type and the icon, set its placement relatively to the button text and also control responsive visibility of the icon.
By default the Font Icon is selected as the icon type allowing to select any icon from Divi's core font icons set. However, selecting the Image Icon option makes it possible to upload custom image icons both for the Normal and Fixed headers(the Use Fixed Header Image should be enabled) as well as for each device(Desktop, Tablet and Phone)
The Button One Type setting allows to use the button either as a standard button with a URL or make it a popup toggle by selecting the Popup option.
Selecting the URL option allows setting a URL to the button as well as the link target using the Button One Link URL and Button One Link Target settings respectively.
However, selecting the Popup option turns the button into a popup toggle revealing a different set of options for configuring the popup that will be assigned to this button.
Here is a short video guide about how to use the button element popup settings to add a popup to the header: How To Add A Header Popup
Authenticated User Content
The Authenticated User Content allows to show a different button content to the authenticated users.
For example, you can use the same Button element to create a Log In / Log Out button which will show the Log In text when the user is logged out, and you can set this button a URL of the page with the Login form which the logged out user will be redirected to when he/she clicks the Log In button.
And you can configure the same button to become a Log Out button when the user is logged in(which is actually the default setup of the Auth content when enabled).
The Authenticated User Content settings are located in the Auth tab of the Button element Content settings and can be enabled using the Enable Button One Authenticated User Content setting
The Auth set of settings is almost the same as the button Normal content settings, here is a short video demonstration of how to use the Auth settings to create a Log In / Log Out button: How To Create A Header Logout Button
2. Design Settings
The Design settings of the Button One element are located in the Design tab of the module settings.
The Button One Order setting allows to set the Button One element order relative to other enabled header elements, it is located in the Design->Layout:General section. The element order value can be different for each device.
To align the Button One vertically and horizontally and to set its column width use the layout settings in the Design->Layout:Elements->B1 tab (B2 tab contains the Button Two layout settings)
The design options set of the Button One element includes colors, spacing, borders, box shadow and sizing options and are located in the Design->Button One section, and the Text:Button One section contains the text options (for the Button Two it is Text:Button Two section)
3. Advanced Settings
The Button One link relationship and the image icon alt text(if the image icon type is selected) can be set in Advanced->Attributes section using the Button One Relationship and Button One Image Alt Text settings respectively.
To control the responsive visibility of the Button One element use the Show Button One setting in the Advanced->Visibility section.
