Meet the Search Widget: Design Fullscreen, Minimal & Endless Other Search Box Variations

Design your perfect search bar with Elementor! Customize every part of your search form and create a better user experience.

A customer who couldn’t find a certain product on your site is a lost customer. A visitor who couldn’t find an article is another unfortunate loss.

Getting your audience to find what they are looking for is a top goal for site owners, and there is no better way to add this functionality than adding a custom designed search bar to your site.

Today we are happy to introduce the Elementor Search widget. This widget lets you add WordPress site-search bars anywhere, and design each and every part of it down to the last pixel. The Search widget joins Nav Menu in our growing list of widgets responsible for site-wide customization.

The Search widget tackles a common problem with search plugins: their bland and generic design. Most search widgets come with a default and set design, and don’t offer advanced design customization.

This is where the power of Elementor kicks in. Our widget comes packed with design controls for every part of the search form, including the search field, submit button, hover and focus effects, box shadows, borders and more. This allows you to create the perfect match between the search bar and the rest of your website design.

Get in Elementor Pro

The Elementor Search widget comes with 3 skins: Default, Minimal and Full Screen.

The Default skin shows a search field and search button which are set apart.

The Full-Screen skin displays a single search icon. When users click on it, the search box opens inside a full-screen lightbox. This skin is quite handy for menus and in mobile devices.

The overlay color for this skin gets the default lightbox color, but you can easily choose a different color.

The Minimal skin shows one field which also contains the search icon. This skin is easily adapted to fit any website.

Beyond the initial skin choice, you can also customize each and every element that make up the search bar. This includes:
  • The search field: Easily change The field color, typography and placeholder text
  • The search button: Customize the button icon (2 icons available), icon size, color & background color, button width, and size.
You can also add box shadow and set border options. The search field allows you to define different styling options for focus mode, while the button allows for similar styling flexibility for hover mode.

Using Site-Wide Widgets & Features

As you’ve seen with the latest releases, we are steadily expanding Elementor’s reach, adding widgets that are implemented on a site-wide scale. Stay tuned as we add more and more widgets and features that affect the whole site, as well as add new ways to easily implement those features on your website.

What do you think of our new Search widget? Please let us know by adding your comment.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

70 Responses

    1. Yes I am also wanting to ask the same question. when I search it takes me to a page I need to customise, but I cannot find it? It isn’t explained very well. It would be good to be able to watch a video to see how this is setup properly.

  1. I’ve been waiting for this widget!! You guys are amazing!! It’s like you have the ability to read your customer’s minds and create the EXACT features that we need! Seriously cant wait to see what you roll out next!

  2. It renders correctly in Firefox and Chrome but Safari is doing some funky stuff. Is that just me?

    Also as always great stuff. Elementor is the best!

  3. Looks great! Thanks Elementor!
    How do I limit the search results to content from 1 page? I am trying to add to a FAQ page however the search form brings results from the rest of my site.

  4. So, combining this with the Menu widget from a couple of months before: how does one do this on every page rather than just one? Is that custom CSS? I’ve seen references to a future way you’ll allow this. Currently using a menu within a custom theme based on GeneratePress, so am trying to determine how to use this Search widget and the Menu widget without breaking stuff.

  5. Looking good. Something I’ve had my fingers crossed in hope that someday a decent search widget would be developed. I’m currently building a ‘directory’ site for health professionals, and like others have asked, does this widget search Custom Post Types, Categories and Taxonomies? Or is it just the standard search that comes with WordPress? In short, my question is can a professional directory site be developed using this search widget?

    Thanks
    Chris

  6. Another Question: How will this integrate with or can be used with the search facilities in using Toolset? Another hope of mine is to combine Elementor and Generatepress (premium) together with Toolset.

    Thanks
    Chris

  7. Please create support for modifying Post Layouts and for other plugins Like WP JOB MANAGER,ULTIMATE MEMBER. SO that we can use the Elementor for better Designs options.
    Its not available in any of the Page Builder and it will be Tremendous move. And WP-JOB MANAGER users are about 1,00,000 and ULTIMATE MEMBER is 80,000+ and its increasing.

    Thanks

      1. +1 to this request, Currently I’m using the WooCommerce product search widget, but it doesn’t have the customisation possibilities of the Elementor search widget.

        1. For anyone interested, you can make WooCommerce’s “Product Search” widget appear more like the “minimal skin” of the Elementor search widget by simply going to Advanced > Custom CSS and paste the following:

          selector {text-align: center;}
          selector input {width:100%;border-radius:32px;}
          selector button {display: none;}
          selector form {margin:0px;}

          Have fun.

  8. Hello Ben. Although i’ve purchased the elementor pro version, i can’t find the search form widget. What can i do?

  9. Hi. Great widget. I want to use it on my ecommerce website with woocommerce but only want it to search products (obviously!) Right now its a mess as it brings up everything. How do i make this happen? Thanks again!

  10. Hi Ben this looks like a more attractive option than most search widgets but really sad that it doesn’t improve on the searchability of any others. Like many others I would love to see a settings feature where I could simply tick the box for include or exclude on individual pages, posts, products etc. I’m sure that you have some excellent coders that could do this on their lunch break. By the way, I love Elementor, easy to use and really makes web design easy for a novice like me, keep up the great work.

  11. This widget would be great, if you could also set it to “product search”. Really hope you add this option as soon as possible. 🙂

  12. How do we customize the Results Page? My website is using the templates I created in Elementor, and the search widget functionality is excellent in and of itself. However, any searches always end up on the default WP theme. How do we customize the actual results page to match our Elementor custom pages?

  13. Not sure if this has been addressed already but will future Elementor Pro updates to the Search Widget have any more lower level control (for example search certain types of posts, categories, custom fields built with ACF/Pods). Think about how real estate websites allow you to search for different property types such as homes or apartments, bed or bath or by real estate agent/offices. When do you think this will be possible?

  14. I’m using full-screen skin. On mobile the text input box is below the keyboard (iOS). How do we move the input box to the top for mobile? Thanks!

  15. “The Search widget tackles a common problem with search plugins: their bland and generic design. Most search widgets come with a default and set design, and don’t offer advanced design customization.”

    I think this quote from you explains how you’ve created a style over substance widget here. There is no way to control over the actual search function. Only in how it looks. In fact, most annoyingly, the ‘function’ tab on the widget only gives you styling options.

    Worth applauding would be a search widget where we could control the parameters for it’s function. For example search by date, by tag, by price, by size…If you are working with say woocommerce all that data is there, but we can’t set the search ‘form’ up to search for it.

    I hope you add in some real functionality to this.

  16. Agree with Barry, really need some additional functionality, not just a cosmetic make over which adds nothing.

  17. Seach addon/widget is just a simple search with some great styles and options to adjust the style. But most basic function (like select custom post type for search and live search) are still not there. Very bad and frustrating for this very important part of UX and modern search.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.