Introducing Elementor’s WordPress Login Widget

Elementor introduces a new Login widget for WordPress, making it easy to add login forms to any page on WordPress, and design it however way you choose.

In Elementor, we like to do things differently, and this is why we are introducing a new way to visually design your login forms. You will love it.

Introducing Login widget

Whenever you create a site which has the options for users to log in, you want those users to have a consistent user experience when browsing your site, including when they log in. This consistent experience involves having a login forms with the same design, the same colors, typography, forms, buttons and so on.

Elementor’s login widget lets you easily add login forms to any page, and fully customize every part of it: the fields, the button, the messages and the frame.

When to use the Login widget on WordPress

There are many situations where the login widget comes in handy.

Some interesting ideas for using the login widget can be:

Maintenance mode pages – The recently added free feature of Elementor maintenance mode feature is very handy, but it get even better for pro users, since they can also add login forms to their maintenance mode page. This way you can display the maintenance mode page to your visitors, but still allow them to access the under construction or coming soon site by logging in to their account.

Sidebar login forms – The login form doesn’t have to be the only element in the page. You can save your login widget as a global widget, and then quickly embed it in sidebars throughout your site. This way your visitor will have a quick access to login to your site.

Video background login page – Video background helps create a unique page design, and adding them to login pages can make for a nice touch.

Holiday / Sale – If you have seasonal sales, holidays or current announcements, you can incorporate them in the design of the login page to get your message across.

Membership sites – If you have a membership site, you can create a login page that includes the pricing model of the site. This way unregistered users can choose to sign up and pay for membership right from the login page.

Change login fields

The new widget lets you hide or show the labels of the login form fields. These are the labels for: ‘Username or Email Address’ and ‘Password’. You also have control over the size of the input fields. 

Customize button and messages

For the login form button, you get options to change the button text, size, and alignment.

Additional options include showing or hiding the ‘Lost your password?’, ‘Remember Me’ and ‘Logged in Message’, as well as customizing the username and password label and placeholder text.

Login form layout and style

With the login widget, changing the style and layout of the login form is easy.

The Rows Gap option lets you change the space between the form elements.

You can also customize the Links and links hover Colors. The links here are referring to the login form messages, like the ‘lost the password’ message link.

You have the option to control the space between the label and the field and change the label text color and typography.

In the fields tab, you can change the field’s text color, typography, background color, border color, border width and border radius.

Finally, the button options include changing the normal and hover button settings. These include text color, typography, background color, border type, border radius and text padding.

Redirect after login

If you want your visitors to be redirected to a specific page after they log in, you can switch on ‘Redirect After Login’ and add any URL from your website. After your users log in, they will be automatically redirected to that page.

An example of when you would use this redirect is on a maintenance mode page. After your users log into your site on the maintenance mode page, you will be able to redirect them to their dashboard.

Additional options for the login form

In the advanced tab, you will have further customization options, including the ability to add your own custom image or color background and border for the login form.

library 3 templates - login

3 gorgeous Pro login page templates

If you are not a professional web designer, getting started with a pre-designed template can help produce better-designed results.

We’ve added 3 beautiful login page templates, that come pre-built with a designed login form. Open your Elementor editor and go into the template library in order to try out and customize these 3 templates.


Elementor’s Login widget for WordPress offers a much more user-friendly option to customize login pages in WordPress. You can use this feature to create creative and unique login pages, in order to give your visitor a consistent experience when browsing through your website.

The Login widget is a specific type of Elementor form. If you would like to create a different form, I suggest you check out our tutorial regarding the form widget, including the recent release of form integrations.

Created a nice login page? Don’t be shy and send it our way via the comments below.

If you still haven’t upgraded to Pro and you’re curious, check out Elementor Pro and take your WordPress site to the next level.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Liked This Article?

We have a lot more where that came from! Join 1,353,229 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


95 Responses

        1. There are already over the board free features, I think. And a custom loggin form can surely be a paid feature. Thanks for your great work!

  1. Hello, Ben Pines, again you come and surprise! It seems a lie on my part, but last week I researched this and formed a budget for a client, where I would use a plugin for login page … the client closed the request and today you send this news exclusively to me … That’s right, you really like me … Happiness is not enough! I am extremely pleased and proud of Elementor Pro.

    I do not know how to speak English. I use google translator.

  2. Thanks Ben and Team! This is a great addition to Elementor Pro and I’ll definitely be using this a lot.

  3. Ben, a very useful feature to accompany this new widget would be to also provide custom slug/permalink overrides for the login/register and pwd reset urls (like how you override siteurl with the Maintenance Mode feature) so we can redirect the default pages to our Elementor versions or a way for us to use and apply our Elementor login designs to the default urls for these features. Thx

  4. seeking this option for while. Finally elementor has just lunched it and i found it very helpful. but how you will add this feature file upload in forms.

  5. This is awesome! I now get to display our 4 latest special offers on a custom made login page, without an extra plugin!

    Some feedback, just be helpful:

    – Unnecessary space before field “Username or …”
    – Missing icon settings for button (like Form Widget)
    – Missing way to change text of fields (like Form Widget)
    – Actually, all options from the Form Widget are welcome here 🙂

    Also, if you want to make your Elementor made login form default, use this tutorial:

    Maybe something like this can be incorporated in Elementor Pro in some future (checkbox to activate this code, filling in the slug of the general login page created?).

    Thank you for this one guys, much appreciated!!

  6. Hi, Ben! I am a PRO client, I have not yet been able to set up my website, but I am happy on all the progress I see.

    One question: How is the introduction and submission of forms data safe globally?

    What integrated security does this new add-on have?

    In the case of pop-up windows with the back page without http is just safe?..

    Thanks Ben.

  7. You must have been reading my mind! I was just this week wondering how to achieve a login/sign-up page.
    I love this plugin, not least because you guys are really forward thinking and acting.

  8. Hi, I’m totally happy with Elementor. Is it possible to use without installing a main theme? I feel that I have so much unnecessary code running in the background becauseI have an installed theme. Also, How can I make my Elementor items responsive on a global level. Right now I am spending too much time on each individual item.

    Thank you. This is a great product and I would consider going pro if I can solve the above mentioned issues… 🙂


  9. Buenos días, las novedades que van agregando me parecen acertadas y necesarias. Felicitaciones a todo el equipo. Tienen previsto añadir una herramienta para personalizar un menú?. Saludos

  10. these feature should be nice if included in free version
    -model window to display simple text
    -table builder, not pricing table (well i see someone has build the table builder addon for elementor but this is comparison table not simple table)
    i want simple table like this
    -sortable table

  11. It would be great to have the option available to reassign the login page – ie. to make our own custom login page the default login. This would save the use of additional plugins or custom code.

  12. Hi Ben,

    Is is possible to style the login area of a single “Password Protected” page with the Login Widget? (as distinct from the login area for an entire site in “Maintenance Mode” or “Coming Soon” mode)?

    From the WordPress Dashboard, when you click on Pages> then click the page name, so you are taken to the “Edit Page” screen, in the right sidebar there is a heading “Publish.” Under this heading is “Visibility.” If I click the “Edit” link next to “Visibility,” I can choose “Password Protected.”

    The page is then password protected, but the styling is bare, so I’m wondering if the Login Widget can be used to style this login area?

  13. I may be missing something but I can’t get the redirect to work. When I log in with the contributor or author account it takes me straight to the wp-admin dashboard. I was using it as a way for people to see behind the maintenance mode page and don’t want them accessing the backend. Any suggestions?

  14. This will be truly great if Ajax functionality can be added, so it can be used as a frontend login for registered visitors/members (not admin).

  15. Been using elementor pro for almost a month. And thank you for the features. Where can we ask a feature regarding navmenu? Like a different navmenu for loggedin users and loggedout users. Thanks.

  16. I have a few digital courses in my site (and will have many more soon…)
    Is it possible that customers will sign in via the login form, after they payed for the course, and will be able to get in only to the courses they paid for (with the same password)?

  17. I have paid membership pro, however, I just discovered that none of the pages I built with Elementor can be locked unless I revert the pages back to word-press then they look a mess. How can I lock pages with Elementor. I would hate to have to go back and redo all that work using a app that works with my membership lock features. If I make the pages private then no one can access them. In a nutshell, I need to lock certain membership pages that I built with the app. I had no idea they weren’t locking until today. Totally stressed, how can I fix this?

  18. Ok Ben. I will. I love the page designs and ease of use; if I can lock my membership content that would be a home run for me, so I’ll reach out to support.

  19. Hi! Great feature! Is it possible to redirect different user to different pages?

    I want to use such a login page for my clients so they can see their projects details (invoices, overview pf project completion, etc.). The idea would be for each client to be redirected to the page specifically built for them.

  20. And would need to not show login or user logged in box after the form was used on a page…doesn’t seem that is possible yet. Can we know an expected date?

  21. Nice feature, however the password reset link still points to the default wordpress reset password form (wp-login.php/?action=lostpassword). Would be nice if “lost password” link could be set to point to the same url with ?action=lostpassword query added to it and a lost password form would also be included in the widget. Any chance this will be the case in a future update? Thanks.

  22. Hi,
    Great Widget but as a use my site en France, i would like to know if it’s possibile to change the labels “USERNAME” and “PASSWORD”

  23. Hi Ben!

    I am looking to set up a universal login for my Elementor Landing Page. It is currently only letting me use my WordPress username/password that I am obviously not going to provide to my list.
    Where am I able to do this?

      1. Hi Matan, I tried this and when I tested it, it took the “new user” profile to the backend of my WordPress site. I’m trying to make it so the “new user” will never see the backend and upon logging in will only see the actual site. Thanks!

  24. I figured out my own problem. Support was helpful and revealed how I could create login pages, but it was still not redirecting to the payment page and it was sort of confusing to the users. I’ve since discovered how to lock Elementor pages behind memberships plugins. Copy paste this link, and if anyone else has this same problem the will find the answer here. feel free to share this video with anyone else or anywhere if you want. It was my biggest issue with Elementor, now I’m completely happy 🙂

  25. How traslate to spanish, word like “recovery password” or “Remember me”.
    I have WP in spanish but this word not traslated.

  26. the plugin is great, but for security I also use google captcha when logging in. Can this field be added? Currently if I try to login through this widget I am redirected to main wordpress login page, where I can “check” google captcha

  27. Hi,

    I just created a login form.
    One problem:

    when user typed in wrong password, they will get redirect to wordpress default login page with error message.

    I want to stay on the “elementor created login page” and the error should display on there.

    How can I do that?

      1. Great widget but same problem for me in terms of incorrect passwords, I also want to control password resets without getting a native WP page. Any suggestions or future plans?

  28. Is it possible with the Login widget to control pages for the public and pages for members (where login is acquired)?
    I have the pro version.
    Keep up the good work with Elementor 🙂

  29. Hi Ben,
    The widget is cool, in terms of setting styles in the form of authorization, and with the new features the popup manager is simply not a replaceable thing.
    But I would like to see in the widget the ability to include required fields, it would prevent the user from being redirected if data is entered incorrectly on the standard WordPress authorization page. This is the least I would like to see in the near future.
    In the future, I hope you will make an Ajax form, with password recovery and a registration form.
    I ❤ Elementor.

  30. Hi, im using pro version with login widget on popup modal.
    If user write the wrong password or user name it redirect the user to the regular login page.
    Is it possible to let him stay in the popup modal? Thanks

      1. This fallback to the default WP login page renders the login widget absolutely useless. Is there anything on the roadmap to address this elephant in the room? How did nobody think about it before releasing the widget? It’s like basics…

  31. Hi,
    Great information. Summing up all the points in a few lines. Great job. I would like to recommend a plugin that I found for login forms at makewebbetter. It just a recommendation. Thanks

  32. Even with correct login information it redirects to default WordPress login page. I have tried it on multiple sites (with and without membership plugins2Member running) and have the same issue. Why is this happening?

    1. I forgot to mention that the default WordPress login page gives the message “Invalid username or incorrect password!” when the Elementor Login Widget redirects to it. Then using the same credentials the redirect does not work and I land on the WordPress Dashboard.

  33. Hi, very nice feature! I love it…BUT…(;-)) is there a way to change the fixed texts like “remember me” and “forgot password”. I would need that in a different language?!? Thanks in advance!

  34. The problem is when the users enters an incorrect password the page redirects to the default WordPress log in screen. Apart from that it’s really good.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 1,353,229 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.