Snowflakes on your WordPress website with Divi, without plugin

Give your WordPress WordPress does more than 38.8% of all websites on the internet. Yes – more than one in four websites you visit is likely powered by WordPress. • WordPress.org , often as self-hosted WordPress is the free open source WordPress software that you can install on your own web host to create a 100% custom website.• WordPress.com is a for-profit, paid… website a magical touch with Divi Divi is a WordPress theme and has great features. With this theme you hardly need any additional plugins in WordPress! Official website of Divi – without any additional plugins. At Olbricht IT, we show you how to create a charming snowflake effect in a few simple steps. Perfect for highlighting your site during the winter season. Our instructions are uncomplicated and easy to follow, even for beginners. Discover how you can give your website a winter ambience with just a few lines of code. Make your website wintery and festive with us!

1. JavaScript in the code module

Paste the following code somewhere on the page in the code module:

<div id="snow"></div> 

<script> 
document.addEventListener('DOMContentLoaded', function(){ 
    var script = document.createElement('script'); 
    script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'; 
    script.onload = function(){ 
        particlesJS("snow", { 
            "particles": { 
                "number": { 
                    "value": 200, 
                    "density": { 
                        "enable": true, 
                        "value_area": 800 
                    } 
                }, 
                "color": { 
                    "value": "#ffffff" 
                }, 
                "opacity": { 
                    "value": 0.7, 
                    "random": false, 
                    "anim": { 
                        "enable": false 
                    } 
                }, 
                "size": { 
                    "value": 5, 
                    "random": true, 
                    "anim": { 
                        "enable": false 
                    } 
                }, 
                "line_linked": { 
                    "enable": false 
                }, 
                "move": { 
                    "enable": true, 
                    "speed": 5, 
                    "direction": "bottom", 
                    "random": true, 
                    "straight": false, 
                    "out_mode": "out", 
                    "bounce": false, 
                    "attract": { 
                        "enable": true, 
                        "rotateX": 300, 
                        "rotateY": 1200 
                    } 
                } 
            }, 
            "interactivity": { 
                "events": { 
                    "onhover": { 
                        "enable": false 
                    }, 
                    "onclick": { 
                        "enable": false 
                    }, 
                    "resize": false 
                } 
            }, 
            "retina_detect": true 
        }); 
    } 
    document.head.append(script); 
}); 
</script> 

2. insert CSS code

Insert the following code in the page settings:

#snow { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    pointer-events: none; 
    z-index: 1000; 
} 

Dieser Beitrag ist auch verfügbar auf: Deutsch (German)