Trips Slider Widget

Overview

The Trips Slider widget shows your tours in a moving row on the page. A widget is a ready-made content block you drag into your page. Elementor is the page builder where you design that page inside WordPress.

This widget is useful when you want to feature several trips without taking up too much space. For example, you might show your best-selling day hikes on the home page or highlight seasonal treks on a landing page.

Before you start, make sure both Elementor and WP Travel Engine are active on your WordPress site. If both are turned on, you are ready to add the widget.

Layout settings

Layout controls how each trip card looks inside the slider. This matters because the layout changes what travelers notice first.

• Layout - Choose the design style for your trip cards. Different layouts place the image, title, price, and trip details in different spots. For example, if you want large photos to sell scenic tours, pick a layout that gives the image more room.

Once the layout feels right, choose which trips should appear in the slider.

Query settings

These settings decide which trips the slider pulls into the page. This is where you tell the widget what you want to promote.

• Show Trips by - Choose how the widget selects trips. You can show your latest trips, trips on sale, featured trips, trips from a certain category or tag, or hand-pick specific trips. For example, if you are running a spring promotion, you might show only trips on sale.
• Number of Trips - Set how many trips appear in the slider. If you show too many, the slider may feel busy. If you run a small adventure company, 4 to 6 trips is often a good place to start.

After you pick the trips, you can decide which trip details travelers will see on each card.

Additional settings

These settings control what information appears on each trip card. They help you decide what a traveler sees before they click.

• Featured Ribbon - Show a featured label on selected trips. This works well when you want to draw attention to your signature trek or best-value package.
• Discount - Show the discount percentage on trips that are on sale. This helps travelers spot special offers quickly.
• Review - Show trip reviews on the card. If you rely on social proof, this can help first-time visitors feel more confident.
• Location - Show where the trip takes place. This is helpful if you offer tours in more than one region.
• Title - Show the trip title. Most sites keep this turned on so travelers know exactly what they are looking at.
• Title Meta - Add extra trip details near the title. This can help you surface useful information without making the card feel crowded.
• Price - Show the trip price. This is useful when you want visitors to compare options quickly.
• Show Striked Price on Sale - Show the original price with a line through it when a trip is discounted. This makes the sale price stand out more clearly.
• Duration Type - Choose whether trip length appears in days or nights. For example, a lodge-based package may make more sense in nights, while a hiking tour may be clearer in days.
• Price Label - Change the text label shown with the price. You might use wording that matches your business, such as "From" for tours with variable dates.
• Wishlist - Show the wishlist icon so travelers can save a trip for later. This is helpful when visitors are comparing several tours before booking.

Next, you can control how the slider moves and how many trips show at once.

Slider settings

These settings control how the slider behaves on the page. A slower, cleaner slider often feels easier to browse.

• Slider Number - Choose how many trip cards show at the same time. If your cards include a lot of details, fewer slides usually look better.
• Space Between Slides - Set the gap between each trip card in pixels. More space can make the page feel cleaner.
• Autoplay - Turn automatic sliding on or off. Autoplay can work well on a home page, but some tour operators prefer manual browsing so visitors can read at their own pace.
• Autoplay Speed - Set how long the slider waits before moving to the next trip. A slower speed gives travelers more time to read the title and price.
• Loop - Keep the slider moving back to the beginning after the last trip. This is useful when you want the slider to keep running without stopping.
• Transition Speed - Set how fast each slide moves from one trip to the next. A moderate speed usually feels smooth and easier on the eye.
• Slider Arrow - Show next and previous arrows for manual navigation. This is helpful when travelers want to move through trips themselves.
• Slider Pagination - Show small navigation dots below the slider. These dots help visitors tell how many slides are available.

Once the movement feels right, you can shape the overall look of the section.

General style settings

These settings control the overall look of the widget area. Think of this as styling the outer frame before you style the smaller parts inside it.

• Background Color - Set the background color for the full widget area. This can help the slider stand out from the rest of the page.
• Padding - Add space inside the widget area so the content does not sit too close to the edges.
• Border Radius - Round the corners of the widget area. This can soften the look if your site uses rounded cards and buttons.
• Border Type - Add a border around the widget area if you want clearer separation from nearby content.
• Box Shadow - Add a shadow effect around the trip cards in the section. A light shadow can help the cards feel more defined.

The following elements can each be styled individually within the trip card. You do not need to change all of them. Start with the parts your visitors notice first.

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 card. This helps you match the rest of your page design.
• Background Color - Set the background behind the trip details. For example, a white content area can make text easier to read over a busy page background.
• Padding - Add space inside the content area so the text has room to breathe.
• Border Type - Add a border around the content area if you want a more defined card shape.
• Box Shadow - Add shadow around the content area to give the card more depth.
• Border Radius - Round the corners of the content area to match the rest of your site.

Image style settings

These settings control the trip photo. Good photo settings can make your tours feel more inviting before a visitor reads a single word.

• Image Size - Choose the image shape for the featured trip photo in both normal and hover views. A wide image can work well for scenic mountain tours or coastal day trips.
• Object Fit - Choose how the image fills its space. This helps keep photos looking neat even when your trip images are not all the same shape.
• Width - Set the image width in both normal and hover views.
• Height - Set the image height in both normal and hover views.
• Border Radius - Round the image corners in both normal and hover views.
• Box Shadow - Add shadow around the image in both normal and hover views.

Title style settings

These settings control how the trip name appears. Clear titles help travelers scan options quickly.

• Typography - Change the font style, size, and weight for the trip title.
• Color - Set the title color for both normal and hover view. Use a color with strong contrast so the trip name stays easy to read.
• Margin - Add space around the title in both normal and hover view.

Location style settings

These settings control how the trip location appears. This is useful if destination matters as much as price or duration for your customers.

• Position - Choose where the location appears in the card.
• Typography - Change the font style for the location text.
• Icon Color - Set the color of the location icon.
• Icon Size - Set the size of the location icon.
• Margin - Add space around the location so it does not feel crowded.
• Text Color - Set the color of the location text.

Metas style settings

These settings control the smaller trip details, such as supporting information shown with icons and text.

• Typography - Change the font style for the trip meta details.
• Text Color - Set the text color for the trip meta details.
• Icon Size - Set the size of the meta icons.
• Icon Color - Set the color of the meta icons.
• Space Between - Change the spacing between each meta item.
• Margin - Add space around the meta section.

Price style settings

These settings control how pricing appears. Clear pricing helps travelers compare trips faster.

• Layouts - Choose how the price tag is displayed. Three layout options are available, so you can pick the one that fits your card best.
• Typography - Set the font style for both the regular price and the crossed-out price.
• Color - Set the color for both the regular price and the crossed-out price. For example, you might use a softer color for the old price so the sale price stands out.

Featured tag style settings

These settings control the featured label. Use this when you want to spotlight a flagship tour or a top seller.

• Typography - Change the font style for the featured tag text.
• Layout - Choose how the featured tag is displayed.
• Alignment - Choose where the featured tag sits on the card.
• Color - Set the text color for the featured tag.
• Background Color - Set the background color for the featured tag.

Discount tag style settings

These settings control the sale or discount label. This can help seasonal offers stand out at a glance.

• Typography - Change the font style for the discount tag text.
• Layout - Choose how the discount tag is displayed.
• Alignment - Choose where the discount tag sits on the card.
• Color - Set the text color for the discount tag.
• Background Color - Set the background color for the discount tag.

Slider arrows and pagination style settings

These settings control the navigation parts of the slider. Change these if you want the arrows and dots to match your brand colors and page style.

• Prev Arrow - Choose the SVG icon used for the previous arrow.
• Next Arrow - Choose the SVG icon used for the next arrow.
• Padding - Add space around each arrow so it feels easier to click or tap.
• Size - Set the arrow size.
• Offset - Move the arrows farther in or out from the slider.
• Background Color - Set the background color of the arrows in normal and hover view.
• Color - Set the arrow color in normal and hover view.
• Border Type - Choose the border style for the arrows.
• Border Radius - Round the corners of the arrows.
• Box Shadow - Add shadow around the arrows.
• Color (Pagination) - Set the color of the pagination dots.
• Active Color (Pagination) - Set the color of the active pagination dot.
• Spacing (Pagination) - Set the spacing between pagination dots.