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!
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.
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
Paste the CSS code to Custom CSS box.
Don’t miss our Valentine’s Day Sale!
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!
Love it – thanks for the information.
It does not seem to be working. Is something missing?
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%;}
}
Hello Emma, please change 5 line to content:'';
Thanks for the love!
Nice effect and easy to implement
You might consider using the HTML < code > element to display the CSS so the character encoding for the quotes/apostrophe characters in the content and background-image use the correct character encoding.. After copying and pasting your CSS I had to fix the quote characters in order to get the CSS to work.
Cheers!
Jules
Thank you Jules. good catch!
Works terrific. A super easy CSS drop to impress clients. Thanks SJ!
How adorable! Okay, just tried it and it didn’t work for me 🙁 Help! 🙂
Stephen,
Didn’t work. 🙁
I added it to the homepage only with no success and added to the site globally with no success.
I believe I followed your instructions but I’ve been known to be wrong before.
Any ideas of what I did wrong?
hey brother. great article. Maybe im just a dummy but, i couldn’t get it to work on my site.
Doing a big valentines sale tomorrow. Would really like to get this to work. and tips? Copy and paste seems pretty simple so… no idea why its not working..
tried single page method and site wide mehtod.
neither worked 🙁
https://www.myempshield.com
please let me know what i can do
heres what i used in CSS
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://www.myempshield.com/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%;}
}
Hello @empshield, please change 14 line to
background-image: url(https://www.myempshield.com/wp-content/uploads/2019/02/hearts.png);
wow – Thanks
—stooni
This is really so awesome!
Thanks so much!
This doesn’t work for me at all.
Thank you Jeremy for a comment! Please send me a link to your website and I will investigate what’s wrong with the code 🙂
I have updated the CSS code and works fine! I’ve noticed that content ''; was replaced with content ‘’; . Leaving here to other people that may have a similar issue 🙂
Enjoy!
Works for me! Thank you for tutorial.
Works! <3
Worked the second time of asking thanks so much
Adrian
Can I replace the heart with another item? I tried it by replacing the background image but it turns out that the animation is not the same. How to adjust the animation? Thank you.
Hi Candy, yes you can replace background image. If you want to have the same animation effect, create image similar to the original https://divi.space/wp-content/uploads/2019/02/hearts.png