Hogyan hozzunk létre okos és szép WordPress lapok

Hogyan hozzunk létre okos és szép WordPress lapok

szórakoztató tény: észrevetted, hogy még wordpress.org a WordPress lapokat használja az információk darabolására?

ezt nézd meg:

forrás: wordpress.org

a WordPress lapok egyfajta navigáció, amely javíthatja az ügyfélélményt. Hogyhogy? Azáltal, hogy nem sok információt rendetlenít bekezdésekbe, hanem jobb szervezési módszert alkalmaz.

a füles navigáció hasonló a fájlok szervezéséhez az irodában vagy az orvosnál.

nem tévesztendő össze a menükkel. A menüpontok legtöbbször külön oldalt nyitnak meg saját URL-jével. Itt nem történik URL-változás.

nem tévesztendő össze a harmonikákkal sem. A harmonika függőlegesen rakja össze az információkat. A fejlécekre kattintva felfedheti vagy elrejtheti a hozzájuk kapcsolódó tartalmat.

most miért lenne szüksége a WordPress webhelyének fülekre? A navigáció, a használhatóság, és ezáltal az ügyfelek elégedettségének és a konverziós arányok javítása.

rengeteg ok, igaz?

a füles navigáció továbbra is általános gyakorlat az e-kereskedelemben a termékek bemutatására. Sok látogató már felismeri a füleket, vagy bizonyos helyeken elvárja a füleket.

tegyük fel, hogy elektronikát árul. Sok termékinformációt kell bemutatnia:

• Termékleírás
• termékfotók
• MŰSZAKI ADATOK
• vélemények
• jótállási információ
• Szállítási részletek

a lapok segítenek a nagy tartalom korlátozott helyre tömörítésében.

most, ebben a cikkben kezdjük azzal, hogy néhány laptervezési inspirációt nyújtunk Önnek. Következő, megyünk egy kicsit néhány legjobb esetben gyakorlatokat. Végül végigvezetem a technikai WordPress lapok szempontjain.

induljunk!

Tabs: néhány inspiráció

most nézzük meg néhány olyan webhelyet, amelyek füleket használnak. Biztos vagyok benne, hogy bizonyítani fogok. A képek jobb dolgokat magyaráznak, mint a szavak, nem gondolod?

lássuk, az eBay füleket használ a termékleíráshoz. Az összes technikai specifikáció a “leírás” alatt található, és ugyanazon a lapon gyűjtötték össze a “szállítás és fizetés” elemet. Biztos vagyok benne, hogy tesztelték az elrendezést, mert egy ilyen forgalmú webhely esetében minden változás erősen befolyásolhatja a konverziós arányokat.

forrás: ebay.com

a BobbyBrown cosmetics minimalista megközelítést alkalmaz, a füleknek nincs gombszerű megközelítése. Aláhúzással tájékoztatják a felhasználót arról, hogy kiválasztott egy lapot.

forrás: bobbibrowncosmetics.com

mindig elveszettnek érzem magam, amikor booking.com. rengeteg információval rendelkeznek, amelyekre le kell görgetni. Nemrég észrevettem, hogy néhány változtatást hajtottak végre a görgetés csökkentése érdekében, de még mindig nem elég (nekem).

a Trivago viszont úgy tűnik, hogy egy kicsit jobban szervezi az információkat. Tudom, hogy nehéz megtenni, amikor olyan sok részletet kell megadnia.

füleket használnak a szállodai információk, például áttekintés, információk, fotók, vélemények, ajánlatok rendezésére.

forrás: trivago.com

a lapok bevett gyakorlat az olyan weboldalakon, amelyek utazási csomagokat kínálnak, például járatokat, szállást, autókölcsönzést.

az Expedia szépen csinálja, amikor bemutatja 6 szolgáltatását. A tapasztalat tiszta és tolakodó.

forrás: expedia.com

a Honda kreatívabb módon használja a füleket. Képek és videók keverése a szöveg mellett, hogy nagyszerű Honda élményt nyújtson.

forrás: automobiles.honda.com

WordPress lapok: bevált gyakorlatok

egyszerűen fogalmazva, a fülek általában vízszintesen beállított gombok. Ez az, amiért a design kell igazán közel egy gomb design.

most nézzük meg egy kicsit a WordPress webhelyén található lapok használatának legjobb gyakorlatait:

• ne menjen több sorba, ez megnehezíti a felhasználó számára, hogy emlékezzen arra, hogy melyik lapot látogatta meg. Ha rájössz, hogy több sorra van szükséged, ez azt jelenti, hogy jobb módot kell találnod az információk rendezésére
• a fülfejlécek rövidek és kedvesek maradnak
• csak akkor használj füleket, ha a felhasználóknak nem kell egyszerre több lap tartalmát látniuk
• egyértelműen jelezze, hogy melyik lap aktív
• a nem kijelölt lapoknak láthatónak kell maradniuk, és nem veszhetnek el a háttérben
• győződjön meg arról, hogy a lap külön gombokként jelenik meg, amelyekkel kölcsönhatásba léphet
• a lapokon ugyanúgy adjon Hover effektusokat, mint a gombokon
• használjon füleket, ha kettő és kilenc között van tartalomkategóriák
• a kategóriák hasonló jellegűek, a felhasználó elvárja, hogy ott láthassa őket (pl.: termékleírás, termékismertetők)
• ne használjon füles navigációt, ha “több” linket kíván beszúrni
• színátmenetek segítségével mélységet és dimenziót adhat a fülekhez.

Hogyan hozzunk létre WordPress lapokat az oldalépítők használatával

A Colibri oldalkészítőt használom e gyakorlat céljára.

a lapok komponensként találhatók.

az összetevőket a bal felső sarokban található “+” gombra kattintva találja meg.

menjen az összetevők elemre, és húzza a “Tab” összetevőt a webhely előnézetére a jobb oldalon.

ezután játszhat a bal oldali testreszabási lehetőségekkel.

amikor a lap úgy néz ki, mint szeretné, csak nyomja meg a “Közzététel” gombot, és él.

lapok: plugin, amely segít a WordPress lapok beállításában

ha a WooCommerce-hez integrált online áruházat futtat, a WordPress-ben két nagyon népszerű plugin található a WordPress lapokhoz.

forrás: wordpress.org

de szeretném bemutatni neked egy kedvencemet: Tabs.

forrás: wordpress.org

Tabs van egy csomó testreszabási lehetőségek, hogy hamarosan szereti. Miért érzem, hogy szeretni fogja azt is:

• meg fogja tervezni a mobil-barát WordPress lapok
• akkor dolgozni shortcodes
• lapok működik drag and drop
• meg 20 + design sablonok, így nem kell bajlódni az inspiráció
• 500 + Google Fonts
• lapok működik a legtöbb a témák ott.

WordPress lapok: a következtetések

a lapok itt vannak, hogy megkönnyítsék az információk emésztését a rövidebb figyelemfelkeltő világban. Ami az eszközöket illeti, rengeteg van belőlük, amelyek segíthetnek a WordPress lapok beállításában. Ez a legegyszerűbb dolog.

fontosabb, hogy kitaláljuk, milyen információk férhetnek el a lapokon. Ha nem biztos abban, hogy egy lap segít bizonyos információk rendezésében, mindig végezhet felhasználói kutatást vagy A/B tesztet. Saját feltételezéseink nem elegendőek. A valódi viselkedési adatok a helyes válaszhoz vezetnek.

a nap végén törődnie kell a használhatósággal, a darabolással és a weboldal sebességével.

most, ha tetszett ez a cikk, és többet szeretne megtudni arról, hogyan tervezzen egy WordPress weboldalt, győződjön meg róla, hogy feliratkozik a Youtube-csatornánkra, és kövessen minket a Twitteren és a Facebook-on!