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

Last Updated on September 18, 2022 by 20 Comments

How to Create a Popup Login Form with Login/Logout Buttons in Divi
Blog / Divi Resources / How to Create a Popup Login Form with Login/Logout Buttons in Divi
Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

👋 Download The Free Cyber Monday Store Website Pack!

👋 Download The Free Cyber Monday Store Website Pack!

Posted on December 4, 2023 in General News

This year as a special thank you to everyone who purchases an Elegant Themes Membership during our Cyber Monday Sale (and to our wonderful Lifetime customers!) we’ve created several exclusive gifts from our staff to you. Today we’re highlighting the first Divi Website Pack. This vibrant...

View Full Post


  1. I can understand people needing a Login/Logout, However I have no clue what this has to do with with a Fundraising Campaign? Or why that is even included in a Popup Login Form with Login/Logout Buttons? Fundraising Campaign should be a separate tutorial. I suspect the Fundraising Campaign requirement has made most Divi users shy away from this page.

    It’s obvious that Jason Champagne has abandon his own post, perhaps he just don’t know the answers to the last dozen questions?

  2. 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?

  3. 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?

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

  5. 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.

  6. 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!

  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. Thanks for sharing this article. This article really helps me to create a pop form on my divi theme website.

    • Glad to hear it!

  9. 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 !

  10. 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.

    • Thanks, Kelvin. Glad to help!

  11. 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).

  12. 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.

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

    • Thanks, Clare! Glad it was helpful.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today