Login Modal (Header and Footer)

The Login Modal widget allows you to display login and registration links directly in the header or footer of your website. When users click on these links, a modal window opens where they can log in or create a new account.

This widget is essential for real estate websites that allow user registration, property submissions, or access to a private dashboard. Use it whenever you want quick access to login and sign-up functionality from the navigation area.

How to Add the "Login / Sign Up Form" Widget

1. Open the page with Elementor where you want to add the widget (typically the header or footer template).
2. From the Elementor sidebar, search for Login Modal.
3. Drag and drop the widget into the desired section.
4. The login and register buttons will appear on your page, ready to be styled and configured.

Configuration Options

Content Tab

• Login/Register Type – Choose whether to display as text or icons.
• Show LoggedIn View – Preview how the widget looks when the user is logged in (design purpose only).
• Show Drop Down – Enable or disable the dropdown for logged-in users (design purpose only).
• Alignment – Set the horizontal alignment of the links.
• LoggedIn Position – Control placement of the logged-in view content.
• Padding Controls – Adjust padding for logged-in state, login text, and register text.

Style Tab

• Typography – Customize fonts for navigation links and login/register text.
• Colors
  • Icon Color
  • Login/Register Text
  • Drop Down Background & Border
  • User Navigation Links
• Sizes & Spacing
  • Avatar Border Radius
  • Drop Down Size
  • Position from Top
• Box Shadow – Add shadows to the dropdown for better visibility and depth.

Best Practices

• Place this widget in the header for maximum visibility, as it's a primary user action.
• Keep the login/register text short (e.g., "Login" and "Sign Up") for clarity.
• Use contrasting colors and hover states so links are easy to spot.
• Ensure the drop down position and size are optimized for both desktop and mobile.
• Test both the logged-in and logged-out states to confirm smooth user experience.