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.
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.
Unsere Ideen für 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 alle WordPress-Themes bietet keinen integrierten Parallax-Effekt und Sie möchten vielleicht keinen visuellen Seitenersteller nur für einen Parallax-Effekt verwenden.
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.
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".
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.
Methode 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.
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.
.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.
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 verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung 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.
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.
Herunterladen | Demo | Web-Hosting
2. LinkedIn Mehr
LinkedIn Plus ist ein WordPress Plugin wodurch Sie Ihr LinkedIn-Profil in Ihrem Blog präsentieren können. Es funktioniert auch für Blogs mit mehreren Autoren. Es fügt Ihren WordPress-Beiträgen, -Seiten oder -Widgets Schaltflächen zum Folgen und Teilen hinzu.
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.
Herunterladen | Demo | Web-Hosting
3. YouTuber
YouTubeR ist ein WordPress Plugin einzigartige Plattform, die es Ihnen ermöglicht, Videos von Ihrer Website auf YouTube hochzuladen und YouTube-Videos, Wiedergabelisten und Kanäle einfach auf Ihrer Website einzubetten.
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.
Herunterladen | Demo | Web-Hosting
Empfohlene Ressourcen
Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.
- So beheben Sie den Fehler "Auf Festplatte kann nicht geschrieben werden" in WordPress
- So werden Sie ein erfolgreicher Blogger und verdienen Geld mit WordPress
- Wie Sie Ihre Artikel per E-Mail auf Wordpress zu veröffentlichen
- So werden Sie ein erfolgreicher Blogger und verdienen Geld mit WordPress
Zusammenfassung
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.
...
