![divi wordpress theme 2017 december divi wordpress theme 2017 december](https://www.elegantthemes.com/blog/wp-content/uploads/2017/12/GoApps.png)
You can also change the speed of the snow falling by adjusting the animation in the first chunk of CSS.
#DIVI WORDPRESS THEME 2017 DECEMBER FREE#
Feel free to play around with the keyframe positioning to customize the falling snowflake animation.
![divi wordpress theme 2017 december divi wordpress theme 2017 december](https://blog.any.green/wp-content/uploads/2021/01/code_scroll_fix-2048x1418.png)
Then, the keyframes are what control the animation. So the first chunk of CSS adds the snowflakes to the page with the :after CSS selector via the background image. Freepik has a bunch of other free snowflake vectors you can use as well. I used snowflakes from this free vector found on Freepik. 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, each image has all of the snowflakes in a different arrangement. One of the reasons why WordPress makes a. And then they are scattered around and duplicated across the image. Please follow the steps outlined by Elegant Themes and contact their support if you have additional questions. Each image has 4 different unique snowflakes. From time to time here at The Abundant Artist, we review WordPress plugins and other tools that I find especially useful. supportive community of fellow Divi/WordPress web designers Get access to my latest. But it’s probably best to keep the stylesheet in the same path in the Child theme that Divi has it at if that makes sense Reply. Basically, we have three separate images that make up the snowflakes. Dolesh Nathwani on Decemat 12:27 pm It’s a great tutorial.
![divi wordpress theme 2017 december divi wordpress theme 2017 december](https://flashavenue.com/wp-content/uploads/2019/09/divi-4-1080x675.png)
It should look exactly like it does in the above image.Īnd that’s it! Easy enough right? So How Does it Work?Īs I mentioned at the beginning of this post, this is purely CSS with some images. Also, make sure you don’t have a period in front of it. Make sure you add it to the CSS Class, and not the ID. 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. Now that the CSS has been added to your site, we need to assign it to a section, row, or module. This is very simple and requires just one step:Ĭopy the below CSS, and paste it into your Divi Theme Options custom CSS box, or your child theme’s style.css file.īackground-image: url(''), url(''), url('') Īnimation: divi-life-snow 10s linear divi-life-snow The first thing we’ll look at, is adding the snowflakes to your entire site. Go to Demo Site Adding falling Snowflakes to Your Entire Website From adding it site wide, to just one page, and even to just certain sections, rows, and modules too! We’re going to go over several methods of implementing the CSS. Just some images (that I’m giving you, or create your own), and CSS animations.
#DIVI WORDPRESS THEME 2017 DECEMBER HOW TO#
In this tutorial, I’m going to show you how to add falling snowflakes using PURE CSS (plus images). It’s fun, it’s festive, and it’s really easy to do! The weather is colder, and as we approach Christmas, everyone seems to be in the holiday spirit.Īs 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. If you’re in the Northern Hemisphere, it’s currently winter time.