Trips Tab Widget

What the Trips Tab Widget Does

The Trips Tab widget helps you display your tours in organized tabs on a page. A widget is a ready-made content block you place on your page. Elementor is the page builder where you add and arrange those blocks inside WordPress.

This widget works well when you want to group trips in a way that makes sense to travelers. For example, you can show tabs for Nepal Treks, Day Tours, and Family Packages so visitors can switch between options without leaving the page.

Once the widget is on the page, you can choose how the trips look, which trips appear, and what details to show. The next sections walk you through each part.

What You'll Need Before You Start

With those basics in place, you are ready to add the widget to your page.

Adding the Trips Tab Widget to a Page

Layout Settings

Your layout choice changes how the trips are arranged on the page. This matters because a clean layout helps visitors compare trips faster.

• Layout - Choose the overall trip card design for the Trips Tab widget. Several layouts are available, so you can pick the one that best fits your page.

A compact layout can work well for day tours with shorter titles. A larger card layout can work better for multi-day treks where you want more room for pricing, duration, and trip highlights.

If one layout feels crowded, try another before changing lots of style settings. The layout gives you the starting structure.

Query Settings

Query settings decide which trips appear in the widget. This is where you control the list your visitors will browse.

• Number of Trips - Set how many trips to show in total. For example, show 6 trips if you want a short list of your best-selling treks.
• Offset - Skip a number of trips before the widget starts showing them. For example, if your first 3 trips already appear somewhere else on the page, set an offset of 3 to avoid repeating them.
• Taxonomy - Choose the grouping system used to filter trips. This could help you organize tabs by destination, activity type, or another trip category you already use on your site.

Once the right trips are showing, you can decide which trip details to display.

Additional Settings

These settings control what travelers can see on each trip card. You do not need to turn everything on. Show the details that help someone choose and book.

• Enable Slider - Show the trips in a moving slider instead of a fixed row or grid. This can help if you want to fit more trips into a smaller space.
• Featured Ribbon - Add a featured label to selected trips. This is useful for promoting a signature trek or a top-selling holiday package.
• Discount - Show the discount percentage on discounted trips. This helps seasonal offers stand out.
• Review - Show trip reviews. Reviews can help new visitors feel more confident about booking.
• Location - Show the trip location. This is helpful if you sell tours in multiple regions, such as Kathmandu Valley, Everest, and Annapurna.
• Title - Show the trip title. Most pages should keep this on so visitors know what they are looking at.
• Title Meta - Show extra title-related details for each trip. This can add supporting information alongside the title, depending on your setup.
• Price - Show the trip price. This is useful when travelers are comparing options side by side.
• Show Striked Price on Sale - Show the original price with a line through it when a trip is on sale. This helps visitors see the discount clearly.
• Duration Type - Choose whether duration appears in days or nights. For example, a lodge trek may be clearer in nights, while a day hike is better shown in days.
• Price Label - Set the wording that appears with the price. For example, you might use "From" for custom packages or "Per person" for group departures.
• Wishlist - Show the wishlist icon so visitors can save trips for later.
• Show View More Button - Show a button that lets visitors open the full trip details.

A good starting point is to show the title, location, price, and view more button. Then add reviews, ribbons, or wishlist options if they match how you sell your tours.

Slider Settings

These settings apply when Enable Slider is turned on. They control how the trips move and how many are visible at one time.

• Slider Number - Set how many trip cards appear at once. For example, showing 3 slides at a time can work well for desktop screens.
• Space Between Slides - Set the gap between each slide in pixels. A little space can make each trip card easier to read.
• Autoplay - Move the slides automatically without the visitor clicking.
• Autoplay Speed - Set how long the slider waits before moving to the next slide, in milliseconds. A slower speed gives people more time to read prices and trip names.
• Loop - Start again from the beginning after the last slide. This keeps the slider moving continuously.
• Transition Speed - Control how fast the slider moves from one trip to the next, in milliseconds.
• Slider Arrow - Show left and right arrows for manual navigation.
• Slider Pagination - Show navigation dots so visitors know how many slides are available and where they are in the slider.

If your visitors need time to compare tours, keep movement slow or turn autoplay off. A calmer slider often feels better on tour pages.

General Style Settings

These settings control the look of the widget section as a whole. Use them to match the trip tabs to the rest of your website.

• Background Color - Set the background color for the widget section.
• Padding - Add space inside the widget section so the content does not sit too close to the edges.
• 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.

For example, a soft shadow and rounded corners can make package cards feel more polished. If your site already has a clean and minimal look, you may prefer no shadow and a simple border.

Tab Styling

These settings control how the tabs themselves look. Clear tabs help visitors understand what each group of trips represents.

• Layout - Choose how the tabs are arranged.
• Gap - Adjust the space between tabs, both across and down the page where needed.
• Orientation - Choose whether the tabs appear horizontally or vertically.
• Typography - Control the tab font size, style, and weight.
• Color - Set the tab colors for active and inactive states.

Horizontal tabs often work well for a small set of trip groups, such as Treks, Tours, and Expeditions. Vertical tabs can work better if you have more destinations or longer tab names.

The next sections cover each part of the trip card one by one. You can go through them in order or jump to the one you want to change.

Content Style

These settings control the main content area inside each trip card.

• Alignment - Choose how the content lines up inside the widget section
• Background Color - Set the background color behind the content area
• Padding - Add space inside the content area so text and details have room
• Border Type - Choose the border style around the content area
• Box Shadow - Add shadow around the trip card content area
• Border Radius - Round the corners of the content area

For example, extra padding can help when your trip titles are longer or when you show price, location, and reviews together.

Image Style

These settings control the featured image for each trip card.

• Image Size - Choose the image shape or aspect ratio for normal and hover states
• Object Fit - Choose how the image fills its space for normal and hover states
• Width - Set the image width for normal and hover states
• Height - Set the image height for normal and hover states
• Border Radius - Round the image corners for normal and hover states
• Box Shadow - Add shadow around the image for normal and hover states

A wide image can work well for scenic treks. A more square image can suit city tours or activity packages where the subject is close up.

Title Style

These settings control how the trip name appears.

• Typography - Choose the font style, size, and weight for trip titles
• Color - Set the title color for normal and hover states
• Margin - Add space around the title for normal and hover states

If you sell premium trips, a larger title can help key packages stand out. If your trip names are long, adding margin can make the card easier to scan.

Location Style

These settings control how the trip location is displayed.

• Position - Choose where the location appears on the trip card
• Typography - Choose 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
• Text Color - Set the location text color for normal and hover states

This is useful if you want destinations like Pokhara, Chitwan, or Langtang to be easy to spot at a glance.

Metas Style

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

• Typography - Choose the font style for the trip metas
• Text Color - Set the text color for the trip metas
• Icon Size - Set the size of the meta icons
• Icon Color - Set the color of the meta icons
• Space Between - Adjust the spacing between trip metas
• Margin - Add space around the trip metas

If you show several trip details together, more spacing can stop the card from feeling crowded.

Price Style

These settings control how the price area looks.

• Layouts - Choose one of the available layouts for displaying the price tag
• Typography - Set the font style for both the current price and the struck-through price
• Color - Set the color for both the current price and the struck-through price

This matters most when you run offers such as shoulder-season discounts or early booking deals.

Featured Tag Style

These settings control the featured label shown on selected trips.

• Typography - Choose the font style for the featured tag
• Layout - Choose the display layout for the featured tag
• Alignment - Choose where the featured tag sits
• Color - Set the text color of the featured tag
• Background Color - Set the background color of the featured tag

You might use this tag for your most popular Everest base camp trek or a high-margin private departure.

Discount Tag Style

These settings control the discount label shown on sale trips.

• Typography - Choose the font style for the discount tag
• Layout - Choose the display layout for the discount tag
• Alignment - Choose where the discount tag sits
• Color - Set the text color of the discount tag
• Background Color - Set the background color of the discount tag

A bold color can help a group discount or off-season offer stand out quickly.

Slider Arrows and Pagination Style

These settings control the navigation tools used with the slider.

• Prev Arrow - Choose the SVG icon for the previous arrow
• Next Arrow - Choose the SVG icon for the next arrow
• Padding - Add space around each slider arrow
• Size - Set the arrow size
• Offset - Set how far the arrows sit from the slider
• Background Color - Set the arrow background color for normal and hover states
• Color - Set the arrow color for normal and hover states
• Border Type - Choose the border style for the arrows
• Border Radius - Round the arrow corners
• 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) - Adjust the space between pagination dots

If your slider sits on a busy photo background, stronger arrow colors and larger dots can make navigation easier to notice.