The Divi Video Module lets you easily add videos anywhere on your website. You can upload videos through the WordPress media library or embed them from platforms like YouTube or Vimeo. It’s perfect for any spot on your site where video content is needed.
Add The Divi Video Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Video module and click on it to load it. Alternatively, you can use the Search option to find it.
{Gif here}
The Divi Video Module Use Cases
Presenting Product Demonstrations: Use the module to demonstrate how your product works, clearly illustrating its features and benefits.
Embedding Tutorials or Training: Add video tutorials or instructional content to guide users on using your services or completing specific tasks, improving engagement and support.
Highlighting Testimonials or Case Studies: Share video testimonials from satisfied customers or case studies that demonstrate the impact of your offerings in a compelling format.
Video Module Settings Breakdown
Once you've added the Video module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab allows selecting the video file to be displayed by the Video module, setting an overlay image, and changing the module's admin label.
Video - Choose the video file, YouTube, or Vimeo video.
Overlay - Choose an image from your media library, upload a new image, or click Generate From Video, which will automatically use the video's thumbnail as the overlay.
Admin Label - Choose the Video module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Video module are in this tab.
Play Icon - Choose the Video module's play icon styles.
Overlay - Choose the Video module's overlay styles.
Sizing - Choose the Video module's sizing.
Spacing - Choose the Video module's spacing.
Border - Choose the Video module's border styles.
Box Shadow - Choose the Video module's Box Shadow styles.
Filters - Choose the Video module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Video module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Video module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Video module, enabling advanced styling that perfectly aligns with your vision.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Video's module visibility based on different devices.
Transitions - Choose how long Video's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Video's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Video module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
