This tutorial will show how to change and style up the placeholder text of the AJAX Search widget with the help of the JetSearch plugin.
Tutorial requirements:
- JetSearch — apply the fastest AJAX search and manage the way the results are displayed, using advanced stylization settings;
- JetStyleManager — style any Gutenberg block & adjust its visual rendition;
- Elementor free — add the necessary widget into the editor, style it up, and publish it right away.
How to Set the Placeholder Text in Elementor
1 Step — Open the page where you want to add the AJAX search widget with the Elementor editor.
2 Step — Find the AJAX search widget and drop it to the page’s canvas.
3 Step — Proceed to the Content tab and unfold the Search Form section.
Here you will be able to change the default placeholder text to whichever you want.
4 Step — To customize its appearance, you can also add an Input Icon by selecting it from the icon library or uploading an SVG file.
5 Step — Proceed to the Style tab and unfold the Input Field section to change the font and size of the text.
Make the needed changes and set the color, so it matches your website’s theme.
How to Apply and Style the Search Block in Gutenberg
JetSearch works not only with the Elementor page builder. This plugin allows applying a Search block using Gutenberg as well.
1 Step — Open the page in the default WordPress editor. Click on the “Add block” button and find the AJAX Search block.
2 Step — Proceed to the Block tab. Under the Search Input section, you will be able to change the Placeholder text.
3 Step — Gutenberg editor doesn’t have the styling options. However, you can style the AJAX Search block with the help of the JetStyleManager plugin.
Click on the “Block Style” button in the upper right corner of the editing window.
4 Step — Unfold the Input Field and style up the placeholder text according to your needs.
That’s pretty much it! Now you know how to use and customize the AJAX Search Placeholder text in both Elementor and Gutenberg.