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 600.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 hat uns einer unserer Leser gefragt, wie man einem WordPress-Theme einen Parallaxeeffekt hinzufügt.

Der Parallax-Effekt ist heutzutage ein beliebter Trend im Web, bei dem ein Hintergrundbild langsamer als der führende Inhalt gescrollt wird.

In diesem Tutorial zeigen wir Ihnen, wie Sie einem WordPress-Theme 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.

Was ist ein Parallax-Effekt?

Der Parallax-Effekt ist eine moderne Webdesign-Technik, bei der das Hintergrundelement langsamer als der Vordergrundinhalt gescrollt wird. 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 auf angewendet werden Zielseiten, die Verkaufsseiten oder die Homepage einer Unternehmenswebsite. Auf diese Weise können Sie verschiedene Abschnitte auf einer langen Seite hervorheben.

viele Premium-WordPress-Themen haben einen eingebauten Parallaxeeffekt auf ihrer Homepage. Sie können den Parallax-Effekt 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 untersuchen, wie Sie den Parallaxeeffekt auf einfache Weise einem WordPress-Thema hinzufügen können.

1-Methode: Hinzufügen des Parallax-Effekts zu einem WordPress-Theme mithilfe eines Plugins

Für diese Methode muss Ihrem WordPress-Design kein Code hinzugefügt werden. Es ist einfacher und wird 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 zum Installieren eines WordPress-Plugins.

Nachdem Sie das Plugin aktiviert haben, müssen Sie die Seite ändern, auf der Sie den Parallaxeeffekt hinzufügen möchten. Sie werden die neue Schaltfläche bemerkenErweiterte WordPress-HintergründeAuf der Symbolleiste des visuellen Editors.

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

Zuerst müssen Sie ein Bild als Hintergrund auswählen und dann die Option " Strecken".

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

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 eines Parallaxeneffekts. Es gibt eine Reihe von Stilen, die Sie ausprobieren können. Der am häufigsten verwendete Parallaxeneffekt 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.

2-Methode: Fügen Sie jedem WordPress-Theme mit CSS den "Parallax" -Effekt 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-Multimediabibliothek hochladen Medien> Neues hinzufügen ".

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

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

Dann müssen Sie den folgenden HTML-Code in die Seite einfügen, auf der Sie den Parallaxeneffekt anzeigen möchten. Sie können diesen HTML - Code auch auf Ihrer Website hinzufügen WordPress-Theme oder Ihr Kind-Theme.

div class = "Parallaxe"> <div class = "Parallaxe-content"> Ihr Inhalt hier ... </ div> </ div>

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

.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.

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]

Voila! Jetzt können Sie den Parallaxeeffekt zu Ihrer WordPress-Website 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. Sie können so viel geben, wie sie wollen. Jede Spende kann als übliches Produkt von präsentiert werden WooCommerce.


Wenn der Kunde die Warenkorbseite ignoriert oder direkt zur Kasse geht, ohne eine Spende zu tätigen, wird über der Bestellseite ein Link angezeigt, über den er seine Spende tätigen 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 "Geschenk 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.

Auf diese Weise können Sie Ihrem Blog alle LinkedIn-Funktionen hinzufügen und Ihre Marke bei Verbrauchern validieren. Sie haben die Möglichkeit, Ihr 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 Videos von Ihrer Website auf YouTube hochladen und Videos, Wiedergabelisten und YouTube-Kanäle einfach in Ihre Website integrieren können.

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 Videos einfach von Ihrer WordPress-Website auf YouTube hoch und binden Sie sie ein 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.

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]

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Entdecken Sie weitere empfohlene Ressourcen, die Sie bei der Erstellung und Verwaltung Ihrer Website unterstützen.

Fazit

Das ist alles Wir hoffen, es hat uns sehr geholfen. Zögern Sie 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