Property Isotope Filter

The Property Isotope Filter widget is an interactive gallery tool that allows visitors to filter properties by categories (e.g., “Villas,” “Apartments,” or “For Sale”) using a smooth, animated interface. This widget relies on the jQuery Isotope library to dynamically show or hide listings based on user selection without refreshing the page.

1. Filtering & Navigation Settings

These options control how the interactive filter menu appears and functions:

• Taxonomy Selection: Choose the primary classification for filtering, such as Property Type, Status, or City.

• Filter Layout/Menu Style: Configure the look of the navigation buttons, typically appearing as a horizontal list or a dropdown menu.

• “Show All” Option: A toggle to include an “All” or “Show All” button that clears current filters and displays every listing.

• Filter Logic: Determine if selecting multiple filters should show items matching all selected criteria (AND logic) or any selected criteria (OR logic).

2. Layout & Query Controls

These settings define the arrangement of properties within the filterable grid:

• Layout Mode: Choose between Masonry (staggered heights) or FitRows (uniform row heights).

• Column Selection: Set the number of columns to display on different devices (Desktop, Tablet, Mobile).

• Property Query: Define the total number of items to load and sort them by parameters like Price, Date Added, or Alphabetical Order.

• Gutter/Gap Control: Adjust the pixel-based spacing between individual property cards.

3. Animation & Performance

Isotope is known for its visual transitions, which can often be adjusted:

• Animation Speed: Control how quickly items reshuffle or fade when a filter is clicked.

• ImagesLoaded Integration: A background setting that ensures property images are fully loaded before the layout is calculated, preventing overlapping items.

• AJAX Loading: Some versions allow for “Load More” functionality that pulls additional filtered properties into the grid without a page reload.

4. Style & Typography

Using Elementor’s styling tab, you can customize the aesthetic of both the filter menu and the property cards:

• Button Styling: Customize the font, background color, border radius, and hover states for the filter buttons.

• Active State: Set a distinct color for the “Active” filter so users know which category they are currently viewing.

• Container Styles: Adjust background colors, padding, and box shadows for the overall widget area.