Advanced Trip 2 Widget

Display your tours in a clean, customizable grid on any page of your website using the Advanced Trip 2 Elementor widget, with flexible trip selection and card styling.

Overview

The Advanced Trip 2 widget displays your tours in a grid on any page of your website. A widget is a ready-made block that you can drag onto a page in Elementor. Elementor is the page builder plugin you use to arrange and edit content visually.

Use this widget to create a clear tour listing without building each trip card by hand. For example, you could show your most popular Himalayan treks on your homepage, with each card showing the trip location, duration, price, and reviews.

Before you start

Before you add the widget, make sure these plugins are active in your WordPress dashboard:

Elementor plugin
WP Travel Engine plugin

You can check plugin status from Plugins on the left side of your WordPress dashboard.

Follow these steps in the Elementor editor. You can return to any step later when you want to change the way your trips appear.

Add the widget to your page

Open the page where you want to show your tours with Elementor. The Elementor editor panel appears on the left side of the screen.

Search for Advanced Trip 2 in the widget list. Drag the widget from the panel and drop it into the part of the page where you want the tour grid to appear.

Your page now shows a preview of the trip grid. The available layout and trip settings appear in the left panel.

Choose your grid layout

The layout controls determine how many tour cards appear in each row and how much space sits between them. Set these options first so you can judge the rest of your design accurately.

Column: Choose how many trips appear in each row. If you have six treks to show and set this to 3, visitors see two tidy rows with three trips in each row.
Gap: Set the space between the rows and columns of trip cards. Increase the gap when the cards look crowded.
Layout: Choose how the trip cards are arranged. Several layout options are available, so select the one that best suits the information you want to show.

Check the page preview after changing these settings. You should see your cards arranged in the number of columns and the layout you selected.

Pick which trips to show

Choose the trips that match the purpose of the page. This prevents visitors from having to search through every tour to find the offers you want to highlight.

Show Trips by: Choose how the widget 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: Set the total number of trips to display in the grid.

For a summer promotion, choose trips on sale to show discounted tours. For a homepage section, choose featured trips to highlight the experiences you most want to sell.

Review the preview to confirm that the widget is showing the trips you intended. You can change the selection without changing the trip information itself.

Choose what details to display on each card

Trip cards work best when they show the information a traveler needs before clicking. Use these settings to decide which details appear on every card.

Featured Ribbon: Show a ribbon that marks a trip as featured. Use it to draw attention to your signature Everest Base Camp trek.
Discount: Show the discount percentage for a trip. This helps travelers notice a seasonal offer.
Review: Show the trip's reviews so visitors can see feedback from other travelers.
Location: Show where the trip takes place, such as Pokhara, Nepal.
Title: Show the name of the trip.
Title Meta: Show supporting information associated with the trip title. This can help visitors understand the type or category of the trip.
Price: Show the trip price.
Show Striked Price on Sale: Show the original price with a line through it when the trip is on sale. Travelers can compare the old price with the discounted price.
Duration Type: Choose whether the trip duration uses days or nights. Use nights for an overnight package when that wording is clearer for your customers.
Price Label: Set the wording that appears with the price, such as “From” or “Starting at.”
Wishlist: Show a wishlist icon so travelers can save a trip for later.

Look at each card in the preview after changing these options. Keep the details that help travelers make a decision without making the card feel busy.

Style the overall card look

Set the basic appearance of the widget section so the trip cards fit the rest of your website. These controls affect the overall area around the cards.

Background Color: Choose the background color for the widget section. A light background can help the cards stand out from the rest of the page.
Padding: Set the space between the edge of the widget section and its content.
Border Radius: Round the corners of the widget section.
Border Type: Choose the border style for the widget section.
Box Shadow: Add and adjust a shadow around the trip cards within the widget section.

Preview the page on different screen sizes if possible. Make sure the cards have enough space and remain easy to read on phones and larger screens.

The settings in the main steps control the grid and the information shown on each card. Use the individual element settings below when you need more detailed control over colors, spacing, images, or text.

Fine-tune individual elements

You can adjust each part of a trip card separately. Go through each section below, update the settings you want to change, and check the page preview as you go.

Content

Use these settings to control the inside of the card. For example, adjust the spacing when the card text feels too close to the image or the card edges.

Alignment: Set how the content sits inside the card.
Background Color: Choose the background color for the card content.
Padding: Set the space around the content inside the card.
Border Type: Choose the border style for the card content.
Box Shadow: Add a shadow around the trip card.
Border Radius: Round the corners of the card content.

Image

These settings control the featured image on each trip card. Use them when your tour photos have different shapes or when you want every card image to have the same height.

Image Size: Choose the image shape for the normal and hover views.
Object Fit: Choose how the featured image fills its area in the normal and hover views.
Width: Set the image width in the normal and hover views.
Height: Set the image height in the normal and hover views.
Border Radius: Round the corners of the image in the normal and hover views.
Box Shadow: Add a shadow around the featured image in the normal and hover views.

Title

Use these settings to make trip names easy to notice. Keep the title style consistent with your website so the cards feel like part of the same page.

Typography: Set the font, size, weight, and other text settings for trip titles.
Color: Choose the title color in the normal and hover states.
Margin: Set the space around the title in the normal and hover states.

Location

These settings control the location shown on a card. A clear location helps travelers understand where a tour starts or takes place.

Position: Choose where the trip location appears on the card.
Typography: Set the font and text style for the trip location.
Icon Color: Choose the color of the location icon.
Icon Size: Set the size of the location icon.
Margin: Set the space around the location.
Text Color: Choose the color of the trip location text.

Metas

Trip metas are the supporting details shown on a card, such as duration or other trip information. These settings help you make those details readable without taking attention away from the trip title.

Typography: Set the font and text style for the trip metas.
Text Color: Choose the color of the trip meta text.
Icon Size: Set the size of the meta icons.
Icon Color: Choose the color of the meta icons.
Space Between: Set the space between multiple trip metas.
Margin: Set the space around the trip metas.

Price

Use these settings to make the price clear on every card. If you show sale prices, choose styles that make the current price easy to distinguish from the original price.

Layouts: Choose one of the three available layouts for displaying the price tag.
Typography: Set the text style for the current price and the struck-through price.
Color: Choose the colors for the current price and the struck-through price.

Featured Tag

These settings control the featured tag or ribbon. Use a noticeable style when you want travelers to spot selected trips quickly.

Typography: Set the font and text style for the featured tag.
Layout: Choose how the featured tag is arranged.
Alignment: Set where the featured tag sits on the card.
Color: Choose the color of the featured tag text.
Background Color: Choose the background color of the featured tag.

Discount Tag

These settings control the discount tag shown on sale trips. Use a contrasting color so a seasonal discount is easy for travelers to see.

Typography: Set the font and text style for the discount tag.
Layout: Choose how the discount tag is arranged.
Alignment: Set where the discount tag sits on the card.
Color: Choose the color of the discount tag text.
Background Color: Choose the background color of the discount tag.

If you're still stuck or have a question we didn't cover, our support team is happy to help. Reach out at our support page and we'll get you sorted.

Was this page helpful?