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.

So, let’s see how to add and customize this element.

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 #

1. From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
2. Next, click the “Edit with Elementor” button.

Step 2: Find the Search Element #

1. In the left-hand Elementor panel, use the search bar to find “Search.”
2. 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:

1. Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
2. Visit your page on the frontend to preview the Search element live.