How to customize the appearance of the search results using JetSearch?
This tutorial uncovers all stylization settings of Ajax Search widget. After reading it you will get to know how to customize each element of this powerful widget. In order to start styling up Ajax Search, start editing the search form and navigate to the Style block to access the stylization settings. Here you’ll see 10 stylization blocks dedicated to each option of the Ajax Search widget.
Customizing the Search form
In this block, you can set the background color and box shadow in Normal and Focus modes. Also, you have an opportunity to set the padding and the border-radius values.
In the Search Form block set the background color and box shadow values matching the color scheme of your site. Don’t forget to set it for the Focus to customize the appearance of the element in this mode as well.
Adjust the shadow color if needed. Set the padding and border radius in order to make the form look good.
Input Field
Here you can customize the input typography, colors (both are available in two modes: Normal and Focus), the paddings, and margins of the input field, and also set the border.
Click the Typography icon and select a preferable Family and Size of the text. Additionally, you can play with the weight, style, transformation, and decoration of the text element.
Next, set the padding and margin, border width and radius values. It is recommended to set the same border radius as in the previous block to sync the borders and make the more stylish.
Submit button
Style settings of the Submit button are pretty much the same. However, if you have added the button text, you can customize its size, typography, etc. Other settings are already known to you from previous blocks: there are the background color, box shadow, margin and padding values, the border type and border-radius.
Results Area
This block is dedicated to the appearance of the results area. As it is a separate block with the header and footer, there are some additional settings. In order to see the changes in Elementor, type in the search word and click the Submit button. When the search results block appears you can adjust the settings and see the changes immediately.
First, you can set the suitable gap between the search field and the results area. Next, choose the background color, box shadow, and border-radius.
In Results Header section set the padding. In case you need to set the specific border type, you can customize its width and choose the color of the border as well.
Then goes the Results List setting. Toggle to Yes the Enable Scrolling option to help visitors conveniently view the results list. Here you can also set the height of the scrolling list, set the colors of the scrollbar, and its thumb.
The Results Footer block comes the last. Here you should set the padding (usually it is the same as the header padding) and customize the border type if needed.
Results Items
Here you can design the content of the results area: the thumbnails, titles, descriptions, etc. First, set the background, title, and content colors in 2 modes: Normal and Hover. Then choose the needed padding and alignment.
Enable a Divider and style it in a preferable way. Set the width of the Thumbnail and the gap. Also, you can adjust the border radius of the thumbnail.
At last, customize the typography of the title and the content and set the proper margin values.
Results Counter
Full Results Button
The customization of the full results button and results counter are very similar. In order to make the general view eye-pleasing, try to make the appearance of these 2 fields more or less identical.
Full Results Button
Depending on what navigation type you have chosen in the Content block, either bullet, number or arrows, the title of this block changes and specific settings appear.
However, some of the settings have much in common. You are able to set the colors in three modes: Normal, Hover, and Active. In case you’re using the Numeric pagination you can also customize the typography and the style of the characters.
Notifications
The notifications that appear in case the search results are negative are also fully customizable. Adjust the typography, the color of the text, it’s alignment and padding values.
Spinner
In the last block, you can choose the color for the spinner. Hope this tutorial is helpful. Style up your search form with ease!