Search
Close this search box.

How to Create a Custom Login Page in WordPress Using Elementor

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Want to turn your WordPress knowledge into revenue? OF COURSE!

8 thoughts on “How to Create a Custom Login Page in WordPress Using Elementor”

  1. 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.

    Reply
    • 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.

      Reply
        • 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

          Reply
  2. 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.

    Reply

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.