In this documentation, we will discuss the customization of the Give Login widget, brought to you by the Element Pack Pro addon for Elementor.
Enable The Give Login Widget
To use the Timeline widget from Element Pack Pro, first, you have to enable the widget.
- Go to WordPress dashboard > Element Pack Pro Plugin dashboard.
- Then, Click the 3rd Party Widgets Tab.
- Search the Give Login Widget Name.
- Enable the Give Login Widget.
- Hit the Save Settings Button.
Note: To use this widget in the Elementor editor, you need to install the Give – Donation Plugin separately.
Inserting the Give Login widget
1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the Give Login widget.
3. Drag the widget and drop it on the editor page.
Work With The Content Tab
Give Login Section
Go to Content > Give Login
1. Redirect Link: Here, you can add a link where you want to redirect your audience after they log in.
Work with The Style Tab
Give Login Section
Go to Style > Give Login
1. Background Color: You can change the background color with this option.
2. Border Type: This option allows you to add borders to your items. You can select various border types from this option, such as Solid, Double, Dotted, Dashed, and Groove.
3. Border Width: Set the thickness of the border with this option.
4. Border Color: You can change the border color with this option.
5. Border Radius: This option controls the roundness of the border.
6. Padding: You can adjust the inner space of the give login form with this option.
Title Section
Go to Style > Title
1. Color: You can change the title color with this option.
2. Border Type: You can change the input text color with this option.
3. Border Radius: This option controls the roundness of the border.
4. Padding: You can adjust the inner space of the title field with this option.
5. Margin: You can adjust the outer space of the title field with this option.
6. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Label Section
Go to Style > Label
1. Color: You can change the label color with this option.
2. Margin: You can adjust the outer space of the label with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Input Fields Section
Go to Style > Input Fields
1. Text Color: You can change the input text color with this option.
2. Border Type: You can add and change the border type with this option.
3. Border Radius: You can make changes the roundness of the input fields corners with this option.
4. Inner padding: You can adjust the inner space of the input field with this option.
5. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Submit Button Section
Go to Style > Submit Button
In this section, we have two more tabs. These are Normal & Hover. Let’s start with the Normal Tab –
1. Color: You can change the button text color with this option.
2. Background Type: You can change the background type to classic or gradient with this option.
3. Color: You can change the background color with this option.
4. Image: You can change the background image with this option.
5. Border Type: You can add and change the border type with this option.
6. Border Radius: This option controls the roundness of the border.
7. Padding: You can adjust the inner space of the button with this option.
8. Box Shadow: You can add a shadow effect to the button with this option.
9.Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now let’s proceed to the Hover Tab –
10. Color: You can change the button text hover color with this option.
11. Background Type: You can change the background type to classic or gradient with this option.
12. Color: You can change the background color with this option.
13. Image: You can change the background image with this option.
Reset Password Section
Go to Style > Reset Password
1. Color: You can change the reset password text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
All done! You have successfully customized the Give Login widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Give Login widget. Please visit the demo page for examples.
Thanks for being with us.
