how-to-add-falling-hearts-to-your-divi-wordpress-website How to Add Falling Hearts to Your Divi WordPress 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!

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. 

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%;}
}

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

 Paste the CSS code to Custom CSS box.

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!

SEO News and More

SEO News and More

Share This