Video Box Slider

The Video Box Slider Widget in Animation Addons for Elementor is a paid feature. To use this widget, make sure the plugin is installed and activated on your site. You can explore both free and pro widgets through the filtering options, but this specific widget is only available in the pro version.

Introduction

The Video Box Slider Widget lets you showcase multiple videos in an interactive, engaging slider—perfect for enhancing user experience and visual presentation.

Key Use Cases for the Video Box Slider Widget:

• Display multiple videos in an interactive slider for enhanced user engagement.
• Customize the design to match your website’s branding and layout seamlessly.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Video Box Slider Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Video Box Slider Widget in the list.
• Toggle it on to enable the widget.
• The Video Box Slider Widget is now ready to use!

How to Add the Video Box Slider Widget in Elementor:

• Open the page where you want to add the Video Box Slider Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Video Box Slider Widget.”
• Drag the widget to your desired section.
• The Video Box Slider Widget is now ready for customization!

How to Configure Video Box Slider Widget

• In the Elementor panel, search for the “Video Box Slider Widget.”
• Drag and drop the widget into your desired section.
• In the widget settings, add multiple video URLs and set custom thumbnails if needed.
  Customize the title, description, icons, and play button for each video slide.
• Use the Style tab to adjust typography, colors, spacing, borders, and shadows for a visually appealing slider.

Configuring Video Box Slider Widget : A Step-by-Step Guide

Once the Video Box Slider Widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

The Video Box Slider Widget in Animation Addons for Elementor offers three main customization panels under the Content section:

1. Video Box Slider

• Video Slides: Add as many video slides as needed to showcase your content.
• Title HTML Tag: Define the HTML tag for slide titles to improve SEO and structure.
• Image Resolution: Set the image quality for thumbnails.
• Thumbnail After Button: Choose whether the thumbnail appears after the play button.
• Slider Max Width: Set the maximum width of the video slider for better layout control.

2. Button

• Text: Customize the button label.
• Icon: Choose an icon to accompany the text.
• Icon Spacing: Adjust spacing between icon and text.
• Active Ripple: Enable/disable ripple animation on button click.
• Ripple Color: Define the ripple animation color.
• Active Spinner: Add a loading spinner effect.
• Display: Control the button’s visibility and placement.

3. Slider Options

• Slides to Show: Define how many slides appear at once.
• Autoplay: Automatically cycle through video slides.
• Allow Touch Move: Enable swipe gestures for mobile users.
• Loop: Choose whether the slider loops continuously.
• Mousewheel Button: Allow mousewheel navigation.
• Animation Speed: Set how quickly slides transition.
• Space Between: Control spacing between each slide.
• Navigation Button: Toggle visibility of navigation arrows.
• Previous/Next Arrow Icon: Customize arrow icons.
• Pagination: Enable pagination bullets.
• Pagination Type: Select bullet or fraction style.
• Direction: Set slide direction (left/right).
• Center Slide: Highlight the center slide for better focus.

Style Settings

The Style section of the Video Box Slider Widget offers extensive design controls to help you fine-tune the appearance of every element. Below is a breakdown of each subsection and its available customization options:

1. Button

• Typography: Adjust font size, weight, line height, and more for the button text.
• Height & Width: Define the dimensions of the button for better alignment and balance.
• Border Type & Radius: Customize the border style and round the corners as desired.
• Box Shadow: Add shadow effects to create depth and emphasis.
• Text Color: Choose the color of the button text.
• Background Type: Set solid colors, gradients, or images for the button background.

2. Thumbnail

• Height: Set the height of the video thumbnail for consistent visual presentation.
• Padding: Control the spacing around the thumbnail.
• Border Radius: Apply rounded corners for a smoother look.

3. Content

• Padding: Manage the spacing inside the content area.
• Background Type: Define the background style using solid color, gradient, or image.
• Title
  
  • Color: Set the color for the title text.
  • Typography: Customize font settings for clarity and emphasis.
  • Margin: Adjust spacing around the title.
    
• Subtitle
  
  • Color: Choose a distinct color for subtitles.
  • Typography: Modify font styles and sizes.
  • Margin: Control the spacing around subtitle text.

4. Slider Navigation

• Size & Circle Size: Set the size of the navigation arrows and their circular backgrounds.
• Border Type & Radius: Apply border styles and curvature to navigation buttons.
• Padding: Adjust inner spacing within the navigation buttons.
• Color & Background Type: Style the arrow icons and their backgrounds.
• Position Type & Alignment: Define the positioning (absolute or relative) and align navigation arrows horizontally or vertically.
• Gap: Set spacing between previous and next navigation arrows.

5. Slider Pagination

• Color & Active Color: Choose default and active state colors for pagination bullets.
• Size & Gap: Adjust the size of pagination items and spacing between them.
• Border Type & Radius: Apply styles and rounded corners to the bullets.
• Direction: Set the pagination orientation (horizontal or vertical).
• Position & Alignment: Control the overall placement and alignment of the pagination.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Video Box Slider Widget in Elementor to showcase your videos in a dynamic slider format. For any further assistance or inquiries, feel free to contact our support.