Hvordan Lage Smarte Og Vakre WordPress-Faner

Hvordan Lage Smarte Og Vakre WordPress-Faner

Morsomt faktum: la du merke til at selv wordpress.org bruker WordPress faner til blings informasjon?

Sjekk dette ut:

Kilde: wordpress.org

WordPress-faner er en type navigasjon som kan forbedre kundeopplevelsen. Hvordan det? Ved ikke å rote mye informasjon inn i avsnitt, men ved hjelp av en bedre organiseringsmetode.

Tabbed navigasjon ligner på filer organisasjon på et kontor eller hos legen.

må Ikke forveksles med menyer. Mesteparten av tiden åpner menyelementer en egen side med EGEN URL. HER VIL INGEN URL-endring skje.

må heller ikke forveksles med trekkspill. Et trekkspill vil stable informasjon vertikalt. Overskrifter kan klikkes for å avsløre eller skjule innhold knyttet til dem.

Nå, Hvorfor Skulle Ditt WordPress-nettsted trenge faner? For å forbedre navigasjon, brukervennlighet og dermed kundetilfredshet og konverteringsfrekvenser.

Mange grunner, ikke sant?

Tabbed navigasjon er fortsatt en vanlig praksis i e-handel for å presentere produkter. Mange besøkende gjenkjenner allerede faner eller forventer faner på enkelte steder.

La oss si at du selger elektronikk. Du må presentere massevis av produktinformasjon:

• Produktbeskrivelse
• produktbilder
• Tekniske spesifikasjoner
• Anmeldelser
• Garantiinfo
• Fraktdetaljer

Faner vil hjelpe deg å komprimere stort innhold i begrensede områder.

nå, i denne artikkelen, vil vi starte med å gi deg noen fan design inspirasjon. Deretter skal vi gå litt inn i noen beste praksis. Til slutt vil jeg veilede deg gjennom de tekniske WordPress-fanene.

La oss komme i gang!

Faner: litt inspirasjon

Nå, la oss sjekke noen nettsteder der ute som bruker faner. Jeg er definitivt inne for bevis. Bilder kan forklare bedre ting enn ord, tror du ikke?

la oss se, eBay bruker faner for produktbeskrivelse. Alle tekniske spesifikasjoner går under «Beskrivelse», og de samlet» forsendelse og betaling » under samme fane. Jeg er ganske sikker på at de har testet oppsettet fordi, for et nettsted med slik trafikk, kan enhver endring påvirke konverteringsfrekvenser tungt.

Kilde: ebay.com

BobbyBrown cosmetics går for en minimalistisk tilnærming, kategoriene har ikke en knapplignende tilnærming. De bruker en understreking for å informere brukeren om at han valgte en fane.

Kilde: bobbibrowncosmetics.com

jeg føler meg alltid tapt når jeg går til booking.com. De har mye informasjon du trenger å bla ned for. Nylig la jeg merke til at de gjorde noen endringer for å redusere bla, men likevel er det ikke nok (for meg).

Trivago, derimot, ser ut til å organisere informasjon litt bedre. Jeg vet det er vanskelig å gjøre når du trenger å gi så mange detaljer.

de bruker faner til å organisere hotellinformasjon som oversikt, info, bilder, anmeldelser, tilbud.

kilde: trivago.Com

Faner er en vanlig praksis på nettsteder som tilbyr reisepakker som flyreiser, overnattingssteder, bilutleie.

Expedia gjør det pent når det presenterer sitt tilbud for 6-tjenester. Opplevelsen er ren og unintrusive.

Kilde: expedia.com

Honda bruker faner på en mer kreativ måte. Den blander bilder og videoer sammen med tekst for å selge En flott Honda-opplevelse.

Kilde: automobiles.honda.com

wordpress-faner: best case practices

enkelt sagt, faner er et sett med knapper som vanligvis settes horisontalt. Dette er grunnen til at deres design bør være veldig nær en knappdesign.

Nå, la Oss se litt på beste praksis for bruk av faner på WordPress-nettstedet ditt:

• Ikke gå for flere rader, det vil gjøre det vanskelig for brukeren å huske hvilken fane han besøkte. Hvis du innser at du trenger flere rader, betyr dette At du må finne en bedre måte å organisere informasjon på
• Hold tabulatoroverskrifter korte og søte
• Bruk faner bare når brukere ikke trenger å se innhold fra flere faner samtidig
• Angi Tydelig hvilken fane som er aktiv
• de ikke-merkede fanene skal forbli synlige og ikke gå tapt i bakgrunnen
• pass på at fanen din vises som separate knapper som du kan samhandle med
• legg til hovereffekter på faner som du Ville på knapper
• bruk faner når du har mellom to og ni forskjellige kategorier av innhold
• kategoriene er like i naturen, en bruker forventer å se dem der (f. eks: produktbeskrivelse, produktomtaler)
• ikke bruk tabbed navigasjon når du har tenkt å sette inn en » mer » link
• du kan bruke graderinger for å legge til dybde og dimensjon til fanene.

hvordan lage WordPress-faner ved hjelp av sidebyggere

jeg bruker colibri page builder for formålet med denne øvelsen.

Faner kan bli funnet som en komponent.

du finner komponenter når du klikker på » + » øverst til venstre.

Gå Til Komponenter Og dra» Tab » komponent til ditt nettsted forhåndsvisning til høyre.

Deretter kan du spille med tilpasningsalternativene til venstre.

når fanen din ser ut som du vil, bare trykk «Publiser» og du er live.

Faner: et plugin for å hjelpe Deg med å sette Opp WordPress-faner

hvis Du kjører en nettbutikk integrert Med WooCommerce, er Det i WordPress to svært populære plugins For WordPress-faner.

Kilde: wordpress.org

men jeg vil introdusere deg til en favoritt av meg: Tabs.

Kilde: wordpress.org

Tabs har mange tilpasningsalternativer som du snart vil bli glad i. Hvorfor jeg føler at du vil elske det også:

• du vil designe mobilvennlige WordPress-faner
• Du kan jobbe med kortkoder
• Faner fungerer ved å dra og slippe
• Den har 20+ designmaler slik at du ikke trenger å bry deg med inspirasjon
• 500+ Google Fonts
• Faner fungerer med de fleste temaene der ute.

WordPress-faner: konklusjonene

Fanene er her for å gjøre informasjon lettere å fordøye i en verden med kortere oppmerksomhetsspenn. Når det gjelder verktøy, er det mange av dem der ute som kan hjelpe deg med å sette Opp WordPress-faner. Dette er det enkleste å gjøre.

Mer viktig er å finne ut hva slags informasjon som kan passe i fanene dine. Hvis du ikke er sikker på at en fane vil hjelpe deg med å organisere bestemt informasjon, kan du alltid gjøre noen brukerundersøkelser eller En A/B-test. Våre egne antagelser er ikke nok. Ekte atferdsdata vil lede deg til det riktige svaret.

på slutten av dagen må du bry deg om brukervennlighet, chunking og nettstedhastighet.

nå, hvis du likte denne artikkelen,og du vil lære mer om hvordan du designer Et WordPress-nettsted, sørg for å abonnere på Vår Youtube-kanal og følg Oss På Twitter og Facebook!