Destination/Activities Slider 1 Widget

Overview

Show your destinations, activities, or trip types as a moving carousel on any page built with Elementor. Each slide links to a category page where visitors can browse related tours.

A widget is a building block you drag onto a page in Elementor.

For example, you may offer 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 to find a region. They can then see all your tours in that area.

How to add the widget to your page

You need both Elementor and WP Travel Engine installed and turned on. The widget will not appear if either plugin is inactive.

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 a layout that makes your categories easy to browse. Next, decide which categories you want to show.

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.

Use these settings to keep the carousel focused on your most popular categories.

Extra options

These settings control the titles and trip counts shown in each slide.

• Title Tag: Choose the heading level for the slide titles. This helps search engines such as Google understand the titles on your page. H2 makes the titles more prominent. H4 makes them more subtle. If you are not sure which option to choose, leave the default setting.
• 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.

Next, choose how the carousel moves and how visitors control it.

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

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.
• Margin: Add space around the content inside the slide.
• 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.

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.

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.
• Margin: Set the space around the photo within the slide.

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 (left) arrow.
• Next Arrow: Choose the icon for the next (right) arrow.
• Padding: Add space around the arrow icons.
• Size: Set how big the arrows are.
• Offset X: Move the arrows left or right. This helps you position them where they look best.
• Offset Y: Move the arrows up or down.
• 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.