Search Builder (General Elements)

The Search Builder widget allows you to design fully customizable property search forms directly within Elementor. You can add, remove, reorder, and style search fields without touching any code. 

This widget is ideal for creating unique search layouts for your homepage, dedicated search pages, or landing pages targeting specific property types.

Important: The Search Results Page is essential for displaying filtered properties. Without it, your Search Builder form won’t work as expected.

How to Add the Search Builder Widget

1. Go to Pages → Add New or edit an existing page.
2. Click Edit with Elementor.
3. In the Elementor widgets panel, search for Search Builder.
4. Drag the widget into your desired section of the page.

Configuration Options

Content Tab

• Form Fields – Add and configure search fields such as Location, Property Type, Price, Bedrooms, etc.
  • Field – Choose the data type (City, Status, Price, etc.).
  • Label – Text displayed above or inside the field.
  • Placeholder – Default text inside the input before selection.
  • Column Width – Width of the field in the grid layout (percentage).
  • Data Live Search – Enable to load field options dynamically as the user types.
  • Multi Selection – Allow users to select multiple values.
• Responsive Visibility – Choose whether to hide the field on desktop, tablet, or mobile.
• Input & Button Sizes – Set sizes for form inputs and buttons.
• Advanced Fields Collapse – Move extra fields into an expandable "Advanced" section.

Style Tab

• Form – Adjust column/row gaps, background, padding, border, and shadow.
• Fields – Customize text color, typography, background color, borders, and radius.
• Price Slider – Style the price range slider text, typography, and spacing.
• Tabs Style – Adjust typography, colors, backgrounds, padding, margin, and border radius for search tabs.
• Button – Configure background, text color, typography, borders, radius, and padding for the search button (Normal & Hover states).
• Clear Button – Style the clear/reset button with colors, borders, typography, and spacing.

Search Results Page Setup

The Search Results Page is essential for displaying filtered properties. Without it, your Search Builder form won’t work as expected. 

If clicking the Search button does not redirect to a results page, it means the Search Results Page has not been created or assigned.

To fix this:

1. Go to Pages → Add New.
2. Create a new page and from the Page Attributes → Template dropdown, select Search Results.
3. Publish the page.

Visit Search Results Page for more information

Best Practices

• Keep your search form concise to encourage user interaction; use the Advanced Fields Collapse option for extra filters.
• Use consistent field widths for a balanced layout.
• Always test the search form on mobile, tablet, and desktop to ensure optimal usability.
• For best performance, limit the number of fields with live data loading.