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)

coverr video file

  • Login to the website you are building and navigate to either a page or post and select Use the Divi Builder

Adding a hero video with a button on top in Divi

  • 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.

adding a her image video background to Divi Theme

  • Click on the Design tab and set all the margins and padding to 0.

design settings for hero video

  • Then scroll down and if you wish, add a little opacity to the image which will soften the look of the video.

transparent layer over video in divi theme

  • Click on the Advanced tab and put height: 100vh; into the Main Element.how to set the height to full image size on a hero image in divi
  • 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).row settings for button over a video on divi hero module

Next you will want to add the Call to Action Module

Call to Action Module Divi Theme

  • 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.

call to action settings for the divi module

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.

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This