Video Box

The Video Popup Widget in Animation Addons for Elementor is a paid feature. To use this widget, make sure the plugin is properly installed and activated on your site. While you can browse both free and pro widgets using the filtering options, please note that this particular widget is only available in the pro version.

Introduction

The Video Box Widget in Animation Addons for Elementor allows you to showcase videos in an interactive and visually appealing format, enhancing user engagement on your website.

Key Use Cases for the Video Box Widget:

• Display engaging videos directly on your site to capture attention.
• Customize the video box design to match your site’s overall look and feel.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Video Box Widget:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Find the Video Box Widget in the list.
3. Toggle it on to enable the widget.
   Now, the Video Box Widget is ready to use!

How to Add Video Box Widget in Elementor:

• Open the page where you want to add the Video Box Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Video Box Widget.”

How to Configure the Video Box Widget:

• In the Elementor panel, search for the “Video Box Widget.”
• Drag and drop the widget into your desired section.
• In the widget settings, add your video URL and set a custom thumbnail if needed.
• You can also adjust the title, description, icon, and play button appearance.

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

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

Content Settings

The Content section of the Video Box Widget is divided into several configurable panels to help you design and control the video presentation effectively. Below is a breakdown of each subsection and its available settings:

1. Layout

• Style: Choose between two predefined layout styles.
• Alignment: Set the alignment of the entire widget content (left, center, or right).

2. Thumbnail

• Type: Select whether to display an image or a video as the thumbnail.
• Image: Upload or choose a thumbnail image from the media library.
• Image Resolution: Define the resolution quality of the thumbnail image.

3. Content

• Title: Enter the main heading text to be displayed.
• Title HTML Tag: Set the appropriate semantic HTML tag (e.g., H1, H2, H3) for the title.
• Subtitle: Add a short descriptive subtitle to appear below the title.

4. Button

• Text: Customize the call-to-action button text.
• Icon: Select an icon to be displayed alongside the button text.
• Icon Spacing: Adjust the spacing between the icon and the button text.
• Active Ripple: Enable or disable the ripple effect on click.
• Ripple Color: Choose the color of the ripple animation.
• Active Spinner: Toggle the loading spinner effect when the video is triggered.

Style Settings

The Style section of the Video Box Widget offers comprehensive design customization options across four main categories: Video Box, Thumbnail, Content, and Button. Below is a detailed breakdown of each section and its styling controls:

1. Video Box

• Border Type: Select the border style (solid, dashed, dotted, etc.) for the video box container.
• Border Radius: Define the corner roundness of the video box to achieve sharp or rounded edges.

2. Thumbnail

• Height: Adjust the height of the thumbnail to fit your design layout and maintain responsive proportions.

3. Content

• Padding: Set inner spacing around the content area for better visual separation.
• Background Type: Choose between classic color, gradient, or image backgrounds for the content container.
• Title Color: Set the color for the title text.
• Title Typography: Customize the font family, size, weight, line height, and letter spacing for the title.
• Title Space: Control the spacing below the title.
• Subtitle Typography: Define the typography settings for the subtitle text.
• Subtitle Color: Choose a color for the subtitle text.
• Subtitle Space: Adjust the spacing below the subtitle for consistent layout flow.

4. Button

• Typography: Configure the font settings for the button text.
• Width & Height: Set the button’s dimensions to match your design needs.
• Border Type: Choose the border style for the button.
• Border Radius: Define how rounded the button edges should be.
• Box Shadow: Apply a shadow effect around the button for depth and emphasis.
• Text Color: Set the color of the button text.
• Background Type: Customize the button background using a solid color, gradient, or image.

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 

And that’s it! You’ve now successfully configured the Video Box Widget in Elementor to showcase engaging video content in a sleek and interactive way. Feel free to explore more styling options to match your website’s vibe.

Need help? Our support team is just a message away!