Table Of Contents

User Login widget

How to Use User Login Widget

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 User Login widget

Inserting the widget is just a matter of dragging and dropping. As you see in the screenshot above, drag the WordPress user login inside your page.

Content Tab

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 in designing the Elementor login widget.

Now, I’m going to show the sections of the tab and how they work behind the widget.

Forms Layout

userlogin 2 - BdThemes

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 the LogIn form. Just enable or disable the switcher button.

Another sub-section is Fields that lets you select the Form Input Size for the User Login widget.

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.

Modal Button

userlogin 3 - BdThemes

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.

Dropdown Button

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.

userlogin 4 - BdThemes

Additional Options

From this section, you can manipulate extra things adjacent to the Elementor login widget. Simply, enable and disable the switcher button.

userlogin 5 - BdThemes

Mostly, enable the switchers to Show Facebook Login and Show Google Login. And if you do so, you can go for the default skin.

Logged Dropdown Menu

userlogin 6 - BdThemes

If you set Modal or Dropdown skin instead of default one, you will get this section for the User Login widget.

Firstly, come to the Content tab > Form Layout > Dropdown or Modal. And, secondly, go to the Logged Dropdown Menu.

Thirdly, hit on every single repeater and edit as you fitted.

userlogin 7 - BdThemes

Finally, hit on the Update button, and after that click on the Preview button.


Style Tab

Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design the WordPress user login. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Form Style

userlogin style 1 - BdThemes

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.

Label

userlogin style 2 - BdThemes

Come to Label > after that, adjust Spacing and Text color along with Typography.

Fields

userlogin style 3 - BdThemes

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.

Submit Button

userlogin style 4 - BdThemes

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)

userlogin style 5 - BdThemes

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)

userlogin style 6 - BdThemes

Look at the screenshot and work with the controls in Dropdown Style.

Video Assist

In Conclusion, though our User Login widget by Element Pack under Bdthemes 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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.