In this documentation, I am going to show how the User Login widget works. The article below will shift you to a suitable place. I’ll include some instructions with pictures detailed.
So, just read and follow the instructions.
To Insert Widget
Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above.
Using the Content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.
Now, I’m going to show the sections of the tab and how they work behind the widget.
Mainly, this section will let you set different Skin (like, Dropdown and Modal) with the default one.
Here, the Label switcher button will allow you to manage the label of LogIn form. Just enable or disable the switcher button.
Another, sub-section is Fields that lets you select the Form Input Size.
Now, you, come to the Submit Button subsection. From there, you might add Text, set Size and Alignment.
N.B: Notice that if you select another two skins (Modal, Dropdown) besides the default skin. Against each skin, you’ll find the corresponding section. As you see the following.
Go to the Content tab > Form Layout > Skin (Modal) > Modal Button. To get the login form seen on the screenshot above, you’ve to hit on the modal button like the marked button on the image.
The same things go to this section as the Modal Button section. Just, go to the Content tab > Form Layout > Skin (Dropdown) > Dropdown Button. Look at the screenshot below.
From this section, you can manipulate extra things adjacent to the widget. Simply, enable and disable the switcher button.
Mostly, enable the switchers Show Facebook Login and Show Google Login. And if you do so, you can go for the default skin.
Logged Dropdown Menu
If you set Modal or Dropdown skin instead of default one, you will get this section.
Firstly, come to the Content tab > Form Layout > Dropdown or Modal. And, secondly, go to the Logged Dropdown Menu.
Thirdly, hit on the every single repeater and edit as you fitted.
Finally, hit on the Update button, and after that click on the Preview button.
Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design.
Styling with the tab in Elementor will always give you a fantastic experience.
Let’s have a look.
Go to the Style tab > Form Style > adjust Rows Gap > and add color to the Links, Links Hover, Checkbox, and Checkbox Active one by one.
Come to Label > after that, adjust Spacing and Text color along with Typography.
Simply, go to the Style tab > Fields.
In the section, you might add Color, adjust Border type and radius, importantly Padding and Typography under the Normal mode.
In contrast, under the Focus mode, you can add Border color. Look at the screenshot above.
Just, go to the Style tab > Submit Button.
Here, under the mode Normal, you’ll be able to add Text color, Typography, and Background color to the Submit Button. See the photo above.
On the other hand, under the Hover mode, you might add Text color, Background color, and mostly Animation from the dropdown.
Logged Style(with Default Skin)
From this section, you might simply add color to Link and Link Hover. Just, come to Logged Style from the Style Tab.
Dropdown Style (with Dropdown and Modal Skin)
Look at the screenshot and work with the controls in Dropdown Style.
In Conclusion, though our User Login widget by Element Pack contains some tricky parts, hopefully, in the end, you have got the things on how the widget works. You can stream the video clip above. And to get more ideas about this, visit the demo page.