Search
Every visitor is a potential customer looking for something. A weak, hidden, or ugly search bar breaks that journey. Master Addons Search Element gives you two powerful ways to integrate search: a classic inline form or a click-to-open icon popup. Place it anywhere – your header, sidebar, hero section – and then design every pixel. Style the form, the button, the icon, and even the popup’s messaging.
Search Form & Icon Popup
Not every design has room for a full search bar. That’s why we give you two distinct Types. Choose “Form” for a traditional, always-visible input field and button. Perfect for sidebars or under the hero. Or, select “Icon” for a sleek, space-saving magnifying glass that, when clicked, opens a elegant Popup search overlay. This keeps your design clean until the user needs it. You control the Button Text for forms and the exact Icon for the popup trigger.
- Form Type: A standard, always-visible search form with a customizable Submit Button (as text or an icon).
- Icon/Popup Type: A stylish icon button that triggers a full Popup search form, saving crucial header space.
- Icon Library: Choose any magnifying glass icon from the vast icon library to match your site’s style.
Complete Form & Input Field Styling
Make the search form a natural part of your layout. Design the entire Form container: set its Background, Width, Margin, Padding, and give it Border Radius and Box Shadow. Then, style the Input Field itself. Control its Typography, Color, Background, Border, and internal Padding. You can even design the Focus State (when a user clicks in) with a different border color. This ensures your search bar looks and feels premium, not like a browser default.
- Container Design: Style the form’s box with Background, Padding, Borders, and Shadow.
- Input Field Control: Customize the text box’s Color, Typography, Width, and Border Radius.
- Advanced States: Define a unique Border Color for the focused state, highlighting the active field.
Icon Design & Popup Messaging
For the Icon/Popup type, the icon itself is a button. Style it to perfection. Adjust its Size, Color, and the Padding & Margin around it. Then, design the popup that appears. Customize the Input Text placeholder (like “Start typing…”) and, crucially, add a helpful Description (e.g., “Hit enter to search or ESC to close”). This text guides users, improving usability and creating a polished, professional interactive experience.
- Icon Styling: Change the Icon Color and Size, and adjust its surrounding space with Icon Margin and Padding.
- Smart Popup Text: Set user-friendly placeholder text inside the popup’s search field.
- Popup Instructions: Add a Description line below the input to explain how to use the popup (search/close).
Frequently Asked Questions For Search
Does this search work with my theme's default search results page?
Yes, it should. This element provides the front-end search form. When a user submits a query, it will use your WordPress (or WooCommerce) default search functionality and show results on your theme’s search.php template page. It doesn’t replace the search logic, just makes the input form look amazing.
Can I have both a Form search in the sidebar and an Icon search in the header?
Absolutely. You can use multiple Search elements on the same page or site. Each one is configured and styled independently. So you can have a large form in your blog sidebar and a minimal icon in your header, each with their own settings.
Is the search popup mobile-friendly?
Yes. The popup is designed to be responsive. It will typically open as a centered overlay that covers most of the mobile screen, with the input field and description clearly readable. The icon trigger also scales appropriately for touch devices.
Can I change the magnifying glass icon to something else, like a "Q" for quote?
You can choose any icon from the integrated icon library (like FontAwesome). While a magnifying glass is standard, you could technically use a different icon. However, for universal user understanding, we strongly recommend sticking with a recognized search symbol (magnifying glass).
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
