{"id":149775,"date":"2024-07-14T19:53:12","date_gmt":"2024-07-14T16:53:12","guid":{"rendered":"https:\/\/elementor.com\/help\/widget-di-ricerca\/"},"modified":"2024-07-14T19:53:12","modified_gmt":"2024-07-14T16:53:12","slug":"widget-di-ricerca","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/it\/widget-di-ricerca\/","title":{"rendered":"Widget di ricerca"},"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
\n\t\t\t\t\t

Add the widget<\/h2>\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
\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<\/div>\n\t\t\t\t
\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<\/i><\/span>\n\t\t\t<\/i><\/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
\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<\/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<\/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
    \n\t\t\t\t\t

    What is the Search widget?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \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>

    The search widget also offers the option of offering visitors immediate results in addition to the results displayed in the Search Results template. Using this option means that visitors will start seeing search results as soon as they start entering text in the search box. 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 Form widget.\u00a0\u00a0<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \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><\/p>\t\t\t\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
    \n\t\t\t\t\t

    Common use case\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \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<\/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
    \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<\/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
    \n\t\t\t\t\t

    Create a full page Search widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \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<\/div>\n\t\t\t\t

    \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<\/div>\n\t\t\t\t
    \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<\/div>\n\t\t\t\t
    \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<\/div>\n\t\t\t\t

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

    Create a Loop Item<\/h3>\n

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

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

      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>\n

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

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

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

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

          Add the search widget<\/h4>\n
            \n
          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>\n
          2. In the panel, open the <\/span>Results <\/b>section.
            \"\"<\/span>
            <\/span><\/li>\n
          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>\n
          4. Use the Choose a template dropdown to select the <\/span>Search Loop Item<\/b> template.<\/span><\/li>\n<\/ol>\n

            Adjust the results<\/h4>\n

            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>\n

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

                Settings for the Search form widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                \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<\/div>\n\t\t\t\t

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

                Content tab<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                \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<\/div>\n\t\t\t\t

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