hur man skapar smarta och vackra WordPress-flikar

hur man skapar smarta och vackra WordPress-flikar

roligt faktum: märkte du att även wordpress.org använder WordPress-flikar för att dela information?

kolla in det här:

källa: wordpress.org

WordPress-flikar är en typ av navigering som kan förbättra kundupplevelsen. Hur så? Genom att inte belamra en hel del information i stycken, men med hjälp av en bättre organisera metod.

flikar navigering liknar filer organisation på ett kontor eller hos läkaren.

ej att förväxla med menyer. För det mesta öppnar menyalternativ en separat sida med sin egen URL. Här kommer ingen URL-ändring att hända.

inte att förväxla med dragspel heller. Ett dragspel staplar information vertikalt. Rubriker kan klickas för att avslöja eller dölja innehåll som är associerat med dem.

nu, varför skulle din WordPress webbplats behöver flikar? För att förbättra navigering, användbarhet och därmed kundnöjdhet och konverteringsfrekvens.

massor av skäl, eller hur?

Fliknavigering är fortfarande en vanlig praxis inom e-handel för att presentera produkter. Många besökare känner redan igen flikar eller förväntar sig flikar på vissa platser.

låt oss säga att du säljer elektronik. Du kommer att behöva presentera massor av produktinformation:

• produktbeskrivning
• produktfoton
• tekniska specifikationer
• recensioner
• garantiinformation
• leveransinformation

flikar hjälper dig att komprimera stort innehåll till begränsade utrymmen.

nu, i denna artikel, Vi kommer att börja med att ge dig några fliken design inspiration. Därefter går vi lite in i några bästa fall. I slutändan guidar jag dig genom de tekniska aspekterna av WordPress-flikar.

Låt oss komma igång!

flikar: lite inspiration

låt oss nu kolla några webbplatser där ute som använder flikar. Jag är definitivt in för bevis. Bilder kan förklara bättre saker än ord, tycker du inte?

Låt oss se, eBay använder flikar för produktbeskrivning. Alla tekniska specifikationer går under” beskrivning”, och de samlade” leverans och betalning ” under samma flik. Jag är ganska säker på att de har testat layouten eftersom, för en webbplats med sådan trafik, någon förändring kan påverka omvandlingsfrekvensen kraftigt.

källa: ebay.com

BobbyBrown cosmetics går för ett minimalistiskt tillvägagångssätt, flikarna har inte ett knappliknande tillvägagångssätt. De använder en understrykning för att informera användaren om att han valt en flik.

källa: bobbibrowncosmetics.com

jag känner mig alltid förlorad när jag går till booking.com. de har massor av information du behöver rulla ner för. Nyligen märkte jag att de gjorde några ändringar för att minska rullningen, men det är fortfarande inte tillräckligt (för mig).

Trivago verkar å andra sidan organisera information lite bättre. Jag vet att det är svårt att göra när du behöver ge så många detaljer.

de använder flikar för att organisera hotellinformation som översikt, info, foton, recensioner, erbjudanden.

källa: trivago.com

flikar är en vanlig praxis på webbplatser som erbjuder resepaket som flyg, boende, Biluthyrning.

Expedia gör det snyggt när det presenterar sitt erbjudande för 6 tjänster. Upplevelsen är ren och påträngande.

källa: expedia.com

Honda använder flikar på ett mer kreativt sätt. Den blandar bilder och videor tillsammans med text för att sälja en fantastisk Honda-upplevelse.

källa: automobiles.honda.com

WordPress-flikar: best case practices

enkelt uttryckt är flikar en uppsättning knappar som vanligtvis ställs in horisontellt. Det är därför deras design borde vara riktigt nära en knappdesign.

Låt oss nu titta lite på de bästa fallmetoderna för att använda flikar på din WordPress-webbplats:

• gå inte för flera rader, Det kommer att göra det svårt för användaren att komma ihåg vilken flik han besökte. Om du inser att du behöver fler rader betyder det att du måste hitta ett bättre sätt att organisera information
• Håll flikrubrikerna korta och söta
• Använd endast flikar när användare inte behöver se innehåll från flera flikar samtidigt
• ange tydligt vilken flik som är aktiv
• de omarkerade flikarna ska förbli synliga och inte förlorade i bakgrunden
• se till att fliken visas som separata knappar som du kan interagera med
• lägg till svävareffekter på flikar som på knappar
• använd flikar när du har mellan två och nio olika kategorier av innehåll
• kategorierna är av liknande karaktär, en användare kan förvänta sig att se dem där (t.ex.: produktbeskrivning, produktrecensioner)
• använd inte fliknavigering när du tänker infoga en ”mer” länk
• du kan använda gradienter för att lägga till djup och dimension till flikarna.

hur man skapar WordPress-flikar med hjälp av sidbyggare

jag använder Colibri-sidbyggaren för syftet med denna övning.

flikar kan hittas som en komponent.

du kan hitta komponenter när du klickar på ”+” uppe till vänster.

gå till komponenter och dra ”Tab” – komponenten till din webbplatsförhandsgranskning till höger.

därefter kan du spela med anpassningsalternativen till vänster.

när din flik ser ut som du vill, tryck bara på ”Publicera” så är du live.

flikar: ett plugin som hjälper dig att ställa in WordPress-flikar

om du kör en onlinebutik integrerad med WooCommerce finns det i WordPress två mycket populära plugins för WordPress-flikar.

källa: wordpress.org

men jag vill presentera dig för en favorit av mig: flikar.

källa: wordpress.org

Tabs har många anpassningsalternativ som du snart kommer att bli förtjust i. Varför jag känner att du kommer att älska det också:

• du kommer att designa mobilvänliga WordPress-flikar
• du kan arbeta med kortkoder
• flikar fungerar genom att dra och släppa
• den har 20+ designmallar så att du inte behöver bry dig om inspiration
• 500+ Google-teckensnitt
• flikar fungerar med de flesta av de teman där ute.

WordPress-flikar: slutsatserna

flikar är här för att göra information lättare att smälta i en värld av kortare uppmärksamhetsspänningar. När det gäller verktyg finns det många av dem där ute som kan hjälpa dig med att ställa in WordPress-flikar. Det här är det enklaste att göra.

viktigare är att ta reda på vilken typ av information som kan passa i dina flikar. Om du inte är säker på att en flik hjälper dig att organisera viss information kan du alltid göra en del användarundersökningar eller ett A/B-test. Våra egna antaganden räcker inte. Verkliga beteendedata leder dig till rätt svar.

i slutet av dagen måste du bry dig om användbarhet, chunking och webbplatshastighet.

nu, om du gillade den här artikeln, och du vill lära dig mer om hur du utformar en WordPress-webbplats, se till att prenumerera på vår Youtube-kanal och följ oss på Twitter och Facebook!