Flache Websites werden gelesen. Parallax-Websites bleiben im Gedächtnis. Gleicher Inhalt, gleiches Layout, aber der Hintergrund bewegt sich langsamer als der Vordergrund, und die Seite gewinnt an Tiefe, Raum und einer filmischen Qualität. Der Nutzer scrollt nicht einfach durch Text, er scrollt durch eine Geschichte.

Das Problem: Die meisten WordPress-Seiten sehen gleich aus: Header, Raster, Sidebar, Footer. Parallax durchbricht diese Schablone, ohne das Layout umzustrukturieren, ohne das Theme zu wechseln, mitunter ganz ohne Plugins. Aber nicht jede Parallax-Implementierung funktioniert einwandfrei: ruckelndes Scrollen auf Mobilgeräten, Performance-Probleme, Barrierefreiheitskonflikte, Sie kennen das.

Im Folgenden eine vollständige Aufschlüsselung: was Parallax-Scrolling ist, wann es sich auszahlt, welche Themes und Plugins fertige Ergebnisse liefern und wie Sie Performance-Einbußen vermeiden. Mit Schritt-für-Schritt-Screenshots, Tool-Vergleichen und Antworten auf häufige Fragen.

💡 Kurzüberblick:

• Verstehen, wie Parallax-Scrolling funktioniert und warum Ihre Seite davon profitiert
• Risiken bewerten: mobile Performance, Barrierefreiheit, Hintergrundbildauswahl
• Ein Theme mit integriertem Parallax wählen oder Slider Revolution für Slider ergänzen
• Das kostenlose Plugin Advanced WordPress Backgrounds (AWB) installieren, eine universelle Lösung für Gutenberg, Classic Editor und WPBakery

Was der Parallax-Effekt ist

Der Parallax-Effekt ist eine Technik, bei der der Hintergrund einer Webseite langsamer scrollt als der Inhalt im Vordergrund. Es entsteht eine Illusion von Tiefe: Der Inhalt scheint über dem Bild zu schweben, und die Seite erhält eine dreidimensionale Anmutung.

Die Technik wanderte aus der Spieleindustrie ins Webdesign, wo Parallax seit Jahren genutzt wurde, um Hintergrundebenen in Jump'n'Runs zu erzeugen. Heute ist sie ein Standardmerkmal in Premium-Themes, Page-Buildern und eigenständigen Plugins. Selbst das kostenlose Twenty-Seventeen-Theme, das standardmäßig mit WordPress ausgeliefert wurde, verfügte über integriertes Parallax.

Modernes Webdesign ist noch weiter gegangen: Die CSS-Eigenschaft scroll-timeline erlaubt es, Parallax gänzlich ohne JavaScript zu erzeugen, mittels reiner Animation, die an den Scroll-Fortschritt gekoppelt ist. Für die schnelle Umsetzung auf Produktivseiten bleiben Plugins und Builder jedoch praktikabler.

Das obige Video ist eine vollständige Anleitung zum Hinzufügen von Parallax in WordPress (EN, 12 Minuten). Der Autor zeigt Installation, Geschwindigkeitskonfiguration, Deaktivierung auf Mobilgeräten und die Arbeit mit Hintergrundbildern in Echtzeit.

Warum Sie Parallax auf Ihrer Seite einsetzen sollten

Erstens und am offensichtlichsten: der visuelle Wow-Effekt. Parallax macht eine Seite modern, stilvoll und einprägsam. Wenn ein Nutzer die Seite scrollt und der Hintergrund sich mit einer anderen Geschwindigkeit bewegt, zieht das die Aufmerksamkeit auf sich. Inhalte treten hervor.

Doch die Vorteile enden nicht bei der Ästhetik. Parallax gliedert die Seite in lesbare Abschnitte, insbesondere auf Landingpages und Homepages, wo Sie den Besucher von der Überschrift zum Call-to-Action führen müssen. Ein Abschnitt mit Parallax-Hintergrund trennt auf natürliche Weise einen Inhaltsblock vom nächsten und lenkt die Aufmerksamkeit.

Drittens: Engagement und Verweildauer. Besucher verweilen länger auf Seiten mit interaktivem Scrollen, was indirekt die Verhaltensmetriken und die Conversion verbessert. Dies funktioniert besonders gut auf One-Pager-Seiten, Portfolios und Produkt-Landingpages.

Was Sie vor der Implementierung von Parallax bedenken sollten

Jede Medaille hat zwei Seiten. Hier ist, was Sie beachten sollten, bevor Sie Parallax-Abschnitte hinzufügen.

Auswahl eines Hintergrundbildes

Das Hintergrundbild ist das Schlüsselelement. Es sollte relevant für das Seitenthema und die Marke als Ganzes sein. Wenn Sie Text oder Überschriften über dem Hintergrund platzieren, ist es besser, ein dezentes Muster oder eine Farbüberlagerung zu verwenden als ein detailreiches Foto. Der Inhalt sollte nicht mit dem Hintergrund konkurrieren.

Bei Fotos gilt: ausschließlich hohe Auflösung. Ein verschwommenes oder verpixeltes Vollbild-Hintergrundbild zerstört den professionellen Look. Wir haben eine Sammlung von Stockfoto-Seiten mit kostenlosen und Premium-Bildern in einem separaten Testbericht über 35 Foto-Stockseiten zusammengestellt.

Parallax auf mobilen Endgeräten

Auf Smartphones und Tablets funktioniert Parallax unzuverlässig. Gestenbasiertes Scrollen (Wischen) unterscheidet sich von einem Mausrad, der Effekt kann stocken, verzögern oder gar nicht angezeigt werden. Die meisten modernen Plugins und Themes erlauben es, Parallax für Mobilgeräte mit einer einzigen Checkbox zu deaktivieren, und das ist aus UX-Sicht die beste Option.

Barrierefreiheit

Bewegte Hintergründe verursachen Probleme für Nutzer mit vestibulären Störungen: Reisekrankheit, Übelkeit, Konzentrationsschwierigkeiten. Die Media Query prefers-reduced-motion ermöglicht es, Parallax-Animationen für solche Besucher automatisch zu deaktivieren. Falls Ihr Plugin oder Theme dies nicht unterstützt, deaktivieren Sie den Effekt zumindest auf Mobilgeräten.

Auswahl eines Themes mit integriertem Parallax

Für diejenigen, die ein Projekt von Grund auf neu starten, ist der einfachste Weg, ein Theme mit bereits integriertem Parallax zu wählen. Die meisten Premium-WordPress-Themes enthalten diese Funktion zumindest für die Homepage. Wenn Sie Parallax auf verschiedenen Seiten der Website benötigen, richten Sie Ihren Blick auf Mehrzweck-Themes mit einem fortschrittlichen Builder.

Drei bewährte Optionen:

• Divi von Elegant Themes, ein visueller Builder mit integrierter Parallax-Hintergrundoption für jede Sektion;
• Ultra von Themify, ein Mehrzweck-Theme mit Themify Builder und flexiblen Parallax-Einstellungen;
• Total von WPExplorer, ein Mehrzweck-Theme auf WPBakery-Basis mit erweiterten Parallax-Optionen (Geschwindigkeit, Richtung, mobile Deaktivierung).

Hinzufügen eines Parallax-Hintergrunds in Total (WPBakery)

Nachfolgend ein schrittweises Beispiel für die Konfiguration von Parallax im Total-Theme. Total nutzt WPBakery für den Seitenaufbau, aber ähnliche Optionen finden sich in den meisten WordPress Page Buildern.

Fügen Sie zunächst eine Zeile ein und hinterlegen Sie Inhalte darin. Klicken Sie auf das Stiftsymbol, um die Zeile zu bearbeiten. Wenn das Design keine Seitenleiste vorsieht, aktivieren Sie die Option „Stretch row", damit der Parallax-Hintergrund die Zeile in voller Breite ausfüllt. Total bietet zudem einen Vollbildmodus, der den Hintergrund über das gesamte Browserfenster streckt.

Im Bereich „Parallax" fügen Sie ein Hintergrundbild hinzu und legen die Scroll-Geschwindigkeit fest. Je höher der Wert, desto stärker verschiebt sich das Bild und desto höher muss seine Auflösung sein.

In den erweiterten Parallax-Einstellungen können Sie den Effekt auf Mobilgeräten ein- oder ausschalten, den Bildstil wählen (Cover, Fixed, Repeat), die Bewegungsrichtung und die exakte Geschwindigkeit festlegen.

Für einen Kontrast zwischen Hintergrund und Inhalt nutzen Sie den Tab „Overlay", zum Beispiel eine halbtransparente weiße Füllung über dem Bild. Speichern Sie die Zeile und die Seitenänderungen.

Parallax-Slider mit Slider Revolution

Wenn Sie keinen statischen Hintergrund, sondern einen vollwertigen Slider mit Parallax-Effekt benötigen, ist Slider Revolution das beste Werkzeug. Das Premium-Plugin umfasst Hunderte von Optionen: Schriften, Ebenen, Übergangseffekte, Layouts und selbstverständlich mehrschichtiges Parallax. Eine ausführliche Slider-Revolution-Anleitung finden Sie in einem separaten Artikel.

So aktivieren Sie Parallax in Slider Revolution

Installieren Sie das Plugin und importieren Sie entweder eine fertige Slider-Vorlage oder erstellen Sie einen Slider von Grund auf neu.

Bearbeiten Sie den Haupt-Hintergrund der Folie: Fügen Sie das Quellbild hinzu und wechseln Sie in den Tab „Parallax / 3D", um die Parallax-Stufe zuzuweisen. Wenn Sie anschließend Ebenen hinzufügen (Text, Bilder, Schaltflächen), wählen Sie für jede Ebene die Option Parallax / 3D aus, die Parallax-Tiefe erweckt die Elemente unabhängig voneinander zum Leben.

Der fertige Slider wird per Shortcode in einen beliebigen Beitrag oder eine Seite eingefügt. Wenn Sie WPBakery verwenden, ziehen Sie einfach das Element „Slider Revolution" auf die Seite und wählen den Slider aus der Dropdown-Liste aus.

Kostenloses Plugin Advanced WordPress Backgrounds (AWB)

Wenn Sie bereits ein Theme installiert haben, das Parallax nicht unterstützt, müssen Sie es nicht wechseln. Advanced WordPress Backgrounds (AWB) ist ein kostenloses Plugin aus dem offiziellen WordPress.org-Verzeichnis, das Parallax-Hintergründe zu jedem Seitenelement hinzufügt: Block, Überschrift oder ganzer Abschnitt. Das Plugin wird aktiv weiterentwickelt: letztes Update Juni 2026, Kompatibilität mit WordPress 7.0 bestätigt.

AWB unterstützt drei Hintergrundtypen: Farbe, Bild und Video (YouTube/Vimeo/selbst gehostet). Funktioniert mit Gutenberg, Classic Editor und WPBakery.

AWB installieren

Gehen Sie in die WordPress-Administration: Plugins → Installieren. Geben Sie in die Suche „Advanced WordPress Backgrounds" ein, klicken Sie auf Installieren → Aktivieren.

Die Methode zum Hinzufügen eines Hintergrunds hängt vom Editor ab. Laut der Plugin-Beschreibung auf WordPress.org haben alle drei Editoren Zugriff auf: Hintergrundtyp (Farbe, Bild oder Video), Anzeigegröße (Cover, Contain oder Muster), Hintergrundposition mit Prozentangaben, Overlay mit Farbauswahl und Transparenz über den Alpha-Regler, Parallax-Scrolling mit Geschwindigkeitseinstellung, Skalierung und Transparenz sowie Maus-Parallax (der Hintergrund verschiebt sich leicht mit dem Cursor).

Im Menü Einstellungen → AWB gibt es einen Reiter mit globalen Parametern. Hier können Sie Parallax- und Videoeffekte für Mobilgeräte und bestimmte Browser deaktivieren.

AWB in Gutenberg

AWB ist vollständig kompatibel mit dem Block-Editor und stellt einen eigenen Block bereit.

Fügen Sie einen AWB-Block ein und platzieren Sie dann beliebige andere Blöcke mit Ihrem Inhalt darin.

Klicken Sie auf den AWB-Block und wechseln Sie im rechten Panel auf den Tab „Block". Hier konfigurieren Sie alle Hintergrundparameter: Typ, Bild, Parallax, Overlay.

AWB im Classic Editor

Im Classic Editor funktioniert AWB über einen Shortcode. Markieren Sie den Text, der einen Parallax-Hintergrund benötigt, und klicken Sie auf das AWB-Symbol in der Editor-Werkzeugleiste.

Wählen Sie ein Hintergrundbild und konfigurieren Sie die weiteren Parameter: Overlay-Farbe, Parallax-Typ, Geschwindigkeit. Klicken Sie auf „Einfügen".

Der Shortcode sieht etwa so aus:

1
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]Your content inside the parallax background[/nk_awb]

Der Nachteil des Shortcode-Ansatzes: Die Hintergrundeinstellungen sind im visuellen Editor nicht sichtbar, Sie müssen den Code manuell bearbeiten. Für komfortables Arbeiten nutzen Sie besser Gutenberg oder WPBakery.

AWB mit WPBakery

Mit WPBakery ist die Integration maximal einfach. In den Zeileneinstellungen erscheint ein zusätzlicher Tab „Backgrounds (AWB)", in dem Sie einen Parallax-Hintergrund ohne Shortcodes erstellen und konfigurieren können, alles visuell.

⁉️🤔 Häufig gestellte Fragen

Muss ich mein Theme für Parallax wechseln?

Nein. Wenn Ihr aktuelles Theme kein Parallax unterstützt, genügt das kostenlose AWB-Plugin. Es fügt den Effekt über eine komfortable Oberfläche jedem Element auf jeder Seite hinzu, ohne das übrige Theme zu verändern. Ein Theme-Wechsel ist nur sinnvoll, wenn Sie ohnehin neu starten und integriertes Parallax out of the box wünschen.

Verlangsamt Parallax die Website?

Bei sorgfältiger Konfiguration nur geringfügig. AWB nutzt die schlanke Jarallax-Bibliothek (seit Version 1.11 ohne jQuery), und moderne Browser optimieren transform auf der GPU. Der Hauptfaktor für Verlangsamung ist ein zu schweres Hintergrundbild. Optimieren Sie Fotos auf WebP oder AVIF, halten Sie die Größe innerhalb von 200-300 KB, und die Geschwindigkeit leidet nicht.

Funktioniert Parallax auf iPhones und Android?

Hängt von der Implementierung ab. Unter iOS ist Web-Parallax traditionell problematisch: Fixierte Hintergründe (background-attachment: fixed) werden von Safari ignoriert. Das AWB-Plugin löst dies durch JavaScript-Animation, funktioniert stabil. Die beste Praxis für Mobilgeräte ist jedoch, Parallax komplett zu deaktivieren (Checkbox in AWB oder Theme-Einstellungen): Auf einem kleinen Bildschirm ist der Effekt kaum wahrnehmbar, und Akkuressourcen werden geschont.

Kann man Parallax ganz ohne Plugins erstellen?

Das ist möglich. Die CSS-Eigenschaft animation-timeline: scroll() erlaubt es, Parallax-Animation an den Scroll-Fortschritt zu binden, ohne eine einzige Zeile JavaScript. Die Browser-Unterstützung ist jedoch noch lückenhaft (Safari seit 2024 dabei, Firefox seit 2025). Für Kompatibilität mit älteren Browsern ist ein Plugin weiterhin zuverlässiger.

Was macht AWB besser als andere kostenlose Parallax-Plugins?

AWB hebt sich in dreierlei Hinsicht ab: erstens Unterstützung für drei Editoren (Gutenberg, Classic, WPBakery) ohne Konflikte; zweitens regelmäßige Updates, das Plugin ist bis WordPress 7.0 getestet; drittens Maus-Parallax und Video-Hintergründe in der kostenlosen Version, das sind bei Wettbewerbern oft Pro-Features.

Braucht man Parallax für SEO?

Nicht direkt. Parallax ist eine visuelle Technik, kein Ranking-Faktor. Indirekt kann es jedoch helfen: längere Verweildauer, niedrigere Absprungrate, das berücksichtigen Suchmaschinen. Die Hauptsache ist, Ladegeschwindigkeit und Textlesbarkeit nicht dem Effekt zu opfern.

Welches Werkzeug für Ihre Aufgabe wählen

Wenn Ihr Theme Parallax bereits unterstützt, nutzen Sie die integrierten Einstellungen, das genügt für Home- und Landingpages.

Wenn Ihr Theme kein Parallax hat, deckt AWB die meisten typischen Szenarien kostenlos ab: Schnelle Installation, intuitive Oberfläche, funktioniert mit Gutenberg und WPBakery, globale Deaktivierung auf Mobilgeräten. Für Slider mit mehrschichtigem Parallax ist Slider Revolution in puncto Animationsflexibilität unübertroffen.

Parallax ist kein Allheilmittel. Auf Websites mit dichtem Textinhalt (Longreads, Dokumentation) stört es mehr, als es nützt. Für eine Landingpage, ein Portfolio oder eine Produkt-Promo-Seite bleibt die Technik jedoch eine der stärksten im Webdesign. Der Nutzer vergisst den Text, erinnert sich aber daran, wie die Seite beim Scrollen „atmete".