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
Blog / Divi Resources / How to Create a Popup Login Form with Login/Logout Buttons in Divi
Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Whiskey Distillery Layout Pack for Divi

Get a Free Whiskey Distillery Layout Pack for Divi

Posted on September 26, 2022 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Whiskey Distillery Layout Pack that’ll help you get your next Whiskey...

View Full Post

19 Comments

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

    • Thanks, Clare! Glad it was helpful.

  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.

    • Thanks, Kelvin. Glad to help!

  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 !
    THHHXXX

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

    • Glad to hear it!

  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?
    Thnx

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

Join To Download Today