Destination/Activities Slider 2 Widget

Overview

The Destination/Activities Slider 2 widget shows your destinations, activities, or trip types as a moving carousel. Each slide links to a category page where visitors can browse related tours.

A widget is a building block that you drag onto a page in Elementor. You can use this widget to help visitors find the tours that interest them.

For example, if you run tours across five regions of Nepal, add this widget to your homepage to show those regions as sliding cards. Visitors can swipe or click through the cards, choose a region, and see all your tours there.

Slider 2 also includes a call-to-action section at the bottom of the carousel. Add a heading, some text, and a button that sends visitors to your booking page or a special offers page.

How to add the widget to your page

You need Elementor and WP Travel Engine installed and turned on before you add this widget.

What you’ll need before you start:

• Access to your WordPress dashboard
• A page that you can edit with Elementor
• Elementor and WP Travel Engine installed and active

Layout settings

Layout settings control how the slides look.

• Layouts: Pick from several layout options. Each layout changes how the slides look. Try each one to see which fits your website.

Choose the layout that makes your tour categories easiest to scan. You can change it later if you want to try a different look.

Choosing what to show

These settings decide which categories appear in the slides.

WordPress calls a way of grouping things a taxonomy. In WP Travel Engine, Destinations, Activities, and Trip Types are all taxonomies.

• Select Taxonomy: Choose whether to show Destinations, Activities, or Trip Types. If you pick Destinations, each slide shows one of your destination pages, such as “Everest Region” or “Annapurna Region.”
• Show Term by: Decide how to choose which items appear. Default shows items automatically. Choose terms lets you select specific items from a list. This is useful when you only want to feature a few popular destinations.
• Number of Items: Choose how many slides appear in total. If you have 20 destinations but only want to show 6, set this to 6.

Once you choose the categories and number of items, you can decide what visitors see in the text below each slide.

Extra options

These settings control the titles, trip counts, and call-to-action section shown in each slide.

• CTA Title: Set a heading for the call-to-action section at the bottom of the carousel. For example, you might write “Ready to plan your adventure?” to encourage visitors to take the next step.
• CTA Content: Add a short description below the CTA title. This is where you can tell visitors what to do next or mention a special offer. For example, “Browse all our Himalayan treks and book your spot today.”
• CTA Button: Set the text for the button in the call-to-action section. Something like “View All Tours” or “Book Now” works well.
• CTA Title Tag: Choose the heading level for the CTA title. This helps search engines like Google understand the structure of your page. If you are not sure, leave the default.
• Title Tag: Choose the heading level for the slide titles. H2 makes the titles more prominent. H4 makes them more subtle. If you are not sure, leave the default.
• Show Trip Counts: Turn this on to show how many trips are linked to each destination or activity. For example, a slide for “Everest Region” could show “12 trips” underneath the name. Visitors can see how much you offer before they click.

Your categories and call-to-action content are now ready. Next, choose how the carousel moves.

Slider settings

These settings control how the carousel moves and behaves. This is where you decide whether the slides move on their own and how fast they go.

• Slider Number: Set how many slides are visible at once. If you pick 3, visitors see three slides side by side. On phone screens, Elementor may show fewer slides to fit the screen.
• Space Between Slides: Set the gap between each slide. A bigger gap gives each slide more breathing room. A smaller gap makes the carousel feel more connected.
• Autoplay: Turn this on to make the carousel move on its own. Visitors do not need to click anything. The slides advance by themselves.
• Autoplay Speed: Set how long each slide stays visible before moving to the next one. The time is in milliseconds. For example, 5000 means each slide stays for 5 seconds.
• Loop: Turn this on to make the carousel go back to the first slide after the last one. It keeps cycling without stopping.
• Transition Speed: Control how fast the slides move from one to the next. The time is in milliseconds. A lower number makes the movement quicker. A higher number makes it smoother and slower.
• Slider Arrow: Turn this on to show left and right arrows. Visitors click these to move through the slides.
• Slider Pagination: Turn this on to show small dots below the carousel. Visitors can click a dot to jump to a specific slide.

For example, if you have five destinations, you might turn on Autoplay and Loop and show 2 slides at a time. This creates a smooth, continuous carousel that visitors can also control with the arrows.

The movement settings determine how visitors browse your categories. You can now adjust the overall appearance of the widget.

Making it look good

These settings control the overall appearance of the widget area.

• Background Color: Set the background color for the widget area. This is the space behind all the slides.
• Padding: Adjust the space between the content inside each slide and the slide edges. More padding gives the content more room. Less padding makes the layout more compact.
• Border Radius: Control how round the corners are. A higher number creates rounder corners. Zero creates sharp, square corners.
• Border Type: Choose whether to add a border around the widget area. You can choose a solid, dashed, or dotted border.
• Box Shadow: Add a shadow behind the slides so they stand out from the page background. A light shadow can give the slides a subtle three-dimensional effect.

Each part inside the slide can also be styled on its own. The sections below cover each one.

Content settings

These settings control the inner area of each slide. This is the part where the image and title sit.

• Alignment: Line up the content to the left, center, or right within each slide.
• Background Color: Set a background color for the inside of each slide. This is different from the overall widget background above.
• Padding: Control the space between the slide content and its edges.
• Border Type: Add a border around the inside of each slide.
• Box Shadow: Add a shadow to each individual slide.
• Border Radius: Round the corners of each individual slide.

These controls help each slide fit the rest of your website. You can now style the call-to-action area.

CTA settings

These settings control how the call-to-action section looks. This is the area at the bottom of the carousel where you can add a heading, description, and button to guide visitors toward booking.

• Alignment: Line up the call-to-action content to the left, center, or right.
• Padding: Set the space around the call-to-action section. More padding gives it more room to stand out.
• Title Typography: Change the font, size, weight, and spacing of the CTA title text.
• Title Color: Set the color of the CTA title.
• Title Margin: Adjust the space around the CTA title.
• Description Typography: Change the font, size, weight, and spacing of the CTA description text.
• Description Color: Set the color of the CTA description text.
• Description Margin: Adjust the space around the CTA description.

Use the CTA area to point visitors to a clear next step, such as booking a multi-day package or viewing a seasonal offer.

Title settings

These settings control how the name of each destination, activity, or trip type looks.

• Typography: Change the font, size, weight, and spacing of the title text.
• Color: Set the color of the title text. You can also set a different color when someone hovers their mouse over it. Hover means when a visitor moves their mouse pointer over the slide without clicking. You can set a color for both the normal and hover states.
• Margin: Control the space around the title within the slide. You can set this for both the normal and hover states.

Keep the title easy to read against the slide image. The image settings give you more control over the photo itself.

Image settings

These settings control how the photo in each slide looks.

• Image Size: Choose the aspect ratio of the photo. This controls whether the image looks more square, wide, or tall. The setting is available for both normal and hover modes.
• Object Fit: Control how the photo fills its space. Cover fills the entire area but may crop part of the image. Contain shows the whole photo without cropping. The setting is available for both normal and hover modes.
• Width: Set how wide the photo appears in the slide. The setting is available for both normal and hover modes.
• Height: Set how tall the photo appears in the slide. The setting is available for both normal and hover modes.
• Border Radius: Round the corners of the photo itself. This can give images a softer look. The setting is available for both normal and hover modes.

Choose photos that represent each destination or activity clearly. The final settings control the arrows and dots visitors use to move through the carousel.

Slider arrows and pagination settings

These settings control how the navigation arrows and dots look. They only matter if you turned on Slider Arrow or Slider Pagination in the slider settings above.

• Prev Arrow: Choose the icon for the previous, or left, arrow.
• Next Arrow: Choose the icon for the next, or right, arrow.
• Padding: Add space around the arrow icons.
• Size: Set how big the arrows are.
• Background Color: Set the color behind the arrows. You can set one color for normal view and a different one when someone hovers over it.
• Color: Set the color of the arrow icon itself. You can set one color for normal view and a different one on hover.
• Border Type: Add a border around the arrows.
• Border Radius: Round the corners of the arrow background.
• Box Shadow: Add a shadow around the arrows.
• Color (Pagination): Set the color of the pagination dots.
• Active Color (Pagination): Set the color of the dot that represents the current slide.
• Spacing (Pagination): Adjust the space between the pagination dots.

Use colors that stand out against your slide background. Visitors should be able to see the arrows and identify the active dot without searching for them.