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)

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.

A little about the author, Eileen Lonergan

Eileen Lonergan is a WordPress website designer and internet marketing specialist. She is the founder and Community Manager of the Divi Theme User Group on Facebook. Eileen's focus is on web design, content marketing and search engine optimization.

0 Comments

Submit a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items.

By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - We send out around two emails a week to keep you informed of product updates, You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email.

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest

Share This