A search block is a powerful tool that can help you improve the user experience on your website. It allows visitors to quickly and easily find the content they are looking for, leading to increased engagement and satisfaction.
That’s why we are introducing the PostX Advanced Search Block for WordPress. We will discuss why you need an advanced search block for your website, how to use the PostX Search block, and explore its customization settings and options.
So without further ado, let’s get started.
Why Do You Need a Custom Search Block for Your Website?
The WordPress search block is a way to let visitors find content on your website, but it only offers a little flexibility. With the PostX advanced search block, you can give visitors more control over their search results. This can be a huge help for visitors looking for accurate information.
Improves search experience: A custom search block can improve the search experience for your website visitors by providing them with more accurate results. This is because a custom search block can be tailored to your website and its content in a better way.
Provides better relevant results: A custom search block can provide better exactly matched results than WordPress’s default search block, because it can index your website’s content more thoroughly. This means that when visitors search for something on your website, they are more likely to find the information they are looking for.
Improves UX for visitors: A custom search block can improve the UX for visitors by making it easier for them to find the information they are looking for. This is because a custom search block can be designed to be user-friendly and easy to use.
Faster content discoverability: A custom search block can help faster content discoverability, as it indexes all the site contents.
Now let’s check out how to use the PostX Search block.
How to Use the PostX Search Block
The PostX Search block is very easy to use. You just need to install and activate PostX, and use the block in your page/header.
To use the PostX Search block:
- Go to your page/post.
- Click the “+” icon and look for the “Search – PostX” block.
- Click on it or drag and drop it to add the search block.
Then configure the settings to match your needs. You can also limit the number of results shown. Once you have configured the settings, you can publish your page or post, and visitors can use the search block.
Let’s explore the settings and customization options the PostX Search block provides.
Settings and Options
The PostX Search block offers a variety of customization settings and options. You can change the look and feel of the block, as well as the way it works.
Predefined Patterns
Like other PostX blocks, the new search block has its own “Predefined Patterns.” You can choose from the variations and 1-click import it to avoid the customization hassle.
Structure Setting
The customization fun starts with this setting. You’ll see the search blocks structural settings here.
AJAX Search
This toggle bar enables AJAX to search for readers. This means if it’s enabled whenever a reader/user searches a query in the search bar, the results will be displayed right there, without going to the search results page.
Search Form Style
This option lets you choose the search form/ search box style from 3 different variations.
No Result Found Text
When users search a query with no similar or relevant content/posts to show, they see the “No results found” text. In this setting, you can modify the texts to display your desired texts to the users.
Enable Search Popup
This setting is for you if you want to hide the full search bar with a search icon. Enabling this option will show you only a search icon. When users click the icon, they get the popup search bar.
When you enable this, you can also choose from 3 variations of the icon in the “Choose Popup Icon Style” dropdown.
Search Button
In this settings section, you’ll see the search button-related settings. From icon/text enable/disable to icon colors and padding-related settings can be found here.
Click to go Search Result Page
Enabling this option will create a trigger effect in the search icon/text. So, when users click on it, they will directly go to the search result page and view the results based on the given query.
Enable Text/Icon
This toggle bar works as its name suggests. You can turn the search icon on or off with the toggle bars.
You can do the same for search block icon.
You’ll also get the settings for the following. The settings’ name enacts what they do, so we will save your precious time by not explaining them.
- Icon Size
- Icon Color (Normal + Hover)
- Background Color (Normal + Hover)
- Padding
- Border Radius
Search Form
This setting is for the search form section. And you’ll get a lot of customization options here.
Search Button Reverse
This is a toggle bar to reverse the search button in the search form. By default, the search button is placed on the right of the search form. Enabling this will move the button to the left.
Input Placeholder
You can change the placeholder text (The text shown in the search form in the background). Add or modify whatever you want to show your users in the text field.
Search Form Width / Input Height
This is a draggable slider to adjust the search form width. You can adjust the horizontal (⇔) measurement of the search box.
This is a draggable slider to adjust the height of the search form. You can adjust the vertical (⇕) measurement of the search box.
Search Input Typography settings is the typographical setting for the search field (the text users type here for a query). You can adjust the size, font, font weight, height, spacing, decoration, style, and text cases (title case, upper case, lower case).
You’ll also get the following settings for the search form.
- Input Color (Adjust the text color of the typed query in the search box)
- Input Background (Adjust the search form’s background color)
- Input Focus Border (Select the border color when users click on the search box)
- Input Border (Select the overall border of the search box)
- Input Padding
- Input Radius
- Search Clear Icon Position (Adjust the clear icon, “X” icon in the search box)
Search Result
This section provides the customization settings for the displayed search results in the search box.
You can adjust the result column (up to 3 contents). If you select 1, the search box will show contents vertically (⇕). If you select 2/3, the search box will show 2/3 contents horizontally (⇔) in the search results.
You can also adjust the following in the search results:
- enable/disable the excerpts (of contents),
- show/hide the category,
- show/hide the author’s name,
- show/hide publish date
- turn images of the content on/off.
If you enable the image in the search results, you can adjust the image size, radius, and gap (space between image and content).
You will also find all the necessary typographical settings, like color, spacing, height, width, padding, separator, box-shadow, etc.
More Results
If you limit the search results and there are more relevant content/posts on your website, users will see a view more button at the end of the search results. This is the customization settings for the view more results part of the search results section.
You can enable or disable the “more results” section if your users don’t want to see that.
You’ll also have the typographical settings.
You’ll also get the Typography, Color, and Hover Color settings to view more results text.
Resourced You’ll Love
Here are a few articles you might find helpful:
- How to Create WordPress Bullet Points with PostX Advanced List Block
- Introducing PostX Row/Column Block: Show Your Contents Perfectly
- How to Add WordPress Custom Fonts: Take Full Control on Typography
- Introducing PostX ChatGPT Addon: The WordPress AI Content Generator
- WordPress Blog Filter: How to Add Filter in WordPress Blog Page
Conclusion
The PostX Advanced Search Block is a powerful tool that can help you improve the user experience on your website. It allows visitors to quickly and easily find the content they are looking for, leading to increased engagement and satisfaction.
The PostX Advanced Search Block is a great option to improve your website’s search functionality.
You can check out WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!
