User Elements

  1. Home
  2. Docs
  3. User Elements
  4. User Login

User Login EA Element

The EA User Login Widget makes it easy to create a custom login page, instead of the default WordPress login page. Here in this tutorial, you’re going to learn how to use the User Login element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the User Login Element

 

»Content

 

Forms Layout

⇒Label: Enable/disable the label on the login forms.

⇒Fields (Input Size): Set the input size of the login form’s fields. Choose either large or small. Or leave it as default.

⇒Submit Button:

→Text: Enter the submit button text for the login form.

→Size: Set the size of the submit button either large or small. Or you can leave it as default.

→Alignment: Customize the submit button alignment either left, right, center or justified for different dimensions.

 

Additional Options

⇒Redirect After Login: Enable/disable the redirecting of the page after login. If you enable it, then add the link you want to redirect to after login. (Note: Because of security reasons, you can ONLY use your current domain here.)

⇒Lost your password?: Enable/disable the Lost Your Password button to help the user to find a way when they lose their password.

⇒Register: Enable/disable the Register button to help the new user to register for the first time.

⇒Remember Me: Enable/disable the Remember Me button to remember the password for future login.

⇒Logged In Message: Enable/disable the Logged In Message. When you enable it, users will see the confirmation notification of their login succession.

⇒Avatar In Button: When user logged in this avatar shown in the dropdown/modal button. You can enable or disable it here.

⇒Custom Label: Enable/Disable the custom label option for the forms. If you enable custom label, then add the following:

→Username Label: Enter your custom username label here.

→Username Placeholder: Add your custom placeholder text for the username field.

→Password Label: Enter your custom password label here.

→Password Placeholder: Add your custom placeholder text for the password field.

 


»Style

 

Form Style

⇒Rows Gap: Customize rows gap between forms.

⇒Links Color: Add a custom color to the links. Applied on the Lost Password and Register button.

⇒Links Hover Color: Add a custom color to the links on hover. Applied on the Lost Password and Register button.

 

Label

⇒Spacing: Generate some custom space between form labels.

⇒Text Color: Add a custom color to the label texts in the login form.

⇒Typography: Set the typography options for the label texts.

 

Fields

⇒Text Color: Add a custom color to the field’s texts in the login form.

⇒Placeholder Color: Add a custom color to the custom label placeholders in the login form for both usernames and passwords.

⇒Background Color: Add a custom color to the background of the field.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the form fields for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the form field’s border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the fields for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Padding: Set the padding value for the top, right, bottom and left around the fields for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the field’s texts.

 

Submit Button

⇒Text Color: Add a custom color to the submit button text for both normal and hover mode.

⇒Typography: Set the typography options for the submit button texts.

⇒Background: Add a custom background color to the submit button text for both normal and hover mode.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the submit button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the submit button border for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the submit button for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the submit button for different dimensions. You can link the values together or customize them individually.

 

Layout Style

⇒Text Color: Add a custom color to the form layout text for both normal and hover mode.

⇒Typography: Set the typography options for the layout texts.

⇒Background: Add a custom background color to the layout text for both normal and hover mode.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the layout text for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the layout text border for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the layout for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the layout for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the User Login Element.


Was this article helpful to you? Yes No

How can we help?