How to add Search widget in Elementor?

What is the Search widget in Elementor?

The Search widget of Marquee Addons adds a lightweight, customizable site search to any page. Choose Popup or Expand input styles, set a trigger icon, enable Autocomplete and Clear, and control results with a flexible Query (source, include/exclude rules, date range, sort & order).

Common use case

Add a popup search in the header to keep the layout clean while giving visitors quick access to site-wide results.

Additional use cases

• Inline (expand) search inside blog archives, shops, or documentation pages
• Scoped search that targets only products, posts, or custom templates
• Landing-page search limited to a recent date range for fresh content

Requirements

• You need the Marquee Addons plugin (Free) installed and activated on your website.
• You can find detailed installation instructions in our dedicated installation guide.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.

Add the widget

To add the powerful Search widget to your Elementor-powered website, follow these simple steps:

1. Navigate to the Elementor editor.
2. Search for the search widget.
3. Drag the widget to your desired location on the page.

Content tab

The Content tab is where you set the input behavior (Popup/Expand), choose the trigger and placeholder, enable Autocomplete, add Clear/Submit (submit for Popup only), and configure the Query (source, filters, sort, order, ID).

Search Field

Controls how the search opens and what appears in the input and buttons.

1. Input Style: Choose how the field behaves — Popup (opens in an overlay) or Expand (grows inline).
2. Triggerer (Icon): Select the icon that opens the search (used by Popup/Expand triggers).
3. Placeholder:
   • Text: Set the placeholder text inside the input.
   • Icon: Add an optional placeholder icon.
4. Autocomplete: Toggle browser/autofill suggestions for quicker repeat searches.
5. Clear Button (Icon): Choose the icon that clears the current query.
6. Submit Button (Popup Only):
   • Text: Button label.
   • Icon: Optional submit icon.

Query

Defines what content is searchable and how results are sorted.

1. Source: Choose from All, Products, Posts, Pages, Floating Elements, or Theme Builder to set which content types the search will scan.
2. Include / Exclude: Add rules to include or exclude items (click + to add).
3. Date: Limit results to a time range—All, Past Day/Week/Month/Quarter/Year, or Custom.
4. Order By: Choose how results are sorted—Date, Title, Menu Order, Last Modified, Comment Count, or Random.
5. Order: Pick DESC (newest/top first) or ASC (oldest/A→Z).
6. Query ID: Give this query a unique ID for server-side filtering or advanced integrations.

Style tab

The Style tab allows you to visually customize every element of your Search widget, ensuring it perfectly matches your website’s design.

Search Field

Styles the input field and its states.

1. Width: Set the field width (responsive).
2. Position (Popup Only): Adjust horizontal position/offset inside its container.
3. Typography: Control input font family, size, weight, line-height, spacing.
4. Placeholder Color: Color for the placeholder text.
5. Background Type: Choose Classic or Gradient per state. Set a background color for Classic or a background gradient for Gradient.
6. Text Color: Input text color per state.
7. Icon Color: Color for the field’s icon per state.
8. Border Type: Choose Default/None/Solid/Double/Dotted/Dashed/Groove, then set width & color.
9. Box Shadow: Shadow around the field per state.
10. Border Radius: Round the field’s corners.
11. Padding: Inner spacing of the search field (popup or expanded).
12. Icon Size: Set the search/field icon size.
13. Icon Gap: Space between the icon and text.

Triggerer

Styles the icon/button that opens the search.

1. Icon Size: Set the trigger icon size.
2. Color: Set the Icon color per state (Normal and Hover).
3. Background Type: Classic or Gradient background per state.
4. Box Shadow: Shadow around the trigger per state.
5. Border Type: Choose Default/None/Solid/Double/Dotted/Dashed/Groove, then set width & color.
6. Border Radius: Round the trigger’s corners.
7. Padding: Inner spacing for the trigger.

Clear

Styles the clear (reset) icon.

1. Icon Size: Set the clear icon size.
2. Color: Icon color for Normal and Hover states.

Submit Button (Popup only)

Styles the submit button shown in the popup layout.

1. Typography: Font family, size, weight, transform, line-height, letter spacing.
2. Text Color: Set Submit button text color for Normal and Hover states.
3. Background Type: Set Submit button background Classic or Gradient per state. Set background color for Classic or a background gradient for Gradient.
4. Border Type: Choose Default, None, Solid, Double, Dotted, Dashed, or Groove; then set border width and color.
5. Box Shadow: Shadow for Normal/Hover.
6. Border Radius: Round the button corners.
7. Padding: Inner spacing of the button.
8. Spacing: Gap between the submit button and the search field.

Advanced tab

The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s Layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for bespoke styling. This widget also includes a specific Marquee Custom CSS section, allowing for even more granular control over its unique animation properties.

Frequently Asked Questions (FAQ)

Why don’t I see the Submit button?

It only appears when Input Style = Popup. For Expand, pressing Enter submits the query.

---

How do I change what gets searched?

Go to Content → Query and set Source, Include/Exclude rules, Date, and Order/Order By.

---

Why isn’t autocomplete working?

Enable Autocomplete in Content → Search Field. Browser settings can also affect suggestions.