In WordPress, you can go to yourdomain.com/wp-login.php to access the login page of your website. If you have a large website with multiple authors/users, you might want to create a custom login page with your own design to strengthen the brand identity of your website. With Elementor, you can create a custom login page for your WordPress effortlessly — without neither coding nor installing an additional plugin.
Elementor has a widget — the Login widget — that you can use to create a custom login page for your WordPress site. Elementor even offers premade login page templates so that you can create a custom 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 being able to create a custom login page, you need to upgrade your Elementor to the pro version if you haven’t done so. Read this Elementor Free vs Elementor Pro article to learn more about the differences between Elementor Free and Elementor Pro.
If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.
1. Creating a custom login page from a template
As mentioned earlier, Elementor offers premade templates to allow you to create a custom login page in no time. To use one, first, create a new page (Pages -> Add New) and edit it with Elementor.
On the Elementor editor, click the folder icon to open the templates library.
Search for a custom login page template. You can use the search box to ease your job. Once you found the template you like, hover your mouse over it and click the INSERT button.
Wait a moment until Elementor is done loading the template. Once the template is loaded, you can click the PUBLISH to publish it.
That’s it.
To view the page, you can click the three-line icon on the top-left corner on the left panel and select View Page.
2. Creating a custom login page from scratch
If you have your own design concept of the custom login page, you can also create the custom login page from scratch. To get started, create a new page and edit it with Elementor. On the Elementor editor, add a new section by clicking the plus icon. You can select a column structure according to the design concept you want to create.
Once your section is ready, add the Login widget by dragging it from left panel to the canvas area.
Go to the Content tab on the left panel to set the basic options. There are 3 option blocks you can open:
1. Form Fields
You can open this block to enable/disable the label and set the input size.
2. Button
You can open this block to set the button text, button size, and button alignment.
3. Additional Options
You can open this block to enable/disable the elements on your login page such as the lost your password link and the remember me option. Since you want to create a login page, enable the Redirect After Login option and paste the WordPress dashboard URL (yourdomain.com/wp-admin) on the available field. You can also enable the Redirect After Logout option if you want to.
You can enable the Custom Label option if you want to use custom labels and custom placeholders on your login form.
Once done setting the basic options, go to the Style tab to style up the login form. There are 5 styling option blocks you can open:
1. Form
You can open this block to set the space between rows, the color of the links and the color of the links hover.
2. Label
You can only see this block if you enable the form label. You can open this block to set the spacing between form labels, text color, and typography (font family, font size, font style, and so on).
3. Fields
You can open this block to set the color of the text fields, typography (font family, font size, font style, and so on), field background, field border color, field border width, and field border radius.
4. Button
You can open this block to style up the login button. You can set such things as the button text color, hover text color, typography, button background color, border radius, and button text padding.
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 text color and typography of the message.
Once done styling up the Login widget, you can style up other widgets on your page. Once done editing the page, publish/update your page and you have successfully created the custom page.
One crucial thing to note. After creating the custom login page above, don’t delete the wp-login.php file on your WordPress site. Your WordPress site still needs this file to handle the login process.
8 thoughts on “How to Create a Custom Login Page in WordPress Using Elementor”
Hi,
Is it possible to create a member login page. We would like to have a public website but also have a webpage restricted only to members who have a login. Is this a possibility using WP or Elementor? I am also hoping to build a calendar, so members could view upcoming events etc. If you have any tips that would be helpful.
Rolando, did you receive a reply regarding your question? I have the same one about how to set up a webpage/section of a site restricted only to members who have a login.
It is possible to achieve it but you will have to use other tools such as jetengine by cocroblock with it you will be able to do it.
Hi Ricky,
Have you finished the article? The Elementor Pro comes with a Login widget which you can add to your custom login page. It’s not necessary to install an additional add-on to create a custom login page using Elementor Pro, including JetEngine
I have created custom login page with elementor, and giving it a slug called secure-login. And I set up custom URL login to mysite.com/secure-login with plugin. But I cannot access mysite.com/secure-login (in log out condition) it always redirect to 404 page.
Hi, What about registration page? With Elementor…
Hi Mike. You can read our article here for registration page with Elementor https://www.wppagebuilders.com/create-user-registration-page-elementor/
Thank you guys…
Interesting! Do you have a tuto to create lost password page too?