Was ist der Parallaxeneffekt? Warum und wie Sie es auf Ihrer WordPress-Site verwenden

Der Parallax-Effekt ist eine äußerst beliebte Designfunktion, die häufig auf WordPress-Websites verwendet wird. Dieser Spezialeffekt ist seit Jahren in der Spielewelt zu finden, ist aber in jüngerer Zeit in das Webdesign übergegangen. Und bis jetzt scheint dieser große Trend nirgendwo hin zu gehen, wenn überhaupt, wird er weiter verbreitet als je zuvor. Was ist der Parallaxeeffekt und warum sollten Sie ihn auf Ihrer WordPress-Website verwenden??

In diesem Artikel werden wir untersuchen, was ein Parallaxeeffekt ist und welche Vorteile er für Ihre Website und Ihr Unternehmen haben kann. Anschließend besprechen wir, wie Sie mit dem kostenlosen Plugin Parallax Scroll schnell und einfach einen Parallaxeeffekt zu jeder WordPress-Website, -Seite oder -Post hinzufügen können.

Was ist Parallaxeeffekt??

Der Parallaxeeffekt betrifft eine Webseite Hintergrund bewegt sich langsamer als der Vordergrund. Dies erzeugt eine Illusion von Tiefe auf der Seite und verleiht dem Inhalt einen 3D-Effekt, wenn die Betrachter nach unten scrollen.

Die meisten Premium-WordPress-Themes verfügen jetzt über einen integrierten Parallaxeeffekt auf ihrer Homepage. Sogar das kostenlose WordPress-Standardthema Twenty Seventeen verfügt über eine Parallaxenfunktion. Die meisten Seitenersteller enthalten auch ein Parallaxeneffekt-Tool, mit dem Sie den Effekt zu jeder Seite oder jedem Beitrag auf Ihrer Website hinzufügen können. Und natürlich gibt es zahlreiche WordPress-Plugins, die Sie installieren können, um Ihrer Website Parallaxeeffektelemente hinzuzufügen.

Was sind die Vorteile eines Parallaxeneffekts??

Die Verwendung eines Parallaxeeffekts auf Ihrer WordPress-Website bietet eine Reihe von Vorteilen. Der erste und offensichtlichste ist der visuelle Aspekt eines Parallaxeeffekts. Ein Parallaxeeffekt ist ästhetisch ansprechend, Verleihen Sie Ihrer Website ein frisches, stilvolles und modernes Erscheinungsbild. Diese Wow-Effekt kann Ihre Inhalte wirklich zum Platzen bringen und schafft ein aufregendes und interessantes Browser-Erlebnis.

Ein weiterer wichtiger Grund für die Verwendung des Parallaxeeffekts auf Ihrer Website ist die Hilfe eine Seite aufbrechen, vor allem eine Homepage, in lesbare Stücke. Verwenden Sie diesen Effekt, um die verschiedenen Abschnitte und Arten von Inhalten hervorzuheben, die Sie präsentieren möchten. Dies kann dazu beitragen, verschiedene Aspekte Ihrer Website zu bewerben, wichtige Informationen zu beleuchten und Benutzer dazu zu ermutigen, auf Ihrer Website zu navigieren und auf Inhalte Ihrer Wahl zuzugreifen.

Der Parallaxeneffekt kann auf jeder Seite oder jedem Beitrag einer Website verwendet werden, kann jedoch insbesondere auf Homepages, Zielseiten oder einseitigen Websites angezeigt werden. Die beeindruckende visuelle Parallaxe und die positive Auswirkung auf die Benutzererfahrung können dazu führen, dass Besucher länger auf Ihrer Website bleiben und die Conversion-Raten Ihrer Website im Vergleich zu ihren Zielen verbessern.

Parallaxe auf dem Handy

Parallaxe eignet sich zwar hervorragend, um visuelles Interesse zu wecken, funktioniert jedoch auf Mobilgeräten nicht immer gut. Da Telefone und Tablets normalerweise die Swipe-Navigation verwenden (anstelle von Bildlauf-ähnlichen Desktops), werden Parallaxeneffekte möglicherweise nicht richtig gerendert. Dies hängt natürlich von der Methode und den Animationen ab, die Sie für Ihren eigenen Parallaxenabschnitt verwenden. Für eine gute Benutzerfreundlichkeit sollten Sie jedoch die Parallaxe auf Geräten deaktivieren.

Wählen Sie ein Thema mit Parallaxeeffekt

Wenn Sie ein neues Projekt starten, sollten Sie ein Premium-Thema auswählen, das eine Parallaxeffektfunktion enthält. Wenn Sie einen Parallaxeeffekt auf einer Vielzahl von Seiten Ihrer Website verwenden möchten, nicht nur auf der Startseite, sollten Sie ein Mehrzweckthema in Betracht ziehen, das mit einem erweiterten Seitenersteller geliefert wird. Themen wie Divi from Elegant Themes, Parallax by Themify und unser eigenes Thema Total enthalten Seitenersteller, die Parallax-Effekt-Tools bereitstellen.

Fügen Sie Parallax Sliders mit dem Slider Revolution WordPress Plugin hinzu

Wenn Sie einen vorgestellten Slider mit Parallaxeeffekt wünschen, ist das Slider Revolution Plugin unsere erste Wahl. Dieses Premium-Plugin enthält Hunderte von integrierten Optionen und Funktionen für Schriftarten, Ebenen, Schiebereglereffekte, Layouts und natürlich Parallaxe.

Aktivieren Sie Slider Revolution Parallax

Installieren Sie zuerst das Plugin und importieren Sie dann entweder eine Slider-Vorlage oder erstellen Sie Ihren eigenen Slider von Grund auf neu (weitere Informationen finden Sie in unserem vollständigen Slider Revolution-Handbuch)..

Bearbeiten Sie als Nächstes die Folie Haupthintergrund hinzufügen a Quelle Hintergrundbild und wählen Sie die Parallaxe / 3D Registerkarte, um eine Parallaxenstufe zuzuweisen. Wählen Sie dann beim Hinzufügen von Ebenen die Option aus Parallaxe / 3D Ebenenoption für die Parallaxentiefe, um Text, Bild, Schaltfläche und anderen Ebenen Bewegung zu verleihen. So einfach ist das!

Wenn Sie fertig sind, speichern Sie Ihren Schieberegler und fügen Sie ihn mit dem Shortcode in einen Beitrag oder eine Seite ein. Wenn Sie einen Seitenersteller wie den Visual Composer verwenden, können Sie mit dem Slider Revolution-Element des Seitenerstellers Ihren Schieberegler schnell auswählen und einfügen.

Fügen Sie Parallax-Abschnitte mit dem Parallax Scroll WordPress-Plugin hinzu

Wenn Sie bereits ein Thema haben und es keine integrierte Parallaxeneffektoption enthält, sollten Sie in Betracht ziehen, ein WordPress-Plugin zu verwenden, um die Aufgabe zu erledigen. Parallaxenrolle ist eine beliebte kostenlose Option, mit der Sie verschiedenen Elementen auf einer Seite oder einem Beitrag Ihrer Website ein Hintergrundbild mit Parallaxen-Bildlauf hinzufügen können. Fügen Sie einem einzelnen Element, einem Kopfzeilentext oder einem vollständigen Abschnitt mit Inhalten einen Bildlaufhintergrund hinzu, indem Sie einen einfachen Shortcode verwenden.

Schauen wir uns nun an, wie Sie Parallax Scroll installieren und verwenden können.

Parallax Scroll installieren

Um Parallax Scroll zu installieren, melden Sie sich als Administrator in Ihrem WordPress-Dashboard an und wählen Sie Plugins> Neu hinzufügen aus dem Menü.

Suche Parallaxenrolle, dann wählen Sie Jetzt installieren> Aktivieren.

Sie werden nun feststellen, dass Ihrem WordPress-Menü eine Registerkarte “Parallax Scroll” hinzugefügt wurde.

Hinzufügen eines Parallax-Bildlaufabschnitts

Um mit Parallax Scroll zu beginnen, müssen Sie zuerst einen neuen Parallaxenabschnitt erstellen. Wählen Sie dazu Parallax Scroll> Neu hinzufügen aus Ihrem WordPress-Menü.

Hier können Sie jetzt Ihren neuen Parallaxenabschnitt erstellen…

Einstellen des Bildlaufparallaxen-Hintergrundbilds

Zunächst müssen Sie ein Bild für Ihren bildlaufenden Parallaxenhintergrund festlegen. Klicken Sie dazu auf Stellen Sie das ausgewählte Bild ein und fügen Sie das Bild dem Abschnitt “Ausgewähltes Bild” hinzu.

Überlegen Sie genau, welches Bild Sie für jeden Hintergrundabschnitt verwenden. Stellen Sie sicher, dass sie für Ihre Website relevant sind, und synchronisieren Sie sie mit Ihrem Branding. Wenn Sie über diesem Hintergrundbild eine Kopfzeile oder weiteren Inhalt anzeigen möchten, sollten Sie anstelle eines Fotos oder einer aufmerksamkeitsstarken Grafik eine Blockfarbe oder subtile Muster verwenden. Dies kann dazu beitragen, dass Ihr Bild mit Ihren Inhalten funktioniert und diese bewirbt, anstatt von ihnen abzulenken.

Wenn Sie sich für die Verwendung von Fotos entscheiden, müssen die Bilder von hoher Qualität sein. Schöne auffällige Bilder können dazu beitragen, dass Ihre Website professionell und einzigartig aussieht. Diese Grafiken hinterlassen einen starken Eindruck bei Ihrem Publikum, was wiederum dazu führt, dass sich die Benutzer an Ihre Website erinnern und zu ihr zurückkehren. Es gibt eine große Auswahl an Stock-Websites, von denen Sie Bilder in höchster Qualität herunterladen können. Schauen Sie sich unsere Sammlung kostenloser und erstklassiger Foto-Websites an, auf denen Sie schnell atemberaubende Fotos für Ihre Parallaxen-Hintergründe finden.

Erstellen eines Kopfzeilentextes über dem Parallaxenhintergrund

Wenn Sie einen Kopfzeilentext mit Parallaxenhintergrund erstellen möchten, müssen Sie als Nächstes einen Beitragstitel eingeben. Dieser Titel wird dann als Kopfzeilentitel über dem von Ihnen gewählten Parallaxen-Hintergrundbild angezeigt.

Möglicherweise möchten Sie keinen Header in Ihrem Parallaxenabschnitt. Wenn dies der Fall ist, sollten Sie jeder Parallaxe dennoch einen Post-Titel geben, damit jeder von Ihnen erstellte Abschnitt leicht identifizierbar ist. Sie müssen dann auswählen, um den Titel in der auszublenden Parallaxen-Bildlaufoptionen (weiter unten in diesem Artikel behandelt), sodass auf der Vorderseite Ihrer Website keine Kopfzeile angezeigt wird.

Zeigen Sie alle Inhalte mit einem Parallax-Bildlaufhintergrund an

Möglicherweise möchten Sie, dass im Parallaxenabschnitt andere Inhalte über dem Hintergrundbild angezeigt werden. Dies kann alles umfassen, was für Ihre Site erforderlich ist, von Text und Bildern bis hin zu Shortcodes. Entscheiden Sie, was Sie anzeigen möchten, und geben Sie diesen Inhalt in das Postfach ein.

Anpassen der Parallax-Bildlaufeinstellungen

Sobald Sie mit dem Inhalt zufrieden sind, müssen Sie die Einstellungen des Parallaxenabschnitts an Ihre Seite anpassen.

Scrollen Sie nach unten zu Parallaxen-Bildlaufoptionen. Unter “Stil” können Sie die Parallaxenhöhe und Bildgröße ändern sowie die Option “Breite Breite” auswählen, um Ihr Thema zu zwingen, das Hintergrundbild über die gesamte Bildschirmbreite anzuzeigen, sofern dies noch nicht geschehen ist.

Sie können auch die horizontale und vertikale Position der Kopfzeile auf dem Parallaxenhintergrund ändern. Und wenn Sie den Titel des Beitrags ausblenden möchten, können Sie dies hier durch Eingabe tun Anzeige: keine; im Header-Stil.

Parallaxeneinstellungen Hier können Sie das Verhalten Ihrer Parallaxenrolle anpassen. Dies beinhaltet das Ändern der Geschwindigkeit des Parallaxenhintergrunds. Probieren Sie verschiedene Geschwindigkeiten aus, um zu sehen, was für Ihre Website und Ihr Publikum funktioniert.

Da ist auch ein Mobile Einstellungen Option, mit der Sie das Hintergrundbild und / oder den Inhalt der Parallaxe auf Mobiltelefonen deaktivieren können, wenn Sie der Meinung sind, dass die Parallaxenabschnitte auf Mobilgeräten nicht gut funktionieren.

Wenn Sie die Einstellungen angepasst und die Erstellung Ihres Parallaxenabschnitts abgeschlossen haben, klicken Sie auf Veröffentlichen.

Einfügen des Parallax-Abschnitts in einen Beitrag oder eine Seite

Als Nächstes müssen Sie Ihren Parallaxenabschnitt in einen Beitrag oder eine Seite auf Ihrer Website einfügen. Wählen Sie Parallax Scroll aus Ihrem WordPress-Menü.

In der dargestellten Tabelle sehen Sie nun einen Shortcode für den soeben erstellten Parallaxenabschnitt. Kopieren Sie den Code und öffnen Sie die entsprechende Seite oder den entsprechenden Beitrag. Fügen Sie den Code an der entsprechenden Stelle in den Inhalt der Seite ein.

Zeigen Sie eine Vorschau der Änderungen an, und klicken Sie auf Veröffentlichen, wenn Sie mit Ihrem neuen Parallaxenabschnitt zufrieden sind. Sie können jetzt weitere Abschnitte erstellen, um der Seite einen vollständigen Parallaxeeffekt zu verleihen. Wenn Sie Änderungen vornehmen müssen, öffnen Sie einfach die Seite des Parallaxenabschnitts erneut und nehmen Sie die erforderlichen Änderungen vor.

Abschließende Gedanken

Wenn Ihr Thema nicht über eine integrierte Parallaxeneffektfunktion verfügt oder wenn Sie mehr als nur Ihrer Startseite einen Effekt hinzufügen möchten, können Sie mit Parallax Scroll schnell Parallaxenabschnitte erstellen, die Sie Ihren Seiten oder Posts hinzufügen können.

Wie Sie gesehen haben, kann es sich sehr lohnen, Ihrer Website einen Parallaxeeffekt hinzuzufügen. Dies kann nicht nur die visuelle Darstellung Ihrer Website erheblich verbessern, sondern auch dazu beitragen, Ihre Zielgruppe anzusprechen, sie auf einfache Weise auf Ihrer Website zu navigieren und auf Inhalte zuzugreifen und die Zeit zu verlängern, die sie auf Ihrer Website verbringen. Diese verbesserte Benutzererfahrung sollte Ihrer Website letztendlich dabei helfen, ihre Ziele zu erreichen, unabhängig davon, ob sie die Anzahl der wiederkehrenden Besucher erhöhen, Leads sammeln oder Produkte oder Dienstleistungen verkaufen soll.

Fügen Sie Ihrer Homepage, einer Zielseite, einem Beitrag oder einem anderen Ort einen Parallaxeeffekt hinzu? Bitte teilen Sie Ihre Gedanken in den Kommentaren unten …