Search Query

Before setting up the Search Query Widget , make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Search Query Widget —at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Search Query Widget in Elementor displays dynamic search results, offering users an easy way to find content and customize the layout to fit your site’s design.

Key Use Cases for the Search Query Widget:

• Display dynamic search results for seamless user experience.
• Customize search result layout to match your site’s design.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Search Query Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Search Query widget in the list.
• Toggle it on to enable the widget.
• Now, the Search Query widget is ready to use!

How to Add Search Query Widget in Elementor

1. Open the page where you want to add the Search Query Widget.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Search Query Widget.”
4. Drag the widget to your desired section.
5. The Search Query widget is now ready for customization!

How to Configure Search Query Widget

• Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish the page.
• Adjust the page settings as needed.
• In the Elementor panel, search for the “Search Form Widget.”
  Drag and drop the widget into your desired section.
• The search form will appear instantly. Customize it using the Content, Style, and Advanced tabs—especially the Search Query section, where you can define placeholder text, select an HTML tag for the label, and adjust the alignment to fit your layout perfectly.

Configuring Search Query Widget : A Step-by-Step Guide

Once the Search Query Widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

Within the Content section, the Search Query settings allow you to control the display and behavior of the search input field and related content.

HTML Tag

You can choose from 9 different HTML tags (H1–H6, div, span, p) for the search form title or label. This helps you maintain semantic structure and improves accessibility and SEO based on where the form is used.

Search Text

Customize the placeholder text that appears inside the search field. This helps guide users on what they can search for (e.g., “Search blog posts…” or “Type to find…”).

Alignment

This controls the alignment of the entire search form (left, center, right, or justified) to match the design of your section or page.

Style Settings

The Style tab of the Search Form Widget provides two customization sections:

• Style: Customize the overall appearance of the search form text. You can adjust:
  
  • Text Color: Sets the color of the form text.
  • Typography: Controls font size, weight, family, etc.
  • Text Stroke: Adds outline effects to the text.

• Text Shadow: Applies shadow behind the text for depth.
• Blend Mode: Defines how the text blends with the background.
  

Query Text Style: Specifically styles the search query input text:

• Text Color: Adjusts the color of the input text.
• Typography: Lets you set the font style and structure for the query text.

These settings allow complete control over the visual presentation of the search form, ensuring it aligns with your site design.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Search Query widget in Elementor to create a seamless and customizable search experience for your website.

For any further assistance or inquiries, feel free to contact our support team!