How to Add and Customize the Search Element in Elementor #
The Search Element by Master Addons is a crucial utility widget that allows you to easily implement a site-wide search feature in two distinct styles: a standard form or a compact icon that triggers a popup. This is perfect for improving navigation and helping users quickly find content on your website.Using the Search Element, you can:- Choose the display type: a visible Form or a sleek Icon Popup.
- Select the style of the submit button: an Icon or a labeled Button (implied customization).
- Customize the text and description displayed within the search popup.
- Fully control the styling, colors, borders, and typography of the search form, icon, and input field.
Adding and Configuring the Search Element #
Follow these steps to add and configure the Search Element on any page of your website.Step 1: Create or Edit a Page #
- From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
- Next, click the “Edit with Elementor” button.
Step 2: Find the Search Element #
- In the left-hand Elementor panel, use the search bar to find “Search.”
- Drag and drop the addon onto your desired section of the page.
Step 3: Customize the Search Settings #
After placing the addon, you’ll find the customization sections in the left-hand panel, primarily under the Content and Style tabs.Content Tab #
This is where you define the layout, submit button, and any supporting text.Content: #
- Type: Select how the search field is displayed: Form (always visible) or Icon Popup (appears when clicking an icon).
- Submit Button Type: Choose the visual for the search button: Icon or Button.
- Icon: If the submit button type is Icon, select an icon from the Icon Library or Upload SVG.
Popup Settings (If Type is Icon Popup): #
- Input Text: Set the placeholder text for the search input field.
- Description: Add optional text or instructions that appear within the search popup. You can also use the Write with AI feature.
Style Tab #
This is where you control the visual appearance of the icon, form container, and input field.Icon (If Type is Icon Popup): #
- Size / Icon color: Set the size and color of the trigger icon.
- Border Type: Set the border style for the icon container: Default, None, Solid, Double, Dotted, Dashed, or Groove.
- Icon Padding / Icon Margin: Adjust the inner and outer spacing of the icon element.
Form: #
This section contains general styling for the search form, input, and submit button.- Background: Set the background color of the search form container.
- Width: Set the width of the form container.
- Form Margin / Form Padding: Adjust the spacing around and inside the form container.
- Border Type / Border Radius: Set the border style and rounded corners for the form container.
- Typography: Control the font settings for the submit button text.
- Color: Set the color of the submit button text.
- Width / Margin / Padding (Submit Button): Control the size and spacing of the submit button.
- Form Input Color: Set the color of the text entered into the search field.
- Border Type / Border Radius (Input): Set the border style and rounded corners specifically for the input field.
Step 4: Save and Publish Your Page #
Once you’ve customized everything to your liking:- Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
- Visit your page on the frontend to preview the Search element live.
Frequently Asked Questions #
What is the Search Element in Master Addons?
It is an Elementor utility widget that adds a site-wide search feature to any page. You can show it as a standard always-visible form or as a compact icon that opens a search popup, which helps visitors find content and improves navigation.
What is the difference between the Form and Icon Popup types?
The Type option sets how the search field appears. Form keeps the search box always visible on the page, while Icon Popup shows just an icon that opens the search field in a popup when clicked. Icon Popup is useful in headers where space is tight.
Can I use an icon instead of a text button to submit the search?
Yes. The Submit Button Type option lets you choose Icon or Button. If you pick Icon, you can select one from the Icon Library or use Upload SVG to add your own, so the submit control can be a search glyph rather than a labeled button.
Can I add placeholder text and a description to the search popup?
Yes. When the Type is set to Icon Popup, the Popup Settings give you an Input Text field for the placeholder inside the search box and a Description field for optional instructions in the popup. The Description also supports the Write with AI feature.
How much of the search styling can I control?
A lot. The Style tab lets you set the trigger icon’s size, color, border, and spacing, plus the form container’s background, width, border, and radius. You can also style the submit button typography and color and set a separate color and border for the input field itself.
