Property City

In the Zozonest plugin, the Property City widget is a location-based navigation tool. It allows you to display specific cities (e.g., London, Dubai, New York) as visual entry points, helping users narrow their search to a specific urban area.

This widget is most effective on homepages or “Browse by Location” sections to show where your properties are concentrated.

1. Content & Source Settings

• Select Cities: You can choose to display all cities in your database or manually select specific “Featured Cities.” This is useful if you want to highlight high-demand areas like “Manhattan” while hiding smaller towns.

• Hide Empty Cities: An essential toggle that hides cities that currently have zero active listings. This ensures users never click on a city only to find an empty “No properties found” page.

• Show Listing Count: Displays a number next to or below the city name (e.g., “Miami (12)”). This acts as a guide for users to see which cities have the most inventory.

• Parent State Filter: Some versions allow you to filter the cities by a parent State or Country, so you can create a section like “Top Cities in California.”

2. Visual Layout (Skins)

The widget focuses on making city navigation highly visual:

• Card with Background Image: Uses the “City Image” (uploaded in the Zozonest settings) as a full-background for the box. This is the most popular layout for modern real estate sites.

• Iconic Mode: Uses a specific icon (like a city skyline or a map pin) if an image isn’t available.

• Columns: Choose how many city boxes to show per row (usually 3 or 4).

• Grid vs. List: Display cities in a boxy grid or a simple vertical list for sidebars.

3. Query & Ordering

• Order By: Sort your cities by Name (Alphabetical), ID, or Count (showing the most popular cities first).

• Order: Set the sorting to ASC (A-Z) or DESC (Z-A).

• Limit: Restrict the number of cities shown (e.g., “Show only the top 6 cities”).

4. Style & Hover Effects (Elementor)

• Image Overlay: Apply a color tint (like dark blue or black with 40% opacity) over the city image so that the city name (usually in white) is clearly readable.

• Typography: Customize the font size and style for the City Name and the Listing Count number.

• Hover Zoom: Enable a “Zoom In” effect on the background image when a user hovers over the card, making the interface feel more premium.

• Border Radius: Add rounded corners to the cards to match a modern mobile-app design.