User Elements

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

User Register EA Element

With the User Register EA widget, you can build forms within Elementor itself and take complete control of the fields and overall design. Here in this tutorial, you’re going to learn how to use the User Register 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 Register Element

 

»Content

 

Forms Layout

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

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

⇒Submit Button:

→Text: Enter the submit button text for the user registration 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 Register: Enable/disable the redirecting of the page after register for the first time. If you enable it, then add the link you want to redirect to after the registration.

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

⇒Login: Enable/disable the Login button to let existing users log in their account.

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

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

→First Name Label: Enter your custom label for the first name field here.

→First Name Placeholder: Add your custom placeholder text for the first name field.

→Last Name Label: Enter your custom label for the last name field here.

→Last Name Placeholder: Add your custom placeholder text for the last name field.

→Email Label: Enter your custom label for the Email field here.

→Email Placeholder: Add your custom placeholder text for the Email 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 Login button.

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

 

Label

⇒Spacing: Generate some custom space between form labels.

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

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

 

Fields

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

⇒Placeholder Color: Add a custom color to the custom label placeholders in the registration 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 registration form fields for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the registration 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.

 


»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 Register Element.


Was this article helpful to you? Yes No

How can we help?