How to Create a Search Bar in Elementor: An 8-Step Beginner’s Guide

Step 1: Open the Elementor theme builder

Open the Theme Builder by going to Templates > Theme Builder in your WordPress dashboard.

Log in to your WordPress dashboard and go to Templates > Theme Builder. Next, select Search Results under the Site Parts section and click the + Add New button. This will launch the Elementor editor, where you can begin designing your custom search results page using any widgets you like.

Click “+ Add New” under Search Results to open Elementor and start designing your custom search page with widgets.

Step 2: Start a new section for your search widget

Click the plus (+) icon on the Elementor canvas and choose your desired column structure.

To boost search engine optimization, add a section title by dragging the Heading widget into the new section. Enter your title text, then go to the Style tab to customize the colour, typography, font size, alignment, and more to match your design.

Drag a Heading widget into the section to add a title, then style it with colours, fonts, and size to help improve SEO and design.

Next, drag the Text Editor widget below the heading and add your desired content. You can style the text using the same customization options as above.

Drag the Text Editor widget under the heading, add your content, and style the text using colour, font, and alignment options.

Step 3: Drag and drop the search widget into place

Drag the Search Bar widget under the text section to help users find content easily on your website.

Locate the Search bar widget in the Elementor panel, then drag and drop it into the section beneath the Text Editor widget, just as shown in the previous steps.

Step 4: Adjust the look of the search widget

Adjust the search bar’s width and style by setting margins and editing colours, borders, and corners to match your site’s design.

By default, the search widget spans the full width of the canvas. To adjust its width, go to the Advanced tab. In the Margin section, set custom left and right margin values to reduce the widget’s width as needed.

Then, head to the Style tab to customize its appearance. Here you can modify the placeholder text typography, background colour, border style, and more, where you can adjust these settings to match your site’s design. For example, to round the corners of the search box, apply values to the Top and Left fields under Border Radius.

To round the search button corners, expand the Submit Button section under the Style tab and set values for the Right and Bottom fields under Radius. You’ll see updates in real time. Feel free to explore additional styling options like hover effects, background colours, and box shadows to further enhance your design.

Step 5: Set up how results will appear

Turn on Live Results in the Search widget to show instant suggestions as users type in the search bar, improving search speed and experience.

Now that you’re familiar with the Ajax search feature (AJAX stands for “Asynchronous JavaScript and XML” and it lets search results load instantly without refreshing the page) , here’s how it works: as users begin typing in the search box, suggested results appear instantly beneath it.

To enable and customize this feature, use the Results settings in the Search widget. First, go to the Content tab and expand the Results section. Then, toggle on the Live Results option. This activates real-time suggestions, and you can also set how many results will display beneath the search bar as users type.

Step 6: Make a template for live search results

Click “Create Template” in the Results section to design how live search results appear while users type, using a custom reusable layout.

Elementor lets you design a custom live results template to control how search results appear in real-time as users type into the search box.

To get started, go to the Results section and click the Create Template button.This opens a new canvas where you’ll build the layout for your live search results and save it as a reusable template.

Choose your preferred column structure, for example you can use Directional Row so that new content aligns horizontally as elements are added. In this example, we want to display blog posts in the search results. That means when someone types a topic into the search bar, a list of relevant blog posts will appear. To do this, add relevant post-related widgets.

• Drag the ‘Featured Image’ widget into the layout.
  • By default, the image may appear large. To adjust it, go to the ‘Image Resolution’ setting and select “Medium.”
  • Then switch to the ‘Style’ tab to fine-tune alignment, width, and border radius for a more compact, polished look.

Drag the Featured Image widget, set image size to Medium, then style alignment, width, and corners for a clean, compact design.

• Next, place the ‘Post Title’ widget beside the image.
  • Customize its appearance by adjusting the font size and colour to match your design preferences.

Drag the Post Title widget next to the image, then change the font size and colour to match your design.

Once your layout is set, don’t forget to ‘save the template’. You can continue to add more elements if needed to enhance the live result preview.

Step 7: Connect the template to the results area

Select your custom results template from the dropdown, then adjust how many live search results show under the search box to fit your design.

Return to the main page you were working on. Under the Results section, click the dropdown icon and select the template you just created.

Once selected, additional settings will appear below. These options let you control how many live search results are displayed beneath the search box. Adjust them as needed to match your design and user experience goals.

Step 8: Style the layout of live results

Style the layout of the live results in the style tab including background type, border style and radius, and more.

Go back to the Style tab and expand the Results section. Here, you can customize various design elements, including background type, border style, border radius, padding, spacing from the search field, column height and width, and the gaps between rows and columns.

Next, switch to the preview mode of your page. Enter a search term into the box and click the Search button. 

You can now preview the live results. Start typing a query in the search box. You’ll see a list of three relevant items instantly appear below the field, confirming that the search widget is functioning correctly.

Note: Your search widget is now fully set up and operational. You can place similar search boxes anywhere across your site, such as in the header, footer, or on individual pages. These are most commonly found in site headers or archive post pages.