Smart Search – Smart Post Docs

The Smart Search block is a high-performance, AJAX-powered search solution designed to allow your visitors to sort the posts or pages with instant results. From minimalist search icons to full-screen interactive overlays, this block gives you total control over to set stylich searh bar to your post showcase.

1. General: Search Presets & Configurations

From this panel, you can easily define the search presets, display type, placeholder text, and other configurations.

Search Presets: Choose from five distinct presets to instantly change the look of your search bar, ranging from classic horizontal layouts to minimal icon-based designs.

Display Type: Select how the search interface functions:

Normal: The search bar is always visible on the page.
Popup: The search bar is hidden behind an icon and opens in a full-screen or overlay “canvas” when clicked.

Show/Hide Search Placeholder: Toggle this to enable or disable the placeholder text from here. When On, you can enter custom text (e.g., “Search here…”) to guide your users.

Width & Alignment: Use the sliders to set the precise width of the search bar and align it to the Left, Center, or Right of its container.

Style Search Preset:

From this panel, you will be able to add style to the search preset and customize the typography as you want.

Placeholder Typography: Use this to control placeholder fonts (Family, Size, Weight, and Line Height) for the placeholder text.
Normal/Hover: Toggle between Normal / Hover & Focus to set independent styles for the default and mouse-over states.
Background Type: Choose between Solid or Gradient background fills for the search preset.
PlaceholderBackground Color: Define the fill color based on the selected Background Type.
Color: Set the color of the placeholder text label.
Border Style: Select from four distinct border designs: Normal (Solid), Dashed, Dotted, or Boxed.
Border Width: Configure and set the thickness of the search bar’s border.
Border Color: Define the color of the search’s stroke or border.
Border Radius: Set the adjustment of the corner roundness, allowing for a square or pill-shaped search bar.
Padding: Use this to adjust the internal spacing, changing the search bar height and width.

2. Query & Filter

The Query & Filter panel allows you to set the posts you want to include in the search results and filter the taxonomy type, giving users easy searching experiences.

Search for Post Types: Select the source of your results. You can choose to search through Posts, Pages, or Media files.

Taxonomy Filter: Toggle this On/Off to enable or disable advanced filtering based on WordPress taxonomies.

Filter Type: Once the Taxonomy Filter is enabled, choose the data type to filter by:

Categories
Tags
Formats
Badges by Smart Post: To set it up, follow the steps below:

Select Terms: Choose whether to search across all terms or select specific terms (e.g., only searching within a “Lifestyle” or “Tech” category).

Filter Dialog: Use this interactive interface to pick the exact terms you want to include or exclude from the search results.

Filter Label: Add a custom text label (e.g., “Filter by Category”) that appears above or beside the filter selection to guide users.

3. Search Button: General

The Search Button section is highly adaptive. While it maintains a core set of styling features, the layout options change dynamically based on the Search Preset you selected in the General tab.

Show/Hide Search Icon: Use this toggle to turn the search icon on/off within the button.
Button Type: Choose to display the button as an Icon, Text, or both.
Search Icon Selection: Pick your preferred magnifying glass style from the built-in library.
Icon Size: Use the slider to precisely adjust the scale of the icon.
Icon Position: If using text and an icon together, choose to place the icon to the Left or Right of the label.
Link Open In New Tab: A toggle to ensure search results open in a fresh browser tab.
Show Divider (Preset 1 only): Toggle this ON to add a vertical separator line between the search input and the button for a crisp, segmented look.

Note: In Preset 2, the divider is removed to create a more unified, single-box appearance.

Button Label (Preset 3, 4,5 only): It allows you to enter a custom call-to-action (e.g., “Search” or “Find”).
Reverse Button: Turn this on if you want to swap the position of the input field and the button, allowing the button to appear on the left side of the bar.

Style Search Button:

From this panel, you can add style to the search button from the preset-based styling options and customizations as you want.

Normal / Hover: Toggle between Normal / Hover to set independent styles for the default and mouse-over states.
Icon Color: Select the specific color for the magnifying glass icon.
Divider Color: Choose the color of the vertical separator line (For preset 01 only, and if the Divider toggle is active).

Typography (Presets 03, 04, 05): Use this to control global fonts (Family, Size, Weight, and Line Height) for the button text.
Label Color: Pick any color to set the color of the button’s text label.
Background Type: Choose between Solid, Gradient, or Custom background fills for the button.
Background Color: Define the fill color based on the selected Background Type.
Border Style: Select from four distinct border designs: Normal (Solid), Dashed, Dotted, or Boxed.
Border Width: Set the thickness of the button’s border from here.
Border Color: Define the color of the button’s stroke or border from here.
Border Radius: Adjust the corner roundness, creating square or pill-shaped buttons.
Gap With Icon: Control the exact spacing between the icon and the text label from here.
Padding: Adjust the internal spacing and set the button’s height & width from here.

4. PopUp Canvas: General

When you select the search bar opening style as Popup, the Popup Canvas panel becomes available to configure. You can configure canvas, heading content, and core functional elements of the pop-up.

Canvas Width: Set the total width of the pop-up overlay in pixels.
Search Popup Heading: Use this toggle to enable or disable a title at the top of the canvas.
Heading Label: Enter a custom title (e.g., “Search & Discover”) as the search heading.
Gap: Adjust the vertical spacing between the heading and the search input field.
Close Icon: Enable or disable this toggle to set the visibility of the exit button.
Icon Size: Define the dimensions of the close icon.
Heading Alignment: Select from Left, Center, or Right alignment for the heading text.

Style PopUp Canvas:

The Style panel allows you to control the canvas colors, typography, and search container design.

Typography: Set the font family, weight, and size for the pop-up heading.
Normal / Hover: Switch between tabs to define different colors for the static and interactive states.
Color & Close Icon Color: Dedicated color pickers to set the heading text and the close button color.
Canvas Background Type: Choose between Solid or Gradient backgrounds for the entire canvas area.
Background Color: Select the specific fill color for the pop-up overlay.
Border: Choose from four border styles: Normal (Solid), Dashed, Dotted, or Boxed.
Border Radius: Control the corner roundness of the popup canvas.
Padding & Margin: Set the internal spacing and external offsets for the canvas.
Box Shadow: Add a specific shadow effect, giving the pop-up depth and separation from the page content.

5. Search Result: General

The Search Result panel allows you to define how the live AJAX results appear to the user. You can choose from three distinct search result presets to match your site’s aesthetic.

Search Result Display Type

Select one of the following layout presets to organise your search data:

Preset 01: List with Thumbnails View
Preset 02: Minimalist List View
Preset 03: Grid View

Search Result Configurations:

No Result Found Text: Customize the text displayed when no matches are found (e.g., “No Result Found”).
Columns: Set the number of columns for the results grid.
Gap: Adjust the pixel spacing between individual result items.
Result Box Width: Set the overall width of the results container as a percentage.
Result Box Height: Define the maximum height of the results dropdown in pixels.
Show/Hide Post Images: Enable or disable the toggle to show/hide post featured images. Note: It will be automatically hidden for (Preset 02 )
Image Size: Adjust the dimensions of the result thumbnails.
Image – Content Gap: Define the spacing between the image and the text.
Show/Hide Meta Data: Use this toggle to turn on/off the Excerpt, Taxonomy, Author, and Publish Date to show/hide the metadata.
Space Between Meta: Control the vertical gap between metadata elements.
Highlight Search Term: Toggle a highlight effect for the user’s specific search query within the results.
Item Separator: Enable a divider line between each result item.
Positioning: Fine-tune the Horizontal and Vertical Position of the results container.

Style Search Result:

The Style panel allows you to define the search result colors, typography, and container design.

Title Typography: Set the advanced font styles with a dedicated font family, size, and weight for result titles.
Meta Typography: Configure font settings for metadata text.
Normal / Hover: Switch between tabs (Normal / Hover) to define styles for the static and interactive states.
Title Color / Meta Color: Select colors for titles and metadata text.
Highlight Search Term Color: Choose the specific color used to highlight matching terms.
Item Separator Color: Set the color for the divider lines between items.
Area Background Type: Select between Solid or Gradient background fills for the container.
Background Color: Define the primary fill color for the results area.
Area Border: Select from five border styles: None, Solid, Dashed, Dotted, or Boxed.
Border Width: Adjust the thickness of the container’s outer border.
Border Color: Choose the color for the container’s border.
Area Border Radius: Set the corner roundness for the overall results box.
Image Border Radius: Specifically adjust the corner roundness of result thumbnails.
Padding: Control the internal spacing between the content and the container edges.

6. More Results: General

The More Results panel allows you to configure a call-to-action button at the bottom of the live results drop-down, encouraging users to view additional content.

More Result: Enable or disable it to show/hide the “More Result” button at the bottom of the search dropdown.
Results Count: Enable this to display the number of items found alongside the label.
Initial Post Display: Set the number of results initially visible before clicking for more.
More Results Label: Customize the button text, such as “View More“.

Style More Results:

The Style panel allows you to visually customize the button across different interaction states.

Typography: Use this to control the fonts (Family, Size, Weight, and Line Height) for the ” Show More ” button text.
Normal / Hover: Switch between tabs (Normal / Hover) to define styles for the static and interactive states.
Color: Define the text color for normal and hover text for the ” Show More ” button.

Let’s watch a live demo of how smart search will work on your post showcase.