See changes in the live preview

Login Designer Pro is the paid edition of Login Designer for customizing the WordPress login page. Its visual editor shows a live preview, while the available controls change with the element you select. Pro includes Login Designer's available customization capabilities, with added animation, typography choices, and login URL settings.

Start with a template

Choose a predefined template, then add a logo above the login form. Set the logo URL, width, height, and position. Template backgrounds can use an image or a color. Image controls set left, right, or center positioning, tile repetition, and auto-adjust, cover, or contain sizing.

For the form background, upload multiple images and choose fade-in, slide-right, or slide-left animation. Set the animation speed and duration with the available controls.

Adjust the form and its text

Style the form wrapper by setting its background color, radius, shadow and shadow opacity, horizontal and vertical padding, transparency, and width. Customize input fields as part of the form's display. Username and Password labels can be changed and styled with font, size, spacing, and color options.

Set messages for an empty password field or an invalid username or password. Other controls set the badge's text color, logo color, and position. For below-form elements such as Lost Your Password and Back to, adjust the font, size, color, and position, or enable and disable them.

Choose Pro styling options

• Set an initial-load animation for the form, animate the logo, and choose a form-submission animation.
• Add Google Fonts for labels and fields.
• Rename the login page in the URL.
• Use Google reCAPTCHA V2 or V3 on the login form.
• Import or export Login Designer settings.

Published designs are responsive and compatible with web browsers and mobile devices, adapting the customized login page to common screen sizes.

Open the editor and publish

Install Login Designer Pro in WordPress administration. Open the editor from Appearance > Login Designer in the Dashboard or from the Login Designer section of the Customizer. Choose a template, select an element, and adjust its context-specific settings while checking the live preview. Configure the Pro options and publish when the styling is ready.