tifosi

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.
<ul>
<li>Dynamically creates a custom login css file to override default values</li>
<li>Fully integrated with WordPress Customiser</li>
<li>Intuitive interface with sections & settings</li>
<li>Filters to override defaults via your parent/child theme</li>
</ul>
<h3>Usage</h3>
<ol>
<li>Go to Appearance > Customise</li>
<li>Select the Login Customiser Menu Panel</li>
<li>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.</li>
</ol>
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.
<h3>Filters</h3>
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 = ” ) {
<pre><code>// 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;
} 
</code></pre>
}
add_filter( ‘loginizr_section_title’, ‘set_loginizr_section_title’, 10, 2 ); 
function set_loginizr_section_title( $title, $section = ” ) {
<pre><code>// 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;
} 
</code></pre>
}
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 
}

Loginizr

good

Control the look & feel of your WordPress login page through the WordPress Customizer.

Rocco Aliberti

presscustomizr

<h4>What is Nimble Page Builder ?</h4>
<a href="https://nimblebuilder.com/" rel="nofollow ugc">Nimble Page Builder</a> is a fast and agile page builder plugin for WordPress. Nimble Builder uses the live customizer, native and powerful WordPress interface for real-time design. 
The plugin allows you to easily drag-and-drop modules like text-editor, post grids, images, contact forms, maps, icons, or ready-made sections and starter templates into any page of your site. You can edit your pages in real-time, and then click “publish” when you are happy with the result.
Watch the video below to see how this <a href="https://demo.presscustomizr.com/nimble-builder/" rel="nofollow ugc">demo page</a> has been built.
<div class="embed-vimeo" style="text-align: center;"><iframe loading="lazy" src="https://player.vimeo.com/video/328473405" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<h4>Live demos</h4>
<ul>
<li><a href="https://nimblebuilder.com/landing-page-with-header-and-footer/" rel="nofollow ugc">landing page with header and footer</a></li>
<li><a href="https://demo.presscustomizr.com/nimble-builder/" rel="nofollow ugc">integration with the Customizr theme</a></li>
<li><a href="https://demo-hueman.presscustomizr.com/nimble-builder/" rel="nofollow ugc">integration with the Hueman theme</a></li>
<li><a href="https://docs.presscustomizr.com/article/372-design-your-404-page-with-the-nimble-builder/" rel="nofollow ugc">404 page created with Nimble Builder</a></li>
</ul>
<h4>Works on any page of your site and with all WordPress themes</h4>
Nimble Builder allows you to insert sections in any context of your site : home page, single post or page, category or tag page, even search results or <a href="https://docs.presscustomizr.com/article/372-design-your-404-page-with-the-nimble-builder/" rel="nofollow ugc">404 pages</a>. No only that, you can also decide to <a href="https://docs.presscustomizr.com/article/371-how-to-start-building-from-a-blank-page-with-the-wordpress-nimble-builder/" rel="nofollow ugc">start designing from a blank page</a> on any page of your site, and even create a custom header and footer. Nimble Builder uses native WordPress action hooks, which makes it compatible with all WordPress themes.
<h4>Features overview</h4>
<ul>
<li>Drag and drop neatly pre-designed sections and customize them in real-time preview.</li>
<li>Works in any WordPress contexts : home, pages, posts, custom post types, archives, author pages, search page, …</li>
<li>Create content, style, move / duplicate / remove elements in real-time preview.</li>
<li>Save and reuse sections and templates.</li>
<li>Site building : define <a href="https://docs.presscustomizr.com/article/428-how-to-use-site-templates-with-nimble-builder" rel="nofollow ugc">site templates</a> for pages, posts, archives, search page, author pages, 404 page.</li>
<li>Many content modules available : classic text editor, image, column layouts, contact form, button, icons, map, html code, WordPress widget area, menu, and more.</li>
<li>Insert engaging <a href="https://docs.presscustomizr.com/article/393-how-to-add-post-grids-to-any-wordpress-page-with-nimble-builder/" rel="nofollow ugc">post grids</a> on any page, looking great on desktop and mobile devices.</li>
<li>Use full width image or video backgrounds for your sections, and <a href="https://docs.presscustomizr.com/article/380-how-to-set-a-parallax-background-for-a-section-in-wordpress-with-the-nimble-builder/" rel="nofollow ugc">enable a parallax effect</a>.</li>
<li>Easily <a href="https://docs.presscustomizr.com/article/343-designing-for-mobile-devices-with-wordpress-nimble-builder/" rel="nofollow ugc">customize your content specifically for mobile devices</a> : change the responsive breakpoint, adapt font-size, spacing, alignment, column layouts, in real-time preview.</li>
<li>Customize any text <a href="https://docs.presscustomizr.com/article/364-how-to-use-google-fonts-with-the-nimble-builder/" rel="nofollow ugc">with Google Fonts</a>.</li>
<li>Add <a href="https://docs.presscustomizr.com/article/409-how-to-add-custom-css-to-a-specific-page-of-your-wordpress-site/" rel="nofollow ugc">custom CSS</a> to any specific page of your site ( and only to this page ) : post, page, archive, 404 page, WooCommerce product, etc.</li>
<li><a href="https://docs.presscustomizr.com/article/391-how-to-export-and-import-templates-with-nimble-builder" rel="nofollow ugc">Export / Import</a> : re-use your sections in other pages and between sites.</li>
<li><a href="https://docs.presscustomizr.com/article/350-how-to-use-shortcodes-from-other-plugins-with-the-nimble-builder-plugin/" rel="nofollow ugc">Embed shortcodes</a> from other plugins, and see the result in real-time preview.</li>
<li>Nimble Builder automatically generates responsive HTML markup for a pixel-perfect rendering on smartphones and tablets.</li>
<li>Nimble Builder leverages the WordPress live customizer features for auto-drafting and schedule publishing. You can safely build and save drafts of your content before deploying in production.</li>
</ul>
<h4>Mind blowing performances 🚀</h4>
Nimble Builder pages load very fast, in particular on mobile devices. With a basic cache server configuration, the plugin gets an A grade on performance tests.
<h4>Mobile first builder</h4>
Nimble Builder is designed <a href="https://docs.presscustomizr.com/article/343-designing-for-mobile-devices-with-wordpress-nimble-builder" rel="nofollow ugc">mobile-first</a>. It uses a performant and lightweight flex CSS foundation which ensures perfect rendering on mobile devices. The plugin is an effective productivity tool, ideal for quickly sketching and publishing pages with sections and columns. Nimble Builder generates clean and fluid HTML markup that meets the highest SEO and accessibility standards.
<h4>Content modules</h4>
<ul>
<li>Headings</li>
<li>WordPress text editor ( support blocks and shortcodes )</li>
<li><a href="https://docs.presscustomizr.com/article/381-how-to-enable-lightbox-on-your-images-with-the-nimble-builder/" rel="nofollow ugc">Image</a></li>
<li>Button</li>
<li>Icon</li>
<li>Post Grid</li>
<li>Image Carousel</li>
<li><a href="https://docs.presscustomizr.com/article/385-how-to-enable-recaptcha-protection-against-spam-in-your-forms-with-the-nimble-builder/" rel="nofollow ugc">Contact Form</a></li>
<li><a href="https://docs.presscustomizr.com/article/387-how-to-insert-google-maps-in-your-wordpress-pages-with-the-nimble-builder/" rel="nofollow ugc">Google Map</a></li>
<li>Menu</li>
<li>Social Profiles</li>
<li>Divider</li>
<li>Spacer</li>
<li>Columns</li>
<li>Quote</li>
<li>Widget zone</li>
<li>Accordion</li>
<li>Shortcode</li>
<li>Tabs ( coming soon )</li>
<li>… and more to come !</li>
</ul>
<h4>Getting started</h4>
Once <a href="https://docs.presscustomizr.com/article/347-installing-the-nimble-builder-plugin/" rel="nofollow ugc">installed</a>, Nimble Builder can be accessed in the WordPress live customizer. You can <a href="https://docs.presscustomizr.com/article/337-getting-started-with-the-nimble-builder-plugin/" rel="nofollow ugc">start creating your first section</a> !
<h3>Documentation</h3>
You’ll find a growing online knowledge base for Nimble builder here : <a href="https://docs.presscustomizr.com/collection/334-nimble-builder/" rel="nofollow ugc">Nimble builder documentation</a>.
<ul>
<li><a href="https://docs.presscustomizr.com/article/337-getting-started-with-the-nimble-builder-plugin" rel="nofollow ugc">Getting started with Nimble Page Builder for WordPress</a></li>
<li><a href="https://docs.presscustomizr.com/article/355-technical-requirements-server-browser-php-version-wordpress-version" rel="nofollow ugc">Technical requirements for Nimble Builder : server, browser, php version, WP version</a></li>
<li><a href="https://docs.presscustomizr.com/article/343-designing-for-mobile-devices-with-wordpress-nimble-builder" rel="nofollow ugc">Designing for mobile devices with the WordPress Nimble Builder</a></li>
<li><a href="https://docs.presscustomizr.com/article/371-how-to-start-building-from-a-blank-page-with-the-wordpress-nimble-builder" rel="nofollow ugc">How to start building from a blank page with the WordPress Nimble Builder?</a></li>
<li><a href="https://docs.presscustomizr.com/article/358-building-your-header-and-footer-with-the-nimble-builder" rel="nofollow ugc">How to build your WordPress header and footer with Nimble Builder ?</a></li>
<li><a href="https://docs.presscustomizr.com/article/380-how-to-set-a-parallax-background-for-a-section-in-wordpress-with-the-nimble-builder" rel="nofollow ugc">How to set a parallax background for a section in WordPress with Nimble Builder ?</a></li>
<li><a href="https://docs.presscustomizr.com/article/385-how-to-enable-recaptcha-protection-against-spam-in-your-forms-with-the-nimble-builder" rel="nofollow ugc">How to enable reCAPTCHA protection against spam in your forms with Nimble Builder?</a></li>
<li><a href="https://docs.presscustomizr.com/article/339-changing-the-page-template" rel="nofollow ugc">How to change the page template with Nimble Builder ?</a></li>
</ul>

Nimble Page Builder

Simple and smart companion that allows you to insert sections into any existing page, create landing pages or entire websites including header and foo …

Loginizr vs Nimble Page Builder