Trips Tab

You can add a Trips tab widget via the Elementor plugin to showcase the trips on pages.

You can check the below instructions to configure the widget.

Layout Settings #

• Layout: Select from a variety of layout options to display trips. There are different layouts available, allowing you to customize the appearance of the Trips tab.

Query Settings #

• Number of Trips: Specify the total number of trips to display.
• Offset: Set the number of trips to skip before displaying the rest.
• Taxonomy: Select the taxonomy you want to display for filtering the trips.

Additional Settings #

• Enable Slider: Toggle to enable the display of tabs in a slider format.
• Featured Ribbon: Enable to display a “featured” ribbon on trips.
• Discount: Enable to display the discount percentage.
• Review: Enable to display trip reviews.
• Location: Enable the toggle to display location of the trip.
• Title: Enable to display the trip titles.
• Title Meta: Add the title meta that you want to display in each trip.
• Price: Enable to display the trip prices.
• Show Striked Price on Sale: Enable to display the striked price for trips on sale.
• Duration Type: Choose to display the trip duration in days or nights.
• Price Label: Add the price label.
• Wishlist: Enable the toggle to display wishlist icon.
• Show view more button: Enable the toggle to display view more button.

Slider Settings #

• Slider Number: Set the number of sliders to display at once.
• Space Between Slides: Define the spacing between each slide in pixels.
• Autoplay: Enable the transition between slides to be made automatically.
• Autoplay Speed: Set the time between each slide transition in milliseconds.
• Loop: Enable the toggle to continuously cycle slides after the last one.
• Transition Speed: Adjust the speed of slide transitions in milliseconds.
• Slider Arrow: Enable the toggle to show navigation arrows.
• Slider Pagination: Enable dots for navigating between slides.

General Settings #

• Background Color: Choose the background color for the widget section.
• Padding: Adjust the padding around the content within the widget section.
• Border Radius: Set the border radius to control the roundness of the corners.
• Border Type: Choose the border type for the widget section.
• Box Shadow: Configure the box shadow effect for the post boxes within the widget section.

Tabs #

• Layout: Choose from various layout options to display the tabs.
• Gap: Adjust the column and row gaps between the tabs.
• Orientation: Select the desired orientation for displaying the tabs (horizontal or vertical).
• Typography: Customize the typography settings for the tabs, including font size, style, and weight.
• Color: Set the color for the tabs in both active and inactive states.

Content #

• Alignment: Align the widget section as desired.
• Background Color: Choose the background color for the widget section.
• Padding: Adjust the padding around the content within the widget section.
• Border Type: Select the border type for the widget section.
• Box Shadow: Configure the box shadow for the post boxes within the widget section.
• Border Radius: Set the border radius to control the roundness of the corners.

Image #

• Image Size: Select the aspect ratio for the featured image of the trips for both normal and hover modes.
• Object Fit: Choose the object fit for the trip’s featured image in both normal and hover modes.
• Width: Specify the width of the image for both normal and hover modes.
• Height: Specify the height of the image for both normal and hover modes.
• Border Radius: Define the border radius for the images in both normal and hover modes.
• Box Shadow: Configure the box shadow for the featured image in both normal and hover modes.

Title #

• Typography: Choose and configure the typography for the post titles.
• Color: Set the color of the trip titles displayed in this widget for both normal and hover mode.
• Margin: Set a margin around the title of the trips for both normal and hover mode.

Location #

• Position: Set the position of the trip location.
• Typography: Configure the typography for the trip location.
• Icon Color: Choose the color for the location icon.
• Icon Size: Set the size of the location icon.
• Margin: Adjust the margin around the location.
• Text Color: Specify the text color for the trip location for both hover and normal mode.

Metas #

• Typography: Select typography for the Trips Metas.
• Text Color: Set the text color of Trips Metas.
• Icon Size: Select the size of the Metas icons.
• Icon Color: Choose the color for the icons in Trips Metas.
• Space Between: Adjust the space between the Trips Metas.
• Margin: Set a margin around the Trips Metas.

Price #

• Layouts: Select a layout to display the price tag; three options are available.
• Typography: Set the typography for both the normal and strikeout prices.
• Color: Choose the color for both the normal and strikeout prices.

Featured Tag #

• Typography: Set the typography for the featured tag.
• Layout: Select a layout to display the featured tag.
• Alignment: Choose the alignment for displaying the featured tag.
• Color: Choose the color for the featured tag.
• Background Color: Select a background color for the featured tag.

Discount Tag #

• Typography: Set the typography for the discount tag.
• Layout: Select a layout to display the discount tag.
• Alignment: Choose the alignment for displaying the discount tag.
• Color: Choose the color for the discount tag.
• Background Color: Select a background color for the discount tag.

Slider #

• Prev Arrow: Choose an SVG for the previous arrow.
• Next Arrow: Choose an SVG for the next arrow.
• Padding: Add space around the slider arrow.
• Size: Select the size of the arrow.
• Offset: Set the offset distance for the arrow.
• Background Color: Select the arrow background color for both normal and hover states.
• Color: Choose the arrow color for both normal and hover states.
• Border Type: Select the border style for the arrow.
• Border Radius: Adjust the border radius for rounded arrow corners.
• Box Shadow: Add shadow effects around the arrow.
• Color (Pagination): Choose the pagination dot color of the slider.
• Active Color (Pagination): Select the active pagination dot color.
• Spacing (Pagination): Adjust the spacing between pagination dots.