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 or 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 WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!