How to Create Smart and Beautiful WordPress Tabs

How to Create Smart and Beautiful WordPress Tabs

Fun fact: did you note that even wordpress.org käyttää WordPress välilehdet chunk tietoja?

Check this out:

lähde: wordpress.org

WordPress-välilehdet ovat navigointityyppi, jolla voidaan parantaa asiakaskokemusta. Miten niin? Ei sotkemalla paljon tietoa kappaleisiin, vaan käyttämällä parempaa järjestämistapaa.

Tabbed navigation on samanlainen kuin tiedostojen organisointi toimistossa tai lääkärissä.

ei pidä sekoittaa ruokalistoihin. Useimmiten valikkokohteet avaavat erillisen sivun omalla URL-osoitteellaan. Tässä URL-osoitteen muutosta ei tapahdu.

ei myöskään pidä sekoittaa harmonikoihin. Haitari pinoaa tietoa pystysuunnassa. Otsikoita voi klikata paljastamaan tai piilottamaan niihin liittyvää sisältöä.

nyt, miksi WordPress-sivusto tarvitsisi välilehtiä? Parantaa navigointia, käytettävyyttä ja siten asiakastyytyväisyyttä ja muuntokursseja.

syitä riittää, vai mitä?

Tabbed-navigointi on yhä yleinen tapa verkkokaupassa esitellä tuotteita. Monet kävijät tunnistavat jo välilehtiä tai odottavat välilehtiä tietyissä paikoissa.

sanotaan, että myyt elektroniikkaa. Sinun tulee esittää paljon tuotetietoja:

• Tuotekuvaus
• tuotekuvat
• TEKNISET TIEDOT
• arvostelut
• takuutiedot
• toimitustiedot

välilehdet auttavat pakkaamaan ison sisällön rajallisiin tiloihin.

nyt, tässä artikkelissa, aloitamme tarjoamalla sinulle joitakin välilehti suunnittelu inspiraatiota. Seuraavaksi menemme hieman parhaiden tapojen käytäntöihin. Lopulta, minä opastaa teknisen WordPress välilehdet näkökohtia.

Let ’ s get going!

Tabs:some inspiration

Now, let ’ s check some websites out there there use tabs. Tarvitsen todisteita. Kuvat voivat selittää asioita paremmin kuin sanat.

katsotaanpa, eBay käyttää välilehtiä tuotekuvauksessa. Kaikki tekniset tiedot menevät kohtaan ”kuvaus”, ja he keräsivät” lähetys ja maksu ” saman välilehden alle. Olen melko varma, että he ovat testanneet asettelua, koska tällaisella liikenteellä varustetulle sivustolle muutokset voivat vaikuttaa voimakkaasti muuntokursseihin.

lähde: ebay.com

BobbyBrown cosmetics menee minimalistiseen lähestymistapaan, välilehdissä ei ole nappimaista lähestymistapaa. He käyttävät alleviivaa kertoakseen käyttäjälle, että hän valitsi välilehden.

lähde: bobbibrowncosmetics.kom

tunnen itseni aina eksyneeksi, kun menen booking.com. heillä on paljon tietoa sinun täytyy selata alas. Viime aikoina huomasin, että he tekivät joitakin muutoksia vähentää vieritys, mutta silti, se ei riitä (minulle).

Trivago sen sijaan näyttää järjestävän informaatiota hieman paremmin. Tiedän, että se on vaikeaa, kun pitää kertoa niin paljon yksityiskohtia.

he käyttävät välilehtiä järjestääkseen hotellitietoja, kuten yleiskatsaus, info, Valokuvat, arvostelut, tarjoukset.

lähde: trivago.com

välilehdet ovat yleinen käytäntö verkkosivustoilla, jotka tarjoavat matkapaketteja, kuten lentoja, majoitusta, autonvuokrauksia.

Expedia tekee sen hienosti, kun se esittelee tarjontaansa 6 palvelulle. Kokemus on puhdas ja esteetön.

lähde: expedia.com

Honda käyttää välilehtiä luovemmin. Se sekoittaa kuvia ja videoita tekstin rinnalle myydäkseen hienoa Honda-kokemusta.

lähde: automobiles.honda.com

WordPress-välilehdet: parhaat tapauskäytännöt

yksinkertaisesti sanottuna välilehdet ovat joukko painikkeita, jotka asetetaan yleensä vaakasuoraan. Siksi niiden muotoilun pitäisi olla todella lähellä nappia.

nyt, Katsotaanpa hieman parhaita käytäntöjä käyttää välilehtiä WordPress verkkosivuilla:

• älä mene useita rivejä, se tekee vaikeaksi käyttäjän muistaa, missä välilehdessä hän vieraili. Jos huomaat tarvitsevasi enemmän rivejä, sinun on löydettävä parempi tapa järjestää tiedot
• pidä välilehtien otsikot lyhyinä ja suloisina
• Käytä välilehtiä vain silloin, kun käyttäjien ei tarvitse nähdä sisältöä useilta välilehdiltä samanaikaisesti
• ilmoita selvästi, mikä välilehti on aktiivinen
• valitsemattomien välilehtien tulisi pysyä näkyvissä, eikä kadota taustalla
• varmista, että välilehtesi näyttää erillisiltä painikkeilta, joilla voit olla vuorovaikutuksessa
• lisää Hover-efektit välilehtiin samalla tavalla kuin painikkeilla
• Käytä välilehtiä, kun sinulla on kahdesta yhdeksään erilaista sisältöluokat
• kategoriat ovat luonteeltaan samanlaisia, käyttäjä odottaisi näkevänsä ne siellä (esim.Tuotekuvaus, tuotearvostelut)
• Älä käytä välilehtinavigointia, kun aiot lisätä ”lisää” – linkin
• voit lisätä välilehtiin syvyyttä ja ulottuvuutta liukuväreillä.

Kuinka luoda WordPress-välilehtiä page Builder-ohjelmalla

käytän tässä harjoituksessa Colibri page Builderia.

välilehdet löytyvät komponenttina.

löydät komponentit, kun klikkaat ” + ” vasemmasta ylälaidasta.

Siirry komponentteihin ja vedä ”Tab” – komponentti verkkosivustosi esikatseluun oikealla.

Seuraavaksi voit pelata muokkausvaihtoehdoilla vasemmalla.

kun välilehtesi näyttää siltä kuin haluaisit, paina vain ”julkaise” ja olet live.

Tabs: plugin avulla voit perustaa WordPress välilehdet

jos käytät verkkokaupan integroitu WooCommerce, WordPress on kaksi erittäin suosittu plugins WordPress välilehdet.

lähde: wordpress.org

mutta, haluan esitellä teille suosikkini: Tabs.

lähde: wordpress.org

Tabs sisältää paljon muokkausmahdollisuuksia, joihin ihastut pian. Miksi minusta tuntuu, että sinäkin rakastat sitä:

• suunnittelet mobiiliystävällisiä WordPress-välilehtiä
• voit käyttää lyhytnumeroita
• Tabs works by drag and drop
• siinä on 20+ suunnittelupohjaa, joten sinun ei tarvitse vaivautua inspiraatiosta
• 500+ Google-fontteja
• Tabs toimii useimpien teemat tuolla.

WordPress-välilehdet: johtopäätökset

välilehdet ovat täällä, jotta tietoa olisi helpompi sulattaa lyhyemmän huomion maailmassa. Mitä työkaluja, on paljon niitä siellä, jotka voivat auttaa sinua perustamalla WordPress välilehdet. Tämä on helpointa.

tärkeämpää on selvittää, millaiset tiedot mahtuvat välilehtiisi. Jos et ole varma, että välilehti auttaa sinua järjestämään tiettyjä tietoja, voit aina tehdä joitakin käyttäjätutkimuksia tai A/B-testi. Omat oletuksemme eivät riitä. Todellinen käyttäytymistieto johdattaa oikean vastauksen luo.

loppujen lopuksi sinun täytyy välittää käytettävyydestä, kikkailusta ja verkkosivujen nopeudesta.

nyt, jos pidit tästä artikkelista ja haluat oppia lisää WordPress-verkkosivuston suunnittelusta, varmista, että tilaat Youtube-kanavamme ja seuraat meitä Twitterissä ja facebookissamme!