{"id":50471,"date":"2024-07-14T19:53:12","date_gmt":"2024-07-14T16:53:12","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=50471"},"modified":"2026-04-29T13:49:15","modified_gmt":"2026-04-29T10:49:15","slug":"search-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/search-widget\/","title":{"rendered":"Search widget"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Add the widget<\/h2>\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
Add the widget to the canvas <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To access and use a widget:<\/strong><\/p>

  1. In Elementor Editor, click +.
    All available widgets are displayed.<\/p><\/li>

  2. Click or drag the widget to the canvas. For more information, see <\/span>Add elements to a page<\/span><\/a>.<\/span><\/p><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    What is the Search widget?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The Search widget lets your visitors search your site so they can quickly find the products, services or people they need.\u00a0<\/span><\/p>

    When visitors use the search widget, the results are displayed using a Search Results template so you must have a Search Results template in order to use this widget. For details, see <\/span>Customize the Search Results Archive<\/span><\/a>.<\/span><\/p>

    \n
    \n \n\t\t\t\t\t\n\t\t\t\t <\/svg><\/span>\n <\/div>\n
    \n Note<\/strong>\n
    The Search Results Archive refers to what items are displayed as the results of a search while the Search Results Template refers to how these results are displayed.<\/div>\n <\/div>\n <\/div>

    In addition to displaying the search results in a template, this widget offers the option of showing live results – which shows visitors immediate results as they’re entering search terms. In order to use the immediate search results option, you must create a Loop item which will display the search results. For more information on Loop Items, see <\/span>Loop Grid widget<\/span><\/a>.<\/span><\/p>

    See all the options available with the Search widget.\u00a0\u00a0<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t\t\t\t\t\t
    \n
    \n \n\t\t\t\t\t\n\t\t\t\t <\/svg><\/span>\n <\/div>\n
    \n Note<\/strong>\n
    The Search widget was introduced in Elementor 3.24. If you’re using an earlier version of Elementor, see the Search Form widget<\/a>.<\/div>\n <\/div>\n <\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Common use case\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Jan is building a website for a jewelry store. They want to make it easier for customers to search for items in their webstore so they add a search bar to the header.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Create a full page Search widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    While the search widget does not have a full screen option, you can create a full screen search using an off canvas widget. See the video below for details.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t\t\t\t
    \n\t\t\t
    <\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t

    Adding a Search widget: Step-by-step<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Search widgets are often used in the site\u2019s header. In this example we\u2019ll add a search widget to the header of an online jewelry store. In addition, we want users to get immediate results when they start searching, so we\u2019ll add a Loop Item to display the results. Since most themes come with a Search Results Archive, we\u2019ll assume this site has one.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t\t\t\t\t\t

    Create a Loop Item<\/h3>

    First we’ll create the Loop Item:<\/p>

    1. From WP Admin, navigate to the Theme Builder.
      <\/span>\"\"
      You must create the Loop Item using the Theme Builder.
      \"\"
      <\/span><\/li>
    2. In the panel, click the <\/span>+<\/b> sign next to <\/span>Loop Item<\/b>.
      <\/span>The archive library opens to the Loop items section.<\/span><\/li><\/ol>

      To keep things simple, we\u2019ll use one of the Loop Item templates, but you can create your own Loop Item if you prefer.<\/span><\/p>

      1. Hover over the template in the library that you would like to use and click <\/span>Insert<\/b>.
        \"\"
        <\/span>The live search results will appear in this item.
        <\/span><\/li>
      2. In the popup, click <\/span>Apply<\/b>.<\/span>
        \"\"
        <\/span><\/li><\/ol>

        The Loop Item appears on the canvas.
        \"\"
        <\/span><\/p>

        1. In the top toolbar, click the Page Settings icon.
          \"\"<\/span>
          <\/span><\/li>
        2. In the panel, in the <\/span>Title <\/b>field, rename the Loop Item <\/span>Search Loop Item<\/b>.
          \"\"
          <\/span><\/li>
        3. In the upper right, click Publish<\/b>.
          \"\"<\/span><\/li>
        4. In the left side of the top bar, click the Elementor Logo and exit to WP Admin.\u00a0
          \"\"<\/span><\/li>
        5. Return to the Theme Builder.<\/span>
          <\/span><\/li>
        6. In the panel, click <\/span>Header<\/b>.
          \"\"<\/span>
          <\/span><\/li>
        7. In the right pane, click <\/span>Edit<\/b>.
          \"\"
          <\/span><\/li><\/ol>

          The Elementor Editor opens with the Header in the canvas.<\/span><\/p>

          Add the search widget<\/h4>
          1. Add a Search widget to the Header in the canvas. For details, see <\/span>Add elements to a page<\/span><\/a>.<\/span>
            <\/span><\/li>
          2. In the panel, open the <\/span>Results <\/b>section.
            \"\"<\/span>
            <\/span><\/li>
          3. In the panel, toggle <\/span>Live Results<\/b> to <\/span>Show<\/b>.
            \"\"<\/span>
            <\/span>The <\/span>Choose a template<\/b> dropdown menu appears.<\/span>
            <\/span><\/li>
          4. Use the Choose a template dropdown to select the <\/span>Search Loop Item<\/b> template.
            \"\"
            <\/span><\/li><\/ol>

            Adjust the results<\/h4>

            Right now the live results are set to display in one column. That’s good for mobile, but doesn\u2019t look so nice on a PC.
            <\/span><\/p>

            1. In the <\/span>Columns <\/b>field, enter <\/span>3<\/b>.
              \"\"<\/span>
              <\/span><\/li>
            2. Use the responsive icons to switch to mobile editing. For details about mobile editing, see <\/span>Responsive Design<\/span><\/a>.
              <\/span>\"\"<\/span><\/li>
            3. In the <\/span>Columns <\/b>field, enter <\/span>1<\/b>.
              \"\"
              <\/span>The live results will display as three columns on a PC and one column on mobile.<\/span>
              <\/span><\/li>
            4. On the right site of the search bar, click <\/span>Publish<\/b>.
              \"\"
              <\/span><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t\t

              Adjust the height of the Search widget\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t\t\t\t\t\t

              For some designs, you may want to narrow or widen the size of the Search widget.\u00a0\u00a0<\/span><\/p>

              To adjust the widget height<\/b>:<\/span><\/p>

              1. Select the widget.
                The options appear in the left panel.
                <\/span><\/li>
              2. Click the Style<\/b> tab.
                \"\"<\/li>
              3. Open the <\/span>Submit Button<\/b> field.
                \"\"
                <\/span><\/li>
              4. In the <\/span>Padding<\/b> field, set the <\/span>Top<\/b> and <\/span>Bottom<\/b> to 0.
                <\/span><\/li>
              5. Open the <\/span>Search Field<\/b> field.
                \"\"
                <\/span><\/li>
              6. In the Padding<\/strong> field, adjust the Top<\/strong> and Bottom<\/strong> padding to set the height of the Search widget.
                \"\" <\/span><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
                \n\t\t\t\t\t
                \n\t\t\t\t
                \n\t\t\t\t\t

                Settings for the Search widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
                \n\t\t\t\t\t\t\t\t\t

                You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

                \n\t\t\t\t\t

                Content tab<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
                \n\t\t\t\t\t\t\t\t\t

                Add, delete, and edit menu items and controls.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

                \n\t\t\t\t\t\t\t
                \n\t\t\t
                \n\t\t\t\t\t