Howdy again, friends. If you haven’t read them already, you might want to read/watch parts 1 and 2 before this one, although in some ways this tutorial stands on its own — you don’t have to have a video background to benefit from this technique. At the end of the Part 2 tutorial video, I mentioned that I had added a class to the section containing the hero banner content to create a hook for some custom CSS: Now, I’ll make my standard disclaimer and say that this part of the technique can be replicated entirely via the Divi builder. That’s nice, but unless you’re building a one-page site, it’s messy. Better to use a child theme and its stylesheet to create and control the styles we’ll be building and discussing herein. Give it up for child themes WordPress child themes are lovely things, and there are oodles of plugins nowadays to help you create child themes if you’re not comfortable using a code editor and FTP to do it. In the past, I’ve used the Child Them Configurator plugin, but these days I prefer the Divi Children plugin specifically for Divi-based sites. The former works with any theme. So what’s so great about child themes? If you’re a relative newcomer to WordPress and you haven’t been through the parent theme/child theme spiel, here it is: If you purchase a theme, the developer is going to be releasing regular updates for that theme because the WordPress core is evolving all the time. If you’ve been naughty and have edited that theme directly (whether you’ve changed the functions.php file or the style sheet) you run a very great...
Howdy, friends. This is Part 2 of a three-part tutorial on how to create HTML5 video backgrounds and video heroes using the Divi theme. Part 1 is available here. Before I continue, I wish to make a disclaimer. Many savvy Divi users may be asking, “Why use this technique when you can add a background video to a full-width header module, or even a standard section?” Those modules do provide a quick way to add background videos to your content, and they can function very well as a video banner or hero. But there are times when I want a little more control over the elements of my page than what Divi offers through its modules and the Builder. And this technique also allows us to do some fancy-schmancy stuff that the standard modules can’t quite do on their own. Nothing against Divi — obviously, I’m a huge fan. But I like to think of Divi as a robust platform that can (and should) be expanded as creatively as us creatives/developers can manage. So, the technique I’m outlining in this tutorial is about augmenting Divi’s superb functionality to achieve something even more fantabulous. Fair enough? Now, back to our regularly scheduled program. Even though I’ve used this technique on more recent web sites, I’m going to continue to use the Thief Stoppers website as an example revealing to you, dear reader, my secret sauce. When I was researching this technique, I found this article over at WPMU DEV1 on how to add background videos to WordPress posts. Lots of good information there, but the best thing about the article is its use of the free bgvideo custom plugin, downloadable over...
Howdy, friends. This is Part 1 of a three-part tutorial on how to create fullscreen video backgrounds and video hero banners with the Divi theme from Elegant Themes. What do I mean by a “video hero banner”? Invision’s website, which I like a great deal, is a good example of it: In their banner area, an HTML 5 video loops in the background. The background video is set that behind a semi-transparent black background so that the hero copy and the call to action button is more legible. This is a very attractive technique, and it’s also very much in vogue right now. And it’s not hard to achieve with the Divi theme. Here are a handful of websites built by yours truly where I’ve done something similar using Divi. The most recent one is a site for Target Restoration: Like the Invision site, I’ve set up a looping HTML 5 video in the background and set it behind a semi-transparent black so the hero copy and call to action buttons stand out enough to be readable. You can also check out downtoearthtechnology.net and mcgregorexchange.com, both of which are my handiwork and employ the same technique in Divi that I’m outlining in this tutorial. There’s an added twist though to these latter two examples, however — the background video is fixed in its position, so that when you begin to scroll down the page it approximates a parallax scrolling effect. What’s more, I’ve used semi-transparent background colors on the different content sections to allow the video to bleed through a little bit. That adds some visual interested to the background as well as some texture, but it’s unobtrusive enough that it doesn’t compete with body copy. In Part 2 of...
Recent Comments