WordPress Login Page Customization

The Login page Customizer by WP Adminify was created by using the Customizer API, which is gaining popularity for allowing a live preview of the layout changes. This plugin is easy to install and doesn’t require coding skills. You can change every element on the login form and make it more professional to your audience. Don’t forget to personalize your WordPress login page screen and satisfy your clients. 

If you don’t like reading step by step, here is a video guideline for you.

Login page Templates

The template for login Customizer is a freemium feature. You can access 4 templates in the free version. To get access to another 12 templates, you have to upgrade the plan. 

To view the built-in login page templates, please follow the steps below:

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Templates.
  3. Choose the templates and preview them in Customizer Previewer.
WordPress Custom Login Page Template

Check our video below for instructions on how to implement the login page templates and see them in the Customizer Previewer.

Customize Logo for login page

To make your company’s logo noticeable on the login page, you can use the custom login page module by WP Adminify. It has the option to change login page logo. With this module, you can access the login page customization settings that contain huge possibilities like logo image height, width, and padding, logo type, Link, etc.

To upload the logo image, simply follow these steps:

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Logo
  3. Now enable or disable the “Display Logo?” switcher.
  4. Select your desired logo type and write or upload your logo.
  5. You can easily change your login page logo URL too.

Logo Type & Link: This is the first option you will notice after navigating to the logo area. You have to select your logo type and upload your logo here. Also, there is another option for URL too. You can drive traffic into your desired page by setting up a URL. 

Logo Type and URL for WordPress login page

Title for the Login Page:With Login Page Title you can easily set the page title that is shown on the WordPress login page. (Suitable for those who prefer to index their login page in search engine).

WordPress Login Page title

Title Typography:You can easily grab your desired font from Google font library. Select font style, Transform, Decoration, Size, Line heigh, Letter Spacing, and Color properly.

Logo Style:You can easily customize the width & Height of your logo in different value like percentage, PX, EM, REM, PT. You can define top, right, bottom, left padding individually in PX, EM, or percentage value. With this option you can control the space between your logo and field.

Logo Style for Custom Login page

You can find out how to upload your logo and customize it with the Logo feature in WP Adminify by watching this video.

Background Customization for Login Page

Login Customizer’s background feature will help you change the background of your login page. You can set your favorite color, Image, Gradient, Video, and slideshow as a login page background.

Follow the steps and you are a few clicks away to create an awesome background for the login page.

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Background.

Color & Image for Login Page Background: Default background type is Color / Image. You can set a single color or gradient color for your background. Also under Background color, there is an option to upload images. You can define your image position, repeat property too.

WordPress login page background using color or image

Video for Login Page Background: When you click on the video, you will see “Self Hosted” and “YouTube”. The choice is yours you can upload any video inside your WordPress media or can use any YouTube video URL. There is an option to enable Loop and Poster Image for your video. We recommend you use a Poster Image because the image loads fast before the video. So when someone will visit the login page, they will see the poster image first, then the video will be played automatically.

YouTube and Self Hosted Video for Login page background

Slideshow for the Login Page Background: This is very simple, just click on “Add slider” and select your desired image from the media library.

Slideshow background for login page

Layout setting for WordPress Login Page

This feature will help you to divide your login page into single or double columns. If you select double-column then there will be some new option appear. You have to modify each option to your needs.

Follow the steps to change your login page layout.

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Layout.
Login Customizer Layout

Column Alignment: That’s the first option you will see after selecting double column layout. There is 4 alignment available like left-right, right-left, top-bottom, bottom-top.

Login Customizer Column alignment

Horizontal and Vertical Alignment: It will help you to set your login field’s alignment horizontally. Similar to the horizontal align option, but it will do the alignment vertically.

Horizontal and Vertical Alignment

Column Background: You are free to select background color, Direction, and upload images too. If you upload an image, we recommend you to set proper image position, repeat, size, blend mode value.

Login Customizer column Background

Skew Background for login page: The final option for Layout is skew. It will help you to skewed two-column for a better user interface.

Login Customizer skew background

Login Form Style

Login customizer by WP Adminify allows to customize the login form accordion to your demand. You can change the background, form width&height, Margin , Padding, Border, Box Shadow, Border Radius easily.

To customize the login form of your login page, follow the steps.

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Login Form.
  3. You can see there is a whole range of editing options to customize the login form design.

The login Form feature allows you to customize the design of your login page. This way you can make it more appealing and productive for your customers or members.

Form Background: You can change the background color, set gradient, and upload the image too. If you like to use any pattern to your form background then the image will help you to make it.

login form background image color and gradient

Form Width & Height: Customize the width&height of your form by inputting value on PX, EM, Percentage.

Login form width and height selection

Margin & Padding: These values can be set in PX, EM, Percentage. Also, you can individually set values. For example you can set 10px for top and 20px for right.

Login form margin and padding

Form Border & Border Radius: Set border for top, right, bottom, left on your needs. You can select border style and color too. Perhaps if you need border-radius then you can define the proper border radius value in PX, EM, Percentage.

Login form border and border radius

Box Shadow: Define your box shadow for the full login form. Set your box-shadow color, vertical horizontal position, Blue, Spared value and the box shadow position.

Box shadow for login form

Login Form Fields customization

Using this feature you can change Label text, Placeholder text, Style and margin padding for each field. That can enhance your login form more realistic. You can write anything instead of the default Label and placeholder text.

To access form fields you should follow the step:

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Form Fields.

Label Customization for Login page: There are some default labels like “Username”, “Password”, “Remember Me”, “Log In” etc. If you like to get rid of this default label, you can write down your desired text here.

WordPress login customizer label change

Placeholder Text Customization: Besides the label tab, you will see the “Placeholder” tab. When you click on it, You will see Username and Password placeholder text change field.

WordPress login customizer placeholder change

Style for Form Fields: Style features will allow you to change font size, field height, field font size using range control. There are field background, label, input color options too. Finally, you can define some border and border-radius individually too.

WordPress login customizer style change

Advanced option for Form Fields: Control margin, padding, box-shadow, color, from this advanced field.

WordPress login customizer advance customization

Form Fields Button Customization

It helps you customize Login page button according to your needs. It provides different possibilities to customize and create a beautiful login form button as well.

Below you will find a few steps to change your login button on your WordPress login form:

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Button.
  3. When you click on the Button option, You will see general settings and Button (Normal, Hover, Advanced) customization option.

Here are some features you can add to your login button:

Button Width & Height Control: You can set any specific width and height for your button. We recommend you use the percentage value to get a proper responsive adjustment.

Login page button Width and height

Button Text & Background Color: Customize the login button colors using a color picker. Try to use the opposite color for button text and background, otherwise, it will be hard to read.

Button text and background color

Button Text & Background Hover Color: Same like the button text&background color. But it will visible when someone will hover their mouse on the Button.

Button text and background hover color

Text Shadow for Button: Sometimes text-shadow increases the visibility and makes it professional. For example, if you like to implement a glossy effect, you should use Text Shadow for the button. 

Button text shadow for login page

Font Size for Button text: Here you can adjust the font size of button text using range control.

Font size for login page button text

Check on our video below on how to customize the Login button of your login form with WP Adminify.

Simple Login Customizer Tweaks

There is a option named “Others”. Here we’ve added 4 important tweaks that a lots of users are seeking for.

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Others.
WordPress Login page tweaks

Hide Remember me: The first option is “Hide Remember me?”, if you don’t need “Remember me” inside your login page, you can disable it.

Disable Login Shake: When someone input wrong username or email and password, and click on the login button – you will notice a shake effect. Some people find it annoying, so you can disable login shake from this option.

Disable Lost Password: If you are seeking to disable the lost password option, then just enable the option and it will disable lost password in your login page.

Disable back to website: You may notice there is an option called “Back to website” inside your login page. If you want to hide “Back to website” then you can easily do it using this option.

Google Fonts for Login Customizer Page

Google Fonts for Login Customizer Page is a most requested feature by WP Adminify. It allows you to select a perfect font from Google fonts library. You can customize font style, text-align, text-transform, text decoration, font size, line height, letter spacing, word spacing, and font color from this option.

To access the Google Fonts option follow the steps:

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Google Fonts.
Google Fonts for the WordPress login page

Login Page Error Messages Customization

This is one of the prime features of the WP Adminify Login Customizer module. It allows you to make changes to error messages that might occur during login attempts, registration attempts, or forget attempts. With so many options available, creativity is endless.

To change your login form error messages, follow the instructions below.

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Error Messages.

Username Error Messages Customization: There are three error messages for username. The first one is for Incorrect Username, the Second is for Empty Username, and the third is for Exists Username. You can edit each error message on your demand.

WordPress login page Username error messages

Password Error Messages Customization: Same as the username error message. It has three different error messages for incorrect password, empty password, forget password.

WordPress login page password error message

Email Error Messages Customization: Like the previous one it has also three types of error. These errors are for Invalid Email, Empty Email, and Exists Email.

WordPress login page email error messages

Custom CSS & JS for login page customization

Sometimes it’s not possible to customize using options panel. In that case, you can take help from the Custom CSS&JS field. Using code you can do anything inside your login page.

To add custom CSS & Js to the login page, follow the instructions below.

  1. Log in to your WordPress dashboard
  2. Navigate to WP Adminify>Login Customizer>Custom CSS & JS

The first editor is for CSS and the second is for JS. Make sure to place your code properly.

CSS and JS Editor for WordPress login page customizer

Show Some Love option for Login Page

If you like to provide WP Adminify a credit then you can enable this option. When anyone will try to login your website, they will see “Made with WP Adminify” credit. You can define text color and text position for the credit too.

Show some love option for login customizer

That’s all about the WordPress login page customizer. If you still have any questions feel free to get in touch with us.

January 23, 2023
Login Customizer
Was this article helpful?
WP Adminify V.4.0 is almost here. Fancy a Sneak Peek?