Warum Ihre WordPress-Site klebrige UI-Elemente haben sollte und wie man sie erstellt

Warum Ihre WordPress-Site klebrige UI-Elemente haben sollte und wie man sie erstellt

Warum Ihre WordPress-Site klebrige UI-Elemente haben sollte und wie man sie erstellt
СОДЕРЖАНИЕ
02 июня 2020

Dieser Beitrag zu klebrigen UI-Elementen in WordPress stammt von Lexie Lu.


Es gibt einige gemischte Gefühle, wenn es um klebrige UI-Elemente geht. Einige sagen, dass sie – was alles von Social-Media-Sharing-Optionen bis hin zu Unternehmensinformationen umfassen kann – zu einer schlechten Benutzererfahrung führen. jedoch, sogar die Kritiker räumen ein, dass dies sehr effektive Designentscheidungen sein können, wenn sie richtig gemacht werden.

Klebrige Elemente (Schaltflächen, Inhaltsblöcke, zusammen mit anderen Formen von sogenannten "klebrige Navigation") sind feste Elemente auf der Seite, die beim Scrollen des Benutzers nach unten an Ort und Stelle bleiben. Wenn klebrige UI-Elemente gut und mit einem klaren Zweck gestaltet sind, Die Forschung zeigt Sie sind eine großartige Möglichkeit, die gewünschte Aktion von einem Besucher Ihrer Website zu erhalten.

Kurz gesagt, Ihre WordPress-Site kann klebrige UI-Elemente verwenden, um den Wert jedes Besuchs auf Ihrer Site zu maximieren. Diese Elemente können zu Newsletter-Anmeldungen, Social Media-Followern und anderen wichtigen Handlungsaufforderungen führen.

Am wichtigsten ist vielleicht, dass sie die Benutzererfahrung verbessern können. Bei all diesen Vorteilen ist es kein Wunder, dass die Navigation schwierig ist immer häufiger wie es in der Popularität wächst.

Anmerkung der Redaktion. Wir sind gewachsen, um auch verschiedene klebrige Site-Elemente zu genießen. Der CodeinWP-Blog verwendet ein solches Element selbst und wir haben die Sticky-Navigation zu einem der Hauptmerkmale von Zerif gemacht – unserem beliebtesten Thema (siehe Demo). Warum? Es funktioniert nur für den Benutzer. Aber lassen Sie Lexie dies im Detail erklären:

Warum klebrige UI-Elemente in WordPress funktionieren

Die effektive Verwendung von Sticky-Elementen in WordPress kann dazu beitragen, wichtige Informationen zu vermitteln und dem Besucher die Reise durch Ihre Website zu erleichtern. Eine E-Commerce-Website stellte fest, dass durch die Integration der Sticky-Navigation die Conversions von 30 auf 33 Prozent gesteigert werden konnten.

Ein separater A / B-Test, der zu Forschungszwecken durchgeführt wurde, ergab dies 100 Prozent der Besucher bevorzugte die klebrigen Designelemente – obwohl viele von ihnen nicht genau wussten, warum.

Um die Leistungsfähigkeit klebriger UI-Elemente in WordPress zu nutzen, können Sie nicht einfach ein WordPress-Plugin herunterladen und beobachten, wie sich Ihre Zahlen auf breiter Front verbessern. Sie müssen sorgfältig planen, welche Elemente für Ihre Site am besten geeignet sind. Sie müssen auch sicherstellen, dass diese Elemente – die manchmal schwierig sein können, wenn Sie keine Programmiererfahrung haben – wie beabsichtigt funktionieren.

Glücklicherweise gibt es verschiedene Arten von UI-Elementen und Plugins, mit denen Sie sie in Ihre WordPress-Site integrieren können:

Sticky Social Media Share Buttons

Die Art und Weise, wie Menschen auf Websites stoßen, hat sich geändert. Vorbei sind die Zeiten, in denen die meisten Besucher ankommen, indem sie eine URL eingeben und dann nach Inhalten suchen. Während dies zeitweise immer noch der Fall ist, kommt jetzt so viel mehr Verkehr aus den sozialen Medien.

Im Durchschnitt fahren soziale Medien 31 Prozent des gesamten Verkehrs zu Websites. Während diese Zahl für einige Websites zweifellos niedriger ist (und für andere höher), unterstreicht sie die Bedeutung der Erstellung überzeugender Inhalte.

(Diagramm von WordPress Charts und Graphs Lite.)

Guter Inhalt ist jedoch nur der erste Schritt. Sie können Benutzer auch anstoßen und den Empfehlungsverkehr erhöhen, indem Sie es den Nutzern lächerlich einfach machen, Ihre Inhalte zu teilen. Ein guter Weg, dies zu tun, sind klebrige Social-Media-Schaltflächen, die Ihre Inhalte begleiten.

In WordPress mangelt es nicht an Plugins zum Hinzufügen von Sticky / Floating-Social-Media-Schaltflächen. Wichtig ist, dass Sie eine auswählen, die sich intuitiv mit dem Design Ihres Themas verhält. Es gibt so viele Beispiele für schwebende Social-Media-Schaltflächen, dass benimm dich ziemlich seltsam auf Mobilgeräten oder wenn die Größe von Desktop-Browserfenstern geändert wird.

Schlechtes Design kann den beabsichtigten gegenteiligen Effekt haben, da klebrige Social-Media-Schaltflächen, die Text und Fotos verdecken, nicht zu Social-Media-Freigaben führen. Schauen Sie sich Websites an, die es schaffen, die Benutzererfahrung richtig zu gestalten.

Experimentieren Sie mit den zahlreichen Plugins von WordPress auf so vielen Geräten und Betriebssystemen wie möglich, um sicherzustellen, dass sich Ihre Social Media-Schaltflächen wie beabsichtigt verhalten.

Es gibt eine zweiteilige Liste von mehr als 30 Social-Media-Plugins, die hier auf CodeinWP veröffentlicht wurden. Ich bin mir sicher, dass Sie dort das perfekte Plugin für Sie finden werden.

Klebrige Informationsbox

Abhängig von Ihrer Website müssen Sie manchmal nur einige zusätzliche Informationen in der Seitenleiste übermitteln. Das prominente Platzieren von Kontaktinformationen auf Ihrer Website ist ein einfacher, aber effektiver Aufruf zum Handeln. 12Keys tut dies mit großer Wirkung, indem es Kontaktinformationen auf einen Blick bereitstellt, was besonders für Besucher wichtig ist, die sich möglicherweise in einer Krise befinden.

12keysrehab

Dies kann auch ein Ort sein, an dem Sie zum Aufbau von Vertrauen beitragen, indem Sie Ihre Anmeldeinformationen, Auszeichnungen und alles andere in diesem Sinne hervorheben. Es ist auch ein guter Ort, um eine persönliche Note hinzuzufügen, indem Sie ein wenig mehr über sich selbst oder Ihre Website erklären.

Glücklicherweise ist dies der am einfachsten auf Ihrer Site zu implementierende Elementtyp. Sie müssen sich um nichts kümmern, außer um den Text und möglicherweise einen Hyperlink zu Ihrer E-Mail. Dieses Plugin sollte Ihnen helfen können:


Klebriges Element Klebriges Element

Autor (en): Eintopf Heckenberg

Aktuelle Version: 1.3.5

Letzte Aktualisierung: 26. Januar 2019

sticky-element.1.3.5.zip


74% Bewertungen


600 + Installiert


WP 3.0 + Erforderlich

Das Ziel ist es, das Seitenleistenelement nicht zu auffällig oder ablenkend zu machen. Es ist so lange vorhanden, wie sich der Besucher auf der Website befindet. Sie möchten ihn also nicht mit etwas schlecht gestaltetem oder übermäßig aufdringlichem deaktivieren. Err auf der Seite der Einfachheit, da die schwebende Seitenleiste das i-Tüpfelchen für den begleitenden Inhalt sein sollte.

Sticky Menüs

Sticky-Menüs sind vielleicht die bodenständigste aller Sticky-UI-Elemente in WordPress, aber sie sind auch eines der nützlichsten.

Die Idee ist einfach. Während der Benutzer nach unten scrollt, bleibt das Menü fest an Ort und Stelle.

Sie können dies jedoch auf verschiedene Arten implementieren:

a) Sie können die Standardplatzierung oben anstreben.

Dies hat das ThemeIsle-Team mit ihrem getan Zerif-Thema, zum Beispiel (Sie können die sehen Live-Demo hier):

Zerif klebrige Elemente

Ein zusätzlicher Bonus ist, dass das Menü kein einfaches einzeiliges Menü ist, sondern ein Mega-Menü. Wenn Sie mit der Maus über die einzelnen Elemente fahren, wird eine komplexere Struktur angezeigt:

Mega-Menü

b) Stellen Sie das Menü zur Seite.

Dies ist eine gute Option für einige Designs und insbesondere für Websites mit vielen Fotos, die auf visuelle Elemente setzen, um ihre Geschichte zu erzählen.

Hier ist ein Beispiel aus RichBrown.info::

RichBrown

Das Menü wird beim Scrollen nach rechts rechts fixiert.

c) Legen Sie es unten ab.

Der untere Bereich ist eine weitere interessante Platzierung für ein festes Menü, insbesondere wenn Sie das Menü etwas höher als eine einzelne Textzeile gestalten möchten.

Hier ist ein Beispiel von Bulletpr::

Bulletpr

Wie Sie sehen können, enthält das Menü Bilder + Text, sodass es unten platziert wurde, damit es nicht den wertvollen Platz in der Kopfzeile der Site einnimmt.

Sticky E-Mail-Anmeldungen

Wie Sie wahrscheinlich wissen, ist eine der besten Möglichkeiten, Ihr Publikum zu erreichen, die E-Mail. Eine an Ihre Abonnentenliste gesendete E-Mail lautet fünfmal wahrscheinlicher gesehen werden als ein Beitrag auf Facebook.

Der Aufbau einer Qualitätsliste von E-Mail-Abonnenten ist entscheidend, um Ihr Unternehmen auf die nächste Stufe zu bringen. Dank klebriger Formulare ist es einfacher, Abonnenten zu finden, als Sie denken.

Es gibt viele Möglichkeiten, einen Website-Besucher zu ermutigen, sich für Ihre Mailingliste anzumelden. Ein klebriges Formular, entweder in der Seitenleiste oder oben auf Ihrer Seite, kann eine große Hilfe sein. Eine Seite, die dies gut macht, ist TwelveSkip, ein digitales Medienunternehmen. Ihr Aufruf zum Handeln oben auf der Seite ist klar und zieht die Aufmerksamkeit auf sich, ohne übermäßig ins Gesicht zu schauen oder abzulenken.

Zwölfsprung

Die Oberseite Ihrer Seitenleiste ist ein weiterer guter Ort um E-Mail-Abonnenten zu erhalten. Es tut manchmal nicht weh, mehrere Orte zu haben, an denen sich Leute anmelden können. E-Mail-Abonnenten sind so wertvoll, dass es sich lohnt, zusätzliche Anstrengungen zu unternehmen, um Ihre Liste zu erstellen.

CodeinWP verwendet zum Beispiel mehrere Formulare für diesen Zweck und viele der klebrigen. Wie dieser:

codeinwp

Klebrige Anzeigen

Seien wir ehrlich – Anzeigen sind für die meisten von uns ein notwendiges Übel. Unsere Leser mögen sie nicht und viele Website-Ersteller auch nicht. Sie sind jedoch unerlässlich, um die Rechnungen zu bezahlen, und hier kommt die digitale Werbung ins Spiel.

Das Time Magazine verwendet seine Werbung als klebrigen Block, sodass es nach unten rollt, wenn Sie lesen einen Artikel.

Zeit

Es ist weitaus weniger aufdringlich als eine riesige Splash-Anzeige oder ein Popup. Es ist also keine schlechte Möglichkeit, Einnahmen zu erzielen, ohne zu viele Leser auszuschalten.

Wie bei jeder Werbung sollte dies nur in Maßen erfolgen. Eine Anzeigenwand links oder rechts von einem Artikel wird sofort deaktiviert. Ein oder zwei, zusammen mit Links zu weiteren Artikeln, sind ein guter Weg, um Werbung zu machen.

Kreative klebrige UI-Elemente in WordPress

Abgesehen von den oben aufgeführten Dingen können Sie mit der Verwendung von klebrigen UI-Elementen in WordPress viel kreativer sein, aber dies bedeutet möglicherweise auch mehr Arbeit, um sie zu implementieren.

Hier ist ein Beispiel von Gavick.com::

Insel

Wenn Sie zu dieser Site gehen, werden Sie feststellen, dass die gesamte Insel beim Scrollen nach unten größtenteils in der Mitte bleibt. Es wechselt zwischen Vordergrund und Hintergrund, befindet sich jedoch immer in der Mitte. Diese Art von Dingen erregt wirklich die Aufmerksamkeit des Benutzers.

Es scheint, dass der kreativen Verwendung von klebrigen UI-Elementen in WordPress wirklich keine Grenzen gesetzt sind… da jemand in der Lage war, eine Insel klebrig zu machen.

So finden Sie das richtige Plugin?

Es gibt Kein Mangel an Plugins auf WordPress.org, das Ihnen helfen kann, klebrige Elemente in Ihr Thema zu implementieren. Einige funktionieren möglicherweise wunderbar mit Ihrem Thema, während andere möglicherweise nicht für Ihre Website optimiert sind. Es wird einige Versuche und Irrtümer erfordern, um diejenigen zu finden, die am besten funktionieren.

Das Endergebnis wird sich lohnen, unabhängig davon, ob Sie den Social-Media-Verkehr fördern oder wichtige Informationen an die Leser weitergeben möchten. Stellen Sie einfach sicher, dass Sie Ihre Plugins ausführlich testen, um sicherzustellen, dass es keine Design-Macken gibt.

Lexie Lu Über den Autor: Lexie Lu ist freiberufliche Designerin und Bloggerin. Sie recherchiert gerne nach den neuesten Trends und trinkt immer eine Tasse Kaffee in unmittelbarer Nähe. Sie schafft es Design Braten und kann auf Twitter verfolgt werden @lexieludesigner.

Alle Änderungen und witzigen Umschreibungen von Karol K..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector