Login Page Customizer and Designer

外掛說明

Login Page Customizer and Designer – Beautiful Login Page Builder for WordPress

Design a beautiful, branded WordPress login page in minutes — no coding required. Templates, animations, CAPTCHA protection, and full layout control, all built in.

Your WordPress login page is the first thing your clients, team members, and customers see. Login Page Customizer and Designer transforms the plain default wp-login.php into a fully branded, professional experience — with zero code.

Pick a template, customize colors, fonts, and animations, then go live in minutes. Whether you run a SaaS platform, an agency, or a membership site, this plugin gives you complete visual control over your login page without touching a single line of code.

Most login page plugins give you a form and call it a day. Login Page Customizer and Designer gives you a full visual design system — block-based layout builder, entrance animations, shadow presets, background options, and a growing template library. PRO users get enterprise-grade security features like CAPTCHA protection, custom login URLs, and advanced redirect flows — everything you need to protect and polish your login experience.

✅ Free Features

🎨 Design & Customization
* Template Library — Get started instantly with 2 professionally designed templates: Light Centered and Dark Centered.
* Layout Modes — Choose from 3 layout types: Centered, Split Left, and Split Right to match your site structure.
* Core Blocks — Build your login page using 6 essential blocks: Logo, Heading, Paragraph, Divider, Login Form, and Custom HTML.
* Flexible Styling — Full control over colors, fonts, border radius, padding, and spacing for pixel-perfect results.
* Box Shadow Presets — Instantly apply Soft, Medium, or Strong shadow presets to your login card with a single click.
* Entrance Animations — Add polished Fade In, Slide Up, or Zoom In animations to make your login form feel alive and modern.
* Background Options — Set any Solid Color, Gradient, or Image as your login page background.
* Global Custom CSS — Drop in your own CSS for unlimited design flexibility beyond the built-in controls.

⚙️ Plugin Management
* One-Click Toggle — Enable or disable the customizer instantly without losing any of your settings.
* Custom Page Title & Favicon — Set a custom browser tab title and favicon specifically for the login page, keeping your brand consistent.
* Back to Blog Link — Customize the “Back to Site” link text and destination URL to match your brand voice.
* Custom Error Messages — Replace the generic WordPress login error messages with your own friendly, branded copy.
* Import / Export — Easily move your full template and settings between sites with one-click import and export.

⭐ PRO Features

🛡️ Security
* Premium Template Library — Unlock 19+ high-end templates including Glassmorphism, Midnight, Cyberpunk, and more — all professionally designed and ready to use.
* CAPTCHA Protection — Defend against bots and brute-force attacks with built-in support for Google reCAPTCHA v2 & v3, hCaptcha, and Cloudflare Turnstile.
* Custom Login URL — Replace the default /wp-login.php with a custom slug (e.g., yoursite.com/my-login) to hide your login page from automated scanners and bots.

🔀 Advanced Redirects
* Redirect users to the Homepage or any Custom URL after a successful login.
* Redirect users to the Homepage or any Custom URL after a successful registration.

🛒 WooCommerce Integration
* WooCommerce Support — Automatically apply your custom login design to the WooCommerce My Account login and registration page — no extra configuration needed.

🎨 Advanced Design
* Video Backgrounds — Set a looping video as your login page background for a cinematic, high-impact look.
* Animated Gradient Backgrounds — Apply smooth, flowing gradient animations to add life and energy to your login page.
* Custom Box Shadows — Go beyond presets with precise control over X/Y offsets, blur radius, and spread for fully custom shadow effects.
* Custom JavaScript — Inject JS code into the head or before the closing body tag for tracking pixels, analytics events, or any custom behavior.

Developer Instructions

This plugin uses WordPress scripts (@wordpress/scripts) to compile React-based editor and settings UIs.

To rebuild the JavaScript and CSS assets from the source files in src/:

1. Make sure you have Node.js (v16+) installed.
2. Run npm install to install dependencies.
3. Run npm run build to compile production assets into the build/ directory.
4. For development mode with live rebuild, run npm run start.

Note: The node_modules/ directory is excluded from the plugin distribution. All other source files (src/, package.json, webpack.config.js) are included.