Advanced Trips 3 Widget

Build a clear trip grid in Elementor with flexible trip selection, card details, a view more button, and styling options for your tour website.

Overview

The Advanced Trips 3 widget displays your trips in a grid on any page built with Elementor. A widget is a ready-made block that you drag onto a page. Elementor is the page builder plugin where you arrange and customize those blocks. For example, you could show six treks on your homepage, highlight your featured Everest package, and add a button that takes visitors to each trip's full details.

Before you start

Make sure both plugins are active before you add the widget. You can check this from Plugins on the left sidebar of your WordPress dashboard.

The Elementor plugin must be installed and active.
The WP Travel Engine plugin must be installed and active.

Follow these steps to add your trips, choose the information visitors see, and adjust the card design.

Add the widget to your page

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

Search for Advanced Trips 3 in the widget list. Drag the widget onto the section where you want your trip grid to appear.

Choose your grid layout

Your grid layout controls how many trip cards visitors see in each row. A clear layout helps visitors compare your tours without making the page feel crowded.

Column: Choose how many trips appear in each row. For example, six treks shown in three columns create two rows.
Gap: Set the space between the trip cards. Increase the gap when the cards feel too close together.
Layout: Choose how the trip information is arranged inside each card.

For example, use three columns for a selection of day tours. Use fewer columns when each card contains more details.

Check the preview to make sure the cards fit comfortably across the page.

Pick which trips to show

Choosing the right trips keeps the grid relevant to the page. You might want to promote seasonal offers on one page and your most popular packages on another.

Show Trips by: Choose how the widget selects trips. You can show the latest trips, trips on sale, featured trips, trips filtered by term, or specific trips selected from a list.
Number of Trips: Set the total number of trips the widget displays.

For a summer promotion, choose trips on sale. For your homepage, choose featured trips so visitors see the packages you most want to promote.

Review the preview to confirm that the right trips appear in the grid.

Choose what details to display on each card

The details on each card help travelers decide which trip to open. Show the information they need most, such as the destination, duration, price, and available discount.

Featured Ribbon: Show a featured ribbon on selected trips. Use it to highlight a signature tour such as your Everest Base Camp trek.
Discount: Show the discount percentage for trips on sale.
Review: Show trip reviews.
Location: Show the trip location, such as Pokhara, Nepal.
Title: Show the trip title.
Title Meta: Add title meta information for each trip.
Price: Show the trip price.
Show Striked Price on Sale: Show the original price with a line through it when a trip is on sale.
Duration Type: Choose whether the trip duration appears in days or nights. Use nights for an overnight package when that format is clearer for travelers.
Price Label: Set the text that appears next to the price. Common labels include "From" and "Starting at".
Wishlist: Show the wishlist icon.
Show View More Button: Show a button that takes visitors to the full trip page. This is what makes Advanced Trips 3 different from the other trip grid layouts.
View More Button Label: Set the text on the button. You could use "View Trip" or "See Details".

Check the preview and make sure each card shows the details your travelers need.

Style the overall card look

These settings affect the overall area around the trip cards. Use them to match the grid with the rest of your website.

Background Color: Set the background color for the widget section.
Padding: Adjust the space around the content inside the widget section.
Border Radius: Control how rounded the corners appear.
Border Type: Choose the border style for the widget section.
Box Shadow: Add and configure a shadow effect around the trip cards.

Preview the grid on different screen sizes. Make sure the cards remain readable on desktop, tablet, and mobile screens.

The main settings control the grid and the information shown on each card. Use the individual element settings below when you need more detailed control over a specific part of a card.

Fine-tune individual elements

Adjust each part of the card when you want more control over spacing, colors, text, images, or buttons.

Content

Content settings control the inside of each trip card. Use them when the text feels too close to the featured image or the card edges.

Alignment: Align the content inside the card.
Background Color: Set the background color for the card content.
Padding: Adjust the space around the content.
Border Type: Choose the border style for the content area.
Box Shadow: Configure the shadow effect for the card.
Border Radius: Control the roundness of the card corners.

Image

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

Image Size: Select the aspect ratio of the featured image for normal and hover views.
Object Fit: Choose how the image fits inside its area for normal and hover views.
Width: Set the image width for normal and hover views.
Height: Set the image height for normal and hover views.
Border Radius: Define the image corner roundness for normal and hover views.

Title

Title settings make trip names easier to notice. Use them to keep your titles consistent with the rest of your website.

Typography: Configure the typography for trip titles.
Color: Set the title color for normal and hover views.
Margin: Set the space around the title for normal and hover views.

Location

The location helps travelers understand where a tour starts or takes place. Adjust these settings when the location needs to stand out more clearly on the card.

Position: Set the position of the trip location.
Typography: Configure the typography for the trip location.
Icon Color: Set the color of the location icon.
Icon Size: Set the size of the location icon.
Margin: Adjust the space around the location.
Text Color: Set the color of the location text.

Metas

Trip metas are supporting details such as duration and other trip information. Keep them readable so they help travelers without taking attention away from the trip title.

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

Price

Price settings help travelers understand the cost of each trip. When you show sale prices, use the styling options to distinguish the current price from the original price.

Layouts: Choose how the price appears on the card. Three layout options are available.
Typography: Set the typography for the regular and struck-through prices.
Color: Set the color for the regular and struck-through prices.

Featured Tag

The featured tag or ribbon marks trips you want visitors to notice first. Use a noticeable style for selected trips, such as a signature trek or a new multi-day package.

Typography: Set the typography for the featured tag.
Layout: Choose how the featured tag appears.
Alignment: Set the alignment of the featured tag.
Color: Set the color of the featured tag text.
Background Color: Set the background color of the featured tag.

Discount Tag

The discount tag shows visitors that a trip is on sale. Use a contrasting color when promoting seasonal discounts or limited-time group offers.

Typography: Set the typography for the discount tag.
Layout: Choose how the discount tag appears.
Alignment: Set the alignment of the discount tag.
Color: Set the color of the discount tag text.
Background Color: Set the background color of the discount tag.

Buttons

Button settings control the view more button on each card. Choose a standout color so travelers notice the button and open the full trip page. A hover state is how the button looks when a visitor moves their mouse over it.

Typography: Configure the typography for the button label.
Padding: Adjust the space around the button content.
Margin: Set the space around the button.
Background: Choose the background color for normal and hover views.
Color: Set the button label color for normal and hover views.
Border Type: Choose the border style for normal and hover views.
Border Radius: Define the roundness of the button corners.
Box Shadow: Configure the button shadow for normal and hover views.

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?