How to Add Falling Hearts to Your Divi WordPress Website

How to Add Falling Hearts to Your Divi WordPress Website

1. Adding Falling Hearts to Your Entire Website

It’s time for Valentine’s Day! Today we are going to show you how to creatively add Valentine’s Day hearts to your website! We’ll show you how to add falling hearts with Divi in this step-by-step tutorial.

 

Let’s get to it!

  • Facebook

Add Custom CSS

To locate the Custom CSS box navigate to Divi > Theme Options and scroll all the way down the page until you see the Custom CSS box. 

  • Facebook

Copy the code and paste to the Custom CSS box.

body {
position: relative!important;
}

body:before {
content: '';
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(https://divi.space/wp-content/uploads/2019/02/hearts.png);
animation: falling-hearts 18s linear infinite;
}

@keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

@-moz-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

@-webkit-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

2. How to add Hearts ❤️ to a single page?

What if you want to display falling hearts on a single page? Add this CSS snippet to the Divi Builder Page Settings and changes will only be applied to the page itself. You can do it easily by adding the above code to your custom code module on an individual page, within the Divi Page Settings.

Go to your page and open the Divi Builder Settings

  • Facebook

 Paste the CSS code to Custom CSS box.

Don’t miss our Valentine’s Day Sale! 

 

  • Facebook

Final Thoughts

In this post, we’ve show you how to add the falling hearts effect to your Divi website. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.