Loginfy Pro: Design a Branded WordPress Login Page

Design a login page in the WordPress Customizer

Loginfy Pro extends the Loginfy WordPress login page customizer for agencies, freelancers, businesses, membership websites, online stores, and content creators. Work in the native Customizer, where a live preview shows your changes. Start with a template or a blank design, adjust the page, then publish when it is ready.

Choose a template, layout, and background

The collection includes 16 templates, with 12 additional premium designs in Pro. The templates include modern and industry-specific layouts. Choose a single-column or two-column layout, then place the form with alignment and positioning controls.

Set the background to a color, image, gradient, self-hosted video, or YouTube video. A slideshow can rotate multiple pictures with timed transitions. Position, repeat, attachment, and size options control how the background appears. You can also adjust the page overlay, columns, logo, form placement, fields, button, and typography.

Style the logo and form

Logo settings include padding, Google Fonts for text logos, and extended typography controls. Form settings cover margins and padding, rounded corners, and advanced box shadows. You can set the form's background, dimensions, borders, radius, and shadow, then personalize field colors and borders, label and input typography, button colors and hover states, text shadows, and advanced borders.

Review branding and custom code

White-label controls can conceal add-on credits and remove default WordPress branding components. The custom code area accepts CSS for styling and JavaScript for custom functionality. Loginfy is presented as mobile responsive, with Customizer previews for desktop, tablet, and phone. Its resources are described as loading on the login page rather than the main website.

Install and publish

1. Install and activate Loginfy in WordPress.
2. Open Appearance > Customize and choose the Loginfy panel.
3. Choose a template or begin with a blank design.
4. Customize the logo, background, layout, form, fields, button, typography, and branding controls.
5. Review the live preview and click Publish when the page is ready.

Documentation is available for step-by-step guidance.