Introducing Login Widget: Easily Add & Customize Login Forms

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

elementor-login-widget
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

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.

Conclusion

Elementor’s Login widget offers a much more user-friendly option to customize login page 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 is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

61 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:
    https://trello.com/c/vtR4PnnP

    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… 🙂

    Cheers!

  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
    http://prntscr.com/f9jv2r
    -sortable table
    thanks

  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.

Leave a Reply