Elementor Search Widget

This guide explains how to add the Simply Static Search Elementor widget to your site, and what is needed to make search work on an exported static site.

Requirements

  • WordPress 6.2+
  • PHP 7.4+
  • Elementor (free or Pro)
  • Simply Static 3.3.3.3+
  • Simply Static Pro 2.0.1+

Note: The Simply Static Elementor Search widget outputs a search form. For exported static sites, WordPress’ normal search results are not available, you will need to enable one of the search integrations available via Simply Static Pro (Fuse.js or Algolia).

What the widget does

The Elementor widget renders a <form>   with a search input (name="s" ), using:

  • Wrapper: .simply-static-search-widget  
  • Input: .simply-static-search-input  
  • Form: class="search-form …"  

The form class is derived from your Simply Static search selector settings:

  • If Search Type = Fuse , it uses the Fuse selector setting.
  • If Search Type = Algolia , it uses the Algolia selector setting.
  • If those are not set, it falls back to .search-form

Step 1 — Enable/verify the Elementor integration in Simply Static

  1. Make sure that the Elementor, Simply Static, and Simply Static Pro plugins are active on your WordPress site
  2. In the WordPress admin, navigate to Simply Static → Settings → Integrations
  3. Enable the Elementor integration (if you have an integrations list/toggles)
  4. Once enabled, Elementor will get a new widget category called “Simply Static”

Step 2 — Add the widget in Elementor

1. Edit a page with Elementor where you would like to place your search form

2. In the Elementor widget panel, search for “Static Search”

3. Drag the Static Search widget onto the Elementor page


Widget controls

  • Placeholder Text: the input placeholder (default: “Search…”)
  • Input Width: a slider that applies width to .simply-static-search-input

Step 3 — Configure search for your exported static site

If you want search to work on the static export, you will need to setup either Fuse.js or Algolia


  1. Activate Simply Static and Simply Static Pro
  2. In Simply Static settings, enable search and choose a Search Type:
    • Fuse.js (fully static index shipped with the export), or
    • Algolia (external hosted search API).

3. Ensure your selector settings match the element you’re exporting:

    • Fuse selector (for Fuse.js), or
    • Algolia selector (for Algolia).

Tip: Keep the Simply Static search selector name simple (single class), for example .search-form  or .my-static-search

The Elementor widget will add that class to the <form> , which is what Simply Static’s search scripts typically hook onto.


Alternative option: use a shortcode in Elementor

  • Simply Static Pro also provides a shortcode-based search UI
  • In Elementor, you can add a Shortcode widget and paste [ssp-search]
  • Choose this approach if you prefer Pro’s built-in search UI rather than the Elementor “Static Search” widget output.

Export checklist

Before exporting:

  • Confirm the page containing the search widget is included in your export.
  • If using Fuse.js, confirm the export includes the search index and scripts.
  • If using Algolia, confirm your Algolia credentials and index name are configured.

After exporting:

  • Open the exported page in a browser and verify typing in the search field shows results (Fuse) or returns results via Algolia.

Troubleshooting

  • Widget doesn’t appear in Elementor:
    • Confirm Elementor is active.
    • Confirm Simply Static is active.
    • Confirm the Simply Static Elementor integration is enabled.
  • Search works on WP but not on the static site:
    • That’s expected without a static-search integration.
    • Enable/configure Fuse.js or Algolia (typically via Simply Static Pro).
  • Search scripts don’t attach to the widget:
    • Check your Fuse/Algolia selector setting.
    • Keep it as a single class selector (e.g. `.search-form`).