EB Advanced Search block can help you add a search field in Gutenberg with multiple criteria for a more personalized result. Using this premium block, you can allow visitors to have multiple options while they’re searching for their desired content on your website.
Follow this step-by-step guide to enable the EB Advanced Search block in Gutenberg.
How To Activate EB Advanced Search? #
To activate Essential Blocks Advanced Search on your WordPress website, navigate to Essential Blocks → Blocks from your WordPress dashboard and make sure the ‘Advanced Search’ block is enabled.
Note: As EB Advanced Search is a premium block, you must install and activate Essential Blocks PRO along with the free version on your search.
Next, click the ‘+’ icon to add a new Block. Afterward, find ‘Advanced Search’ from the search option. Simply click on the Block, and it will be activated.
How To Configure Essential Blocks Advanced Search? #
You will have three separate tabs (General, Style, and Advanced) to customize the EB Advanced Search block to get your preferred design, size, and other options.
General #
The General tab has options to customize EB Advanced Search presets, post types, search fields, buttons, texts, and more. Each field offers multiple criteria to make your search block represent your brand and attract visitors.
Click on ‘Preset’ to find 3 preset options, each with an interactive layout and design to reflect your web page design.
There is an option to specify your search result based on specific post types or Custom Post Types. You can filter search results by posts, pages, and more. Plus, WooCommerce integration will allow you to select products for the search results.
Configure Custom Post Types #
EB Advanced Search block lets you configure custom post types, so your visitors can search for specific posts under the post types. For tutorial purposes, we have created a custom post type called ‘Books’ with a custom post-type plugin.
Now, we will add a new custom post under the custom post type to see how it gets integrated into the EB Advanced Search block.
After adding a custom post, you can filter ‘Search For Post Types’ to that custom post and search for the specific post. Additionally, it will take you to the particular post once you click that.
You can enable ‘Show Filter By Taxonomy’ so visitors can search by categories. Enable the ‘Show Total Results‘ button to let your visitors see the total number of results for a search keyword. The ‘Show View All Button’ will allow users to see all the search results. Moreover, you can let your visitors see the content’s featured images for each search.
The ‘Search Field’ under the General tab can customize your placeholder text and enable/disable the search button. Additionally, you can edit the text inside the ‘Search Button’ and look for more customization options in the ‘Advanced’ tab, including the HTML Anchor and Additional CSS CLASS.
Styles #
From the ‘Style’ tab, customize the outlook of the EB Advanced Search block by navigating to Block → Style. Under this tab, you can customize your block style with various options.
You can change the typography, colours, height, size, border options, and more for your search field.
Additionally, there are options to customize the search result box, search content, not found message, and search button with these options.
Advanced #
From the ‘Advanced’ tab, navigate to Blocks → Advanced. Under the Advanced tab, you can change the Margin & Padding of your EB Advanced Search block. Under the Background tab, you can upload any images and choose between the Normal or Hover effect on the image.
On top of that, you can configure your background image’s position, attachment, color position, and size. Under the Border & Shadow tab, you can easily customize Border Style, Box Shadow, and more.
Final Outcome #
You can easily style and customize your Advanced Search block by following these simple steps. Check out how the blocks will work below.
This is how easily you can design and configure an EB Advanced Search block in Gutenberg.
Getting Stuck? Contact our support team.
