Destination/Activities Slider 3 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.

Elementor is a page builder plugin that lets you build pages by dragging items into place. A widget is a ready-made block you drag onto a page. A taxonomy is a way to group things on your site, such as destinations or activities.

For example, you may offer treks in Nepal and day tours in Kathmandu. Add this widget to your homepage to show those destinations or activities as sliding cards. Visitors can browse your offers and choose the type of tour they want to explore.

How to add the widget to your page

You need a WordPress page open in Elementor. You also need destinations, activities, or trip types already created on your tour site.

Layout settings

Choose a layout that fits the space on your page. The available layouts change how your destinations, activities, or trip types appear in the carousel.

• Layouts: Choose from the available layout options for displaying your tour categories.

Try the available layouts in the preview. Keep the one that makes your tour cards easy to scan.

Now that the layout is in place, choose which tour categories visitors should see.

Choosing what to show

These settings decide which destinations, activities, or trip types appear in the slider.

• Select Taxonomy: Choose whether to show Destination, Activities, or Trip Types.
• Show Term by: Choose whether to use the default setup or select specific terms from a list.
• Number of Items: Enter the total number of items you want to display.

For example, you may want to promote Hiking, Cultural, and Adventure trips during the busy season. Choose the right taxonomy. Then select those terms from the list. Set the number of items high enough to include all three.

You have control over the items in the slider. The next settings control the information visitors see on each item.

Extra options

These options control the title and trip information shown with each taxonomy item.

• Title Tag: Choose the heading level used for the taxonomy title.
• Show Trip Counts: Show the number of trips linked to each taxonomy.

Trip counts help visitors understand how many choices they have. For example, a destination card could show that it has 12 treks available. Turn this option off if you want a cleaner design.

Your content is ready. You can now decide how the carousel moves and how visitors browse it.

Slider settings

These settings control how the carousel moves and how visitors move between items.

• Autoplay: Turn on automatic slide changes.
• Autoplay Speed: Set the time between slide changes in milliseconds.
• Loop: Keep the slider cycling after it reaches the last item.
• Transition Speed: Set how quickly each slide moves in milliseconds.
• Slider Arrow: Show arrows that visitors can use to move forward or backward.
• Slider Pagination: Show dots that visitors can use to move between slides.

For example, use a slower autoplay speed when you want visitors to read details about multi-day packages. Keep the arrows or pagination turned on when visitors need to browse at their own pace.

The carousel now behaves the way you want. Next, adjust its overall appearance so it fits your website.

Making it look good

These settings control the overall area around the slider.

• Background Color: Choose a background color for the widget section.
• Padding: Adjust the space around the content inside the widget section.
• Border Radius: Control how rounded the corners look.
• Border Type: Choose the border style for the widget section.
• Box Shadow: Add and adjust the shadow effect for the taxonomy boxes inside the widget section.

Use the overall settings first. Then style the content, titles, images, arrows, and pagination separately.

The following sections help you style each part of the taxonomy box.

Content settings

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

• Alignment: Choose whether the content lines up to the left, center, or right.
• Background Color: Set the background color for the inside of each taxonomy box.
• Padding: Adjust the space around the content inside the taxonomy box.
• Border Type: Set the border style for the taxonomy box.
• Box Shadow: Add and adjust the shadow for the taxonomy boxes.
• Border Radius: Control how rounded the corners look.

Use these settings when the text area feels cramped or when the cards do not match the rest of your website.

Each slide now has its own shape and spacing. You can make the titles easier to read next.

Title settings

These settings control how the taxonomy title looks.

• Typography: Change the font, size, weight, and other title text settings.
• Color: Set the title color for normal and hover states.
• Margin: Add space around the title for normal and hover states.

For example, increase the title size if you want names such as Annapurna Trek or Kathmandu Day Tour to stand out. Add more margin if the title sits too close to the image.

Your titles should now be easier to read. The image settings help you show your tour photos at the right size.

Image settings

These settings control how the featured image appears in the slider.

• Image Size: Choose the aspect ratio of the featured image for normal and hover states.
• Object Fit: Choose how the featured image fits inside 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: Set how rounded the image corners look for normal and hover states.

If your photos look stretched or cropped in a strange way, start with Object Fit, Width, and Height. Use photos with a similar shape when you want the slider to look consistent.

Your tour photos should now fit the cards better. The final style settings control the arrows and dots visitors use to browse the slider.

Slider arrows and pagination settings

These settings control the look and position of the arrows and pagination dots.

• Prev Arrow: Choose an SVG for the previous arrow.
• Next Arrow: Choose an SVG for the next arrow.
• Padding: Add space around each slider arrow.
• Size: Set the size of the arrows.
• Offset X: Adjust the horizontal position of the arrows.
• Offset Y: Adjust the vertical position of the arrows.
• Background Color: Choose 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: Adjust how rounded the arrow corners look.
• 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 active pagination dot.
• Spacing (Pagination): Adjust the space between pagination dots.

If the arrows are hard to see over a photo, change the Background Color, Color, or Size first. For a slider showing seasonal packages, use clear arrows and pagination dots so visitors can browse every offer.

Your slider is ready to review. Check it on the live page as well as in the Elementor preview.