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

Posted on June 1, 2021 by 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 Anniversary Sale

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

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

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Get a Free Music Venue Layout Pack for Divi

Get a Free Music Venue Layout Pack for Divi

Posted on March 13, 2023 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 Music Venue Layout Pack that’ll help you get your next Music Venue...

View Full Post
Divi Plugin Highlight: Divi MadMenu

Divi Plugin Highlight: Divi MadMenu

Posted on March 12, 2023 in Divi Resources

Divi MadMenu is a third-party module that adds two new modules to the Divi Builder to create interesting and elegant menu designs. The modules include lots of features to add CTAs, create popup login forms, and slide-in menus, and you can create vertical menus. In this post, we’ll take a closer...

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?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

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