Trips Accordion Widget

Overview

The Trips Accordion widget displays your trips in rows that visitors can open one at a time. It helps you show several trips without using too much space on your page.

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 Trips Accordion 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. Next, choose the trips you want to show.

Layout settings

Layout settings control the space between trip rows and the way trips are arranged. Use them to make the accordion fit the available space on your page.

• Gap: Sets the space between the rows and columns of trips. Increase the gap when the rows feel crowded. Reduce it when you want to show more trips in a smaller area.
• Layout: Lets you choose how the trips appear. Select the arrangement that works best for your website.

A day tour page may need a tighter layout. This lets visitors compare several tours at once. A page for longer treks may look better with more space around each trip.

When the trips fit your page, choose which trips the widget should show.

Query settings

Query settings decide which trips appear in the accordion. You can use different settings on different pages. For example, one page can show your latest trips while another shows seasonal offers or featured packages.

• 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.

Select trips on sale when you want to create a seasonal offers section. Choose specific trips when you want to highlight a 3-day trek, a popular day tour, and a multi-day package together.

After you choose the trips, decide which details visitors should see when they open each row.

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".
• Trip Meta: Adds the trip meta information for each trip. Meta information is the short supporting information shown with a 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 prices.
• Wishlist: Shows the wishlist icon so visitors can save a trip for later.
• Show View More Button: Shows a View More button for the trip list.
• View More Button Label: Sets the text on the button that opens more trips. For example, you could use "See all trips".
• Button Label: Sets the text on the accordion's action button. Use a label that tells visitors what happens next, such as "View trip details".

You do not need to show every detail. A small day tour may only need the title, location, duration, and price. A multi-day package may benefit from reviews, discount information, and a wishlist. Add-ons such as gear rental can also be mentioned in the trip information if your trip setup includes them.

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 appearance of the widget area and trip cards. 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.
• Hover Border Radius: Sets the corner shape when a visitor moves their pointer over the widget.
• Box Shadow: Adds and adjusts a shadow around the trip cards inside the widget section.

Use a light background and a small shadow to separate your trips 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 a trip card. Open only the section you want to change.

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 cards 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 understand 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.

Title

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

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

Location

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

• Position: Sets where the trip location appears on the card.
• Typography: Sets the font style, size, 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: Sets the font style, size, and other text settings for the trip metas.
• Text Color: Sets the 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 open the trip.

• 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 trip price.

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. Two 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.

Buttons

These settings control the appearance of the buttons visitors use to view more information or open a trip.

• 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.