Login Designer Documentation (Free)

  2. Home
  4. Docs
  6. Login Designer Documentation (Free)
  8. Getting Started

Getting Started

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

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.

V2

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

V3

  • 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

Was this article helpful to you? Yes No

How can we help?