Do you want to know how to create a login page with Elementor ?
In WordPress, you can go on yourdomain.com/wp-login.php to go to your website's login page. If you have a large website with multiple authors / users, you might want to create a custom login page with your own design to reinforce your website branding identity.
With Elementor, you can create a custom login page for your WordPress website effortlessly – without coding or installing any additional plugins.
Elementor has a widget – the Login widget – that you can use to create a custom login page. Elementor even offers login page templates so you can create a login page in no time.
How to Create a Custom WordPress Login Page with Elementor
Please note that the Login widget is only available on Elementor Pro. So, before you can create a custom login page, you need to upgrade Elementor to the pro version.
1. How to create a login page from a template
As mentioned before, Elementor offers templates to let you create a personalized login page in no time. To use one, start by creating a new page (Pages -> Add) and modify it with Elementor.
In the Elementor editor, click on the folder icon to open the model library.
Look for a custom login page template. You can use the search box to facilitate your work. Once you find the model you like, hover your mouse over it and click the button INSERT.
Wait a moment until Elementor has finished loading the model. Once the model is loaded, you can click on publish to publish it.
Here.
To view the page, you can click the three-line icon in the upper corner of the left panel and select Show page.
And here is the end result if you chose the same model as us.
2. How to create a custom login page from scratch
If you want to have your own login page design, you can also create your custom login page from scratch. To get started, create a new page and edit it with Elementor.
In the Elementor editor, add a new section by clicking on the plus icon. You can select a column structure based on the design you want to create.
Once your section is ready, add the Connection widget by dragging it from the left panel to the canvas area.
Go to the tab Contents on the left panel to set basic options. There are 3 option blocks you can manipulate:
1.Form Fields
You can open this block to enable / disable the tag and set the input size.
2.Button
You can open this block to set button text, button size, and button alignment.
3.Additional Options
You can open this block to enable / disable elements of your login page such as link Mlost password and the option Remember me. Since you want to create a login page, activate the option Redirect After Login and paste the WordPress dashboard url (yourdomain.com/wp-admin) on the available field. You can also activate the option Redirect After Logout if you wish it.
You can activate the option Custom Label if you want to use custom labels and custom placeholders on your online form connection.
Once definition basic options complete, go to the Style tab to customize the online form connection. There are 5 blocks of style options available:
1.Form
You can open this block to define the space between the lines, the color of the links and the color of the pointing of the links.
2. Labels
You can only see this block if you activate the label of online form. You can open this block to set spacing between form labels, text color, and typography (font family, font size, font style, etc.).
3.Fields
You can open this block to define the color of the text fields, the typography (font family, font size, font style, etc.), the background of the control, the color of the border of the control, the width of the border of the field and the radius of the border of the field.
4.Button
You can open this block to customize the login button. You can set things like button text color, hover text color, typography, button background color, border radius, and button text fill.
5. Logged In Message
You can open this block to customize the message once your users have been logged in. Here is the message:
You can set the text color and the typography of the message.
Once you have finished styling the Login widget, you can customize other widgets on your page. Once the page edit is complete, publish / update your page and you have successfully created the custom login page.
Read also: How to export and import Elementor models
One crucial thing to note. After creating the custom login page, do not delete the file wp-login.php on your WordPress website. Your WordPress site still needs this file to handle the login process.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to create a login page with Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
