Help Center

How to Customize the Placeholder Text Shown in the Search Field

How to Customize the Placeholder Text Shown in the Search Field

Find out how to change and style up the placeholder text of the AJAX Search widget with the help of the JetSearch plugin.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg);

  • JetSearch plugin installed and activated.

How to Set the Placeholder Text in Elementor

Open the page where you want to add the JetSearch plugin.

page to display jetsearch

Find the AJAX Search widget and drop it to the page’s canvas.

add ajax search widget

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

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

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.

Open the page in the default WordPress editor. Click on the “Add block” button and find the AJAX Search block.

ajax search block

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

placeholder in Gutenberg

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

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

styling ajax search block placeholder

Now you know how to use and customize the AJAX Search Placeholder text in both Elementor and Gutenberg.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.