の ElementsKit Login Form widget allows you to create professional, fully customizable login forms for your WordPress site using the Elementor page builder. Instead of using the default WordPress login page, you can design a branded login experience that matches your website’s aesthetic, complete with custom redirects, social-style icons, and flexible styling options.

This documentation will guide you through the process of setting up and customizing the Login Form widget.

Add a Login Form to WordPress Websites #

前提条件:

• Elementor Builder Plugin (Free Version is enough)
• ElementsKit Pro Version

Let’s dive into the main part: Take a new page or an existing one and start editing with the Elementor editor. 

Step 1: Add ElementsKit Login Form Widget #

Open your Elementor editor. Search for “Login Form” in the widget search bar. Look for the Login Form widget with the EKit badge. ドラッグアンドドロップ the widget into your desired section or column.

Step 2: Configure Form Content #

下 コンテンツタブ, you will find several sections to define the structure and text of your login form.

1. Form Fields #

In this section, you can control the basic input fields:

• Field Label: From here, you can define the field layout type, from Default, Hide, & Custom.

• Lost Password Instruction: Enter the text instructions for users who forget their passwords.

• Show Placeholder: Toggle this to show or hide text inside the input fields.
• Username Placeholder: Custom text for the username field (e.g., “Enter Username”).
• Password Placeholder: Custom text for the password field.
• Lost Password Placeholder: Text for the email field in the reset password view.
• Field Size: Select the size of the input fields (Small, Medium, Large).
• Remember Me: Toggle to show the “Remember Me” checkbox.
• Remember Me Text: Customize the label for the checkbox (e.g., “Keep me logged in”).

And, when you choose the Custom option for the Field Label, it allows you to enter your own custom label for Username & Password.

• Lost Password Label: Change the text for the “Lost Password” link.
• Username Label: Insert your personalized text for this label.
• Password Label: Customize the text for the password field label.

2. Fields Icons #

Enhance the UI by adding icons to your input fields:

• Field Icons: Enable or disable icons inside the fields.
• Icons Divider: Adds a vertical line between the icon and the text input.
• Icons Position: Place the icon on the 左 または 右 of the input.
• Username/Password/Lost Icon: Select custom icons from the Font Awesome library or upload your own SVG.

3. Button #

Configure the primary “Login” button:

• ボタンテキスト: Change the text if you want (e.g., “Sign In”).
• 配置: Align the button to the Left, Center, Right, or Justified (Full Width).
• ボタンのサイズ： Choose from Extra Small to Extra Large.
• ボタンアイコン: Add an icon to the login button.

4. Reset Password #

Control the appearance of the password recovery view:

• 配置: Align the reset button.
• ボタンのギャップ: Adjust the spacing between the reset button and other elements.
• ボタンのサイズ： From the dropdown, select your preferred button size.
• Reset Password Text: Customize the “Reset” button label.
• Back to Login Text: Customize the link that takes users back to the login screen.

5. Links #

Add helpful navigation links below the form:

• Lost Password Link: Toggle to show/hide the “Forgot Password?” link.
• Link Position: Here the options are:
  • 上： Displays the link above the login form.
  • Bottom: Displays the link below the login form.
  • Form Start: Places the link at the beginning of the form fields section.
    • Link Alignment: Lets you align the link left, center, or right within its position.
    • Text Before/After Link: Allows you to add custom text before or after the link.
    • 説明： Adds a short descriptive text related to the link.
  • Form End: Places the link at the end of the form fields section and provides the same controls as “Form Start.”

• Lost Password Text: Customize the text for the link.
• Register Link: Toggle to show a link to your registration page.
• Register Link Text: Customize the text (e.g., “Don’t have an account? Sign up”).
• Link Position: Defines where the register link will appear within the login form.
• Link Alignment: Controls the alignment of the register link (left, center, or right).
• Text Before/After Link: Lets you add custom text before or after the register link.
• 説明： Adds a short explanatory text related to the register link.
• Register URL: Specifies the destination URL users will be redirected to after clicking the register link.

6. Settings #

Fine-tune the functionality of the form:

• Password Toggle: Allow users to click an icon to “unmask” or show their password.
• Remember Me Duration: Set how long the user stays logged in (in days).
• Redirect After Login: Enable this to send users to a specific page after a successful login.
  • Redirect Link: Paste the URL (e.g., a Dashboard or Welcome page).
• Hide for Logged-in Users: Choose to hide the form if the user is already signed in.
  • Logged in Message: Write a custom message to show to users who are already logged in (e.g., You are already logged in as ‘User’).

Step 3: Customize the Login Form Style #

に切り替えます スタイルタブ to change colors, typography, and spacing.

1. Labels #

• 色： Set the color for the field labels.
• タイポグラフィ： Change font family, size, weight, and style.
• 間隔: Adjust the distance between the label and the input field.

2. Fields #

Customize the appearance of the input boxes for both 普通 そして 集中 (when clicked) states:

• Text & Placeholder Color: Change the color of the typed text and the hint text.
• 背景の種類: Choose a solid color or gradient background for the fields.
• 枠線の種類: Select from Solid, Double, Dashed, etc., and set the border color.
• 境界線の半径: Round the corners of the input fields.
• Typography & Padding: Adjust the text style and the internal spacing of the fields.
• 間隔: Adjust the vertical gap between the fields.

3. Fields Icons #

• アイコンの色: Set the color for the icons inside the fields.
• アイコンサイズ: Scale the icons up or down.
• Divider Color & Width: If the divider is enabled, customize its appearance here.

4. Remember Me #

• Color & Typography: Style the “Remember Me” text.
• 間隔: Adjust the gap between the checkbox and the label.

5. Button #

• テキストの色： Changes the color of the text inside the login form (labels, inputs, button text, etc.).
• 背景の種類: Lets you choose the background style (classic color or gradient).
• 色： Sets the background color of the form or selected element.
• 枠線の幅: Adjusts the thickness of the border around the form or fields.
• ボーダの色： Changes the color of the border.
• ボックスシャドウ: Adds a shadow effect around the form for depth and visual emphasis.
• 境界線の半径: Controls the roundness of the corners.
• タイポグラフィ： Customizes font family, size, weight, style, and spacing.
• パディング: Adds space inside the element, between content and border.
• 間隔: Controls the distance between form elements (like fields and buttons)

6.パスワードを再設定する #

Expand the section, find Forgot Password and click on it.

• テキストの色： Sets the color of the reset password text and input content.
• 背景の種類: Choose between classic color or gradient background.
• 色： Defines the background color of the form or fields.
• 枠線の幅: Controls the thickness of the border.
• ボーダの色： Sets the color of the border.
• ボックスシャドウ: Adds a shadow effect around the form.
• 境界線の半径: Adjusts the corner roundness.
• タイポグラフィ： Customizes font style, size, and weight.
• パディング: Adds space inside the element.

7. Links #

• Colors: Set the color for the “Lost Password” and “Register” links.
• タイポグラフィ： Style the link fonts.
• Separator Colors: Change the color of the text separator.