How to Create a Custom WordPress Login Page with Elementor

If you are a WordPress website owner, I am sure you have seen the good old login page that allows you to access the back-end dashboard of the website.

The login page functions perfectly, but in terms of design, it is pretty straightforward. Well, being straightforward is not bad, but if you are a developer and creating websites for clients, I am sure you would like to custom-brand the login page with your own brand’s identity. After all, that will help you in building more authority and deliver good websites to your clients.

In this guide, I will show you how to create a custom WordPress Login Page using Elementor and use it for a website.

Let’s dive in!

Creating a Custom WordPress Login page

To create a custom WordPress login page, we will be using these two plugins:

• Elementor Page Builder
• PowerPack Addon for Elementor

Since we will be using the PowerPack’s Login Form widget, make sure you have the PowerPack addon installed and activated on your website.

Creating a Custom WordPress Login page using Elementor

Since we are creating a new login page, we need to create a new page for the same.

Creating a new page

Step 1: Log in to your WordPress website and go to Pages > Add New. Now give your page a proper name like “My new login page.” Click on the Edit with Elementor button.

We will be creating a custom design. You don’t have to necessarily follow the steps in this section step-by-step. You can create your own unique login page design.

For this tutorial, I am creating a login page that will look like this:

Coming back to our tutorial.

Since I am creating a 2 column layout login page without any headers or footers, let’s disable the headers first.

Step 2: Go to Elementor settings (by clicking on the wheel icon) and set the page layout as Elementor Canvas.

Step 3: Add 2 column layout on the page. Click on the Add Template icon and select the 2 columns layout.

Step 4: Now add the Image widget on the left column and select the image you want to add there. I am just adding the image on the left column.

Let’s move on to the right column.

The right column will have a heading and the login form fields.

Step 5: So, go ahead and add a heading on the right column. Give it the styling changes to make it match the overall design of your website.

Now look for the login form widget. You will see the PowerPack’s Login form widget in the widget list. Make sure you see the ‘PP’ icon at the top right corner of the widget. This means PowerPack’s login form widget.

Step 6: Drag and drop the login form widget on the page. The login form will start showing right away.

Let’s take a look at the customization options you get with the Login Form widget.

Content Tab

Let’s start with the form fields. You can enable or disable the labels and can choose a custom label as well. Further, you can enable the ‘Remember Me’ checkbox using the toggle button.

For the button, you can change the text size, text, and alignment. Further changes to the button can be made from the style tab.

You can also enable the reCAPTCHA authentication on the form. For this, you need to add the API keys in the integration settings of PowerPack.

With PowerPack’s login form widget, you can enable social login on websites such as Google and Facebook. Enabling them is easy as well, using the toggle button. For this, make sure you have the  App ID and App Secret key set up in the integration settings. 

The last subsection in the content tab is Advanced Options. Here you can make the following changes:

Redirect After Login: This option enables you to set up redirects upon successful login.

Redirect after Logout: this redirects the user when they log out of the website. 

Password Reset Link: This option shows the password reset link so users who have lost or forgotten the password can reset their password themselves. You can also change the text of this link.

Register Link: If you want new registrations on your website, you can enable them using this option.

Logged-in Message: If you want to show a custom message for when a user successfully login, you can do it using this option.

Now we have seen all the options available in the content section of the login form widget. You can make the changes you like using the options I explained above.

Style Tab

Now let’s take a look at the styling options you get with the style tab. 

When it comes to styling, you get different styling options for the Form, Fields, Button, and the Logged in Message.

For all the options, you can make numerous styling changes like font, spacing, alignment, color, hover color, typography, borders, padding, etc.

For example, even for the Logged in message option, you can change the font color and the typography.

I went ahead and made a couple of tweaks here and there, such as margins, padding, spacing, font, etc., and after making all those changes, here is what my login form looks like.

Our login form is ready; we just need to add it to our current login page for the website.

Step 7: For this, go to the WordPress admin Dashboard > Elementor > PowerPack > Login/Register. 

Step 8: Select the page from the list of pages and click on the Save Changes button.

Now you are all set!

Go ahead and log out of the website and try logging back into your website by going to the /wp-admin URL. You will see the newly designed page on the login page.

What’s Next?

Do share the designs you made using PowerPack’s user login page, and do drop a comment in the comments section below if you have any questions.

If you do not have PowerPack, you can get it here.

Read Next: How to create a Custom User Registration Page with Elementor