The Search Widget is part of the Ansar Elements Elementor Add-on.
It provides a customizable search form that can be placed anywhere in Elementor-built templates, such as headers, footers, or custom sections.
The widget supports multiple layout styles and powerful design options, enabling easy integration of site search functionality without coding.
How to Use
- Open any page, header, footer, or custom template in the Elementor editor.
- Locate the Advance Search Widget in the Ansar Elements section of the Elementor widget panel.
- Drag and drop the widget into the desired area of the layout.
Content Setting
The Search Widget includes multiple configuration options for flexibility:
- Search Style:
- Icon Only: Displays only a search icon which triggers the search input when clicked.
- Input Box with Icon: Displays an input field with a search icon inside.
- Input Box with Text Button: Displays an input field followed by a customizable text button (e.g., “Search”).
- Placeholder Text: Set custom placeholder text inside the input field (e.g., “Type and hit enter…”).
- Width & Height: Control the width and height of the input field to fit the design layout.
- Box Shadow: Apply shadow effects to the input box or search container for visual depth.
- Alignment: Set alignment of the entire search form to Left, Center, or Right.
Styling Setting
The Search Widget offers advanced styling options to fully customize its appearance:
- Search Icon Style: Control icon size, color, spacing, and hover color.
- Input Field Style:
- Text color and background color.
- Typography settings: font family, size, weight, and spacing.
- Border style, color, radius, and padding.
- Box shadow settings for enhanced appearance.
- Button Style (for input box with text button type):
- Button background and text color.
- Typography (font size, weight).
- Border settings and hover color.
- Padding and margin for spacing control.
- Responsive Controls: Set different styles and dimensions for Desktop, Tablet, and Mobile views to maintain design consistency across devices. on all devices.
Pro Tip
- For a cleaner header design, the Icon Only style is recommended combined with a toggle action.