So erstellen Sie intelligente und schöne WordPress-Registerkarten

So erstellen Sie intelligente und schöne WordPress-Registerkarten

Fun Fact: Haben Sie bemerkt, dass sogar wordpress.org verwendet WordPress-Registerkarten, um Informationen zu bündeln?

Schau dir das an:

Quelle: wordpress.org

WordPress-Registerkarten sind eine Art Navigation, die das Kundenerlebnis verbessern kann. Wie denn? Indem Sie nicht viele Informationen in Absätze überladen, sondern eine bessere Organisationsmethode verwenden.

Die Registerkartennavigation ähnelt der Organisation von Dateien in einem Büro oder beim Arzt.

Nicht zu verwechseln mit Menüs. Meistens öffnen Menüpunkte eine separate Seite mit einer eigenen URL. Hier wird keine URL-Änderung vorgenommen.

Nicht zu verwechseln mit Akkordeons. Ein Akkordeon stapelt Informationen vertikal. Header können angeklickt werden, um damit verbundene Inhalte anzuzeigen oder auszublenden.

Warum sollte Ihre WordPress-Site Registerkarten benötigen? Um die Navigation, die Benutzerfreundlichkeit und damit die Kundenzufriedenheit und die Conversion-Raten zu verbessern.

Viele Gründe, oder?

Tabbed Navigation ist im E-Commerce immer noch gängige Praxis, um Produkte zu präsentieren. Viele Besucher erkennen Tabs bereits oder erwarten Tabs an bestimmten Stellen.

Angenommen, Sie verkaufen Elektronik. Sie müssen viele Produktinformationen präsentieren:

• Produktbeschreibung
• Produktfotos
• Technische Daten
• Bewertungen
• Garantieinformationen
• Versanddetails

Tabs helfen Ihnen, große Inhalte auf engstem Raum zu komprimieren.

In diesem Artikel werden wir Ihnen zunächst einige Tab-Design-Inspirationen geben. Als nächstes gehen wir ein wenig auf einige Best-Case-Praktiken ein. Am Ende werde ich Sie durch die technischen Aspekte der WordPress-Registerkarten führen.

Los geht’s!

Tabs: einige Inspiration

Lassen Sie uns nun einige Websites überprüfen, die Tabs verwenden. Ich bin definitiv für den Beweis. Bilder können Dinge besser erklären als Worte, findest du nicht?

Mal sehen, eBay verwendet Registerkarten für die Produktbeschreibung. Alle technischen Daten finden Sie unter „Beschreibung“ und unter derselben Registerkarte unter „Versand und Zahlung“. Ich bin mir ziemlich sicher, dass sie das Layout getestet haben, da für eine Website mit einem solchen Datenverkehr jede Änderung die Conversion-Raten stark beeinflussen kann.

Quelle: ebay.com

BobbyBrown Cosmetics verfolgt einen minimalistischen Ansatz, die Registerkarten haben keinen knopfartigen Ansatz. Sie verwenden eine Unterstreichung, um den Benutzer darüber zu informieren, dass er eine Registerkarte ausgewählt hat.

Quelle: bobbibrowncosmetics.com

Ich fühle mich immer verloren, wenn ich gehe booking.com . Sie haben viele Informationen, für die Sie nach unten scrollen müssen. Kürzlich habe ich bemerkt, dass sie einige Änderungen vorgenommen haben, um den Bildlauf zu reduzieren, aber es ist immer noch nicht genug (für mich).

Trivago hingegen scheint Informationen etwas besser zu organisieren. Ich weiß, es ist schwer zu tun, wenn Sie so viele Details angeben müssen.

Sie verwenden Registerkarten, um Hotelinformationen wie Übersicht, Informationen, Fotos, Bewertungen und Angebote zu organisieren.

Quelle: trivago.com

Tabs sind eine gängige Praxis auf Websites, die Reisepakete wie Flüge, Unterkünfte, Mietwagen anbieten.

Expedia macht es gut, wenn es sein Angebot für 6-Dienste präsentiert. Die Erfahrung ist sauber und unaufdringlich.

Quelle: expedia.com

Honda verwendet Tabs kreativer. Es mischt Bilder und Videos neben Text, um ein großartiges Verkaufserlebnis zu bieten.

Quelle: automobiles.honda.com

WordPress Registerkarten: best case Practices

Einfach ausgedrückt sind Registerkarten eine Reihe von Schaltflächen, die normalerweise horizontal angeordnet sind. Deshalb sollte ihr Design einem Knopfdesign sehr nahe kommen.

Schauen wir uns nun die Best Practices für die Verwendung von Registerkarten auf Ihrer WordPress-Website an:

• Gehen Sie nicht für mehrere Zeilen, es wird dem Benutzer schwer fallen, sich daran zu erinnern, welche Registerkarte er besucht hat. Wenn Sie feststellen, dass Sie mehr Zeilen benötigen, bedeutet dies, dass Sie einen besseren Weg finden müssen, um Informationen zu organisieren
• Registerkartenüberschriften kurz und bündig halten
• Registerkarten nur verwenden, wenn Benutzer keine Inhalte von mehreren Registerkarten gleichzeitig sehen müssen
• Geben Sie deutlich an, welche Registerkarte aktiv ist
• Die nicht ausgewählten Registerkarten sollten sichtbar bleiben und nicht im Hintergrund verloren gehen
• Stellen Sie sicher, dass Ihre Registerkarte wie separate Schaltflächen angezeigt wird, mit denen Sie interagieren können
• Fügen Sie Hover-Effekte auf Registerkarten hinzu, wie Sie es auf Schaltflächen tun würden
• Verwenden Sie Registerkarten, wenn Sie zwischen inhaltskategorien
• Die Kategorien sind ähnlicher Natur, ein Benutzer würde erwarten, sie dort zu sehen (z. B.: Produktbeschreibung, Produktbewertungen)
• Verwenden Sie keine Registerkartennavigation, wenn Sie einen „Mehr“ -Link einfügen möchten
• Sie können Farbverläufe verwenden, um den Registerkarten Tiefe und Dimension zu verleihen.

So erstellen Sie WordPress-Registerkarten mit Page Buildern

Ich verwende den Colibri Page Builder für diese Übung.

Registerkarten können als Komponente gefunden werden.

Sie können Komponenten finden, wenn Sie oben links auf „+“ klicken.

Gehen Sie zu Komponenten und ziehen Sie die Komponente „Tab“ in Ihre Website-Vorschau auf der rechten Seite.

Als nächstes können Sie mit den Anpassungsoptionen auf der linken Seite spielen.

Wenn Ihr Tab so aussieht, wie Sie es möchten, klicken Sie einfach auf „Veröffentlichen“ und Sie sind live.

Registerkarten: ein Plugin, das Ihnen beim Einrichten von WordPress-Registerkarten hilft

Wenn Sie einen mit WooCommerce integrierten Online-Shop betreiben, gibt es in WordPress zwei sehr beliebte Plugins für WordPress-Registerkarten.

Quelle: wordpress.org

Aber ich möchte Ihnen einen Favoriten von mir vorstellen: Tabs.

Quelle: wordpress.org

Tabs bietet viele Anpassungsoptionen, die Sie bald lieben werden. Warum ich das Gefühl habe, dass du es auch lieben wirst:

• Sie entwerfen mobilfreundliche WordPress-Registerkarten
• Sie können mit Shortcodes arbeiten
• Tabs funktioniert per Drag & Drop
• Es verfügt über mehr als 20 Designvorlagen, sodass Sie sich nicht um Inspiration kümmern müssen
• 500+ Google Fonts
• Tabs funktioniert mit den meisten die Themen da draußen.

WordPress Tabs: Die Schlussfolgerungen

Tabs sind hier, um Informationen in einer Welt kürzerer Aufmerksamkeitsspannen leichter verdaulich zu machen. In Bezug auf Tools gibt es viele, die Ihnen beim Einrichten von WordPress-Registerkarten helfen können. Dies ist am einfachsten zu tun.

Wichtiger ist es, herauszufinden, welche Art von Informationen in Ihre Registerkarten passen können. Wenn Sie nicht sicher sind, ob eine Registerkarte Ihnen beim Organisieren bestimmter Informationen hilft, können Sie jederzeit Benutzerrecherchen oder einen A / B-Test durchführen. Unsere eigenen Annahmen reichen nicht aus. Echte Verhaltensdaten führen Sie zur richtigen Antwort.

Am Ende des Tages müssen Sie sich um Benutzerfreundlichkeit, Chunking und Website-Geschwindigkeit kümmern.

Wenn Ihnen dieser Artikel gefallen hat und Sie mehr darüber erfahren möchten, wie Sie eine WordPress-Website entwerfen, abonnieren Sie unseren Youtube-Kanal und folgen Sie uns auf Twitter und Facebook!