Divi: How to create a popup login form

Would you like to create a online form popup login in Divi with login / logout buttons?

The creation of a online form login popup in Divi can be an effective way to improve your site's design and login/logout user experience. 

The idea is to create a online form login that displays in a pop-up every time the user clicks a login button in the page header. 

This is more convenient than redirecting the user to a custom login page.

In this tutorial, we will create a pop-up login form with custom login and logout buttons in Divi. 

Using the Divi Login module and a few Button modules, we will create a seamless popup login experience on the front-end by allowing users to login and logout without being redirected to another page.

Let's start!

Preview

Here's a quick look at the design we'll be creating in this tutorial.

Notice how the login button and the logout buttons change respectively. And, once the user logs in, they stay on the current page. 

Additionally, the pop-up login form displays different "warning" content each time the user attempts to log out.

What you need to get started

While you can add this pop-up login form and custom login/logout buttons to any custom header, we'll use a pre-made header to speed up the process and get the design started quickly.

Import the "Crowdfunding Layout Pack" header template into the Divi builder

To get started, download Divi Crowdfunding Layout Pack Header and Footer for free . To do this, go to the blog post .

Then enter your email to download the zip file.

After that, unzip the file so it is ready to import.

To import the file into the theme editor, follow these steps:

1. Go to Divi > Theme Builder.
2. Click on the portability icon.
3. In the Portability pop-up window, select the import tab.
4. Choose the previously downloaded unzipped file to import.
5. Click on Import Divi Theme Builder templates.
6. Click the edit icon to edit the imported header.

Creating the popup login form in Divi

Part 1: Creating Login and Logout Buttons

Once in the Global Header Layout Editor, open the layer view so that you can easily see all the elements.

In the top row of the header section, delete the module Social media follow next to the Login button in column 3.

Read also: Divi: Comparison of the different types of gradients

Creating the login button

To create our login button, open the Button module settings in column 3 of the top row.

Update the following items under the design tab:

• Button Icon: lock icon (see screenshot)
• Button Icon Placement: Right
• Only Show Icon On Hover for Button : NO
• Padding: 0,5em(Top and Bottom), 2em(Left), 0,7em(Right)

Under the tab Advanced, assign the button two custom CSS classes as follows:

• CSS Class: et-toggle-popup et-popup-login-button

Creation of the logout button

To create our logout button, duplicate the existing login button in column 3.

To help distinguish the two buttons, you can update the label of each respectively. Next, open the Duplicate Button module settings in column 3.

Change the button text to read "Logout".

Update the following items under the design tab:

• Button Icon: unlock icon (see screenshot)

Under the tab Advanced, update the CSS Classes button as follows:

• CSS Class: et-toggle-popup et-popup-logout-button

The first class will remain the same but the second class will be different.

Part 2: Creating the Popup Section

Once the buttons are done, we are ready to create the popup section that will serve as our popup containing the forms connection.

Below the header section, add a new regular section.

Then insert a one-column row inside the section.

Section settings

Before updating the row, open the section settings.

Under the tab Content, give the section a white background color:

• Background: #ffffff

Under the tab Design, update the following:

• Width: 100%
• Max Width: 800px(Desktop), 80%(Tablet), 100%(Phone)
• Section Alignment: Center
• Height: auto(Desktop and Tablet), 100%(Phone)
• Max Height: 100%
• Padding: 0px(Top and Bottom)

• Rounded Corners: 10px
• Box Shadow: see screenshot
• Box Shadow Vertical Position: 0px
• Blur Strength: 100pixels
• Spread Strength: 50px

Under the tab Advanced, update the following:

Add a custom CSS class.

• CSS Class: et-popup-login

Add a custom CSS snippet to the main element:

overscroll-behavior: contain;

Update the Visibility and Position options.

• Horizontal Overflow: Hidden
• Vertical Overflow: auto
• Position: Fixed
• Location: Center Center
• Z Index: 999999

Line settings

With the section settings in place, open the line settings and update the following design settings:

• Use Custom Gutter Width: YES
• Gutter Width: 1
• Width: 100%
• Max Width: 100%
• Padding: 0px(Top), 5vh(Bottom)

Part 3: Creating the close popup icon

To create the popup close icon that will close/hide the popup on click, we are going to use a Blurb module.

Add a new Blurb module to the row.

Open the module setting and delete the title and body text.

Then add the icon as follows:

• Use Icon: YES
• Icon: "x" icon (see screenshot)

Under the tab Design, update the following:

• Icon Color: #004e43
• Image/Icon Alignment: centered
• Use Icon Font Size: YES
• Icon Font Size: 50px
• Width: 50 pixels
• Alignment module: right
• Height: 50px

Under the tab Advanced, add a CSS class to the Blurb module as follows:

• CSS Class: et-toggle-popup

Part 4: Creating the “Logged In” and “Logged Out” Login Forms

In order to have different content and design for the login form on login and logout, we will create two different login form modules. 

The first will be the login form which will be displayed each time the user is “logged out”. The second will be the login form which will be displayed each time the user is “logged in”.

Creation of the “Logged Out” form

To create the “Logged Out” login form, add a new Login module below the Blurb module icon inside the row.

Open the module settings and change the following settings:

Content tab

• Redirect To The Current Page: YES
• Use Background Color: NO

Design tab

• Fields Background Color: rgba(0,78,67,0.05)
• Field Focus Background Color: rgba (0,78,67,0,15)
• Text Alignment: Centered
• Text Color: Dark

• Title Font: Poppins
• Title Font Weight: semi-bold
• Text Color: #000000
• Title Line Height: 1,3 em
• Body Font: Work Sans

To update the button styles, copy the button styles from the login button we created to the third column in the row of the Header section.

Then paste the button styles into the button options group in the connection settings under the Design tab.

Next, update the button styles for the login form as follows:

• Button
  • Text Color: #ffffff
  • Background: #004e43
  • Background (Hover): #00683c
  • Border Width: 0 pixels
  • Padding: 15px (Top and Bottom)

Next, update the sizing options as follows:

• Width: 100%
• Max Width: 80%(Desktop), 90%(Tablet), 95%(Phone)
• Alignment Module: Center

Advanced tab

Under the tab Advanced, update the CSS class and custom CSS as follows:

• CSS Class: et-logged-out-form

Custom CSS for connection description:

width: 100% !important;
float: none !important;

Custom CSS for the login form:

width: 100% !important;
padding: 0px !important;

This will ensure that the Login module spans the full row/column width, even on desktop.

Creation of the “Logged In” form

Now that the "Logged Out" version of the form is complete, we need to create the "Logged In" version which will have different content and styling to maximize the user experience.

To create the "Logged Out" login form, duplicate the existing login form.

Next, update the label for each of the forms connection respectively.

Open the duplicate settings (the “Logged In” form) and add the site title as dynamic content to the title of the login form module.

Then open the site title dynamic content settings and update the before and after content as follows:

• Before: “You are attempting to log out of Elegant Themes”
• After: “. " 

This will create a nice dynamic notification for users trying to log out of the site.

Then add the following H3 header to the body:

<h3>Are you sure?</h3>

If you've ever seen the content of the Login module when logged in, you know that there is a personalized message that includes a personalized "logout" link. To make this link look like a button, we need to customize the font/text settings of the body link as follows:

• Select the tab Link under option BodyText.
• Link Font: Work Sans
• Link Font Weight: Semi Bold
• Font Style: TT
• Link Text Alignment: centered
• Link Text Color: #ffffff

NOTE: You will not be able to preview these results until you view the form on a live page.

Under the tab Advanced, update the CSS class and custom CSS as follows:

• CSS Class: et-logged-in-form

Custom CSS for the login form:

display:none;

Part 5: Add custom code

To add the custom CSS and JQuery needed for the pop-up login form functionality, create a new Code module under the last Login module.

CSS

Open the Code module settings and paste the following CSS into the code box, making sure to wrap the CSS in the necessary style tags.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Note that the CSS uses the “connected” class which is built into WordPress in order to hide/show the corresponding login/logout buttons and the forms “Logged In”/”Logged Out” login message each time the user is logged in or logged out.

JQuery

Below the end style tag, paste the following JQuery making sure to wrap the code in the necessary script tags.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

This snippet simply toggles the popup section whenever the user clicks on one of the three items with the class " and-toggle-popup (the login and logout buttons plus the presentation icon "x").

See also: Divi: How to Use Background Mask Settings and Pattern Transform Options

It is done !

Don't forget to save the changes you made to the template in the theme builder. Once saved, you can view the results on a live page.

Final result

Here are the final results on computer, tablet and phone.

Notice how the login button and the logout button change. And, once the user logs in, the user stays on the current page. 

Additionally, the popup login form displays different "warning" content each time the user attempts to log out.

Download DIVI now!!!

Conclusion.

Hopefully creating this popup login form and custom login/logout buttons will give you some insight into how to use Divi's login form creatively. 

Feel free to adjust the design and content of each login form (or buttons) to create a unique login experience on your own website.

We also hope that this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.

You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.

Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...