V4 Elements Search Query Estimated reading: 4 minutes 2 views Show a heading like Search Results for: mountain at the top of your search results page. The word your visitor searched for fills in by itself. No code needed. WIDGET Search Query USE IT ON Your search results page PLAN Free A QUICK LOOK What You Will Build A bold heading for your search results page. In the editor it shows the sample word Hello World. On your live search page, it shows the real word your visitor typed. The Search Query heading in the editor BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: This widget belongs on your search results template, the page WordPress uses when someone searches. A normal page does not show the word, because WordPress does not treat it as a search page. You can build the template in Animation Addon > Theme Builder, or in your theme builder. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: Search Query is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under Blog Widgets, find Search Query and switch it on. Click Save Settings. The Search Query card in your dashboard (click to zoom) STEP 2 Add It to Your Search Template Open your search results template in the Elementor Editor and drop the heading in. Click the + button at the top left to open the Elements panel. Type Search Query in the search box. Drag the Search Query with the orange badge to the top of your results. The Search Query in the Elements panel (click to zoom) Tip: Right next to it, you will find Search No Result. Use it to show a friendly message when nothing matches. STEP 3 Choose the Words and the Tag Select the widget and open Content in the General tab. Pick the HTML Tag. The default is H2. You can also choose H1 to H6, div, span or p. Type your own words in Search Text. The default is Search Results for:. HTML Tag (1) and Search Text (2) (click to zoom) Tip: Your visitor’s word is added right after your Search Text. End your text with a colon and a space, like You searched for:. STEP 4 Style It Open the Style tab to change how the heading looks. Open Typography and set the size and the weight, for example 34 px and 700. Set the text Color. Use Spacing to add space around the heading. Note: The widget has no design of its own. It uses your site’s heading style until you change it. RESULT Final Result The heading with a size of 34 and a bold weight. In the editor it shows the sample word. On your live search page, the sample word is replaced by your visitor’s word. The finished heading SETTINGS Options HTML Tag Default: H2H1 to H6, div, span or p. Search Text Default: Search Results for:The words before the search word. ID Optional CSS ID. GOOD TO KNOW More Details Fills in by itself You never type the search word. The widget reads it from the visitor’s search. Sample word in the editor The editor shows Hello World so you can style the heading. Use one H1 If your template already has an H1, keep this widget on H2. HELP Troubleshooting I do not see Search Query in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and switch on Search Query under Blog Widgets. Click Save Settings, then reload the editor. Type the name in the search box. The search word is missing on my page Make sure the widget is on your search results template, and not on a normal page. A normal page is not a search page. The heading is too big or too small Select it, open Style and set the size in Typography. It still says Hello World That sample word shows only in the editor. Open your live search page, for example yoursite.com/?s=mountain. You Did It Your search results page now greets visitors with the word they searched for. If you face any problem, please contact our support team. We are happy to help.
