Login/Register Modal

The login/Register allows you to display login/register Icon or text anywhere on the page or header on the site. To use the Login/Register Modal element be sure that you are working on an Elementor page template.

Add the Login/Register Widget to a Page

Activate the Elementor Page Builder >> Go to Pages >> Add a New Page >> Select the Elementor page template from the Page Attribute section as shown in the below screenshot:

Then click the Edit with the Elementor button to edit the page with the Elementor page builder.

After clicking on the Edit with Elementor button you will redirect to the Elementor page builder to see the Elementor Page Builder section appear. Drag and drop the Login/Register Modal widget from the Houzez Elements section to the page as shown in the below screenshot:

Login/Register Modal Settings

Once you have dragged the element on the page, you will see the element options in the left tab and you will find the Login/Register Modal Content and Style Settings.

In the content settings, you will find the below options:

1. Log in, register type: Choose Show as Icon or Text
2. Show LoggedIn View: Select Yes or No to show the icon as Logged in user or without login user icon (Only for design purposes)
3. Show Drop Down: Select Yes or No to show the dropdown (Only for design purposes)
4. Icon Size(px): Set the icon size 
5. Alignment: Set the Alignment for the icon.
6. LoggedIn Position: Set the LoggedIn Position of the icon.
7. Padding: Set the paddings for the login/register icon.
8. Dots Nav: Choose if you want to display the dots navigation.

Login/Register Modal Typography Settings

1. Nav Links: Set the typography, font size, color style and etc.
2. Login/Register Text: Set the typography for Login/ Register Text.

Login/Register Modal Style Tab Color Settings

1. Icon Color: Set the Color
2. Icon Color Hover: Set the Color
3. Login/Register Text: Set the Color
4. Login/Register Text Hover: Set the Color
5. Drop Down Background: Set the Color
6. Drop Down border: Set the Color
7. User Nav Links: Set the Color
8. Drop Down Hover Background: Set the Color
9. Drop Down border hover: Set the Color
10. User Nav Links Hover: Set the Color

Login/Register Modal Style Tab Sizes & Spacing Settings

1. Avatar Border Radius(px): Add the Border radius for avatar/icon
2. Drop Down Size(px): Set the size of the dropdown
3. Position from Top:  Set the position of the icon from the top.

Login/Register Modal Style Tab Box Shadow Settings

1. Drop Down Box Shadow: Set the box shadow for dropdown.