Create a Login Page with Elementor

TEXT GUIDE

Let’s see how to create a login page with Elementor. This page will be completely different from the WordPress login page and will contain your logo, your background, and your preferred colors.

First, we need to open wp-admin on the dashboard site.

Go to Network Admin > Sites and click Dashboard on the list of sites.

Now just follow these steps:

1- Create a new page

Once you’re in the wp-admin of the dashboard site, go to Pages > Add New.

Then, enter the page title and click Edit with Elementor.

2- Edit the Login Page with Elementor

Now that our page has been created, we need to edit it to add and configure all the elements we need for the login page.

Basically, we need to customize the page background, the title, enter our logo, and enter our login form. Note. You can use any design you want.

• Click Settings.
• Select Elementor Canvas in Page Layout.

• Click Add Template to add a two-column template for your login page.

• Go to the Blocks tab and search for Services.

• Scroll down and select the Image Services block template.

Since we are only using this element as a template, we need to customize it to set our content on it, so we need to customize the text and change the column elements.

• Change the block template title to Login.
• Right-click on the left column settings button.
• Click Delete to remove the Image Box from this column.

• Right-click on the right column settings button.
• Click Delete to remove the Image Box from this column.

Once you’ve deleted the image boxes, you need to use the Elementor‘s draw and drop feature to add new elements.

Use the left panel to search for the following elements and add them to the page:

• Image: Add your logo to the left column.
• Shortcode: Add the following shortcode in the right column: [wp_frontend_admin_login_form]. This shortcode comes with WP Frontend Admin and allows you to display the login form.

After that, open the main section’s settings. We’ll change the section’s background.

To change the section’s background:

• Go to Style in the section’s settings.
• Click Choose Image and select the background image from the media library or from your computer.

Now let’s change the page header color:

• Click Edit Heading.
• Go to Style > Title > Text color, and select the color you want to add to the text.

After that, we can set a soft background for our logo:

• Click Edit Column.
• Go to Style > Background > Color, and select the color and transparency you want.

Then, let’s add a white background to our login form:

• Click Edit Column.
• Go to Style > Background > Color, and select white.

Once you’re done with that, you can click Publish and the login page will be published.

Once we have published our login page, we can view it from another browser in which we are not logged in. It should look just like we set it up.

Now you need to add a “Login” button on the homepage.

1. Go to the wp-admin of the main site of the network.
2. Go to Pages.
3. Edit the Home page with Elementor (the one we created initially).
4. Edit the login button
5. Paste the URL of the login page you just created into the Link field.
6. Click Update to save the changes.

Your login page is ready!

After these simple steps, every time users click the login button, they will be sent to the new login page on the dashboard site and they will remain in the frontend dashboard.