Getting Started

Estimated reading: 23 minutes 134 views

Customization Panel

Navigate to the WordPress Admin Dashboard → Appearance → Login Designer.

Or, you can navigate to the WordPress Admin Dashboard → Appearance → Customize.

From the Customization Panel, click on the Login Designer.

Or, you can go to WordPress Admin Front-end → Appearance → Customize → Login Designer.

Now, you are in the Login Designer customization, where you can customize your Login page.

Templates

The user can select a template from the pre-defined templates and customize them.
Click on the Templates.

The Template window will open.
In the section, select a template from the pre-defined templates.

Your selected template will be displayed.

Click on the Publish button to save and publish the customization.

Front-End Impact

Navigate to the WordPress Admin Login.

Change Background

Now, you can change the background of this template.
Hover the background, and you will see the Brush icon button.
Click on the Brush icon button.
The styles window will open.

In the Styles window, the users can Upload a new background, Select an image from the given Galley and change the Color of the background.

Upload Background

In the Styles section, click on the Select Image button.

Select image window will open where you can select the background image from your media library or you can upload a new file.
After uploading a new image, the image will be displayed in the window.

To remove the image, click on the Remove button.
To change the image, click on the Change Image button.
Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Select from Background Gallery

You can select the image for the background from the predefined collection.
Select the image from the Background Gallery section.

Click on the Publish button to save the changes.

Image Position Settings

The user can set the position of the background image using certain options.
Upload or select an image.
Image setting options will appear.

Repeat

Select the repeat option from the drop-down menu.

Tile will make your image repeat in the form of a background banner.

Tile Horizontally will make your image repeat in a single horizontal line.

Tile Vertically will make your image repeat in a single vertical line.

Size

This repeat option will adjust the size of your background image.
Select a size from the Size drop-down.

Cover option will enlarge the image and cover the whole background.

The Contain option will set the image in the centre.
Furthermore, the user can set the position of the image after setting the Size to Contain using the Position settings.

Position

Left Top will set the image to the top left side of the screen.
Left Center will set the image to the center left side of the screen.
Left Bottom will set the image to the bottom left side of the screen.
Right Top will set the image to the top right side of the screen.
Right Center will set the image to the center right side of the screen.
Right Bottom will set the image to the bottom right side of the screen.
Center Top will set the image to the top center side of the screen.
Center Center will set the image to the center of the screen.
Center Bottom will set the image to the bottom center of the screen.

Front-End Impact

Cover.

Contain.

Color

The user can change the color of the background if they do not want to add a background image.
The default color is #f1f1f1.
Click on the Color button.
A color palette will open.
Select your desired color.
Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Add/Change Logo

Add New Logo

To change the logo of the login page, hover over the logo, the Edit button will appear.
Click on the Edit button.

In the Styles panel, click on the Select file to upload a logo.

Select file window will open.
Here you can Upload a new logo or select from your Media Library.
After uploading a new image, the image will be displayed in the window.

To remove the image, click on the Remove button.
To change the image, click on the Change Image button.
Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Add URL

The user can add a URL to the logo, this will redirect the user to the page when the user clicks the logo.
To add a URL, navigate the customization panel and select a page from the URL drop-down menu.

Click on the Publish button to save the changes.

Logo Width

To increase or decrease the width of the logo, hover over the Width.
A slider will appear.
Adjust the slider to change the width of the logo.

To reset the width, click on the reset arrow button.

Click on the Publish button to save the changes.

Logo Height

To increase or decrease the height of the logo, hover over the Height, same as Width.
A slider will appear.
Adjust the slider to change the height of the logo.

To reset the height, click on the reset arrow button.
Click on the Publish button to save the changes.

Logo Position

To adjust the position of the logo, hover over the Position, same as Width.
A slider will appear.
Adjust the slider to change the position of the logo.

To reset the height, click on the reset arrow button.
Click on the Publish button to save the changes.

Front-end Impact

Navigate to the WordPress Admin Login.

Disable Logo

The user can disable the logo.
Click on the Disable Logo toggle button.

Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Login Form

To customize the Login Form, hover over the logo, and the Edit button will appear.
Click on the Edit button.

The Styles window will open in the customization panel.

Background

To change the background of the form, click on the Background color palette in the styles window.
The color palette will open.
Select the desired color from this palette.

Click on the Publish button to save changes.

Radius

To change the corner radius of the form, hover over the Radius in the styles window.
A slider will appear.
Adjust the slider to change the Radius of the corner.

You can reset the radius by clicking the reset button.
Click on the Publish button to save the changes.

Shadow

To change the form shadow, hover over the Shadow in the styles window.
A slider will appear.
Adjust the slider to change the Shadow of the corner.

You can reset the shadow by clicking the reset button.
Click on the Publish button to save the changes.

Shadow Opacity

To change the opacity of the shadow, hover over the Shadow Opacity in the styles window.
A slider will appear.
Adjust the slider to change the shadow opacity.

You can reset the shadow opacity by clicking the reset button.
Click on the Publish button to save the changes.

Horizontal Padding

To adjust the side padding of the form, hover over the Horizontal Padding in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the form padding.

You can reset the side padding by clicking the reset button.
Click on the Publish button to save the changes.

Vertical Padding

To adjust the vertical padding of the form, hover over the Vertical Padding in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the vertical padding of the form.

You can reset the vertical padding by clicking the reset button.
Click on the Publish button to save the changes.

Width

To change the width of the form, hover over the Width in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the width of the form.

You can reset the width by clicking the reset button.
Click on the Publish button to save the changes.

Front-End Impact

Before

After

Transparent

The user can make the form wrapper transparent.
Click on the Transparent toggle button.

You can reset the width by clicking the reset button.
Click on the Publish button to save the changes.

Front-End Impact

Text Label

The user can customize the text labels of the form.
Hover over the Text Label in the form.
The Edit button will appear.
Click on the Edit button.

The Fields window will open in the styles panel.

Username

To change the label of the username text field, go to the Username textbox.
Type in the label you want to display for the username field.
Click on the Publish button to save the changes.

Password

To change the label of the password text field, go to the Password textbox.
Type in the label you want to display for the password field.
Click on the Publish button to save the changes.

Font

To change the font style of the label, click on the Font dropdown.
Select your desired font style from the dropdown menu.
Click on the Publish button to save the changes.

Font Size

To change the font size of the label, hover over the Size in the styles window.
A slider will appear.
Adjust the slider to change the size of the font.

Click on the Publish button to save the changes.

Spacing

To change the spacing between the field and the label, hover over the Spacing in the styles window.
A slider will appear.
Adjust the slider to change the position.

Color

To change the color of the label, click on the Color.
Color palette will open.
Select your desired color.
Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Input Fields

The user can customize the Input Fields of the form.
Hover over the Input Field in the form.
The Edit button will appear.
Click on the Edit button.

The Fields window will open in the styles panel.

Background

The user can change the background color of the input field.
To change the color, click on the Background color.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Border

To change the border width of the input field, hover over the Border in the styles window.
A slider will appear.
Adjust the slider to change the width of the border.

Click on the Publish button to save the changes.
You can reset the border width by clicking the reset button.

Border Color

The user can change the color of the border.
To change the color, click on the Border color.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Margin Bottom

To change the bottom margin of the input field, hover over the Margin Bottom in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the bottom margin of the input field.

Click on the Publish button to save the changes.
You can reset the margin by clicking the reset button.

Padding

To change the horizontal padding of the input field, hover over the Padding in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the horizontal padding of the input field.

Click on the Publish button to save the changes.
You can reset the padding by clicking the reset button.

Padding Top

To change the top padding of the input field, hover over the Padding Top in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the top padding of the input field.

Click on the Publish button to save the changes.
You can reset the top padding by clicking the reset button.

Padding Bottom

To change the top padding of the input field, hover over the Padding Top in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the top padding of the input field.

Click on the Publish button to save the changes.
You can reset the bottom padding by clicking the reset button.

Radius

To change the corner radius of the input field, hover over the Radius in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the corner radius of the input field.

Click on the Publish button to save the changes.
You can reset the radius by clicking the reset button.

Shadow

To change the shadow width of the input field, hover over the Shadow in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the shadow width of the input field.

Click on the Publish button to save the changes.
You can reset the shadow by clicking the reset button.

Shadow Opacity

To change the opacity of the shadow of the input field, hover over the Shadow Opacity in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the shadow opacity of the input field.

Shadow Inset

Shadow Inset allows the user to set the shadow inside or outside of the input field.
Click on the Shadow Inset toggle button.
Toggle on will set the shadow inside the input field.
Toggle off will set the shadow outside the input field.

Click on the Publish button to save the changes.

Front-End Impact

Shadow Inset toggle on.

Shadow Inset toggle off.

Font

To change the font style of the input field, click on the Font dropdown.
Select your desired font style from the dropdown menu.
Click on the Publish button to save the changes.

Size

To change the font size of the input field, hover over the Size in the styles window.
A slider will appear.
Adjust the slider to change the size of the font.

Click on the Publish button to save the changes.
You can reset the shadow by clicking the reset button.

Color

To change the font color of the input field, click on the Color.
Color palette will open.
Select your desired color.

Click on the Publish button to save the changes.

Front-End Impact

Before

After

Checkbox

The user can customize the checkbox.
Hover over the Checkbox in the form.
The Edit button will appear.
Click on the Edit button.

The Checkbox customization window will open in the styles panel.

Size

To change the size of the checkbox, hover over the Size in the styles window.
A slider will appear.
Adjust the slider to change the size of the checkbox.

Click on the Publish button to save the changes.
You can reset the size by clicking the reset button.

Background

The user can change the background color of the checkbox.
To change the color, click on the Background color.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Border

To change the border width of the checkbox, hover over the Border in the styles window.
A slider will appear.
Adjust the slider to change the width of the border.

Click on the Publish button to save the changes.
You can reset the border by clicking the reset button.

Border Color

The user can change the color of the border.
To change the color, click on the Border color.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Radius

To change the corner radius of the checkbox, hover over the Radius in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the corner radius of the checkbox.

Click on the Publish button to save the changes.
You can reset the corner radius by clicking the reset button.

Front-End Impact

Before

After

Remember Me Text

The user can customize the Remember Me text.
Hover over the Remember Me in form.
The Edit button will appear.
Click on the Edit button.

The Remember Me window will open in the styles panel.

Font

To change the font style of the Remember Me text, click on the Font dropdown.
Select your desired font style from the dropdown menu.
Click on the Publish button to save the changes.

Size

To change the font size of the Remember Me text, hover over the Size in the styles window.
A slider will appear.
Adjust the slider to change the size of the font.

Click on the Publish button to save the changes.
You can reset the size by clicking the reset button.

Position

To adjust the position of the Remember Me text, hover over the Position.
A slider will appear.
Adjust the slider to change the position of the text.

Click on the Publish button to save the changes.
You can reset the position by clicking the reset button.

Color

To change the font color of the Remember Me text, click on the Color.
The color palette will open.
Select your desired color.

Click on the Publish button to save the changes.

Hide Remember Me

The user can hide the Remember Me text.
Click on the Hide Remember Me toggle button.
Click on the Publish button to save the changes.

Front-End Impact

Before

After

Login Button

The user can customize the Login button.
Hover over the Login button in the form.
The Edit button will appear.
Click on the Edit button.

The Login buttonwindow will open in the styles panel.

Background

The user can change the background color of the button.
To change the color, click on the Background color.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Border

To change the border width of the button, hover over the Border in the styles window.
A slider will appear.
Adjust the slider to change the width of the border.

Click on the Publish button to save the changes.
You can reset the border by clicking the reset button.

Border Color

The user can change the color of the border.
To change the color, click on the Border color.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Padding

To change the horizontal padding of the button, hover over the Padding in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the horizontal padding of the button.

Click on the Publish button to save the changes.
You can reset the padding by clicking the reset button.

Padding Top

To change the top padding of the button, hover over the Padding Top in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the top padding of the button.

Click on the Publish button to save the changes.
You can reset the top padding by clicking the reset button.

Padding Bottom

To change the top padding of the button, hover over the Padding Top in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the top padding of the button.

Click on the Publish button to save the changes.
You can reset the bottom padding by clicking the reset button.

Radius

To change the corner radius of the button, hover over the Radius in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the corner radius of the button.

Click on the Publish button to save the changes.
You can reset the corner radius by clicking the reset button.

Shadow

To change the shadow width of the button, hover over the Shadow in the styles window.
A slider will appear.
Adjust the slider to increase/decrease the shadow width of the button.

Hover over the Shadow Opacity in the styles window.
A slider will appear.
Adjust the slider to make the shadow visible.
Click on the Publish button to save the changes.
You can reset the shadow by clicking the reset button.

Font

To change the font style of the button, click on the Font dropdown.
Select your desired font style from the dropdown menu.
Click on the Publish button to save the changes.

Size

To change the font size of the button, hover over the Size in the styles window.
A slider will appear.
Adjust the slider to change the size of the font.

Click on the Publish button to save the changes.
You can reset the shadow by clicking the reset button.

Color

To change the font color of the button, click on the Color.
Color palette will open.
Select your desired color.

Click on the Publish button to save the changes.

Front-End Impact

Before

After

Below Form Elements

The user can customize the below form elements, which are Lost Your Password and Back To.
Hover over the Lost Your Password below the form.
The Edit button will appear.
Click on the Edit button.

The Login buttonwindow will open in the styles panel.

Font

To change the font style of the button, click on the Font dropdown.
Select your desired font style from the dropdown menu.
Click on the Publish button to save the changes.

Size

To change the font size of the text, hover over the Size in the styles window.
A slider will appear.
Adjust the slider to change the size of the font.

Click on the Publish button to save the changes.
You can reset the shadow by clicking the reset button.

Color

To change the font color of the text, click on the Color.
Color palette will open.
Select your desired color.

Click on the Publish button to save the changes.

Position

To adjust the position of the text, hover over the Position.
A slider will appear.
Adjust the slider to change the position of the text.

Click on the Publish button to save the changes.
You can reset the shadow by clicking the reset button.

Enable/Disable Lost Password text

The user can enable/disable the Lost Password text.
Click on the toggle button to enable/disable the text.

Click on the Publish button to save the changes.

Enable/Disable Back To text

The user can enable/disable the Back To text.
Click on the toggle button to enable/disable the text.

Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Disable Lost Password and Back To.

Branding

The user can add the Powered by Branding for Login Designer on the Login page.
Click on the Branding in the Login Designer panel.

The Branding window will open in the customization panel.
In the section, click on Enable toggle button.

Click on the Publish button to save the changes.

Text Color

The user can change the color of the Powered by text color.
To change the color, click on the Text.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Logo Color

The user can change the color of the Login Designer Logo color.
To change the color, click on the Logo.
Select your desired color from the color palette.

Click on the Publish button to save the changes.

Position

The user can change the position of the Powered by Login Designer logo.
Select the position from the Position drop-down menu.

Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Login Error Messages

The user can change the login error message.
Click on the Login Error Messages in the Login Designer panel.

The Login Error Messages window will open in the customization panel.

Enter the message in the Enter Username required message field which you want to display when the username input field is empty.
Enter the message in the Enter password required message field which you want to display when the password input field is empty.
Enter the message in the Enter Username invalid message field which you want to display when the user enters an invalid username.
Enter the message in the Enter Password invalid message field which you want to display when the user enters an invalid password.
Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Google Recaptcha

The user can add Google Recaptcha to make the login form more secure.
Click on the Google Recaptcha in the Login Designer panel.

The Google Recaptcha window will open in the customization panel.

Click on the Enable toggle button to enable Google Recaptcha.

There are two versions of Google Recaptcha, V2, and V3.

Select V2 from Google Recaptcha Version.

This enables Google Recaptcha Tickbox.
The admin has to enter Recaptcha API Key and Recaptcha Secret Key.
To get these keys, go to Google Recaptcha Admin Console.

Enter the Label of your reCAPTCHA.
Select reCAPTCHA v2 from the reCAPTCHA type.
Enter the site Domain on which you want to enable reCAPTCHA.
Accept the reCAPTCHA Terms of Services.
Click on the Submit button to save the changes and create a new reCAPTCHA.

Copy SITE KEY and SECRET KEY.
Navigate to WordPress Admin Dashboard → Appearance → Login Designer → Google reCAPTCHA.
Select v2 from the versions.
Paste SITE KEY and SECRET KEY.

Note: v2 reCAPTCHA will only support v2 SITE KEY and SECRET KEY, or it will throw an INVALID KEY Error.

Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Select V3 from Google Recaptcha Version.

This enables Google Recaptcha score.
The admin has to enter Recaptcha API Key and Recaptcha Secret Key.
To get these keys, go to Google Recaptcha Admin Console.

Enter the Label of your reCAPTCHA.
Select reCAPTCHA v3 from the reCAPTCHA type.
Enter the site Domain on which you want to enable reCAPTCHA.
Accept the reCAPTCHA Terms of Services.
Click on the Submit button to save the changes and create a new reCAPTCHA.

After submitting the changes, your reCAPTCHA is created.

Copy SITE KEY and SECRET KEY.
Navigate to WordPress Admin Dashboard → Appearance → Login Designer → Google reCAPTCHA.
Select v3 from the versions.
Paste SITE KEY and SECRET KEY.

Note: v3 reCAPTCHA will only support v3 SITE KEY and SECRET KEY, or it will throw an INVALID KEY Error.

Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Language Switcher

The user can add Language Switcher on the login page.
Click on the Language Switcher in the Login Designer panel.

The Language Switcher window will open in the customization panel.

Click on the Publish button to save the changes.

Front-End Impact

Navigate to the WordPress Admin Login.

Import & Export Settings

The user can export the Login Designer settings and import them to other WordPress Site.
Click on the Import & Export Settings in the Login Designer panel.

The Import & Export Settings window will open in the customization panel.
Click on the Export button.
Copy the code from the window.
Or click on Copy to Clipboard button to copy the code.

Now go to another WordPress Site.
Navigate to WordPress Admin Dashboard → Appearance → Login Designer → Import & Export Settings.
Click on the Import button.

Paste the copied code.
Click on the Save and Apply button.

Your changes will be imported.

Front-End Impact

Before

After

Getting Started

Customization Panel

Templates

Change Background

Text Label

Input Fields

Checkbox

Login Button

Below Form Elements

Branding

Login Error Messages

Google Recaptcha

Language Switcher

Import & Export Settings

Getting Started

CONTENTS

Download Now