How To: Add a Button Over a Looping Video With a Transparent Layer Using the Divi Theme
Someone sent me a question asking how to add a button over a looping video using the Divi Theme. They had made reference to a post with a video I had on YouTube, How to Create a Transparent Overlay on an Image with the Divi Theme and they thought perhaps I could make a similar tutorial.
Because it’s easy to become slightly irrelevant with things related to web design, I figured if one person is asking, many many more are most likely wondering the same thing, so why not make a new tutorial and fingers crossed it is even half as popular. (PS. if anyone ever asks me to give advice to the person you were in high school I am going to answer, don’t be so sad you will be popular in something that isn’t even invented yet, I am certain that would cheer up high school me on those lonely Saturday nights).
I am going to give you the how-to steps for: How To Add a Button Over a Looping Video With a Transparent Layer Using the Divi Theme, then I will make you a video and I will also upload this mini layout (section) to My Cloud and if you have the Layouts Cloud Plugin you can skip the reading and the watching and go right into the Cloud and be done in about 25 seconds.
- You will need to pick a video. I like free, so I suggest going over to Coverr.co and downloading whatever you like. Save the file to your downloads folder or desktop. It will most likely be a zip file, which you will need to unzip. Inside you will find four files, a JPEG image, a MPEG-4 movie file, a HTML5 Video (Ogg) and HTML5 Video (WebM)
- Login to the website you are building and navigate to either a page or post and select Use the Divi Builder
- Next I selected to have row with three columns (because I want one single button in the center of my video. If you want two or three (or more buttons select more columns, example two buttons, add two columns). I like Sean Barton’s plugin, Divi Extended Column Layouts (5, 6, 7 or 8 columns) which you can download here (for free) from his website.
- The first customization is done to the Section Module. Click on the three horizontal lines in the top left corner of the blue box (Section). You are going to need to set a Background Video MP4 and a Background Video Webm in the Content area.
- Click on the Design tab and set all the margins and padding to 0.
- Then scroll down and if you wish, add a little opacity to the image which will soften the look of the video.
- Click on the Advanced tab and put height: 100vh; into the Main Element.
- Next go into the Row Settings. Make the Row Fullwidth, Yes to Custom Gutter Width, Gutter Width 1 and then Custon Margins Top and Bottom 15% (play with that number to suit your design).
Next you will want to add the Call to Action Module
- Add the necessary content and if you want the area behind the Call to Action to have a color or transparency, select it here (click on the color, and you will get the option to add a transparency). If you want to customize the button click on the Design tab and then customize the button. Save & Publish.
Here is the video I made for you to watch.
If you have the Layouts Cloud plugin, go to Community Cloud (if you haven’t used Community Cloud, this video will help you). If you have created a site using the section, please leave a link here so we may look at it! Thank you.