How to Add Falling Snowflakes to Your Divi WordPress Website
If you’re in the Northern Hemisphere, it’s currently winter time. The weather is colder, and as we approach Christmas, everyone seems to be in the holiday spirit.
As we gear up for the holidays, one fun way that you can get into the spirit of the season, is to liven up your website with some falling snowflakes. It’s fun, it’s festive, and it’s really easy to do!
We’re going to go over several methods of implementing the CSS. From adding it site wide, to just one page, and even to just certain sections, rows, and modules too!
Adding falling Snowflakes to Your Entire Website
The first thing we’ll look at, is adding the snowflakes to your entire site. This is very simple and requires just one step:
Copy the below CSS, and paste it into your Divi Theme Options custom CSS box, or your child theme’s style.css file.
That’s it! You should now see the falling CSS on your entire website! Easy enough, right?
For faster loading, it’s best to download the images, and then upload them to your own site. You’ll need to update the above image URLs to match your own URLs on your site.
How to Make it Snow on Just One Page
What if you only want it to snow on a single webpage? Perhaps on a sale or promo page. You can do that easily by adding the above CSS to your custom CSS box on the individual page, within the Divi Page Settings.
How to Add Falling Snowflakes to Divi Sections, Rows, or Modules
Okay, so it’s simple enough to make it snow on your entire website or a single page. But what if you don’t want the whole page to snow? What if you only want to apply it to certain sections, rows, or modules? Perhaps in a slide module, or in a full width header module (like we have on this post page), or even in a website promo bar using Divi Bars! We can do just that with some minor tweaks to the CSS!
So instead of applying the snow and CSS animations to the Body, you can apply it to just a CSS class. Then, you can add the CSS class to any section, row, or module in the Divi Builder’s advanced tab’s CSS class field.
So first step is to copy the below CSS and paste it into your Divi Theme Options custom CSS box.
Now that the CSS has been added to your site, we need to assign it to a section, row, or module. To do this, simply copy the class divi-life-snow and paste it in the CSS class field of the advanced tab, of whichever section, row, or module you’d like to make snow.
Make sure you add it to the CSS Class, and not the ID. Also, make sure you don’t have a period in front of it. It should look exactly like it does in the above image.
And that’s it! Easy enough right?
So How Does it Work?
As I mentioned at the beginning of this post, this is purely CSS with some images. So it’s very easy to understand. Basically, we have three separate images that make up the snowflakes. Each image has 4 different unique snowflakes. And then they are scattered around and duplicated across the image. Then, each image has all of the snowflakes in a different arrangement.
If you’d like to create your own unique snowflakes, you can grab my images, and open them up in Photoshop as a template. Then, create your own unique layout. I used snowflakes from this free vector found on Freepik. Freepik has a bunch of other free snowflake vectors you can use as well.
So the first chunk of CSS adds the snowflakes to the page with the :after CSS selector via the background image. Then, the keyframes are what control the animation. Feel free to play around with the keyframe positioning to customize the falling snowflake animation. You can also change the speed of the snow falling by adjusting the animation in the first chunk of CSS. Simply change is from 15s to something else. 🙂
Pretty simple right! Oh, and the beauty of adding snowflakes to your site is it’s not just for Christmas, but can be left up all winter long 🙂