Inhaltsverzeichnis
Kürzlich fragte uns einer unserer Leser, wie man einen Parallaxen-Effekt zu einem WordPress-Theme hinzufügen kann. Der Parallaxen-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 Parallaxen-Effekt zu einem WordPress-Theme hinzufügen können.
Was ist ein Parallaxen-Effekt?
Der Parallaxen-Effekt ist eine moderne Webdesign-Technik, bei der das Hintergrundelement langsamer scrollt als der Vordergrundinhalt. Dieser Effekt verleiht den Hintergrundbildern mehr Tiefe und lässt sie interaktiv wirken.
Der Parallax-Effekt kann auf Landingpages, Longform-Inhalten, Verkaufsseiten oder der Homepage einer Unternehmenswebsite verwendet werden und ist eine gute Möglichkeit, verschiedene Abschnitte auf einer langen Seite hervorzuheben.
Viele Premium-WordPress-Themes verfügen über einen integrierten Parallaxen-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 eingebauten Parallaxen-Effekt, und Sie möchten vielleicht nicht einen Page Builder verwenden, um benutzerdefinierte Seitenlayouts nur für einen Parallaxen-Effekt zu erstellen.
Sehen wir uns an, wie man ganz einfach einen Parallaxen-Hintergrundeffekt zu jedem WordPress-Theme hinzufügen kann.
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 den meisten Benutzern 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 zur Installation eines WordPress Plugins.
Nach der Aktivierung müssen Sie die Seite oder den Beitrag bearbeiten, zu der/dem Sie den Parallaxen-Effekt hinzufügen möchten. Sie werden die neue Schaltfläche "Erweiterte WordPress-Hintergründe" im visuellen Editor sehen.
Wenn Sie darauf klicken, öffnet sich ein Popup-Fenster, in dem Sie verschiedene Einstellungen für den Hintergrund vornehmen können, den Sie hinzufügen möchten.
Zunächst 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. Stellen Sie sicher, dass Sie ein großes Bild verwenden, da es sonst verpixelt erscheint.
Danach müssen Sie die Parallaxe aktivieren, indem Sie einen Parallaxentyp auswählen. Es gibt eine Reihe von Stilen, mit denen Sie experimentieren können. Der am häufigsten verwendete Parallaxeneffekt ist Scroll.
Klicken Sie auf die Schaltfläche Einfügen, um fortzufahren.
Das Plugin fügt nun einen Shortcode in den WordPress-Beitragseditor ein, der in etwa so aussehen wird:
[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 Ihr Inhalt hier". mit Ihrem 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 eines Parallaxen-Effekts zu einem beliebigen WordPress-Theme mit CSS
Diese Methode erfordert ein gewisses Verständnis von HTML/CSS sowie 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 Medien " Neu hinzufügen Seite.
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 den folgenden HTML-Code in die Seite oder den Beitrag einfügen, in 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...Veranstaltet mit ❤️ von WPCode
1-Klick-Verwendung in WordPress
Als Nächstes müssen Sie das folgende benutzerdefinierte CSS zu Ihrem WordPress-Theme hinzufügen.
.parallax { background-image: url("//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; } Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
Vergessen Sie nicht, die URL des Hintergrundbildes durch Ihr eigenes Hintergrundbild zu ersetzen.
Sie können Ihre Änderungen nun speichern und Ihre Website besuchen, um sie in Aktion zu sehen.
Hinweis: Möglicherweise müssen Sie CSS an das Layout Ihrer Website anpassen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie den Parallaxen-Effekt ganz einfach zu jedem WordPress-Theme hinzufügen können. Vielleicht möchten Sie auch unsere Mega-Liste der beliebtesten WordPress-Tipps, Tricks und Hacks sehen.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
