How To Make Epic Divi Video Background Button Elements PLUS Optimizing Background Vids
**April 2022 update:
First off, I’m moving on from Divi. As I comb through all my old posts and convert them out of the divi builder and into something that’s simply light-weight and easier to develop with, this is one of few posts that won’t get the royal treatment and here’s why: This awesome background video technique doesn’t work on Safari and nor certain mobile devices. What I suggest instead is using compressed gifs in lieu of the background video.
Alrighty ladies and gents, in this tutorial I’m going to show you how to make these really cool blurb button video background elements. We will be starting with optimizing your videos for this type of usage and then actually going through creating the section in Divi. Afterward, I’ll give you a pro tip on how to use a proper video streaming service to actually host your video backgrounds for better load speeds.
Jump Ahead to The Secret Video Background Sauce
Cutting right through the crust you might not need, let me just give you what you really came for, the simple solution: The real secret here is to set the video background in the column of the row. Then you can put whatever you want in the column, such as a button. That may be all you really need to know but if you want to learn a bit more, get some great tips for video compression or see the exact steps on how to replicate the design I did on this tattoo studio site, read on.
Why Video Backgrounds Are Awesome
In the recent decade, online video consumption rates have increased tenfold if not more. Of course, your background video does not function the same as traditional, play and watch with sound videos, but they do help catch the eye and when done right, can help decrease bounce rates, increase site ranking, and of course, conversion rates.
Why Video Backgrounds Can Suck
If not properly optimized, a background video can cause a website to load about as fast as Prius on the quarter-mile, and no, not the 700 horsepower one built by American Racing Headers. I’m talking about the Prius that goes 0-60 in ten seconds. Luckily for you this article will cover the primary techniques to avoid this.
Avoid these video background mistakes
Here are some of the most common fails we see when it comes to background videos. Try to avoid these when developing yours.
1. Long Videos; Background videos can and should be short. They are used as an accent and should not be considered the focal point.
2. Non-optimized videos. Any video made for the web should be properly optimized and compressed for minimum file size.
3. Non-legible font: If you’ve got a great background video you may find it hard to cover it with your text or button. This is why many designers fail to properly utilize this feature. They end up putting hard-to-read text atop their videos, making for a confusing, sloppy experience for the site visitor. Remember, the background is just an accent that acts as a great eye-catcher. Make sure your call to action is the focal point of the section.
Site Load times and SEO
Load times are extremely important but keep in mind the term “fully loaded” is not always the time that matters most. Your content below the fold does not need to load as fast as the content a user sees when the site first opens. Although Google does include load times into its ranking algorithm, bounce rates are a much higher ranking factor. This means that when someone comes to your website and the site takes more than four seconds to show them content, they are quite likely to ‘bounce’ out of it. However, if your website shows them the content atop the page while the rest loads, you might have an actual load time of seven seconds but if the user doesn’t leave right away, the ranking penalty is likely far less than what you would incur from a high bounce rate.
The Step-by-Step Guide On
Creating Buttons with Epic Background Videos PLUS Video Compression Tps
As we will be re-creating this type of section, this tutorial will assume you are working with the Divi builder. However, the information on optimizing videos for the web will hold true regardless of which tool you might be used to display your content.
Phase 1: Video Compression
Before we do anything on the websites, let’s make sure our materials are prepped. Regardless of the video editor, you’re using, if any, Handbrake is a great means to properly compress and optimize your videos for web use. For any video to be used on your site as a background, try to keep the length to less than ten seconds.
Phase 1, Step 1.
Handbrake for the win
There are a few options out there for video compression and if you already have one try to follow along with these settings. If you get lost, consider getting Handbrake. Otherwise, go ahead and download handbrake. It’s a free, open-source program perfect for our video compression needs.
Important note
We are going to assume you already have your video content ready to go. Remember, keep them short! Once you have edited and exported your videos from whatever video editor you are using you can then bring them into Handbrake.
Phase 1, Step 2.
Video Dimensions For Speedy Load Time
Once you open Handbrake, hit “open source” and select your video.
In the event you are planning to use your background video in a section such as the one we are building here, you can change the video dimensions to cut down the size significantly.
For a 3-column row, the largest screen size you need to account for is a tablet as on a desktop the videos will only be taking up one-third of the screen at any given time. We’d suggest the max-width of your video be 700px to make sure this doesn’t get stretched too far on a massive tablet. Later we will set the row’s max-width on a tablet so it does not get stretched too far.
Go over the “Dimensions” tab and change these settings to 700px by 394. This assumes your original video was 1920×1080. Otherwise, calibrate accordingly to bring your height down proportionally to the 700 width. For a 3-column row, the largest screen size you need to account for is a tablet as on a desktop the videos will only be taking up one-third of the screen at any given time. We’d suggest the max-width of your video be 700px to make sure this doesn’t get stretched too far on a massive tablet. Later we will set the row’s max with on the tablet so it does not get stretched too far.
Real-world test
The test we ran in this video showed a savings of nearly 800% in file size decrease as our 1920×1080 file was at 10mbs and after cutting it down to 700px x 394 it dropped to under 2mbs.
Phase 1, Step 3.
MORE compression for minimized file size
RF aka Rate factor
On the “Video” tab, choose RF 24, however this may make your video too pixilated. If that’s the case, drop it down to 23. Of course, if you have a long video and file size is still too large you can turn the RF even higher, upwards of 28 in order to bring that file size down just watch out for the quality level.
Web Optimized and mp4
On the “Summary” tab, tic “web optimized” and set the format to “MP4 file”.
Be sure to complete these compression steps this for each of your three videos before moving on.
.webM file formats
While making this tutorial I retraced my method and found that VLC, the editing program I usually use for creating .webm format files for mobile had some issues. However, before troubleshooting, I ran some tests and it appears as though all we now need are the MP4 files and they still work on mobile without the need for the webm formatted files. Interesting. Tested on a MOTO Pixal and iPhone 11.
Phase 2: Divi Development
We will be assuming you know the basics of how to design a website with the Divi Builder for WordPress. If that’s not the case, here are some resources to brush up on your skills.
Phase 2, Step 1.
Three Column Row Settings
Okay, enough video work, let’s get into some web design!
To start, make a 3 column row via your Divi builder.
Within the row, click on the unique column’s settings. Set the background video for the first column. While still in this unique column, go into the design settings and set the padding to 50px for top and bottom. Leave left and right empty.
Repeat this for each of the three columns setting the unique video for each column.
Phase 2, Step 2.
Divi Button Design
Next, let’s make the buttons. Within the first column, add a button element. Set your text and link URL. Head over to the design and tab and enable custom button settings. To leave plenty of viewable area for the background, we went with a very opaque and flat button background.
We aren’t going to into our exact settings for these buttons however it is important you create a hover effect for these buttons.
Set the background to black and then bring the opacity slider down to around 30%.
Next, click on the arrow icon to set the buttons to hover over the background color.
Once your first button is created, save it as a global element. Then duplicate it and be sure to turn off the global settings on the text and link.
The Finished product
To create this tutorial and the accompanying video I replicated the section from that tattoo studio project on my own site. In doing so I was not at all a fan of how the buttons looked atop the vibrant background videos. Hence you will notice that these are quite different they what I initially lured you here with ;). Regardless, I’m sure you will use your own style so enjoy and BE CREATIVE!
*update: as this post is no longer built with Divi, if you’d like to see these custom backgrounds in action please visit the site we did it on here: https://www.conscious-ink.com/. The background blurbs are on the homepage of the website.
BONUS ‘how-to’
Streaming your background videos
*We go much more in-depth in the YouTube video that goes along with this article.
*At around $200 per year, Vimeo Pro is not cheap.
This process is fairly straightforward. That said, you will need to purchase Vimeo Pro in order to do it so you’re not up for that, this is where the valuable info ends for you. However, keep in mind that video is the future of online content and in order to have a proper, quick loading full size hero video background on your site you will either need to make it extremely short, highly pixellated or somewhat lack-luster unless you are using an extremely powerful hosting company such as AWS (Amazon Web Services).
How to stream your Divi background videos with Vimeo Pro
Upload your video and head over to the ‘Videos’ tab. From there, simply click on “Distribution“.
Scroll down to the next column until you see the “Video file links” area. Click on “copy link” for the high def version.
Keep in mind here that as you are now streaming your video from a third party the compression is not quite as important. Still important, but ultimately your video will load on your site just as fast as it loads on Vimeo.
With that link copied, back on your Divi site, go into the video background selection option and instead of uploading, hit the “insert from URL” option and then paste your link into the box.
Boom! That’s it, your video will now load and play straight from Vimeo instead of your server. In fact, the third column is streaming from Vimeo on the example above.
Thanks for the in-depth tutorials on how to add great background videos on a website. I find this a bit tedious, so I usually just skip using it altogether and just opt for image backgrounds. I’m not sure I’ll do it in the near future but I’ll keep these points in mind.