Custom Login Page Customizer – Login Designer vs Loginizr

👉 Demo – Give it a try Login Designer is the most versatile login page customizer plugin for WordPress with options to customize the style of the login page layout to the last detail. Your website visitors will feel like the page is custom-made from scratch. Save yourself time and effort by choosing from predefined templates that come with ready-made layouts and customization options for colors, images, fonts, labels, and other details. The process is quick, easy, and fun – User-friendly for both beginners and advanced users. Every design you create and publish will be responsive and compatible with web browsers and mobile devices – That’s the true power of Login Designer. Why Choose Login Designer? You shouldn’t have to hire a developer to customize your website’s login page. That’s why we built Login Designer, the best login customizer plugin for WordPress. This plugin offers customization options ranging from background animations, fonts, colors, gradients, labels, styles and so much more. Give your customers an unrivaled live-editing experience unlike any other. An Unparalleled Custom Login Styling Experience Zero refreshes. Contextually displayed options and plugin settings. Custom event triggers. Context-aware previews. Powerful custom controls. Live editing… the list goes on. Login Designer is a UX beast It’s familiar, yet completely revolutionary. Click on any element from your login page to fine-tune it. That element’s settings are contextually displayed, while others hide. This way, you’ll spend less time navigating the Customizer’s sections and panels, and more time actually fine-tuning your website’s login page. #winning Login Designer’s login customizing and templating experience is the best in class – by a long shot. A short video Login Designer Features Login Designer Template Customization Customize your WordPress website’s login page. Choose from a range of pre-defined templates. Option to add a logo above the login page form. Option to add a URL to the logo. Adjust the Width, Height, and Position of the logo. Change the background of the template by selecting an image or color. Choose a background image from a curated collection of beautiful images. Set the position of the background image (Left, Right, Center). Option to repeat the background image (Tile, Tile horizontally, Tile vertically) on the login page. Adjust the size of the background image (Auto-adjust, Cover, Contain). Login Form Customization Options Customize the login form wrapper default styling. Change the background color of the login form. Adjustment options for the login form include Radius, Shadow, Shadow Opacity, Horizontal and Vertical Padding, Transparency, and Width. Login Form’s Text Label Customization Modify the Text Labels (Username, Password) of the login form. Text Label customization options include Font, Font Size, Spacing, and Color. Login Form’s Input Fields Customization Customize the full display appearance of the login form input fields. Add a background color to the login form’s input fields. Customization options for input fields include Border Size and Color, Radius, Margin Bottom, Padding (All, Top, Bottom), Shadow, Shadow Opacity, and Shadow Inset. Customize the text field Font, Color, and Size. Login Form’s Checkbox Customization Customize the Remember Me checkbox input element on the login form. Change the Checkbox Size, Background Color, Border Size, Color, and Radius. Change the Remember Me text’s Font, Size, Position, and Color. Disable the checkbox. Login Form’s Login Button Customization Customize the full display appearance of the login submit button. Add a background color to the login form’s login button. Customization options for the login button include Border Size and Color, Radius, Margin Bottom, Padding (All, Top, Bottom), Shadow, Shadow Opacity, and Shadow Inset. Customize the login button Font, Color, and Size. Custom Login Error Messages Set the message which will display when the username field is empty. Set the message which will display when the password field is empty. Set the message which will display when the username is invalid. Set the message which will display when the password is invalid. Other Customization Options Change the badge’s Text Color, Logo Color, and Position. Change the “Below Form Elements” (Lost Your Password, Back to) Font, Size, Color, Position. Enable/Disable the “Below Form Elements”. Secure the login form using Google Recaptcha V2/V3. Import/Export Login Designer settings. Login Designer Pro Login Designer Pro gives you the power to upgrade your login customization abilities to a whole new level. The PRO version is equipped with new features including animation styles for the login form (initial load and submission), option to add more fonts for form lables and fields and much more. All Login Designer Free features and more. Upload multiple images to the form background and add animation (Fade-in, Slide Right, Slide Left) Customize animation speed and duration. Select the initial load animation for the form. Apply animation on the logo. Select animation for form submission. Rename the login page in the URL. Option to add Google fonts for labels and fields. DOCUMENTATION AND SUPPORT Login Designer Technical Documentation Get started today Intrigued? I bet you are. Once you try Login Designer, every other Customizer experience will feel lackluster. Guaranteed. Installation is free, fun, quick, and easy.

This plugin allows the user to completely customise the look and feel of the WordPress login page from the comfort of the WordPress admin customizer interface. Dynamically creates a custom login css file to override default values Fully integrated with WordPress Customiser Intuitive interface with sections & settings Filters to override defaults via your parent/child theme Usage Go to Appearance > Customise Select the Login Customiser Menu Panel Select from the available sections and change the settings as required. Once changed the save & publish button will be available. Select this to save changes. These will be available to the login screen when next logging in, or as below. The plugin dynamically creates a new login css file for the login page only which contains css settings that override the default styling. The login panel of course is only available to non logged-in users, so testing the changes can be done via logging out / in, or better via using a separate computer, or via testing with a different browser e.g. logged in via IE, not logged in on chrome. Filters The default values displayed in the Admin UI customiser can be modified via a selection of filters. Panel: loginizr_panel – Panel name, default: lognizr_panel add_filter ( ‘loginizr_panel’, set_loginizr_panel, 10, 1); function set_loginizr_panel ( $default ) { return ‘loginizr’; } loginizr_priority – Panel priority, default: 30 add_filter ( ‘loginizr_priority’, set_loginizr_priority, 10, 1); function set_loginizr_priority ( $default ) { return 40; // put lower down order } loginizr_title – Panel title, default: Login Customizer add_filter( ‘loginizr_title’,set_loginizr_title, 10, 1); function set_loginizr_title ( $title ) { return __( ‘Loginizr’, ‘wordpress’ ); } loginizr_description – Panel description, default: Customize the generic WordPress login page add_filter( ‘loginizr_description’, set_loginizr_description, 10, 1); function set_loginizr_title ( $desc ) { return __( ‘Customize your WordPress Login Page’, ‘wordpress’ ); } Section: Each section has a filter for priority & title add_filter( ‘loginizr_section_priority’, ‘set_loginizr_section_priority’, 10, 2 ); function set_loginizr_section_priority( $priority, $section = ” ) { // basic check, can also add check against set section names if ( empty( $section ) ) { return $priority; } //check section name switch( $section ) { case 'background': return 5; case 'logo': return 10; case 'form_bg': return 15; case 'form': return 20; case 'field': return 25; case 'button': return 30; case 'other': return 35; default: return $priority; } } add_filter( ‘loginizr_section_title’, ‘set_loginizr_section_title’, 10, 2 ); function set_loginizr_section_title( $title, $section = ” ) { // basic check, can also add check against set section names if ( empty( $section ) ) { return $title; } //check section name switch( $section ) { case 'background': return __( 'Background', 'txt' ); case 'logo': return __( 'Logo', 'txt' ); case 'form_bg': return __( 'Form Background', 'txt' ); case 'form': return __( 'Form', 'txt' ); case 'field': return __( 'Field', 'txt' ); case 'button': return __( 'Button', 'txt' ); case 'other': return __( 'Other', 'txt' ); default: return $title; } } Settings: Some settings with default values also have available filters add_filter ( ‘loginizr_bg_color’, set_loginizr_bg_color, 10, 1); function set_loginizr_priority ( $default ) { return ‘#fff’; // valid hex or rbg value, default #f1f1f1 } add_filter ( ‘loginizr_logo_width’, set_loginizr_logo_width, 10, 1); function set_loginizr_logo_width ( $default ) { return ‘100px’; //default 125px } add_filter ( ‘loginizr_logo_height’, set_loginizr_logo_height, 10, 1); function set_loginizr_logo_height ( $default ) { return ’60px’; //default 50px } add_filter ( ‘loginizr_logo_padding’, set_loginizr_logo_padding, 10, 1); function set_loginizr_logo_padding ( $default ) { return ’10px’; //default 5px } add_filter ( ‘loginizr_form_bg_color’, set_loginizr_form_bg_color, 10, 1); function set_loginizr_form_bg_color ( $default ) { return ‘#fff’; // calid hex or rgb value, default #fff } add_filter ( ‘loginizr_form_width’, set_loginizr_form_width, 10, 1); function set_loginizr_form_width ( $default ) { return ‘400px’; //valid css width default 320px } add_filter ( ‘loginizr_form_height’, set_loginizr_form_height, 10, 1); function set_loginizr_form_height ( $default ) { return ‘100px’; //default 194px } add_filter ( ‘loginizr_form_padding’, set_loginizr_form_padding, 10, 1); function set_loginizr_form_padding ( $default ) { return ’10px’; //calid padding css, default 26px 24px 46px } add_filter ( ‘loginizr_field_width’, set_loginizr_field_width, 10, 1); function set_loginizr_field_width ( $default ) { return ‘90%’; // percentage or px value, default 100% } add_filter ( ‘loginizr_field_margin’, set_loginizr_field_margin, 10, 1); function set_loginizr_field_margin ( $default ) { return ’10px’; // valid margin: css , default 2px 6px 16px 0px } add_filter ( ‘loginizr_field_bg’, set_loginizr_field_bg, 10, 1); function set_loginizr_field_bg ( $default ) { return ‘#ccc’; // valid css hex/rgb, default #fff } add_filter ( ‘loginizr_field_color’, set_loginizr_field_color, 10, 1); function set_loginizr_field_color ( $default ) { return ‘#ccc’; //valid hex/rgb, default #333 } add_filter ( ‘loginizr_field_label_color’, set_loginizr_field_label_color, 10, 1); function set_loginizr_field_label_color ( $default ) { return ‘#ccc’; //valid hex/rgb, default #777 } add_filter ( ‘loginizr_button_color’, set_loginizr_buttoncolor, 10, 1); function set_loginizr_button_color ( $default ) { return ‘#ccc’; //valid hex/rgb, default #fff } add_filter ( ‘loginizr_button_bg’, set_loginizr_button_bg, 10, 1); function set_loginizr_button_bg ( $default ) { return ‘#ccc’; //valid hex/rgb, default #2EA2CC } add_filter ( ‘loginizr_button_border’, set_loginizr_button_border, 10, 1); function set_loginizr_button_border ( $default ) { return ‘#ccc’; //valid hex/rgb, default #0074A2 } add_filter ( ‘loginizr_button_hover_bg’, set_loginizr_button_hover_bg, 10, 1); function set_loginizr_button_hover_bg ( $default ) { return ‘#ccc’; //valid hex/rgb, default #1E8CBE } add_filter ( ‘loginizr_button_hover_border’, set_loginizr_button_hover_border, 10, 1); function set_loginizr_button_hover_border ( $default ) { return ‘#ccc’; //valid hex/rgb, default #0074A2 } add_filter ( ‘loginizr_button_hover_shadow’, set_loginizr_button_hover_shadow, 10, 1); function set_loginizr_button_hover_shadow ( $default ) { return ‘#ccc’; //valid hex/rgb, default #78C8E6 } add_filter ( ‘loginizr_other_color’, set_loginizr_other_color, 10, 1); function set_loginizr_other_color ( $default ) { return ‘#fff’; //valid hex/rgb, default #999 } add_filter ( ‘loginizr_other_hover’, set_loginizr_other_hover, 10, 1); function set_loginizr_other_hover ( $default ) { return ‘#fff’; //valid hex/rgb, default #2EA2CC }