How to Create a Popup Login Form with Login/Logout Buttons in Divi

Posted on June 1, 2021 by in Divi Resources | 19 comments

How to Create a Popup Login Form with Login/Logout Buttons in Divi
Premade Layouts

Check Out These Related Posts


  1. Very cool!
    I can see us using this over and over.

  2. I tried importing the JSON file (divi-popup-login-form-header-template) on two of my websites, and it refuses to import on either. I get an error (orange X) each time.

    • Kim,
      Sorry about that. I’m unable to duplicate this error on my end. Maybe our support team can help.

  3. Will this work with woo commerce?

    • Amarnath,
      I looked into this briefly. You could try using the [woocommerce_my_account] shortcode inside a text module and put that inside the popup section. This would display the login form when logged out and the account page content when logged in. However, you may need to customize the code to handle errors when filling out the form. It will redirect to the account page and have duplicate page content (one in the popup section and one on the page).

  4. Such useful content! I love when people like you make learning easier for other people. As a service provider, building this popup login form really going to help me a lot.

  5. Hello… Thank you very much for this video, it’s what I was searching !!
    My problem is : I try to make a third button “registration”. But it’s a mess in my code 😭 !
    Have you any advice? I tried to put the third form in the popup but I don’t know if it’s a good idea. I have to manage the display of the button, of the form …🥵 !
    I put the link of my website, the login device is in the third (last) part.
    Any help or advice would be awesome !

  6. Thanks for sharing this article. This article really helps me to create a pop form on my divi theme website.

  7. I bought the annual plan to access Divi. The resources provided by Divi is very overwhelming but at the same time, it is very user-friendly. Even a person with little experience in WordPress development services can use Divi theme builder easily.

  8. Hello!!
    Thanks to this post I have managed to have a spectacular login on my website, so I can only thank you and for the large amount of resources and information.

    All the best!

  9. This works fantastically, and makes my site so much cooler! Thanks for sharing this at exactly the point in time I was trying to design login/out!

    What would need to change so that on login, the visitor stays on the current page, but on log out, gets redirected to a specific page, i.e., the home page? On my site now, when a member logs off from a profile or account page, they end up seeing garbled content.

    • Never mind! Figured it out! Forgot about the ‘Redirect to current page’ setting in the module.

      Still, thanks for the timely post.

  10. Great tutorial! How do you remove the “Logged in as {username}” from the Log Out button?

  11. Some users are saying the form “times out” and they are unable to fully type in their credentials. Any suggestions on where to start troubleshooting?

  12. Great pop up to login / logout.
    One thing: If I change any page, the form is always on top of the other sections and rows when I work in Divi builder (front builder).
    Is there a workaround for that?

    • Have the same problem :/ Is their any solution?

Join To Download Today

Pin It on Pinterest