Customize Your Password Protected Screen in Real-Time

Take full control of your Password Protected screen’s design with the Real-Time Customizer. With Password Protected Premium, you can instantly preview changes to logos, colors, typography, backgrounds, and more—all directly from the WordPress Customizer without needing to write any code.

Note: All customization changes are previewed instantly in the WordPress Customizer. Your live site will not be affected until you click on Publish. 

1. Logo Styling

Customize your logo to reinforce your brand identity and create a professional first impression on your password-protected screen.

• Upload Your Logo: Upload your preferred logo image to display on the login screen.
• Adjust Logo Size: Adjust the width and height of your logo for the perfect fit.
• Redirect URL: Use the Redirect URL dropdown to choose where users should be directed after logging in.
• Toggle Logo Visibility: A toggle lets you quickly enable or disable the logo.

Note: Disabling the logo hides it from the protected screen without deleting your uploaded image.

2. Label Styling

Personalize the label displayed above the password field to match your website’s branding and improve clarity for your visitors.

• Enter Your Label Text: Enter the desired text for the Label field.
• Pick a Font Style: Click on the dropdown menu and select a font that matches your branding.
• Adjust Font Size: Drag the slider to increase or decrease the text size for better readability.
• Label Position: Fine-tune the label’s position by dragging the position slider. Move it up or down as needed for alignment.
• Customize Label Color: Click on the Color box to open the color picker. Select your desired color or enter a hex code for precision.

3. Field Styling

Customize the appearance of your password input field to create a clean, consistent, and user-friendly login experience.

• Select a Background Color: Click on Select Color to select a background shade that complements your design. For a clean look, opt for a subtle light color!
• Adjust Border Thickness: Use the Border Size slider to create thinner or thicker borders, ideal for a sleek or bold appearance.
• Choose a Border Color: Click the Color picker and select a custom border color to match your brand.
• Tweak Spacing & Alignment: Use the sliders to adjust:
  • Margin Bottom to create space between fields.
  • Padding to control inner spacing for a balanced look.
  • Padding Top & Bottom to fine-tune vertical alignment.
• Round the Edges: Want soft, rounded corners? Adjust the Border Radius slider to curve the edges of your input fields.
• Add a Stylish Shadow: Create depth by increasing the Shadow and Shadow Opacity for a modern effect.
• Try the Inset Shadow Effect: Enable the Shadow Inset toggle for a cool inner-shadow effect inside the fields.

Text Styling

Adjust the typography of the password field to improve readability and ensure it matches the overall design of your protected page.

• Customize Font Style: Click the Font dropdown menu and select the style that best suits your design.
• Adjust Text Size: Use the Font Size slider to make input text larger or smaller for better readability.
• Set a Text Color: Click Select Color to pick a color that contrasts nicely with your background for clear visibility.

4. Button Styling

Style your login button to match your site’s branding and make the call to action more noticeable to visitors.

• Select a Background Color: Click Select Color to pick the perfect button color that complements your theme.
• Set Border Thickness: Use the Border slider to make the button border thin, sleek, bold, and noticeable.
• Pick a Border Color: Click the Select Color button to choose a color for the button border.
• Adjust Button Spacing: Fine-tune button padding using.
  • Padding is used to adjust the overall spacing inside the button.
  • Padding Top & Bottom will be used to customize vertical alignment.
• Round the Button Edges: Use the Border Radius slider to soften and round your button edges, or keep them sharp and rectangular.
• Add a Shadow Effect: Drag the Shadow slider to add depth and make your button pop on the screen.
• Control Shadow Opacity: Adjust the slider to make the shadow subtle or strong.

Text Styling

Customize the button text to improve readability while maintaining a consistent visual appearance.

• Select a Font Style: Choose a font from the dropdown list to match the button text with your overall theme.
• Resize Button Text: Use the Font Size slider to make the text inside the button easier to read.
• Pick a Text Color: Click Select Color to choose a font color that contrasts nicely with your button background.

5. Remember Me Styling

Customize the Remember Me checkbox to ensure it blends seamlessly with your protected page design.

Checkbox Styling

• Adjust Checkbox Size: Use the Size slider to make the checkbox larger or smaller to suit your design needs.
• Select a Background Color: Click Select Color to set a background color that fits your theme.
• Customize Checkbox Border:
  • Use the Border slider to define the thickness of the checkbox border.
  • Click Select Color under Border Color to customize the checkbox outline.
  • Adjust the Border Radius slider to make the checkbox sharp or rounded.

Label Styling

Personalize the “Remember Me” label to improve readability and maintain a consistent typographic style across the page.

• Choose a Font from the dropdown menu to style the text.
• Use the Font Size slider to adjust the text size for better readability.
• Set the Position slider to fine-tune the label’s placement.
• Click Select Color to customize the label’s text color.

6. Form Background Styling

Customize the form container to enhance its appearance, improve readability, and make it stand out against the page background.

• Select a Background Color: Click Select Color and choose the perfect shade to match your design.
• Round the Corners: Drag the Border Radius slider – the higher the value, the rounder the edges.
• Add Some Depth: Move the Shadow slider to create a subtle or dramatic shadow effect. Adjust Shadow Opacity to control how dark or light the shadow appears.
• Fine-tune Spacing:
  • Side Padding – Increase or decrease space on the left & right.
  • Vertical Padding – Control the spacing on the top & bottom.
• Go Transparent: Toggle the Transparent switch for a sleek, see-through background.
• Resize Your Form: Adjust the Width slider to make your form broader or narrower.

7. Body Background Styling

Personalize the background of your protected page with colors or images to create a visually engaging experience for your visitors.

• Select a Background Color: Click the Select Color button to choose your form’s background color. This will open a color picker where you can choose the desired color.
• Upload Your Background Image:
  • You can upload an image to be used as the background by clicking the “Upload” button.
  • If you no longer want the background image, you can remove it by clicking the “Remove” button.
• Background Repeat:Choose whether the background image should be repeated or not. The available options are:
  • No Repeat: The image will not repeat.
  • Repeat: The image will repeat both horizontally and vertically.
  • Repeat X: The image will only repeat horizontally.
  • Repeat Y: The image will only repeat vertically.
• Background Size: Set how the background image should be sized. The options include:
  • Cover: The image will cover the entire background, scaling as necessary.
  • Contain: The image will be resized to fit within the container without stretching.
  • You may also specify custom size options.
• Background Position: This option lets you choose where the background image is placed. It’s set to “Center Center” by default, but you can change it to positions like top-left, top-right, bottom-left, and more.

Tip: Large background images may slightly affect page loading time. Consider using optimized images for the best performance.

8. Protected Page Content Styling

Customize the text displayed around the protected content to provide helpful instructions, welcome messages, or additional information. You can customize the text displayed around the protected content area using two separate styling options:

Text Above/Below the Password Field

Use this section to customize the text displayed above or below the password input field on the protected page login screen.

• Font : Select your preferred font from the Font dropdown. The selected font will apply to the text shown near the password field.
• Font Size : Use the Font Size slider to adjust the text size. Click Reset to restore the default size.
• Position : Use the Position slider to adjust the spacing or placement of the text around the password field. Click Reset to return the position to its default value.
• Color : Click Select Color to choose the text color. The preview updates instantly so you can review the change before publishing.
• Text Alignment : Use the Text Alignment dropdown to align the text to the Left, Center, or Right.

Text Above/Below the Page Content

Use this section to customize the text displayed above or below the protected page content after the password-protected area is shown.

• Font : Select your preferred font from the Font dropdown. The selected font will apply to the text shown around the page content.
• Font Size : Use the Font Size slider to increase or decrease the text size. Click Reset to restore the default font size.
• Position : Use the Position slider to adjust the spacing or placement of the text around the page content. Click Reset to return the position to its default value.
• Color : Click Select Color to choose the text color. The preview updates instantly so you can check the result before publishing.
• Text Alignment : Use the Text Alignment dropdown to align the text to the Left, Center, or Right.

9. Custom CSS

Input your Custom CSS code in the provided text area. This code will directly apply styles to your site’s forms or other elements, giving you complete design flexibility.

Warning: Incorrect CSS may affect the appearance of your protected page. If you’re unsure, test changes before publishing.

Need More Customization?

We’re continuously improving the Real-Time Login Customizer based on user feedback. If there’s a customization option you’d like to see in a future release or you experience any issues while using the plugin, don’t hesitate to reach out to our support team. Your feedback helps us build a better experience for everyone.