In this documentation, we will show you how to customize the User Login widget presented by the Element Pack Pro add-on.

Insert User Login Widget

1. Search by the User Login widget name.
2. The widget will appear, Check the Element Pack Pro logo on top right corner.
3. Select the widget then Drag and Drop it on the editor page.

The Default view of User Login

The User Login Displays the Input Form, Checkbox, Button, and Links.

Content Tab Customization

Forms Layout Section

Go to Content > Forms Layout

1. Skin: Different Skin are available for the Forms Layout. Choose any of them.

• Labels

2. Label: Enable the toggle switcher to demonstrate the label of the Forms.

• Fields

3. Fields: Set the Size for the Fields. Here are available service are, Default, Small, Big, & Medium.

• Submit Button

4. Text: Set the text for the Button.
5. Size: Set the size of the button. e.g: Default, Small, Medium, Large.
6. Alignment: Set the alignment of the button Left, Center, Right, Stretch.

Additional Options Section

Go to Content > Additional Options

Logged Out

1. Lost Password Link: Enable the switcher to show the Link of Lost Password.
2. Register Link: Enable the switcher to show the link of the Register.
3. Remember Me Checkbox: It allow the user to remember. Enable the toggle switcher to open it.

Logged In

1. Logged in Content: Enable the switcher to show the content to logged in.
2. Welcome Message: Enable the switcher to show the Welcome Message.

Style Tab Customization

Form Style Section

Go to Style > Form Style

1. Rows Gap: Set the gap between the Rows of the Table.

2. Checkbox Color: Enable the color for the Checkbox.

• Checkbox Active Color: Set the Active color for the Color.

3. Color: Set the color for the Links.
4. Hover Color: Set the color for the hover state of the links.
5. Typography: Set the typography of the links.

Form Label Section

Go to Style > Form Label

1. Spacing: Set the spacing of the Forms label.
2. Text Color: Choose the color for the Text.
3. Typography: Set the typography for the Label.

Form Fields Section

Go to Style > Form Fields

Normal

1. Text Color: Set the color for the Text of the Forms Fields.
2. Placeholder Color: Set the placeholder color.
3. Background Color: Set the Background Color.
4. Border Radius: Make the border radius.
5. Padding: Set the spacing by setting the padding.
6. Typography: Set the typography for the Fields.

Focus

1. Text Color: Set the text color for the forms fields.
2. Placeholder Color: Set the color for the placeholder.
3. Background Color: Set the background color.

Form Submit Button Section

Go to Style > Form Submit Button

Normal

1. Text Color: Set the color for the Text.
2. Background Color: Set the Background color for the Text.
3. Border Radius: Make the border radius.
4. Padding: Set the padding for the inner space.
5. Margin: Set the margin for the outer space.
6. Typography: Set the typography of the Button.

Hover

1. Text Color: Set the color for the Submit button.
2. Background Color: Set the background color.
3. Animation: Set the animation of the submit button.

Video Assist

Watch the User Login video tutorial here. Please visit the demo page for examples.

Thanks for being with us.