Trips List Widget

Overview

The Trips List widget shows your tours in a compact list on any page. A widget is a ready-made content block that you place on a page. Elementor is the page builder where you design that page inside WordPress.

Use this widget when you want to show several trips in a tidy list without taking up too much space. For example, you might list your upcoming day hikes on a destination page or show your most popular multi-day treks on your home page.

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

Layout settings

Layout controls how each trip appears inside the list. This matters because the layout affects how much information travelers see at a glance and how much space the list takes on the page.

• Column - Choose the number of trips to show in each row. A smaller number gives each trip more room. For example, use two columns when you want travelers to notice larger photos and longer trip titles.
• Gap - Set the space between the rows and columns of trips. Add more space when you want each trip to feel separate and easier to scan.
• Layout - Pick from three layout options. Each option arranges the trip photo, title, price, and other details differently. Choose the layout that best fits the page, such as a compact list for a destination page with several tours.

Once the list has the right shape and spacing, choose which trips should appear in it.

Query settings

Query settings decide which trips travelers see in the list. Use them to keep each list focused on the page where it appears.

• 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 picked from a list. For example, if you are running a spring promotion, choose trips on sale so the page highlights those offers.
• Number of Trips - Set the total number of trips to display. Use a smaller number for a short section on your home page. Use a larger number when the widget is on a dedicated tours page.

After you decide which tours to show, choose the information travelers should see on each trip card.

Additional settings

Additional settings control the details that appear with each trip. These options help travelers understand where a tour goes, what it is called, and whether they can save it for later.

• Location - Show the trip's location. This helps travelers identify the destination before they open the trip details.
• Title - Show the trip title. Use clear titles such as “Annapurna Base Camp Trek” so travelers know what each trip offers.
• Wishlist - Show the wishlist icon. Travelers can use it to save trips they may want to compare or book later.

With the trip details in place, you can style the widget so it fits the rest of your website.

General style settings

General style settings control the overall look of the widget area. Think of them as styling the outer frame around your trip list, including its spacing, background, and borders.

• Typography - Set the font style, size, weight, and other text settings for the widget section.
• Padding - Adjust the space inside the widget area. More padding gives the trip list room around its content.
• Margin - Adjust the space outside the widget area. Use it to separate the list from the sections above and below it.
• Alignment - Choose how the content sits inside the widget section, such as left, center, or right alignment.
• Background Color - Set the background color for the widget section. A light background can help the trip cards stand out from the rest of the page.
• Box Shadow - Add and adjust a shadow around the trip cards. A soft shadow can separate the cards from the page background.
• Border Type - Choose the border style for the widget section. You can set the border for both normal and hover states.
• Border Radius - Round the corners of the widget section. You can set the corner shape for both normal and hover states.

The following elements can each be styled individually within the widget.

Content style settings

These settings control the main content area inside each trip card. Use them when the card feels too cramped or too plain.

• Alignment - Choose how the content sits inside the widget section.
• Background Color - Set the background color behind the content.
• Padding - Add space around the content inside the widget section.
• Border Type - Choose the border style for the widget section.
• Box Shadow - Add a shadow around the trip cards.
• Border Radius - Round the corners of the widget section.

Hero Post style settings

A hero post is the first or featured trip card that stands out from the other trips. Use these settings when you want one trip, such as your main Everest trek, to get extra attention.

• Color - Set the color used for the hero post.
• Hover Color - Set the color travelers see when they move their pointer over the hero post.
• Title Typography - Change the font style and size of the hero post title.
• Price Background Color - Set the background color behind the hero post price.
• Typography - Set the text style for the regular price and the struck-through price.
• Color - Set the color for the regular price and the struck-through price.

Title style settings

Use these settings to make trip titles clear and consistent with the rest of your website. You can also control how the title looks when a traveler points to it.

• Typography - Set the font style, size, weight, and other text settings for trip titles.
• Color - Set the title color in normal and hover modes.
• Padding - Add space around the title in normal and hover modes.
• Margin - Adjust the space around the title in normal and hover modes.

Image style settings

These settings control the featured image for each trip. Use them to keep photos the same size and prevent one image from making the list look uneven.

• Image Size - Choose the aspect ratio of the featured image in normal and hover modes.
• Object Fit - Choose how the featured image fits inside its space in normal and hover modes.
• Width - Set the image width in normal and hover modes.
• Height - Set the image height in normal and hover modes.
• Border Radius - Set the corner roundness of the image in normal and hover modes.
• Box Shadow - Add and adjust a shadow around the featured image.

Location style settings

Use these settings to make the destination easy to find on each trip card. This is useful when travelers are comparing tours in different regions.

• Position - Choose where the trip location appears on the card.
• Typography - Set the font style and size for the trip location.
• Icon Color - Choose 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 trip location text.