So fügen sie einen ParallaxEffekt zu Ihrer Wordpress Website hinzu
Kürzlich fragte uns einer unserer Leser, wie man einen Parallax-Effekt zu einem beliebigen WordPress-Theme hinzufügen kann? Der Parallax-Effekt ist ein Webdesign-Trend, bei dem ein Hintergrundbild langsamer scrollt als der Inhalt im Vordergrund. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen Parallax-Effekt zu einem beliebigen WordPress-Theme hinzufügen können.
Was ist ein Parallaxen-Effekt?
Der Parallax-Effekt ist eine moderne Webdesign-Technik, bei der das Hintergrundelement langsamer scrollt als der Inhalt im Vordergrund.
Dieser Effekt verleiht den Hintergrundbildern Tiefe und lässt sie interaktiv wirken. Der Parallax-Effekt kann auf Landing Pages, Longform-Inhalten, Verkaufsseiten oder der Homepage einer Unternehmenswebsite verwendet werden. Es ist eine großartige Möglichkeit, um verschiedene Abschnitte auf einer langen Seite hervorzuheben.
Viele Premium-WordPress-Themes verfügen über einen integrierten Parallax-Effekt auf ihrer Homepage. Sie können den Parallaxen-Effekt auch in den meisten WordPress-Page-Builder-Plugins verwenden. Allerdings haben nicht alle Themes einen integrierten Parallax-Effekt, und Sie möchten vielleicht keinen Page Builder verwenden, um benutzerdefinierte Seitenlayouts nur für einen Parallax-Effekt zu erstellen.
Lassen Sie uns einen Blick darauf werfen, wie Sie ganz einfach einen Parallaxen-Hintergrundeffekt zu jedem WordPress-Theme hinzufügen können.
Methode 1: Hinzufügen eines Parallaxen-Effekts zu einem beliebigen WordPress-Theme mithilfe eines Plugins
Bei dieser Methode müssen Sie keinen Code zu Ihrem WordPress-Theme hinzufügen.
Sie ist einfacher und wird für die meisten Benutzer empfohlen. Als erstes müssen Sie das Advanced WordPress Backgrounds Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins. Nach der Aktivierung müssen Sie die Seite oder den Beitrag bearbeiten, zu dem Sie den Parallaxen-Effekt hinzufügen möchten. Sie werden die neue Schaltfläche "Erweiterte WordPress-Hintergründe" im visuellen Editor bemerken.
Wenn Sie darauf klicken, wird ein Popup-Fenster angezeigt, in dem Sie verschiedene Einstellungen für den Hintergrund ändern können, den Sie hinzufügen möchten. Zuerst müssen Sie ein Bild als Hintergrundtyp auswählen und dann die Option "Strecken" aktivieren.
Als nächstes müssen Sie auf die Schaltfläche "Bild auswählen" klicken, um ein Bild hochzuladen oder auszuwählen, das Sie verwenden möchten.
Achten Sie darauf, dass Sie ein großes Bild verwenden, da es sonst verpixelt erscheint. Danach müssen Sie die Parallaxe aktivieren, indem Sie einen Parallaxen-Typ auswählen. Es gibt eine Reihe von Stilen, mit denen Sie experimentieren können. Der am häufigsten verwendete Parallax ist Parallax Scrolling Effekt. Klicken Sie auf die Schaltfläche Einfügen, um fortzufahren. Das Plugin fügt nun einen Shortcode in Ihrem WordPress-Beitragseditor ein.
Er wird in etwa so aussehen:
[nk_awb awb_type="image" awb_stretch="true" awb_image="22″ awb_image_size="full" awb_parallax="scroll" awb_parallax_speed="0.5″ awb_mouse_parallax="true" awb_mouse_parallax_size="30″ awb_mouse_parallax_speed="10000″] Ihr Inhalt hier [/nk_awb]
Ersetzen Sie "Your content here" durch Ihren eigenen Inhalt und speichern Sie dann Ihre Seite. Sie können nun Ihre Website besuchen, um sie in Aktion zu sehen.
Methode 2: Hinzufügen des Parallax-Effekts zu einem beliebigen WordPress-Theme mit CSS
Diese Methode erfordert ein gewisses Verständnis von HTML / CSS sowie von der Funktionsweise von WordPress-Themes. Zunächst müssen Sie das Bild, das Sie für den Parallaxen-Effekt verwenden möchten, in Ihre WordPress-Mediathek hochladen, indem Sie die Seite Media " Add New besuchen. Nachdem Sie das Bild hochgeladen haben, müssen Sie die Bild-URL kopieren, indem Sie das Bild in der WordPress-Mediathek bearbeiten.
Als Nächstes müssen Sie das folgende HTML in die Seite oder den Beitrag einfügen, auf der/dem Sie den Parallax-Effekt anzeigen möchten. Sie können diesen HTML-Code auch in Ihr WordPress-Theme oder Child-Theme einfügen.
Ihr Inhalt kommt hier hin...
Als nächstes müssen Sie das folgende benutzerdefinierte CSS zu Ihrem WordPress-Theme hinzufügen.
.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; farbe:#FFF; padding-top:50px }
Vergessen Sie nicht, die URL des Hintergrundbildes durch Ihr eigenes Hintergrundbild zu ersetzen.
Sie können nun Ihre Änderungen speichern und Ihre Website besuchen, um sie in Aktion zu sehen.
Hinweis: Möglicherweise müssen Sie CSS anpassen, damit es mit dem Layout Ihrer Website funktioniert.