Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetSearch: How to Customize the Placeholder Text Shown in the Search Field

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.

page to display jetsearch

2 Step — Find the AJAX search widget and drop it to the page’s canvas.

add ajax search widget

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.

placeholder text

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.

set input icon

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.

style up the placeholder

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.

ajax search block

2 Step — Proceed to the Block tab. Under the Search Input section, you will be able to change the Placeholder text.

placeholder in Gutenberg

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.

block style button

4 Step — Unfold the Input Field and style up the placeholder text according to your needs.

styling ajax search block placeholder

That’s pretty much it! Now you know how to use and customize the AJAX Search Placeholder text in both Elementor and Gutenberg.