How to Add Falling Snowflakes to Your Divi WordPress Website

by | Dec 23, 2017 | Divi Tutorials | 65 comments

 

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!

 

 

In this tutorial, I’m going to show you how to add falling snowflakes using PURE CSSย (plus images). That means no plugins, no javascript. Just some images (that I’m giving you, or create your own), and CSS animations.

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!

 

Go to Demo Site

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 ๐Ÿ™‚

65 Comments

  1. GUillermo

    It doesnยดt seem to work, I’ve put the sitewide css and nothing happens.

    Reply
    • Tim Strifler

      It could be due to caching. Make sure your caching plugin has been cleared, as well as your browser cache. Youโ€™ll notice in my video when I refreshed it once and it didnโ€™t clear. I had to do it a second time with a hard refresh (Control/Command + Shift + R) for it to fully refresh.

      Reply
  2. sboyle

    Love it – thanks for the information.

    Reply
    • Tim Strifler

      Youโ€™re welcome! Glad you found it useful ๐Ÿ˜ƒ

      Reply
  3. John

    Cool. thank you. But Theme Customizer Additional Css doesn’t like the last bit of your code, specifically the last rule which it wouldn’t allow:

    @-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }

    I just deleted that rule and it worked great.

    Reply
    • Tim Strifler

      Good to know! Yeah the last key frame isnโ€™t really necessary. Itโ€™s really just for older browsers.

      Reply
      • Tim Strifler

        Thanks, David. I’m glad you like it ๐Ÿ™‚

        Reply
    • Jason

      Same for me, it didn’t work until I deleted it. Now it’s working.

      Thanks for the cool post Tim!

      Reply
      • Tim Strifler

        You’re welcome! Glad it worked!! ๐Ÿ™‚

        Reply
  4. ahmmetwally

    This is really so awesome!
    Thanks so much!

    Reply
    • Tim Strifler

      Youโ€™re welcome! Glad you like it!! ๐Ÿ˜Š๐Ÿ‘๐Ÿป

      Reply
  5. Rod

    You’re a Rainmaker! (Snow-maker, I guess.)

    Reply
  6. ML

    Works terrific. A super easy CSS drop to impress clients. Thanks Tim!

    Reply
    • Tim Strifler

      Youโ€™re very welcome! ๐Ÿ˜

      Reply
  7. Darren Hayward

    Yes… saves the bloat of an extra plugin! Thanks guys and all the best!

    Reply
    • Tim Strifler

      Definitely! Lightweight for sure! ๐Ÿ˜„

      Reply
  8. gareth.slade

    Brilliant, using this now ๐Ÿ™‚

    Reply
    • Tim Strifler

      Awesome! Glad you found it useful ๐Ÿ˜Š๐Ÿ‘๐Ÿป

      Reply
    • Tim Strifler

      No it does. It should work just the same. Make sure youโ€™ve cleared your cache before testing.

      Reply
      • Richard

        I am having a real problem with it working on Safari.

        Reply
      • Richard

        Got it working on all devices when I removed ?dl=1 from the image url.

        Love it Tim ๐Ÿ™‚

        Reply
        • Tim Strifler

          Interesting! I didnโ€™t have that problem. But Iโ€™m glad you got it figured out! And thanks for sharing the fix! ๐Ÿ‘๐Ÿป

          Reply
  9. Joe

    What a nice holiday gift! So easy and looks great. I used it on top of a background video on my home page and I think it looks great. Thanks so much!

    Reply
    • Tim Strifler

      Youโ€™re welcome, Joe! Thatโ€™s awesome, glad it worked out for you ๐Ÿ˜„

      Reply
  10. Josie

    Jep It’s not working in safari or phone. I already try to remove ?dl=1 without luck…any ideas

    Reply
    • Josie

      Fixed it by uploading the images to my website! This is just amazing. Thank you guys!

      Reply
      • Tim Strifler

        Okay great! Glad you got it working ๐Ÿ™‚

        Reply
    • Tim Strifler

      Hmm that’s very odd. Yeah the ?dl=1 is what lets the Dropbox file be viewed/accessed directly, so I wouldn’t think that would work. Best thing is to always upload to your own site so you’re not relying on any other servers.

      Reply
  11. Danielle Shaw

    Thanks! This is fantastic, strange it’s not showing on my homepage though. It’s appearing on all of the other pages.

    danielleshaw.com

    Reply
    • Tim Strifler

      Hi Danielle,

      Try replacing the two instances of “body” in the CSS with #page-container

      That may solve the problem ๐Ÿ™‚

      Reply
  12. Ziv Raviv

    Tim that is sooo nice of you. I am a happy customer man.

    Reply
    • Tim Strifler

      Glad you found it useful, Ziv! ๐Ÿ™‚

      Reply
  13. Noz

    Thanks Tim!

    Reply
  14. Fiona Wattam

    Thank you so much! I’ve never tried anything like this before and it was so simple! Your instructions were great!!

    Reply
    • Tim Strifler

      Youโ€™re welcome, Fiona! Iโ€™m so glad it worked out for you!! ๐Ÿ˜„๐Ÿ‘๐Ÿป

      Reply
  15. Grant

    Thank you so much for putting the time and effort into this. Wishing you happy holidays!

    Reply
    • Tim Strifler

      Youโ€™re welcome, Grant! Merry Christmas and Happy Holidays to you too!! ๐Ÿ™‚

      Reply
  16. Dr Zsolt Mike

    It works very well on my site. ๐Ÿ™‚ Thank you!

    Reply
      • Dr Zsolt Mike

        Hello. Now, it doesn’t work. It shows: Expected RBRACE at line …, col 1.
        … @keyframes snow {

        I deleted this:
        @keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
        }

        but it didn’t help.

        I use Google Chrome.

        Reply
  17. Jeff Goodhew

    Thanks Tim for being so generous with your time and expertise. Love the effect on our website!

    Reply
    • Tim Strifler

      You’re very welcome, Jeff. I’m stoked to hear it worked out for you! ๐Ÿ™‚

      Reply
  18. Halyna

    Thank you so much!
    I would just ask you about mobile mode. I’ve added the CSS to my page (main page) as you’ve shown, but it works only for my computer, not mobile device.
    How to make it working for all devices, please?
    Thak you!!!!!

    Reply
    • Tim Strifler

      Hi Halyna,

      Others were having the same problem. I think it can be solved by downloading the images and uploading them to your own site. Youโ€™ll need to change file paths in the CSS though. Hope that helps!

      Reply
  19. Edgar

    Thank you! It works fantastic.

    Reply
  20. Tom Nguyen

    Awesome. Thanks for mentioning this in the newsletter. I’ve added it to my site for the winter. It works great!

    Reply
    • Tim Strifler

      Awesome!! Youโ€™re very welcome ๐Ÿ‘๐Ÿป

      Reply
  21. allxy

    Thanks, Tim, it looks great. Let’s try it ๐Ÿ˜‰

    Reply
    • Tim Strifler

      Awesome, glad you like it ๐Ÿ™‚

      Reply
  22. Tony Green

    I am using the Divi theme but for some reason in December it started displaying snow and is still doing it? Any ideas what made that happen or how I can stop it doing it?

    Reply
    • Tim Strifler

      Hey Tony,

      I clicked on your website URL and looked at the code. It looks like you have the Jetpack module “Holiday Snowstorm” turned on. Should be a simple switch to turn it off ๐Ÿ™‚

      Reply
      • Tony Green

        Hi Tim,
        Thanks for the info on the Holiday Snowstorm module however I seem to have no way of getting to that setting through my admin area? My site is not hosted on WordPress I added Jetpack to my installation and I only see 4 options under the menu item in the admin area, I seem to be missing the General option which is the one I need to be able to turn off Snowstorm – any idea?

        Reply
        • Tony Green

          Hi Tim, I have found the setting by logging directly into my account on the Jetpack website and turned it off from there. Thanks for you help with this.

          Reply
  23. Carolyn Hamilton

    Tom, This is soooooo AWESOME! Thank you so much!!!

    Reply
    • Carolyn Hamilton

      Correction to above…Tim…so very sorry!

      Reply
  24. Shay

    Snowing in Virginia Beach, so now it’s snowing on websites here too! Thanks!

    Reply
    • Tim Strifler

      Perfect! Glad you enjoyed it Shay!! ๐Ÿ˜Š

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

We're creating more tutorials!

Subscribe and we'll notify you when we publish more tutorials and blog posts similar to this. :)

ย 

We protect your email &ย never spam.

You have Successfully Subscribed!

Pin It on Pinterest

Share This