abgx360.net
  • Home
  • Уроци
  • Сигурност
  • Новини и общност
  • Отзиви
RSS

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

07.06.2020 Jeffrey Wilson Tipps

Was ist der Parallaxeneffekt? Warum und wie Sie es auf Ihrer WordPress-Site verwenden
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.

Contents

  • 1 Was ist Parallaxeeffekt??
  • 2 Was sind die Vorteile eines Parallaxeneffekts??
    • 2.1 Parallaxe auf dem Handy
  • 3 Wählen Sie ein Thema mit Parallaxeeffekt
  • 4 Fügen Sie Parallax Sliders mit dem Slider Revolution WordPress Plugin hinzu
    • 4.1 Aktivieren Sie Slider Revolution Parallax
  • 5 Fügen Sie Parallax-Abschnitte mit dem Parallax Scroll WordPress-Plugin hinzu
    • 5.1 Parallax Scroll installieren
    • 5.2 Hinzufügen eines Parallax-Bildlaufabschnitts
    • 5.3 Einstellen des Bildlaufparallaxen-Hintergrundbilds
    • 5.4 Erstellen eines Kopfzeilentextes über dem Parallaxenhintergrund
    • 5.5 Zeigen Sie alle Inhalte mit einem Parallax-Bildlaufhintergrund an
    • 5.6 Anpassen der Parallax-Bildlaufeinstellungen
    • 5.7 Einfügen des Parallax-Abschnitts in einen Beitrag oder eine Seite
  • 6 Abschließende Gedanken

Was ist Parallaxeeffekt??

Siebzehn

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

Gesamt

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

Slider Revolution Parallaxe

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

Slider Revolution Parallax-Einstellungen

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

Parallaxenrolle

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

Neues Plugin hinzufügen

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

Parallax Scroll 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ü.

Parallax Scroll Neu hinzufügen

Hier können Sie jetzt Ihren neuen Parallaxenabschnitt erstellen…

Neue Parallaxe hinzufügen

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.

Ausgewähltes Bild

Ü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

Header hinzufügen

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.

Parallaxen-Bildlaufoptionen

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

Parallax Scroll Shortcode

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.

Shortcode einfügen

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 …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    « 20个最佳Bootstrap WordPress主题 » Erstellen Sie atemberaubende Responsive-Tabellen in WordPress mit wpDataTables

    Random Posts

    • WordPress WP REST API: Co to pro vás znamená
    • Мобилни адаптивни приставки за меню, за да направите уебсайта си WordPress по-удобен за мобилни устройства
    • Mouseflow Heatmap Analytics pro WordPress Recenze
    • Plugins gratuïts útils per accelerar WordPress
    • Interview mit ThemeFuse WordPress Theme Store
    • 十大WordPress恶意过滤器和垃圾邮件阻止插件
    • SiteGround-hinnoittelu (2020) Paljonko kukin suunnitelma maksaa?
    • Как да проектирате вашия WordPress сайт с динамично съдържание
    • 35 besten WordPress Widget Plugins für (fast) alles
    • 10 nástrojů pro snadnější práci s WordPress
    • Průvodce pro začátečníky po BuddyPress a bbPress – dva pluginy, aby konverzace zůstala v chodu
    • Logiciel de conception Web
    • 5-те стъпки, които предприех, за да възстановя моя WordPress блог от хак
    • WordPress和您的在线业务的UX最佳做法
    • 10 bedste blogsider – Detaljeret sammenligning
    • Jak nastavit mezipaměť WordPress s mezipamětí W3 (W3TC)
    • 20 großartige Beispiele für WordPress-Sites
    • WordPress Holiday Sales & Deals 2019 – Themen, Plugins, Hosting & mehr
    • 12 senyals contrastats de confiança als llocs web de WordPress
    • 使用BackWPup将WordPress备份到云–综合指南
    • 最好的Google Shopping WordPress插件
    • Tipps zur Verbesserung der WordPress-Funktionalität für Ihre Website
    • 50+ preguntes més freqüents sobre WordPress
    • Revue Vultr
    • 10-те ключови елемента на WordPress Back End, обяснени за начинаещи
    • 30+ Best Church & Nonprofit WordPress Themes
    • WordPress ваканционни продажби и оферти 2019 – теми, приставки, хостинг и други
    • Как да изберете Plugin за управление на събития за вашия сайт
    • Guia completa de RSS i com utilitzar-la amb WordPress
    • Pickaweb-web-hosting-arvostelu
    • 如何减少WordPress网站的停机时间
    • 5 einfache Schritte zur Auswahl eines WordPress-Themes
    • Recenze Qards: Efektivní tvůrce přetahování a přetažení stránky pro WordPress
    • 适用于WordPress的Yoast SEO安装和设置指南
    • 12 Osvědčené způsoby, jak vydělat peníze pomocí WordPress
    • Увеличете надеждността на уебсайта с McAfee SECURE за WordPress
    • So beschleunigen Sie Ihren WordPress-Blog
    • 如何选择最佳的WordPress电子商务解决方案
    • SiteGround Dedicated Hosting Review 2020 [Έκπτωση 70%]
    • WordPress snyderi
    • Hosting compartit i núvol: què heu de triar?
    • Introducció a la computació en núvol amb WordPress
    • Com habilitar l’autenticació de dos factors a WordPress
    • Jak přidat fotografie Instagramu do WordPress
    • Dreamweaver tutorial
    • 15 WordPress-Plugins für die beste Terminbuchung
    • WordPress的Genesis框架回顾
    • Η eHost προσφέρει μηνιαία πληρωμή;
    • 6 lokalizačních hacků pro zvýšení provozu na WordPressu
    • 如何为您的WordPress网站建立品牌
    • Critique de MochaHost
    • Outils de commerce électronique FatCow
    • Conceptes bàsics sobre màrqueting de xarxes socials per al vostre lloc web de WordPress
    • Kuidas WordPressi varundada ja taastada
    • So migrieren Sie von einer beliebigen Website oder einem CMS zu WordPress
    • Tema de WordPress amb blogs gratuïts
    • Joomlan verkkosivuston opas
    • WordPress图像裁剪尺寸指南
    • Бърз и лесен Google Analytics за WordPress
    • Как да инсталирате и настроите кеширане на WordPress с WP Super Cache
    • Най-добрите .htaccess фрагменти за подобряване на защитата на WordPress
    • Как да се представите в общността на WordPress
    • Как да добавите Push Известия към вашия WordPress сайт
    • Съвети за жизненоважна сигурност за WordPress за повишаване на безопасността
    • 55 bekannte Marken, die WordPress verwenden (und warum)
    • Konvertieren Sie Blog-Beiträge mit Missinglettr in Social Media-Kampagnen
    • 扩展WordPress主题定制程序样板
    • Sådan installeres WordPress lokalt
    • Най-добрите WordPress приставки за създаване на успешно преживяване на клиентите
    • Lepší správa událostí pomocí kalendáře moderních událostí
    • Starten Sie noch heute Ihren eigenen Beauty-Blog mit WordPress
    • Kuinka lisätä sähköpostiuutiskirje tilaukseen verkkosivustollesi
    • Booknetic: WordPress Schůzky a rezervace v krabici
    • 8+ най-добрите WordPress плъгини за управление на поддръжката
    • 如何设置Cloudways托管WordPress云托管
    • 8个最佳导入/导出WordPress插件
    • Proč a jak zlepšit své vnitřní vyhledávání WordPress
    • Prodávejte svůj obchod WooCommerce pomocí Google Merchant Center
    • Kas ma saan FatCow’is blogi luua?
    • Feu un seguiment de qui fa el que fa al vostre lloc de WordPress amb el flux
    • Verkkosivustojen tyypit (esimerkit)
    • 15+ beste WordPress-Plugins für die Datenvisualisierung
    • Опростете вашето онлайн присъствие с WordPress: теми, приставки, продукти и услуги
    • Entrevista amb ThemeFuse WordPress Theme Store
    • 55 marques de grans noms que utilitzen WordPress (i per què)
    • Λόγοι για τους οποίους η επιχείρησή σας πρέπει να μετακινηθεί στο Cloud από την Κοινή φιλοξενία
    • 15 Bedste GRATIS Logooptagere og generatorer
    • 还有谁想使用WordPress网站收款?
    • Ръководство за начинаещи за NextGEN Галерия за WordPress
    • WPEngine ülevaade
    • Revisió del conductor: un tipus diferent de creador de disseny de WordPress
    • 用WordPress建立和增长电子邮件列表的6种方法
    • WordPress vs Weebly – srovnání funkcí
    • WebHostingHub est-il compatible avec Mac?
    • 45 fantàstics blocs de WordPress que heu de seguir
    • Comment démarrer un blog?
    • 如何开始WordPress业务
    • Com mantenir el suc de SEO en moure el contingut de WordPress a un domini nou
    • Κόστος απορρήτου τομέα SiteGround (Αναθεώρηση 2020): αξίζει τον κόπο; Το χρειάζομαι;
    • Τύποι ιστότοπων (παραδείγματα)

    Follow us

    • facebook
    • twitter
    • dribbble

    ↑

    • Home
    • Уроци
    • Сигурност
    • Новини и общност
    • Отзиви