Springe zum Hauptinhalt

Wie eine Parallaxe Auswirkungen auf ein Wordpress-Theme hinzufügen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Kürzlich fragte uns einer unserer Leser, wie man einem WordPress-Thema einen Parallaxeeffekt hinzufügt.

Der Parallax-Effekt ist heutzutage ein beliebter Trend im Web, bei dem ein Hintergrundbild langsamer rollt als Vordergrundinhalte.

In diesem Tutorial zeigen wir Ihnen, wie Sie jedem WordPress-Thema auf einfache Weise einen Parallaxeeffekt hinzufügen können.

Falls Sie WordPress noch nie installiert haben, entdecken Sie es Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Aber zurück zu dem Grund, warum wir hier sind.

So fügen Sie jedem WordPress-Thema einen Parallaxeeffekt hinzu e1567702269161

Was ist ein Parallaxeeffekt?

Der Parallax-Effekt ist eine moderne Webdesign-Technik, bei der das Hintergrundelement langsamer als der Vordergrundinhalt scrollt. Dieser Effekt verleiht den Hintergrundbildern Tiefe und macht sie interaktiv.

Entdecken Sie unsere 25 WordPress-Themes mit Parallaxe zum Erstellen einer Website

Der Parallax-Effekt kann verwendet werden Zielseiten, Verkaufsseiten oder die Homepage einer Unternehmenswebsite. Es ist eine großartige Möglichkeit, verschiedene Abschnitte auf einer langen Seite hervorzuheben.

viele Premium-WordPress-Themen haben einen eingebauten Parallaxeeffekt auf ihrer Homepage. Sie können den Parallaxeeffekt auch mit den meisten Plugins verwenden WordPress visuelle Erstellung von Seiten.

Allerdings haben nicht alle WordPress-Themes einen eingebauten Parallax-Effekt, und Sie möchten möglicherweise keinen visuellen Konstruktor für Seiten verwenden, der nur für den Parallax-Effekt gedacht ist.

Lassen Sie uns einen Blick darauf werfen, wie Sie den Parallaxeeffekt einfach zu jedem WordPress-Thema hinzufügen können.

Methode 1: Fügen Sie den Parallaxeeffekt mithilfe eines Plugins zu jedem WordPress-Thema hinzu

Für diese Methode muss Ihrem WordPress-Theme kein Code hinzugefügt werden. Es ist einfacher und für die meisten Benutzer empfohlen.

Als erstes müssen Sie das Plugin installieren und aktivieren Erweiterte WordPress-Hintergründe. Für weitere Details, Lesen Sie unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach dem Aktivieren des Plugins müssen Sie die Seite bearbeiten, auf der Sie den Parallaxeeffekt hinzufügen möchten. Sie werden den neuen Button bemerken "Erweiterte WordPress-Hintergründe»In der Symbolleiste des visuellen Editors.

Fügen Sie erweiterten WordPress-Hintergrund hinzu

Wenn Sie darauf klicken, wird ein Popup-Fenster geöffnet, in dem Sie verschiedene Hintergrundeinstellungen ändern können, die Sie hinzufügen möchten.

Zunächst müssen Sie ein Bild als Hintergrund auswählen und dann die Option " Stretch".

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Erweiterter WordPress-Fensterhintergrund

Dann müssen Sie auf die Schaltfläche klicken Bild auswählen Zum Herunterladen oder Auswählen eines Bildes, das Sie verwenden möchten. Stellen Sie sicher, dass Sie ein großes Bild verwenden, da es sonst pixelig erscheint.

Danach müssen Sie den Effekt aktivieren Parallaxe Durch Auswahl einer Art von Parallaxeeffekt. Es gibt eine Reihe von Stilen, mit denen Sie experimentieren können. Der am häufigsten verwendete Parallaxeeffekt ist das Scrollen.

Klicken Sie auf die Schaltfläche Insert fortzusetzen.

Das Plugin fügt ein Kurzwahlnummern auf Herausgeber. Es wird 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 " dieser Inhalt Speichern Sie Ihre Seite anhand Ihrer eigenen Inhalte.

Sie können Ihre Website besuchen, um sie in Aktion zu sehen.

Parallaxeeffekt auf WordPressMethode 2: Fügen Sie den "Parallax" -Effekt zu jedem WordPress-Thema mit CSS hinzu

Für diese Methode benötigen Sie Kenntnisse über "HTML / CSS" sowie die Funktionsweise von WordPress-Themes und -Plugins.

Zunächst müssen Sie das Bild, das Sie für den Parallaxeeffekt verwenden möchten, in Ihre WordPress-Medienbibliothek hochladen, indem Sie " Medien> Neu hinzufügen ".

Gehen Sie weiter und entdecken Sie Wie können die Medien auf Ihrem Wordpress-Blog organisieren

Nach dem Hochladen des Bildes müssen Sie die Bild-URL kopieren, indem Sie das Bild in der WordPress-Medienbibliothek bearbeiten.

Kopieren Sie die Bild-URL nach WordPress

Anschließend müssen Sie der Seite, auf der Sie den Parallaxeeffekt anzeigen möchten, den folgenden HTML-Code hinzufügen. Sie können diesen HTML-Code auch zu Ihrem hinzufügen WordPress-Theme oder Ihr Kind-Theme.

div class = "Parallaxe"> Ihr Inhalt hier ...

Dann müssen Sie Ihrem WordPress-Theme den folgenden benutzerdefinierten CSS-Code hinzufügen.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

.parallax {background-image: url ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); Höhe: 100%; Hintergrund-attachment: fixed; background-Position: Zentrum; background-repeat: no-repeat; Hintergrund-size: Abdeckung; margin-left: -410px; margin-right: -410px; } .parallax-Inhalt {Breite: 50%; margin: 0 auto; Farbe: #FFF; padding-top: 50px; }

Denken Sie daran, die URL des Hintergrundbilds durch Ihr eigenes Bild zu ersetzen.

Sie können jetzt Ihre Änderungen speichern und Ihre Website besuchen.

Beispiel für einen Wordpress-Parallaxeneffekt

Hier ist ! Jetzt können Sie Ihrer WordPress-Website den Parallaxeeffekt hinzufügen.

Entdecken Sie auch einige Themen und Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. WooCommerce Spende

Akzeptieren Sie über diese Erweiterung Spenden auf Ihrer WooCommerce-Website mit von Kunden angegebenen Beträgen. Dadurch können sie so viel geben, wie sie wollen. Jede Spende kann als übliches Produkt von präsentiert werden WooCommerce


Woocommerce Spenden Plugin

Wenn der Kunde die Warenkorbseite überspringt oder ohne Spende direkt zur Kasse geht, wird über der Kasse ein Link angezeigt, über den er spenden kann.

Jeder Schritt der Verwendung von WooCommerce Donation wird in einer Dokumentation mit Screenshots erläutert. Aktivieren Sie einfach das Plugin und Sie finden das Feld "Spende hinzufügen" im Warenkorb.

Download | Demo Web-Hosting

2. LinkedIn Mehr

LinkedIn Plus ist ein WordPress-Plugin, mit dem Sie Ihr LinkedIn-Profil in Ihrem Blog präsentieren können. Es funktioniert auch für Blogs mit mehreren Autoren. Es fügt Ihren Publikationen, Seiten oder WordPress-Widgets Follow and Share-Schaltflächen hinzu.Linkedin plus LinkedIn WordPress Plugin

Auf diese Weise können Sie Ihrem Blog alle LinkedIn-Funktionen hinzufügen und Ihre Marke bei den Verbrauchern validieren. Sie haben die Möglichkeit, das Erscheinungsbild anzupassen, Einstellungen zu konfigurieren und andere erweiterte Optionen zu aktivieren, um Ihr Profil bei potenziellen Personalvermittlern oder Arbeitgebern bekannt zu machen. 

Download | Demo | Web-Hosting

3. YouTuber

YouTubeR ist ein einzigartiges WordPress-Plugin, mit dem Sie YouTube-Videos von Ihrer Website hochladen und YouTube-Videos, Wiedergabelisten und Kanäle einfach in Ihre Website einbetten können.

Youtuber Youtube WordPress Plugin

Mit diesem Plugin haben Sie die Möglichkeit, außergewöhnliche Videogalerien auf Ihrer Website zu erstellen.

Seine anderen Eigenschaften sind: die Möglichkeit von Laden Sie einfach Videos von Ihrer WordPress-Website auf YouTube hoch, Integration einfache Videos, Wiedergabelisten und YouTube-Kanäle auf Ihrer Website, Unterstützung für Visual Composer, die unendliches Scrollen in Wiedergabelisten, exzellentes Caching, reaktionsschnelles Layout, ausführliche Dokumentation und mehr.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Das ist alles! Wir hoffen, dass es eine große Hilfe war. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Und wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie3
tweet
Registrieren3