Schneeflocken auf deiner WordPress Webseite mit Divi, ohne Plugin

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

Verleihe deiner WordPress-Webseite mit Divi einen magischen Touch – ganz ohne zusätzliche Plugins. Bei OIT GmbH zeigen wir dir, wie du mit einfachen Schritten einen charmanten Schneeflocken-Effekt kreierst. Perfekt, um deine Seite in der Winterzeit besonders hervorzuheben. Unsere Anleitung ist unkompliziert und auch für Anfänger leicht umsetzbar. Entdecke, wie du mit nur wenigen Codezeilen deiner Webseite ein winterliches Ambiente verleihst. Mach deine Webseite mit uns winterlich und festlich!

1. JavaScript im Code Modul

Füge folgenden Code irgendwo auf der Seite im Code Modul ein:

<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. CSS Code einfügen

Füge folgenden Code in den Seiteneinstellungen ein:

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

Dein Ansprechpartner

Marius Marzian

OIT GmbH

Profil ansehen

Ähnliche Artikel

SEO

Schnell ausgeliefert, trotzdem langsam: REST-API-Reads richtig cachen (mit Auto-Purge beim Speichern)

Eine Seite kann blitzschnell ausgeliefert werden und sich trotzdem zäh anfühlen. Genau dieses Parad…

Lesen →

SEO

GEO-Checkliste: So wird deine WordPress-Website sichtbar in ChatGPT & Co.

Das Wichtigste in Kürze: GEO (Generative Engine Optimization) sorgt dafür, dass deine Website von K…

Lesen →

SEO

Google reCAPTCHA – neuer Name: Was sich für eure Website ändert

Google hat zum 23. April 2026 eine seiner bekanntesten Sicherheitslösungen umbenannt und in eine gr…

Lesen →