Site icon MonstersPost

How To Add A Background Video To Your Pages With Elementor: Elementor Video Background Tuts

Mariana
  1. Why Use Videos On Your Website Background?
  2. Step-by-Step Guide on How to Add a Background Video to Your Section
    1. Imperion
    2. Epsilonic
    3. Deco Depot
    4. BuildWall
    5. Monstroid
  3. Create an Animated Background Gallery with Elementor Pro and Custom CSS [Free Webinar]

Why Use Videos On Your Website Background?

Today, when building a website, people set a goal to attract as many visitors as possible. There are a lot of different ways to reach the goal, yet background videos are the most popular and trendy. A good video can easily convey interesting and useful information, tell a story about your company, display the product or complement various sections available on the web page. It can help you bring your enterprise or personal blog to a completely new level and improve the communication with your website users. The video is a powerful instrument; however, it is important to use it right to make it work. In this post, we are going to start with background videos in sections. Here you will find a step-by-step guide on how to add a background video to your sections with the use of the Elementor Page Builder.

Whether you are a web designer working on multiple projects or regular web user, this instrument is must-have. ONE by TemplateMonster is a recently launched subscription service that offers an advanced set of features. Over 8,500 items including premium plugins and extensions, graphics, and top templates are ready for use. Subscribe to the service and discover the most popular eCommerce and HTML templates, WordPress themes, Elementor editor and Jet plugins.

This entire set of web products is available at $19 per month with no limits in use. Besides, if you are a regular reader of MonsterPost blog, take a chance to save 5% on a subscription. Go ahead and use promo code BecomeThe1 when purchasing the service.

Step-by-Step Guide on How to Add a Background Video to Your Section

For instance, let’s take Imperion WordPress theme that can be previewed and purchased on TemplateMonster.com. It comes with a wide range of Elementor plugins, which make it even more effective. Okay, let’s move on to creating a elementor video background for the section.

  1. First of all, open up the Elementor editor.
  2. Create a new section.
  3. Go to the Edit Section panel and select the ‘Stretch Section’ option so that it will take up the full width of the page.
  4. Navigate to the ‘Style’ tab and select ‘Video’ in the ‘Background Type’ options. Below, you will find a space where you can insert a link to the video that you want to be added to the background of a specific section.
  5. Next, set the start and end time.
  6. The next option is Background Fallback, where you should put the image. It is necessary in case the video will not play for some reason. In this case, the users will at least be able to see the image. The reasons the video may not play differ: the users may visit your website from a mobile device or the connection may not be good enough.
  7. Go back to the layout sections and set the Minimum Height of the section on your own.
  8. If you want to add some text to the video, first navigate to the ‘Style’ tab, then choose the ‘Background Overlay’ option and, select a solid or gradient color depending on your purpose, tweaking the opacity if needed. Then go ahead and add your heading or a paragraph of text. You can set other elements on top of your background video as well, since the background video works the same way as any other background type. But don’t forget to make sure that the text is readable and the video in the background doesn’t distract from the elements on top of it.

These are the steps that need to be followed to add a background video to your sections with the help of Elementor Page Builder. If you like this tutorial, save to bookmarks so you don’t lose it, share it with friends who’ll probably find this guide useful as well, and tell us about your experience creating a background video with the help of our tutorial. In case you still have some questions, feel free to communicate them to Support Team at TemplateMonster.

For your convenience, we’ve picked the top 5 Elementor themes that would help you build a professional, high-class website with background videos and any other kind of animation. Let’s take a closer look at each of them.

Create an Animated Background Gallery with Elementor Pro and Custom CSS [Free Webinar]

Hi guys, guess what? We're preparing another free webinar for you.

Last week Alexandra showed you how to build custom headers and footers using Elementor PRO, and this week you will learn how to create an animated background gallery making use of some CSS.

Here's a short synopsis of the webinar:

WEBINAR TRANSCRIPT

  1. The Intro
  2. Tutorial - How to Create an Animated Gallery with Elementor Pro and Custom CSS
  3. Wrapping It Up

The Intro

It’s mostly impossible to imagine a website without a gallery. Image galleries constitute a significant part of visual content. They are important for various websites as well for online stores. Each gallery is supposed to display info about a company or show pictures of products.

And what about the portfolios of photographers? Or, how many photos are posted by an average blogger? Maybe it’s time you thought of a gallery as a brand part of your website? And we’ll show and tell you how to make this idea real to bring your website more points!

Today, CSS3 technology allows web designers to present pics in different creative forms easier than it has ever been. And, advanced tools, like WordPress Elementor Plugin and its add-ons, prove that anyone can build pro animated galleries.

So, join us to make something fresh and catchy on your gallery! Our tutorial is based on the webinar by Alexandra Payne on how to create a responsive animated gallery with Elementor Pro and custom CSS.

Let’s start!

Tutorial - How to Create Animated Gallery with Elementor Pro and Custom CSS

For this tutorial, you need to install Elementor Pro and JetTricks.

JetTricks - Visual Effects Addon for Elementor WordPress Plugin

JetTricks Add-On helps to create stunning visual effects without coding. With it, you’ll easily add sticky elements, unfolded columns, Parallax animation, and more. You also can get it in the unlimited ONE Subscription, as well as thousands of other flagship products.

The lightbox option allows to show pictures in a bigger size:

Here’s a code snippet for side columns:

selector { 
-webkit-animation: side-slot 100s linear infinite;
-moz-animation: side-slot 100s linear infinite;
-o-animation: side-slot 100s linear infinite;
animation: side-slot 100s linear infinite;
}


@keyframes side-slot {


0% {
transform: translate(0,0);
opacity:0;
}


5% {
opacity:1;
}

95% {
opacity:1;
}

100% {
transform: translate(0,1000px);
opacity:0;
}
}

That’s a code snippet for your middle column:

selector { 
-webkit-animation: middle-slot 100s linear infinite;
-moz-animation: middle-slot 100s linear infinite;
-o-animation: middle-slot 100s linear infinite;
animation: middle-slot 100s linear infinite; 
}


@keyframes middle-slot {
0% {
transform: translate(0,0);
opacity:0;
}


5% {
opacity:1;
}

95% {
opacity:1;
}


100% {
transform: translate(0,-1000px);
opacity:0;
}
}

So, click on an image and go to the “Advanced”. There choose “JetTricks” option and switch the tooltip on.

For this, on the desktop click on the “Tablet” mode and go to the “Advanced” tab. There set the “Margin” to 0 and the “Padding” to 20 on the left and right. In the “Layout” tab, set the “Column Width” to 33.

As for the “Spacer”, 40 is enough. Repeat the same with the rest of the columns.

Wrapping It Up

So, today we’ve learned how to build a responsive animated gallery with Elementor Pro and JetTricks. Let it be useful for your projects!

The mentioned add-on is one of the best for WP Elementor Page Builder. You can download it or a corresponded Elementor theme in ONE Subscription. If you haven’t got JetTricks yet, hurry to subscribe for ONE for extremely low prices.

Watch the video to get all the details <u+2193></u+2193>

Create Animated Gallery with Elementor Pro and Custom CSS

Keep up with us not to miss new webinars by Alexandra Payne. She always has something interesting to share with you.

Imperion

Demo | Download | Hosting

Imperion is the most popular and best-selling WordPress theme with Elementor Page Builder. Everyone chooses this template in order to build a highly effective business marketing web resource without too much effort. Featuring an ultra modern, responsive and cross-browser-compatible design, Imperion guarantees flawless site performance on any gadget and web browser. Purchasing this top-notch template will get you a well-organized About page allowing you to tell more about your company while using Service, Testimonials, and Team Member modules to provide more details about your staff, the services you offer and feedback from your satisfied clients. Among the many other features are the following:

Epsilonic

Demo | Download | Hosting

Epsilonic is a professionally-designed WordPress template best suited for business and corporate websites. It combines an elegant, striking appearance with a bulk of efficient web elements, allowing you to easily build a website without any coding skills required on your part. Upon opening the theme, you will see a full-screen slider at the top, which will let you add a personal touch to your web resource. Besides, Epsilonic is equipped with a wide range of premium features that can be found in the list below:

Deco Depot

Demo | Download | Hosting

This WP theme is a perfect solution for those running furniture websites. Designed in calm colors, it will help you display your assortment of products and all their benefits, tell about your company in the best way, and attract more potential clients to your store. Bootstrap option will enrich your website, while Cherry Framework will make it easy to work with. Going with Deco Depot will get you a large hero area, full-width featured sections, Retina-ready images, and many more features that can be checked out below:

BuildWall

Demo | Download | Hosting

BuildWall is a multipurpose WordPress template featuring 6 stunning skins related to the construction business with different designs and elements. The Integrated Elementor Page Builder allows you to customize content without touching a single line of code. In conjunction with built-in JetElements and JetMenu plugins, the builder lets you apply different custom blocks to your website and create a mega menu with just a few clicks. BuildWall comes with Services, Team Member, and Testimonials modules, allowing you to present your staff, the services you provide, and feedback from your clients while making your website look more reliable. Curious to learn more about the rest of the features? Then check out the list below:

Monstroid

Demo | Download | Hosting

Building a website from the very beginning can be as easy as a pie. When using a multipurpose WordPress template that can match any web resource. Monstroid features everything needed for creating and editing the site without any coding skills: a number of pre-designed pages, about a dozen child themes, and 23+ integrated plugins offering the advanced customizing options. More web elements available with Monstroid can be found in the list below:

Read Also