Trip Search Widget

What the Trip Search Widget Does

You can add a search bar to your site that lets visitors filter trips by destination, trip type, activity, duration, price, and date. It helps people find the right trip without scrolling through your whole catalog.

A widget is a small block you can drag onto a page using Elementor. Elementor is a page builder plugin. It lets you design pages by dragging and dropping blocks instead of writing code.

Say you run trekking trips in Nepal. A visitor could use the search bar to find all 3-day treks under $500. That is the kind of filtering this widget gives them.

Once you know what the widget does, the next step is making sure your site is ready for it.

What You'll Need Before You Start

Adding the Trip Search Widget to a Page

You only need a page, Elementor, and a few trips already added to your site. Once the widget is on the page, you can change how it looks and which filters it shows.

This section walks you through getting the widget onto a page. Once it's there, the rest of this page covers how to configure it.

Once the widget is on your page, the settings panel on the left will show everything you can change. The sections below walk you through each part, one at a time.

Layout Settings

The layout controls how the search fields are arranged on the page. This choice matters because the best layout depends on where the search bar will sit on your page. You have two options:

Horizontal

All fields sit side by side in a single row. This works well in a wide area, like a banner across the top of your homepage.

Vertical

All fields stack one below the other in a single column. This is a better fit for narrow spaces, like a sidebar or a mobile view.

Pick whichever layout fits where you're placing the search bar. You can always switch back later if it doesn't look right, so you do not have to get it perfect on the first try.

Additional Settings

These settings control the search button text and which filters appear in the search bar. Getting these right helps visitors narrow down to the trips they actually want.

Search Button Label

This is the text on the button visitors press to search. You can change it to match your site's tone.

For example, you could use "Find Trips," "Search Now," or "Explore Tours." Pick something that feels natural for your business. If your site focuses on guided treks, "Find Treks" may feel clearer than a more general label.

Filter Fields

Each filter lets visitors narrow down trips by a specific detail. You can turn each one on or off, change its label, set its order, and pick an icon for it.

Here's what each filter does:

Say you run both day tours and week-long treks. You'd want the Duration filter turned on so visitors can pick "half day" or "7 days" and see only matching trips. If you only offer trips in one country, you might turn the Destination filter off since there's nothing to compare.

For each filter, you can change four things:

• Show [Filter] - turns the filter on or off in the search bar
• Filter Label - changes the text shown above that filter. For example, you could rename "Trip Types" to "Tour Category" if that makes more sense to your customers.
• Display Order - controls the position of the filter relative to the others. A lower number puts it earlier in the row.
• Choose Icon - lets you upload a custom icon file (an SVG, which is a type of image that scales without getting blurry) or pick one from the built-in icon library

Take a minute to think about which filters matter most for your trips. Not every trip needs all six. If you don't offer trips with fixed dates, turning off the Date filter keeps your search bar cleaner. Once these options look right, you can move on to styling the search bar so it matches the rest of your site.

Style Settings

The style settings control how the search bar looks. This is where you match the search bar to your brand colors and the rest of your site's design.

General Settings

These settings apply to the overall search bar section.

• Primary Color - the main color for the search bar section. Pick a color that matches your brand.
• Background Color - the color behind the search fields. If your page has a white background, a light gray here can make the search bar stand out.
• Typography - controls the font family, text size, and text style. This is where you make sure the search bar text matches the fonts used on the rest of your site.
• Padding - the space inside the search bar section, between the edges and the content. More padding gives the fields more room to breathe.
• Box Shadow - adds a shadow effect around the section. This can make the search bar look like it's floating slightly above the page.
• Border Type - the style of border around the section (solid, dashed, dotted, or none)
• Border Radius - controls how rounded the corners are. A higher number makes the corners more curved. Say your buttons and cards use rounded corners. Matching that here keeps your site looking consistent.

If your homepage already uses certain colors on banners or booking sections, matching them here helps the search bar feel like part of the same site. Small style choices like rounded corners can make the whole page feel more put together. Once this section looks close, you can fine-tune the fields themselves.

Input

These settings control the individual search fields where visitors type or select values.

• Input Color - the color of the text inside the search fields
• Background Color - the background color of each search field
• Icon Color - the color of any icons inside the fields
• Arrow Color - the color of dropdown arrows on filters that use a dropdown menu
• Border Type - the border style around each field (solid, dashed, etc.)
• Border Radius - how rounded the corners of each field are
• Padding - the space inside each field
• Margin - the space outside each field, between it and neighboring elements
• Item Spacing - the space between multiple fields when they sit side by side

If your brand uses a specific color for form fields, this is where you apply it. Even small touches like matching the border radius of your fields to your buttons can make the whole page feel more polished.

A good example is a tour site that uses soft rounded buttons and light beige booking forms. Matching those same shapes and colors here helps the search bar blend in instead of feeling separate. You do not need to change every setting. Start with the ones visitors notice first.

Button

These settings control the search button that visitors click to run their search.

• Typography - the font family, size, weight, and style of the button text
• Padding - the space inside the button, between the text and the button edges
• Normal/Hover States - controls the button's appearance in two situations: when a visitor is viewing the page (Normal) and when they move their mouse over the button (Hover). You can set different colors for each. For example, a button might be blue normally and turn darker blue when someone hovers over it.
• Background Color - the background color of the button
• Text Color - the color of the button text
• Border Type - the border style around the button (solid, dashed, dotted, etc.)
• Border Width - how thick the button's border is
• Border Color - the color of the button's border
• Border Radius - how rounded the button corners are
• Box Shadow - adds a shadow to the button to give it a slight sense of depth on the page

A good approach for the button is to use your main brand color as the background, white for the text, and a slightly darker shade of your brand color for the hover state. That keeps it familiar to visitors who are used to your site's look.

If your booking button is already green or dark blue across the rest of your site, using that same color here can help the search button feel more trustworthy and easier to spot. Once the button looks right, your search bar is ready for visitors to use.