Featured Trip Widget

Overview

The Featured Trip widget puts one trip front and center on any page you choose. It works well on a homepage, a landing page for a seasonal campaign, or a dedicated page for your most popular trek.

A widget is a ready-made content block that you add to a page. Elementor is the page builder inside WordPress. You use it to add and arrange content blocks on your website.

Add the Featured Trip widget

Before you start, make sure Elementor and WP Travel Engine are active on your WordPress website. You can check your active plugins from Plugins on the left sidebar of your WordPress dashboard.

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 the trip you want to highlight.

Layout settings

Layout settings control how the Featured Trip widget looks on your page. Use them to pick the arrangement that fits your design.

• Widget Layout: Lets you choose from three layout options. Each one arranges the trip image, title, and details differently. Pick the one that fits the space on your page.

Say you are building a landing page for a summer trekking season. A wide layout with the image on one side and details on the other can fill a hero section nicely. A more compact layout might work better in a sidebar or a smaller content area.

When the layout fits your page, choose which trip to show.

Query settings

Query settings decide which trip appears in the widget. You only need to pick one trip here since this widget highlights a single trip.

• Show Featured Trip: Lets you select the specific trip you want to display. Choose from the trips you have already created in WP Travel Engine.

For example, you might choose your most popular Everest Base Camp trek for the homepage. Or you could feature a seasonal day tour that you want to promote for a limited time.

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

Additional settings

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

• Featured Ribbon: Shows a "featured" ribbon on the trip. 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".
• Sub Title: Shows the trip's subtitle. This is a short line of text below the title that adds context, such as "14 days of mountain adventure."
• Trip Meta: Adds the supporting trip information shown with the trip, 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.
• View Details Button: Shows a View Details button that links to the full trip page.
• Button Label: Sets the text on the button. Use a label that tells visitors what happens next, such as "Book this trek" or "See full itinerary".

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 subtitle that sets the tone.

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 card inside the widget section.

Use a light background and a small shadow to separate the featured trip from the rest of a landing page. Add more padding when the text feels too close to the edge.

The settings below let you adjust each part of the featured 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: Sets where the content sits inside the widget section.
• Background Color: Sets the background color for the widget section.
• Padding: Adjusts the space around the content inside the widget section.
• Border Type: Sets the border style for the widget section.
• Box Shadow: Adds and adjusts a shadow around the trip card inside the widget section.
• Border Radius: Controls how rounded the corners of the widget section 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: Chooses the shape of the featured image in both its normal and hover states.
• Object Fit: Selects how the featured image fits inside its space. Use this when you want the image to fill the area or keep its original proportions.
• Width: Sets the image width in both its normal and hover states.
• Height: Sets the image height in both its normal and hover states.
• Border Radius: Controls how rounded the corners of the image are, in both its normal and hover states.

Title

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

• Typography: Sets the font style, size, and other text settings for the trip title.
• Color: Sets the color of the trip title in both its normal and hover states.
• Margin: Sets the space around the title in both its normal and hover states.

Sub Title

These settings control how the trip subtitle looks and how much space surrounds it.

• Typography: Sets the font style, size, and other text settings for the trip subtitle.
• Color: Sets the color of the trip subtitle.
• Margin: Sets the space around the subtitle.

Metas

These settings control the supporting trip information shown with the trip, such as duration or difficulty level.

• Typography: Sets the font style, size, and other text settings for the trip metas.
• Text Color: Sets the text color of the trip metas.
• Icon Size: Sets the size of the meta icons.
• Icon Color: Sets the color of the meta icons.
• Space Between: Adjusts the space between the 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: Lets you choose how the price tag appears. Three layout options are available.
• Typography: Sets the text style for both the current price and the struck-through original price.
• Color: Sets the color for both the current price and the struck-through original price.
• Margin: Sets the space around the price, for both the current 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: Sets the font style, size, and other text settings for the featured tag.
• Layout: Lets you choose how the featured tag appears. Three layout options are available.
• Alignment: Sets where the featured tag sits on the trip card.
• 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 it to make a seasonal offer or group discount visible.

• Typography: Sets the font style, size, and other text settings for the discount tag.
• Layout: Lets you choose how the discount tag appears. Three layout options are available.
• Alignment: Sets where the discount tag sits on the trip card.
• Color: Sets the color of the discount tag text.
• Background Color: Sets the background color of the discount tag.

Button

These settings control the appearance of the button visitors use to view the full trip details.

• Typography: Sets the font style, size, and other text settings for the button label.
• Padding: Adjusts the space around the button text.
• Margin: Sets the space around the button.
• Background: Sets the button background color in both its normal and hover states.
• Color: Sets the button label color in both its normal and hover states.
• Border Type: Sets the button border style in both its normal and hover states.
• Border Radius: Controls how rounded the button corners are.
• Box Shadow: Adds and adjusts a shadow around the button in both its normal and hover states.