How to use the Advanced Search block by Zoloblocks

This documentation provides comprehensive insights into the Star Rating Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Advanced Search block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Advanced Search block.
3. After on the right side, Click on the Block. Then the Advanced Search details appear.
4. Here, it shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

This section provides control for the advanced search,

1. Presets: Select the preset styles for the search.
2. Button Style: Set the style for the search.
3. Show Button Text: Enable the switcher to show the text for the button.
4. Show Icon: Enable the switcher to show the Icon for the search.

Content Section

Go to Basic > Content

This section provides control for the content,

1. Select Icon: Select the icon for the search button.
2. Button Text: Set the text for the Button.
3. Placeholder Text: Set the text for the placeholder.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Field Section

Go to Style > Field

This section provides controls for the fields section to be visually interactive,

1. Typography: Set the typography for the field.
2. Border: Set the border for the search fields.
3. Border Radius: Set the radius for the border.
4. Padding: Set padding for the button.

Normal State for Field

5. Color: Set the color for the field.

6. Placeholder Color: Set the for placeholder.
7. Background: Set the background for the fields.
8. Box Shadow: Set the shadow for the box.

Focus State for Field

9. Color: Set the color for the focus.
10. Width: Set the width for the focus.
11. Box Shadow: Set the shadow for the box.

Button Section

Go to Style > Button

Make the button section more stylish by following the controls,

1. Icon Size: Set the size for the Icon.
2. Typography: Set typography for the search button.
3. Button Size: Set the button size for the

4. Border: Set the border for the search button.
5. Border Radius: Set the border radius for the button.
6. Padding: Set padding for the button.

Normal State for Button

7. Text Color: Set the color for the text.
8. Icon Color: Set the icon color for the button.
9. Background: Set the background.
10. Box Shadow: Set the shadow for the box.

Hover State for Button

This section works for the hover state, Hover over the mouse and the changes will appear,

11. Text Color: Set the color for the text.
12. Icon Color: Set the icon color for the button.
13. Background: Set the background.
14. Box Shadow: Set the shadow for the box.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial Coming Soon! Check the Demo Page.

Thanks for being with us!