Advanced Trips 4 Widget

Display tours in a customizable grid with a view more button using the Advanced Trips 4 Elementor widget, flexible trip selection, and per-element styling.

Overview

The Advanced Trips 4 widget displays your tours in a grid of cards. Each card can show details such as the trip title, location, duration, reviews, price, and a button that opens the full trip page.

A widget is a ready-made block that you drag onto a page. Elementor is the page builder plugin where you arrange and edit content visually.

For example, you can show your most popular treks on your homepage. Visitors can select View More on a card to open the full trip page and read the itinerary.

Before you start

Before adding the widget, make sure both of these plugins are installed and active:

Elementor
WP Travel Engine

You can check this from Plugins on the left sidebar of your WordPress dashboard.

Follow these steps in the Elementor editor. You can return to any step later if you want to change the layout or styling.

Add the widget to your page

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

Search for Advanced Trips 4 in the widget list. Drag the widget onto the section where you want the trip 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 how many tour cards appear in each row and how much space appears between them. Set these options first so you can judge the rest of your design.

Column: Choose how many trips appear in each row. For example, six treks in three columns create two rows.
Gap: Set the space between the trip cards.
Layout: Choose how the cards are arranged.

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 promote seasonal offers on one page and popular packages on another.

Show Trips by: Choose how the widget selects trips. Options include 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 to display.

For a summer promotion, choose trips on sale. For your homepage, choose featured trips.

Review the preview to confirm that the right trips appear.

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 before they visit the full trip page.

Featured Ribbon: Show a ribbon marking a trip as featured. Use it to highlight your signature Everest Base Camp trek.
Discount: Show the discount percentage for trips on sale.
Review: Show trip 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.
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 original and current prices.
Duration Type: Choose whether the duration appears in days or nights. Use nights for overnight packages when that wording is clearer.
Price Label: Set the wording shown next to the price, such as "From" or "Starting at."
Wishlist: Show a wishlist icon so travelers can save a trip for later.
Show View More Button: Show a button that takes visitors to the full trip page. This option distinguishes Advanced Trips 4 from other trip grid layouts.

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: Add space around the content inside the widget section.
Border Radius: Round the corners of the widget section.
Border Type: Choose the border style for the widget section.
Box Shadow: Add a shadow effect around the trip cards in the widget section.

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

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

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

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: Set how the content sits inside the card.
Background Color: Set the background color inside the card.
Padding: Add space around the card content.
Border Type: Choose the border style around the card content.
Box Shadow: Add a shadow effect to the card content area.
Border Radius: Round the corners of the card content area.

Image

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

A hover view is the version of the image or card that appears when a visitor moves the pointer over it.

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

Title

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

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

Location

A clear 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 where the trip location appears on the card.
Typography: Choose the font, size, weight, and other text settings for the location.
Icon Color: Set the color of the location icon.
Icon Size: Set the size of the location icon.
Margin: Set 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 font, size, weight, and other text settings for 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: Set 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 these styling options to distinguish the current price from the original price.

Typography: Set the typography for the normal and struck-through prices.
Color: Set the color for the normal 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 font, size, weight, and other text settings for the featured tag.
Layout: Choose how the featured tag appears on the card.
Alignment: Set where the featured tag sits.
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 font, size, weight, and other text settings for the discount tag.
Layout: Choose how the discount tag appears on the card.
Alignment: Set where the discount tag sits.
Color: Set the color of the discount tag text.
Background Color: Set 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?