Table of Contents
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.
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 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.
Looking for fresh content?
By entering your email, you agree to receive Elementor emails, including marketing emails,
and agree to our Terms & Conditions and Privacy Policy.
