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 is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

55 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

  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?

Leave a Reply