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!

  • Google+
  • Facebook
  • Twitter

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. 

  • Google+
  • Facebook
  • Twitter

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

  • Google+
  • Facebook
  • Twitter

 Paste the CSS code to Custom CSS box.

Don’t miss our Valentine’s Day Sale! 

 

  • Google+
  • Facebook
  • Twitter

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.

Previous post
Next post

21 Comments

  1. John

    Love it – thanks for the information.

    Reply
  2. Emma

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

    Reply
    • Anna Kurowska

      Hello Emma, please change 5 line to content:'';

  3. Jules Webb

    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

    Reply
    • Anna Kurowska

      Thank you Jules. good catch!

  4. DG

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

    Reply
  5. Lisa

    How adorable! Okay, just tried it and it didn’t work for me 🙁 Help! 🙂

    Reply
  6. Don

    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?

    Reply
  7. empshield

    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

    Reply
  8. empshield

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

    Reply
  9. Martin

    This is really so awesome!
    Thanks so much!

    Reply
  10. Jeremy

    This doesn’t work for me at all.

    Reply
    • Anna Kurowska

      Thank you Jeremy for a comment! Please send me a link to your website and I will investigate what’s wrong with the code 🙂

  11. Anna Kurowska

    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!

    Reply
  12. Lisa

    Works for me! Thank you for tutorial.

    Reply
  13. Judyta

    Works! <3

    Reply
  14. Adrian

    Worked the second time of asking thanks so much
    Adrian

    Reply
  15. Cindy

    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.

    Reply

Submit a Comment

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

Receive notifications about our new blog posts.