Property Login Dropdown

In the Zozonest plugin, the Property Login Dropdown widget is a compact, header-focused element that provides users with quick access to their accounts. Instead of sending users to a separate, bulky login page, it creates a sleek “pop-over” or “dropdown” menu directly in the navigation bar.

This widget is essential for maintaining a high-end “Portal” feel, similar to sites like Airbnb or Zillow.

1. Content & Layout Options

• Trigger Type: Choose how the login menu appears—either on Click or on Hover.

• Button Text/Icon: Customize the “label” that users see before clicking (e.g., “Sign In”, “Member Area”, or a simple User Icon).

• Show Profile Image: Once a user is logged in, the widget can automatically replace the “Login” text with the user’s Avatar/Profile Picture.

• Dashboard Links: You can toggle which links appear in the dropdown after a user logs in (e.g., My Properties, Favorites, Invoices, or Logout).

2. Registration & Social Settings

• Enable Registration: A toggle to show or hide a “Create Account” link within the dropdown for new users.

• Redirect After Login: Specify where a user should be sent after a successful login (e.g., stay on the current page or go straight to their User Dashboard).

• Social Login Integration: If you have enabled social login in Zozonest settings, this widget can display “Login with Google” or “Login with Facebook” buttons inside the dropdown.

3. Role-Based Visibility

• Show/Hide for Logged-in Users: You can configure the widget to change its behavior based on whether the person is a Guest or a registered Agent.

• Custom Menu Items: Some versions allow you to add “Custom Links” to the dropdown that are only visible to specific user roles (like “Add New Property” for Agents only).

4. Style & Typography (Elementor)

• Dropdown Width: Control how wide the popup box is to ensure it fits your login fields comfortably.

• Typography: Customize the fonts for the “Sign In” button and the links inside the menu.

• Color Palette: Set colors for backgrounds, borders, and hover states to match your header’s color scheme.

• Shadow & Border Radius: Add a “Box Shadow” to the dropdown to make it look like it’s floating above the content, and use rounded corners for a modern feel.