In this tutorial we will learn how to use the Divi MadMenu Button element’s Authenticated User Content feature to create header Logout and Account buttons.

Button Authenticated User Content

The Button element’s Authenticated User Content feature allows to display different content for the header buttons depending on whether the user is logged in or logged out.

For example, you can add a Log In button which links to the login page with the authentication form where the user can log in to his account.

And the same button will become a Log Out button when the user is logged in, it will have a logout URL and clicking on this button will log the user out.

Here are some examples of the header buttons with different content for logged in and logged out users:

Create the Logout Button

Let’s use the Button One element to create a Logout button.

The settings for adding the content for logged in users are located in the MadMenu Settings -> Content -> Button One -> Auth tab.

To start using them just click the Enable Button One Authenticated User Content toggle.

The authenticated user content of the button is configured as a Logout button by default.

So, the logout button is created by simply enabling the authenticated user content.

The default button text is Log Out, it has the logout URL (Button One Link Type) and clicking the button will log the user out and redirect to the current page (Button One Logout Redirect).

But all these settings can be changed so that you can create not only a logout button but a button that would link to any other page with(or without) the content restricted to logged in users only.

For example, you can create a button linking to the user account page.

Create the User Account Button

Many websites have a Sign Up button in the header to allow user registration, and this button is hidden from the logged in users (because they already have an account).

Instead, there is an Account (or Profile, etc.) link/button in the header providing the logged in users with an easy access to their account page.

So, let’s use the Button Two element to create a button that will be a Sign Up for logged out users linking to the page with user registration form.

And then transform the same button into an Account button for logged in users linking to the user account page.

The Sign Up button is a normal button, we create it using the button settings in the Content -> Button Two -> Normal tab.

To create the Account button switch to the Content -> Button Two -> Auth tab and add the content that you want to display to logged in users:

1. Enable the authenticated user content
2. Add button text
3. Select the Custom URL link type
4. Add the URL of the user account page
5. Select whether you want the page to open in the same or in a new browser tab

Beware that adding a page URL into the Button Link URL (Auth.) field won’t restrict the contents of that page to logged in users. If you want to restrict the page content to logged in users you should use a special tool for that.

 

The Button Authenticated User Content controls the content visibility of the Divi MadMenu Button element only but not the page it links to.

Enable Logged In Mode In Divi Builder

To make it possible to see both the logged in and logged out user content of the button in Divi Builder use the Enable Logged In Mode setting in the MadMenu Settings -> Content -> Builder Settings section.

Enabling this setting emulates the logged in state and shows the button content you want the logged in users to see.

You can toggle this setting back and forth depending on the button content you are working with at the moment (Normal or Auth).

Logout Buttons Anywhere

The implementation of the Logout button (and not only) with Divi MadMenu is not limited to the site header only.

You can disable all other elements leaving just the Button element enabled and place it (the logout button) anywhere on you page layout like any other Divi module.

I hope you find this feature of Divi MadMenu useful, feel free to leave your thoughts and suggestions in the comments section below, your feedback is greatly appreciated.

View Live Demos & Get Divi MadMenu

Download FREE Divi Sections