Chat with us, powered by LiveChat
3 Ways to Add Falling Snow Animation to a Divi Website

3 Ways to Add Falling Snow Animation to a Divi Website

I have a law that I abide by. I call it Monti’s First Law of Temporal Proximity to Christmas. Said law dictates that no Christmas decorations shall be put up and no Christmas music shall be played before Thanksgiving dinner. It’s purpose is to help ensure that the festivity and (desirable) accoutrements of the season are savored rather than ridden into the ground like a tired old mule (as the commercial powers that be in our world are wont to do). But for you, dear friends and Divi enthusiasts the world over, I am breaking my law. I’m going to show you 3 simple ways to decorate your Divi website for the holidays with some animated falling snow. Watch the Video Tutorial Written Instructions Method #1: Set it and forget it with the Snow Storm plugin. The Tribulant Snow Storm plugin makes it about as easy as it could possibly be to add animated snowfall to your site. Simply install the plugin, activate it, and you’ve got snow. The one drawback with this plugin is that when the body of your site loses focus, the snow simply stops in place. So if you click away from the browser window, you’ll get a bunch of dots all over your screen rather than a smooth falling snow animation. In my experience with the myholidayecards.com sample site, this behavior also occurs when the user clicks on iframe content, like embedded YouTube videos. These behaviors might not be an issue for you, in which case the Snow Storm plugin may be a great fit. Although I love the Snow Storm plugin and have...
Controlling the Divi Toggle/Accordion Module Animation Speed

Controlling the Divi Toggle/Accordion Module Animation Speed

I have to admit, I felt a little like Khan on this one:   Google is NOT my friend. Not today, at least — nor, apparently, anybody else’s. Searches in multiple Divi user groups made it clear that I wasn’t the only one looking for the means to change the animation speed on the Divi Toggle and Accordion modules. It was also clear that the interwebz sort of shrugged its shoulders in answer to my queries. As far as I can tell, there’s no “clean” way to achieve this. The animation speed is hard coded in a JS file inside the Divi theme core. We all know that editing core theme files is a level of hackery unbecoming of a self-respecting WordPress designer/developer, so I came up with the cleanest methodology I could that’s based in a child theme: A little klugey, perhaps, but functional. And still, I maintain, WAY better than editing core parent theme files. Feedback welcome. If you’ve got a better solution, I definitely want to hear about...
Divi’s Library to the Rescue

Divi’s Library to the Rescue

This is my Happy Divi Library story. I needed to add a breadcrumb to an interior page template on a web site I was working on. I started to add the Yoast breadcrumb to page.php in my child theme (a la this tutorial from Elegant Themes: http://bit.ly/1Hbtz8e) and realized it wasn’t going to afford me the flexibility I needed. Enter the PHP Code for Posts plugin (https://wordpress.org/plugins/php-code-for-posts/), which converts snippets of PHP code into re-usable shortcodes. That was the missing puzzle piece. Once the PHP Code for Posts plugin was installed, adapting the breadcrumb code for Divi was simple: Created a PHP shortcode using the Yoast breadcrumb snippet. On my page, I added a row with a text module in it. Dropped the breadcrumb shortcode into the text module. Saved the entire row to the library. Created an interior page layout that includes the new breadcrumb row. BAM! Life...
Full Screen Background Videos (with a Twist) in Divi, Part 3

Full Screen Background Videos (with a Twist) in Divi, Part 3

  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...
Full Screen Background Videos (with a Twist) in Divi, Part 2

Full Screen Background Videos (with a Twist) in Divi, Part 2

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...
Full Screen Background Videos (with a Twist) in Divi, Part 1

Full Screen Background Videos (with a Twist) in Divi, Part 1

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