그만큼 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.