How to Create Smart and Beautiful WordPress Tabs

How to Create Smart and Beautiful WordPress Tabs

Fun fact: heb je gemerkt dat zelfs wordpress.org gebruikt WordPress tabs om informatie te brokken?

Check this out:

bron: wordpress.org

WordPress tabs zijn een type navigatie dat de klantervaring kan verbeteren. Hoe dat zo? Door niet rommelen veel informatie in alinea ‘ s, maar met behulp van een betere organisatie methode.

navigatie met tabbladen is vergelijkbaar met de organisatie van bestanden in een kantoor of bij de arts.

niet te verwarren met menu ‘ s. Meestal openen menu-items een aparte pagina met een eigen URL. Hier vindt geen URL-wijziging plaats.

niet te verwarren met accordeons. Een accordeon zal informatie verticaal stapelen. Er kan op kopteksten worden geklikt om de inhoud ervan te onthullen of te verbergen.

nu, waarom zou uw WordPress site tabbladen nodig? Om navigatie, bruikbaarheid en daarmee klanttevredenheid en conversiepercentages te verbeteren.

genoeg redenen, toch?

navigatie met tabbladen is nog steeds een gangbare praktijk in e-commerce om producten te presenteren. Veel bezoekers herkennen al tabbladen of verwachten tabbladen op bepaalde plaatsen.

stel dat je elektronica verkoopt. U moet veel productinformatie presenteren:

• productbeschrijving
• productfoto ‘ s
• technische specificaties
• Reviews
• garantie-informatie
• verzendgegevens

tabbladen helpen u om grote inhoud in beperkte ruimtes te comprimeren.

nu, in dit artikel, zullen we beginnen met het geven van u een aantal tab design inspiratie. Vervolgens zullen we een beetje ingaan op een aantal best case praktijken. Op het einde, Ik zal u begeleiden door de technische WordPress tabs aspecten.

aan de slag!

tabbladen: enige inspiratie

laten we nu enkele websites bekijken die tabbladen gebruiken. Ik ben zeker in voor bewijs. Beelden kunnen betere dingen verklaren dan woorden, denk je niet?

eens kijken, eBay gebruikt tabbladen voor productbeschrijving. Alle technische specificaties gaan onder “beschrijving”, en ze verzamelden” verzending en betaling ” onder hetzelfde tabblad. Ik ben er vrij zeker van dat ze de lay-out hebben getest, omdat, voor een site met dergelijk verkeer, elke verandering kan conversie sterk beïnvloeden.

bron: ebay.com

BobbyBrown cosmetics gaat voor een minimalistische benadering, de tabs hebben geen button-achtige benadering. Ze gebruiken een onderstreping om de gebruiker te informeren dat hij een tabblad heeft geselecteerd.

bron: bobbibrowncosmetics.com

I ‘ m always feeling lost when I go to booking.com. ze hebben veel informatie die je nodig hebt om naar beneden te scrollen. Onlangs merkte ik dat ze een aantal wijzigingen om scroll te verminderen, maar toch, het is niet genoeg (voor mij).

Trivago daarentegen lijkt de informatie iets beter te organiseren. Ik weet dat het moeilijk is als je zoveel details moet geven.

zij gebruiken tabbladen om hotelinformatie te organiseren, zoals overzicht, info, foto ‘ s, beoordelingen, deals.

bron: trivago.com

tabbladen zijn een gangbare praktijk op websites die reispakketten zoals vluchten, accommodaties, autoverhuur aanbieden.

Expedia doet het goed wanneer zij haar aanbod voor 6 diensten presenteert. De ervaring is schoon en onopvallend.

bron: expedia.com

Honda gebruikt tabbladen op een creatievere manier. Het mengt afbeeldingen en video ‘ s naast tekst om een geweldige Honda-ervaring te verkopen.

bron: automobiles.honda.com

WordPress-tabbladen: best case practices

simpel gezegd, tabs zijn een set knoppen die meestal horizontaal zijn ingesteld. Dit is de reden waarom hun ontwerp moet echt dicht bij een knop ontwerp.

nu, laten we eens een beetje kijken naar de best case practices voor het gebruik van tabbladen in uw WordPress website:

• ga niet voor meerdere rijen, het zal het moeilijk maken voor de gebruiker om te onthouden welk tabblad hij bezocht. Als u zich realiseert dat u meer rijen nodig hebt, betekent dit dat u een betere manier moet vinden om informatie te organiseren
• houd tabbladen kort en zoet
• gebruik alleen tabbladen wanneer gebruikers niet tegelijkertijd inhoud van meerdere tabbladen hoeven te zien
• geef duidelijk aan welk tabblad actief is
• de niet-geselecteerde tabbladen moeten zichtbaar blijven en niet op de achtergrond verloren gaan
• zorg ervoor dat uw tabblad verschijnt als aparte knoppen waarmee u kunt interageren
• > zwevende effecten op tabbladen toevoegen zoals op knoppen
• gebruik tabbladen wanneer u tussen twee en negen verschillende tabbladen hebt inhoudscategorieën
• de categorieën zijn vergelijkbaar van aard, een gebruiker verwacht ze daar te zien (bijvoorbeeld: productbeschrijving, productrecensies)
• gebruik Geen navigatie met tabbladen wanneer u van plan bent een “meer” link
• in te voegen, kunt u gradiënten gebruiken om diepte en dimensie toe te voegen aan de tabbladen.

Hoe maak je WordPress tabs met behulp van page builders

Ik gebruik de Colibri page builder voor deze oefening.

tabbladen kunnen als onderdeel worden gevonden.

u kunt componenten vinden wanneer u linksboven op “+” klikt.

Ga naar componenten en sleep de” Tab ” component naar uw website preview aan de rechterkant.

vervolgens kunt u spelen met de aanpassingsopties aan de linkerkant.

wanneer uw tabblad eruit ziet alsof u dat wilt, klikt u op “Publiceren” en u bent live.

Tabs: een plugin om u te helpen met het opzetten van WordPress tabs

als u een online winkel geïntegreerd met WooCommerce, in WordPress zijn er twee zeer populaire plugins voor WordPress tabs.

bron: wordpress.org

maar Ik wil u voorstellen aan een favoriet van mij: Tabs.

bron: wordpress.org

Tabs heeft veel aanpassingsopties waar u binnenkort dol op zult zijn. Waarom ik voel dat je het ook leuk zult vinden:

• u ontwerpt mobielvriendelijke WordPress tabs
• u kunt werken met shortcodes
• tabbladen werken door slepen en neerzetten
• het heeft meer dan 20 ontwerpsjablonen zodat u zich geen zorgen hoeft te maken over inspiratie
• 500+ Google Fonts
• tabbladen werken met de meeste thema ‘ s die er zijn.

WordPress tabs: de conclusies

Tabs zijn hier om informatie gemakkelijker te verteren in een wereld van kortere aandachtsspanne. In termen van tools, er zijn tal van hen die er zijn die u kunnen helpen met het opzetten van WordPress tabbladen. Dit is het makkelijkst om te doen.

belangrijker is om erachter te komen wat voor soort informatie in uw tabbladen kan passen. Als u er niet zeker van bent dat een tabblad u zal helpen bepaalde informatie te organiseren, kunt u altijd wat gebruikersonderzoek of een A/B-test doen. Onze eigen veronderstellingen zijn niet genoeg. Echte gedragsgegevens leiden je naar het juiste antwoord.

aan het eind van de dag moet u aandacht besteden aan bruikbaarheid, chunking en websitesnelheid.

Als u dit artikel leuk vond en meer wilt weten over hoe u een WordPress-website ontwerpt, schrijf u dan in op ons Youtube-kanaal en volg ons op Twitter en Facebook!