Search Builder

The Search Builder Elementor widget allows you to display the Dock Search with all advanced search fields wherever on your website. To use the Search Builder Elementor Widget be sure that you are working on an Elementor page template.

Add the Search Builder Widget to a Page

Activate the Elementor Page Builder >> Go to Pages >> Add a New Page >> Select the Elementor page template from the Page Attribute section as showing in the below screenshot:

Then click the Edit with the Elementor button to edit the page with the Elementor page builder.

After clicking on the Edit with Elementor button you will redirect to the Elementor page builder to see the Elementor Page Builder section appear. Drag and drop the Search Builder widget from the Houzez Elements section to the page as showing in the below screenshot:

Search Builder Form Fields Settings

Once you have dragged the element on the page, you will see the element options in the left tab and you will see the form fields settings. 

1. Form Fields: Select or add search fields.
2. Input Size: Select the size of the field's input text.
3. Button Size: Select the size of the Search Button.
4. Button Alignment: Set the Search button alignment.
5. Labels: Show/Hide labels above the search fields.

Some Fields are given as default and if you want to add more fields in the search you can do it by clicking the ADD Item Button then you will see some fields to fill 

1. Fields: Select the field type.
2. Label: Add the label for the field.
3. Placeholder: Add the placeholder for the field.
4. Column Width: Set the width of the field.
5. Responsive settings: Set the responsiveness of the field.

Search Builder Tabs Settings

If you want to show the search with tabs you can easily enable this tab option and select the tab type to show on the search.

1. Show Tabs: Show/Hide tabs in search.
2. Select Statuses: Select the status for the search tabs.
3. Show All Tab: Enable/Disable all tabs.
4. Show All Text: Add the show all text.

Search Builder Form Style Settings

1. Form Column Gap: Set the column gap between fields.
2. Form Rows Gap: Set the row gap between fields.
3. Label Spacing: Set the spacing between labels and fields.
4. Label Text Color: Select the label text color.
5. Label Typography: Select the label font.
6. Background Color:  Select the form background color.
7. Padding: Set the padding of the fields.
8. Border Type: Set the border type of the fields.
9. Radius: Set the border radius.
10. Box Shadow: Set the box shadow for the search form.

Search Builder Fields Style Settings

1. Fields Text Color: Select the field text color.
2. Fields Typography: Select the font for the field text.
3. Background Color: Select the color for field background.
4. Border Color: Select the border color of the fields.
5. Broder Radius: Set the border radius. 

Search Builder Price Slider Style Settings

1. Text Color: Select the price slider text color.
2. Typography: Select the font for the price slider.
3. Margin Top: Set the top margin for price slider.
4. Margin Bottom: Set the bottom margin for price slider.

Search Builder Tabs Style Settings

1. Typography: Select the font for the tab title
2. Tabs Color: Select the color of the tab
3. Tabs Active Color: Select the color of the active tab
4. Tabs Background Color: Select the color of the tab background
5. Active Tabs Color: Select the color of the active tab background
6. Padding: Set the paddings for the tabs.
7. Margin: Set the margin for the tabs.
8. Radius: Set the radius for the tabs.
9. Alignment: Set the alignment of the tabs.

Search Builder Button Style Settings

1. Background Color: Set the button background color.
2. Text Color: Select the button text color.
3. Typography: Select the font for the button text.
4. Border Type: Select the border type for the button.
5. Border Radius: Set the border radius for the button's border.
6. Text Padding: Set the text padding for the button.