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

Last Updated on September 18, 2022 by 22 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

22 Comments

  1. I know this is a bit old this post. Everything works, except the logout when we click the clogout button the the user is redirected again to the default “you are attempting to log out of ….” Do you really want to log out? Is there a way to redirect to the home page?

  2. Hi, the article is very interesting, I managed to configure everything correctly but the result can only be seen on PC, on tablets and smartphones nothing can be seen, what could it depend on? Regards.

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

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

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

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

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

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

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

    • Glad to hear it!

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

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

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

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

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

    • Thanks, Clare! Glad it was helpful.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today