Back to contents

How to customize the appearance of the search results using JetSearch

Make the appearance of the search results fascinating, profitable and 100% meeting your needs with JetSearch plugin for Elementor.

Following these hands-on instructions, you are going to get everything you need to customize the showing up of the search results with JetSearch plugin.

We will show you the easy way to make a beautiful design that works.
So take a little time with us to learn the fundamental concepts that hat would make your website look juicier!

The general view representation of Ajax Search widget

In this section, we will make the Ajax Search widget of the look a lot more sophisticated and stylish. You can’t be wrong when thinking that search section must be catchy and easy to the eye. It helps your customers to find out their requests quickly and without difficulties.

Follow the steps below to perform the stylish design.

Step 1 – Firstly, head to Content > Search Form and here you can choose the Input Icon and Placeholder Text which will be shown on the left part of the search field. You can enter another name for words in the search field and append some additional icons to highlight this section in the visitor’s perception.

Search Form tab

Step 2 – Secondly, you can toggle Style > Submit button. As for my experience, it’s hard to imagine the search field that lacks this button, so we strongly recommend you to empower the button and change its visual design. If you want, you can add a Submit Button Label and change the Button Icon.

Submit Button tab

Step 3 – Here in this block of settings you are able to Show Categories List, if you have a huge amount of posts, goods, etc., of different categories. The matter cannot rest here. You can select the Taxonomy in the dropdown menu and Select the Placeholder text. To be up to trends you should enable the responsive form on mobile devices with selecting the button.

Step 4 – Go to Style > Search Form tab where you are able to configure the background color, box shadow, border type and other settings both for normal and focus style.

Step 5 – Navigate to Style > Input Field tab and ensure how easy it is to set up the needed options. You can change text, background and text color as well as the typography style.

Input Field tab

Step 6 – A little below you have the possibility to adjust settings for Submit button. You can change its size, color, typography, style and other features. Note, that you have two button styles: normal and hover.

The search results representation

This section will be showcased after the customer inputs the request in the search area. Matters not only the content but also the stylish view.

Step 1 – The other block is Style > Results Area tab where you can set besides regular settings (e.g., color, typography, etc.), the gap option. The wider the gap is, the more space between search and results fields becomes.

Results Area front-end

In this section, you have the Results Lists tab where you can empower scrolling if you have a roll of rank results given at once. Surely, you might adjust general settings for the view of this section.

Moreover, in the Results Footer tab, you can change the appearance of the footer.

Step 2 – After that, go to Style > Results Counter tab and adjust here general settings for displaying words in the results area. Here you will have normal and hover styles. Remember it while changing options.

Results Counter tab

Step 3 – Go ahead to Style > All Results Button tab – here you will discover that words in the footer such as “See all results” are not words themselves but the whole button. That’s why you can change the view of this section according to button features in settings.

ATTENTION!
If you have chosen the navigation instead of pagination for ranging the results, the following steps are for you. If not, skip them and go directly to Step 6.

Step 4 – Open Style > Number Pagination tab and here you will be able to set style features for normal, hover and active styles.

Number Pagination tab

Step 5 – Go to the Navigation Arrows tab and select the necessary layout.

Step 6 – Open Style > Notifications tab and adjust the style settings: the size, color and alignment.

Step 7 – Then, in Style > Spinner tab it’s possible to change the view of the spinner section when the customer is waiting for results.

As you can see, all these settings are adaptable to confirm all your expectations. It’s pretty easy to set up a responsive view of the corresponding block!

Move on and practice your new skills while creating the design for sections. Hope it clears up the things!