So fügen Sie jedem WordPress-Theme einen Parallax-Effekt hinzu

Der Parallax-Effekt ist ein Webdesign-Trend, bei dem sich ein Hintergrundbild langsamer als der Vordergrundinhalt bewegt. Dies erzeugt die Illusion von Tiefe und Bewegung und sorgt für ein interaktiveres Benutzererlebnis auf Ihrer Website.

Unserer Meinung nach ist die Verwendung eines Parallax-Effekts eine großartige Möglichkeit, die Aufmerksamkeit der Besucher zu erregen. Er zieht die Leute an und ermutigt sie, länger zu bleiben, was das Engagement steigern kann. Wir haben festgestellt, dass er Ihrer Website nicht nur ein elegantes, professionelles Gefühl verleiht, sondern auch zu höheren Konversionsraten führen kann.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen Parallax-Effekt zu jedem WordPress-Theme hinzufügen. Wir werden verschiedene Methoden untersuchen, darunter die Verwendung von Plugins und benutzerdefiniertem Code, um Ihnen flexible Optionen zu bieten.

Was ist ein Parallax-Effekt?

Der Parallax-Effekt ist eine moderne Webdesign-Technik, bei der sich der Hintergrund langsamer als der Vordergrundinhalt bewegt. Dieser Effekt verleiht den Hintergrundbildern Tiefe und lässt sie interaktiver wirken.

Der Parallax-Effekt kann auf Landingpages, Langform-Inhalten, Verkaufsseiten oder der Homepage einer Geschäftswebsite verwendet werden.

Es kann verschiedene Abschnitte auf einer langen Seite hervorheben, die allgemeine visuelle Attraktivität der Website verbessern, das Benutzerengagement steigern und ein erstaunliches Werkzeug sein, um eine Botschaft zu vermitteln oder eine Geschichte auf Ihrem Blog zu erzählen.

Viele Premium-WordPress-Themes verfügen über einen integrierten Parallax-Effekt auf ihrer Homepage. Sie können diesen Effekt auch in den meisten WordPress-Page-Builder-Plugins verwenden.

Allerdings haben nicht alle Themes diese Funktion, und Sie möchten vielleicht keinen Page Builder verwenden, um benutzerdefinierte Seitenlayouts nur für einen Parallax-Effekt zu erstellen.

Nichtsdestotrotz wollen wir uns ansehen, wie Sie ganz einfach einen Parallax-Hintergrundeffekt zu jedem WordPress-Theme hinzufügen können. Wir werden ein paar verschiedene Methoden behandeln, und Sie können die Schnelllinks unten verwenden, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Parallax-Effekt mit einem Plugin zum WordPress-Theme hinzufügen
• Methode 2: Parallax-Effekt mit CSS zum WordPress-Theme hinzufügen
• Bonus: YouTube-Video als Vollbildhintergrund in WordPress hinzufügen

Methode 1: Parallax-Effekt mit einem Plugin zum WordPress-Theme hinzufügen

Diese Methode erfordert keine Code-Hinzufügung zu Ihrem WordPress-Theme. Sie ist einfach und für die meisten Benutzer empfohlen.

Zuerst müssen Sie das Plugin Advanced WordPress Backgrounds installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung besuchen Sie die Seite Einstellungen » AWB im WordPress-Dashboard. Hier können Sie die Kontrollkästchen für die Browser oder Geräte aktivieren, auf denen der Parallax-Effekt nicht angezeigt werden soll.

Wenn Sie beispielsweise den Parallax-Effekt nicht für Benutzer auf Mobilgeräten anzeigen möchten, können Sie dieses Kontrollkästchen aktivieren.

Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Öffnen Sie als Nächstes eine Seite oder einen Beitrag Ihrer Wahl im Gutenberg Block-Editor.

Sobald Sie dort sind, klicken Sie auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen.

Von hier aus müssen Sie den Block „Hintergrund (AWB)“ finden und zum Beitrag hinzufügen.

Öffnen Sie nun das Block-Panel auf der rechten Seite des Bildschirms und wechseln Sie zum Tab „Bild“, wenn Sie ein Bild als Parallax-Hintergrund hinzufügen möchten.

Klicken Sie danach auf die Schaltfläche „Bild auswählen“, um die Mediathek zu öffnen. Sie können auch auf die Schaltfläche „Beitragsbild verwenden“ klicken, um das Beitragsbild automatisch als Hintergrund hinzuzufügen.

Sie können sogar eine Hintergrundfarbe oder ein Video für den Effekt hinzufügen, indem Sie zu diesen Tabs wechseln.

Nach dem Hinzufügen eines Bildes können Sie dessen Fokuspunkt im Block-Panel anpassen und die Hintergrundgröße konfigurieren. Wir empfehlen jedoch, die Hintergrundgröße auf 'Abdecken' zu belassen.

Als Nächstes können Sie mit dem Schieberegler die Deckkraft des Bildes ändern.

Sobald Sie dies getan haben, scrollen Sie nach unten zum Tab 'Parallax' und erweitern Sie ihn.

Von hier aus können Sie Ihren Parallax-Typ aus dem Dropdown-Menü auswählen. Sobald Sie eine Option gewählt haben, werden die Änderungen automatisch im Block-Editor übernommen, wo Sie sie testen können.

In unserem Beispiel verwenden wir „Opacity + Scroll“.

Nachdem Sie den Effekt hinzugefügt haben, klicken Sie auf die Schaltfläche '+' im AWB-Block, um das Blockmenü zu öffnen.

Sie können jetzt einen Absatz, ein Bild, ein Video, ein Zitat oder einen anderen gewünschten Block hinzufügen. Dieser Block wird dann mit dem Parallax-Effekt angezeigt.

Klicken Sie abschließend oben auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Jetzt können Sie Ihre WordPress-Website besuchen, um den Parallax-Effekt in Aktion zu sehen.

Methode 2: Parallax-Effekt mit CSS zum WordPress-Theme hinzufügen

Wenn Sie ein einzelnes Bild als Parallax-Hintergrund für Ihre gesamte Website verwenden möchten, dann ist diese Methode genau das Richtige für Sie.

Zuerst müssen Sie das Bild hochladen, das Sie verwenden möchten, in Ihre WordPress-Mediathek, indem Sie die Seite Medien » Neue Mediendatei hinzufügen besuchen.

Nachdem Sie dies getan haben, müssen Sie die URL des Bildes kopieren, indem Sie darauf klicken und die Aufforderung „Anhangsdetails“ öffnen.

Sobald Sie dies getan haben, müssen Sie benutzerdefinierten CSS-Code zu Ihren Theme-Dateien hinzufügen. Der kleinste Fehler beim Tippen des Codes kann jedoch Ihre Website beschädigen und sie unzugänglich machen.

Deshalb empfehlen wir die Verwendung von WPCode. Es ist das beste WordPress-Code-Snippet-Plugin auf dem Markt, das das Hinzufügen von benutzerdefiniertem Code, einschließlich CSS, super sicher und einfach macht.

Zuerst müssen Sie das WPCode-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Anfängeranleitung zur Installation eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite Code-Snippets » + Snippet hinzufügen im WordPress-Dashboard und klicken Sie unter der Option „Eigene benutzerdefinierte Codes hinzufügen (Neues Snippet)“ auf die Schaltfläche „Snippet verwenden“.

Dies bringt Sie zur Seite „Benutzerdefinierten Snippet erstellen“, wo Sie mit dem Hinzufügen eines Titels für Ihren benutzerdefinierten Code beginnen können.

Wählen Sie danach die Option 'CSS-Snippet' aus dem Dropdown-Menü 'Code-Typ' auf der rechten Seite.

Fügen Sie als Nächstes den folgenden benutzerdefinierten CSS-Code in das Feld „Code-Vorschau“ ein:

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Wenn Sie das getan haben, stellen Sie sicher, dass Sie die Beispiel-URL in der Zeile background-image: url des Codes durch die URL Ihres Bildes ersetzen.

Dieses Bild wird als Hintergrund des Parallax-Effekts auf Ihrer gesamten Website verwendet.

Scrollen Sie als Nächstes zum Abschnitt „Einfügen“ und wählen Sie den Modus „Automatisch einfügen“.

Der Ausschnitt wird automatisch auf Ihrer Website ausgeführt, sobald Sie ihm etwas HTML-Code hinzufügen.

Scrollen Sie schließlich zurück zum Seitenanfang und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“.

Klicken Sie dann auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern.

Jetzt ist es an der Zeit, den WordPress-Beitrag oder die Seite zu öffnen, auf der Sie den Parallax-Effekt hinzufügen möchten.

Sobald Sie dort sind, klicken Sie auf das Drei-Punkte-Symbol in der oberen rechten Ecke des Bildschirms, um ein Menü zu öffnen. Wählen Sie dann den Modus „Code-Editor“.

Nun müssen Sie den folgenden HTML-Code in den Code-Editor einfügen, wobei der Inhalt für den Parallax-Effekt dazwischen liegt:

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

Sie können dann einfach zum visuellen Blockeditor zurückkehren, indem Sie oben auf den Link 'Code-Editor verlassen' klicken.

Fügen Sie danach den Rest des Inhalts für die Seite oder den Beitrag im visuellen Blockeditor hinzu.

Klicken Sie abschließend auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Besuchen Sie jetzt einfach Ihr WordPress-Blog, um den Parallax-Effekt in Aktion zu sehen.

Bonus: YouTube-Video als Vollbildhintergrund in WordPress hinzufügen

Abgesehen vom Parallax-Effekt können Sie in WordPress auch ein YouTube-Video als Vollbild-Hintergrund hinzufügen.

Dies kann Ihren Benutzern ein immersives Erlebnis bieten und die visuelle Attraktivität Ihrer WordPress-Site steigern. Ein Vollbild-YouTube-Video als Hintergrund kann Emotionen hervorrufen und eine tiefere Verbindung zu Ihrem Publikum schaffen.

Wenn Sie beispielsweise eine Verlosung auf Ihrer Website veranstalten, können Sie ein YouTube-Hintergrundvideo verwenden, um die Seite spannender zu gestalten und die Benutzer zur Teilnahme am Wettbewerb zu ermutigen.

Wenn Sie beispielsweise eine gemeinnützige Organisation haben, können Sie mit Videohintergründen die Wirkung, Mission und die Geschichten der Einzelpersonen oder Gemeinschaften, denen Sie dienen, darstellen. Sie könnten sogar Erfolgsgeschichten im Vollbild-Videohintergrund präsentieren.

Für weitere Details können Sie unser Tutorial unter So fügen Sie ein YouTube-Video als Vollbild-Hintergrund in WordPress hinzu. sehen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach einen Parallax-Effekt zu jedem WordPress-Theme hinzufügen können. Möglicherweise möchten Sie auch unseren Leitfaden für Anfänger zum Thema Hinzufügen von unendlichem Scrollen zu Ihrer WordPress-Website und unsere Liste der besten Canva-Alternativen für Website-Grafiken sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.