Advanced Trip Widget

Overview

Show your trips in a grid on any page with the Elementor Advanced Trip widget. You can choose which trips appear, decide how many visitors see in each row, and control the information displayed on every trip card.

A widget is a ready-made content block that you add to a page. Elementor is the page builder inside WordPress that lets you place and customize widgets with a live preview.

Add the Advanced Trip widget

You can change these settings later without changing the trip information itself. Set the layout first so the widget fits the space on your page. Then choose which trips to show.

Layout settings

Layout settings control how the trips are arranged on your page. Use them to pick the grid that fits your space.

• Column: Sets the number of trips shown per row. For example, 3 columns means three trips side by side.
• Row Gap: Sets the space between rows and columns of trips. Increase it when the cards feel crowded.
• Layout: Lets you choose from several layout options. Each one arranges the trips differently. Pick the one that fits your page.

Say you have six day tours to show on a landing page. Three columns with a moderate row gap lets visitors compare them at a glance. Two columns with more space might work better for longer multi-day treks where each card has more detail.

When the grid fits your page, choose which trips to show.

Query settings

Query settings decide which trips appear in the grid. You can use different settings on different pages.

• Show Trips by: Chooses how WP Travel Engine selects trips. You can show the latest trips, trips on sale, featured trips, trips filtered by a term, or specific trips selected from a list.
• Number of Trips: Sets the total number of trips to display.

For example, you could show your latest trips on your homepage. On a seasonal offers page, you might choose trips on sale. On a destination page, you could filter by a term like "Annapurna" to show only treks in that region.

After you choose the trips, decide which details visitors should see.

Additional settings

Additional settings control the information shown for each trip. Show the details that help travelers decide whether a trip is right for them.

• Featured Ribbon: Shows a "featured" ribbon on selected trips. Use it to draw attention to a signature trek or your most popular package.
• Discount: Shows the discount percentage for trips that are on sale. For example, a trip with a seasonal price reduction can display its percentage savings.
• Review: Shows trip reviews so visitors can see feedback from previous travelers.
• Location: Shows the trip's location, such as the Annapurna region or a nearby national park.
• Title: Shows the trip title, such as "Kathmandu Valley Day Tour" or "Everest Base Camp Trek."
• Title Meta: Adds the supporting trip information shown with the title, such as its duration or other trip details.
• Price: Shows the trip price.
• Show Striked Price on Sale: Shows the original price with a line through it when a trip is on sale. Visitors can compare the original price with the sale price.
• Duration Type: Choose whether the trip duration appears in days or nights. Use nights when you describe overnight stays to your travelers.
• Price Label: Sets the text shown beside or near the price. You might use a label such as "From" for a trip with different pricing options.
• Wishlist: Shows the wishlist icon so visitors can save the trip for later.

You do not need to show every detail. A day tour might only need the title, location, duration, and price. A multi-day package might benefit from reviews, discount information, and a wishlist.

When the content is ready, use the general style settings to match the widget to the rest of your website.

General style settings

General style settings control the overall appearance of the widget area. Use them to match your colors, spacing, and page design.

• Background Color: Sets the background color for the widget section.
• Padding: Adjusts the space around the content inside the widget section.
• Border Radius: Controls how rounded the corners of the widget section are.
• Border Type: Sets the border style for the widget section.
• Box Shadow: Adds and adjusts a shadow around the trip cards inside the widget section.

The settings below let you adjust each part of a trip card. Each section covers one part of the card.

Content

These settings control the space and overall appearance of the trip card content.

• Alignment: Aligns the content inside the trip card.
• Background Color: Sets the background color for the content area.
• Padding: Adjusts the space around the content inside the card.
• Border Type: Sets the border style for the content area.
• Box Shadow: Adds and adjusts a shadow around the content area.
• Border Radius: Controls how rounded the corners of the content area are.

Image

These settings control how the featured image appears. Use a clear image so travelers can picture the trip at a glance.

• Image Size: Selects the image aspect ratio in normal and hover modes.
• Object Fit: Controls how the image fits within its area in normal and hover modes.
• Width: Sets the image width in normal and hover modes.
• Height: Sets the image height in normal and hover modes.
• Border Radius: Controls how rounded the image corners are in normal and hover modes.
• Box Shadow: Adds and adjusts a shadow around the featured image in normal and hover modes.

Title

These settings control how each trip title looks and how much space surrounds it.

• Typography: Controls the font, size, weight, and other text settings for trip titles.
• Color: Sets the color of the trip titles.
• Margin: Sets the space around the trip title.

Location

These settings control where the trip location appears and how it looks.

• Position: Sets where the trip location appears in the card.
• Typography: Controls the font, size, weight, and other text settings for the trip location.
• Icon Color: Sets the color of the location icon.
• Icon Size: Sets the size of the location icon.
• Margin: Adjusts the space around the trip location.
• Text Color: Sets the color of the trip location text.

Metas

These settings control the supporting trip information shown with each trip.

• Typography: Controls the font, size, weight, and other text settings for trip metas.
• Text Color: Sets the color of the trip meta text.
• Icon Size: Sets the size of the meta icons.
• Icon Color: Sets the color of the meta icons.
• Space Between: Adjusts the space between trip metas.
• Margin: Sets the space around the trip metas.

Price

These settings control how the price appears. Clear pricing helps travelers understand the cost before they click through to the trip page.

• Layouts: Selects how the price tag appears in the trip card.
• Background Color: Sets the background color of the price tag.
• Typography: Controls the text settings for the regular and struck-through prices.
• Color: Sets the color of the regular and struck-through prices.

Featured Tag

These settings control the appearance of the featured tag. Use the tag to highlight a special trek or a package you want travelers to notice first.

• Typography: Controls the font, size, weight, and other text settings for the featured tag.
• Layout: Selects how the featured tag appears.
• Alignment: Sets where the featured tag appears within its area.
• Color: Sets the color of the featured tag text.
• Background Color: Sets the background color of the featured tag.

Discount Tag

These settings control the appearance of the discount tag. Use them to make a seasonal offer or group discount visible.

• Typography: Controls the font, size, weight, and other text settings for the discount tag.
• Layout: Selects how the discount tag appears.
• Alignment: Sets where the discount tag appears within its area.
• Color: Sets the color of the discount tag text.
• Background Color: Sets the background color of the discount tag.