Properties Ajax Tabs (General Elements)

The Listing Ajax Tabs widget lets you display property listings in multiple tabs with dynamic content loading (Ajax). This keeps the page fast and responsive while allowing users to switch between categories or queries without reloading the entire page. It's perfect for showcasing featured, recent, or specific property types in an interactive format.

How to Add the "Listing Ajax Tabs" Widget

1. In Elementor, open the page where you want the widget to appear.
2. From the Houzez Elements section, drag and drop the Listing Ajax Tabs widget into your desired location.
3. The widget will load with default tab items, ready to be customized.

Configuration Options

Content Tab

General

• Tabs Style – Choose between different visual styles for the tabs.
• Position – Set tabs alignment (left, center, right).
• Tab Spacer – Adjust spacing between tabs.
• Bottom Spacer – Control the spacing below the tab section.
• Enable Icon – Show or hide icons in the tab titles.
• Show Title – Toggle the display of tab titles.

Tabs

• Tab Title – Set the label for each tab.
• Icon Type – Choose to display no icon, an icon from the library, or a custom image.
• Add/Remove Items – Add new tabs or delete existing ones.
• Query Settings – Define the property query for each tab (e.g., featured, recent, by taxonomy).

Properties

• Cards Style – Select the property card design (v1–v8).
• Layout – Choose the grid layout (e.g., 3 Columns).
• Thumbnail Size – Select image size for property thumbnails.
• Sort By – Determine the sorting order.
• Number of Properties – Set how many properties to show per tab.
• Offset – Skip a number of properties before displaying results.
• Pagination – Choose pagination style (e.g., load more).

Show/Hide Data

Toggle visibility for:

• Description
• Compare Button
• Favorite Button
• Preview Button
• Featured Label
• Status
• Labels
• Details Button
• Date & Agent

Style Tab

Tabs – Control tab text color, hover color, active tab border, and typography.
Typography – Customize fonts for property title, address, price, labels, and more.
Spaces & Sizes – Adjust margins, paddings, and icon sizes.
Card Box – Set background color, padding, border, radius, and shadows.
Image Radius – Control the corner radius of property images.
Colors – Define colors for text, icons, labels, and backgrounds.
Button – Style buttons used within the property cards.

Best Practices

• Keep tab labels short and descriptive for clarity.
• Limit the number of tabs to maintain a clean design.
• Use consistent card styles across tabs for a unified look.
• For better performance, avoid loading too many properties per tab.