jak vytvořit inteligentní a krásné WordPress karty

jak vytvořit inteligentní a krásné WordPress karty

zábavná skutečnost: všimli jste si, že i wordpress.org používá karty WordPress k oddělení informací?

podívejte se na toto:

zdroj: wordpress.org

karty WordPress jsou typem navigace, která může zlepšit zážitek zákazníků. Jak to? Tím, že nepřehledná spoustu informací do odstavců, ale pomocí lepší organizační metody.

navigace s kartami je podobná organizaci souborů v kanceláři nebo u lékaře.

nesmí být zaměňována s nabídkami. Položky nabídky většinou otevírají samostatnou stránku s vlastní adresou URL. Zde nedojde ke změně adresy URL.

nesmí být zaměňována s akordeony buď. Akordeon stohuje informace svisle. Na záhlaví lze kliknout a odhalit nebo skrýt obsah s nimi spojený.

proč by váš web WordPress potřeboval karty? Zlepšit navigaci, použitelnost, a tím i spokojenost zákazníků a míru konverze.

spousta důvodů, že?

navigace s kartami je v elektronickém obchodování stále běžnou praxí prezentovat produkty. Mnoho návštěvníků již karty rozpoznává nebo očekává karty na určitých místech.

řekněme, že prodáváte elektroniku. Budete muset předložit spoustu informací o produktu:

• Popis produktu
• fotografie produktu
• technické specifikace
• recenze
• záruční informace
• dodací údaje

karty vám pomohou komprimovat velký obsah do omezených prostorů.

nyní v tomto článku začneme tím, že vám poskytneme inspiraci pro návrh karet. Dále se podíváme na některé osvědčené postupy. Nakonec vás provedu technickými aspekty karet WordPress.

pojďme!

záložky: nějaká inspirace

nyní se podívejme na některé webové stránky, které používají karty. Určitě jsem pro důkaz. Obrázky mohou vysvětlovat lepší věci než slova, nemyslíte?

podívejme se, eBay používá karty pro popis produktu. Všechny technické specifikace jdou pod „popis“ a shromáždili „zásilka a platba“ na stejné kartě. Jsem si jistý, že testovali rozvržení, protože pro web s takovým provozem může jakákoli změna silně ovlivnit míru konverze.

zdroj: ebay.com

kosmetika BobbyBrown jde o minimalistický přístup, karty nemají přístup podobný tlačítkům. Používají podtržení, aby informovali uživatele, že vybral kartu.

zdroj: bobbibrowncosmetics.com

vždycky se cítím ztracený, když jdu do booking.com. mají spoustu informací, které potřebujete posunout dolů. Nedávno jsem si všiml, že provedli některé změny, aby snížili svitek ,ale stále to nestačí (pro mě).

na druhé straně se zdá, že Trivago organizuje informace o něco lépe. Vím, že je těžké to udělat, když potřebujete poskytnout tolik podrobností.

používají karty k uspořádání informací o hotelu, jako je přehled, informace, fotografie, recenze, nabídky.

zdroj: trivago.com

karty jsou běžnou praxí na webových stránkách, které nabízejí cestovní balíčky, jako jsou lety, ubytování, půjčovny aut.

Expedia to dělá pěkně, když představuje svou nabídku pro 6 služeb. Zážitek je čistý a nenápadný.

zdroj: expedia.com

Honda používá karty kreativnějším způsobem. Mísí obrázky a videa spolu s textem a prodává skvělý zážitek Honda.

zdroj: automobiles.honda.com

WordPress záložky: best case practices

jednoduše řečeno, karty jsou sada tlačítek obvykle nastavena vodorovně. To je důvod, proč by jejich design měl být opravdu blízko designu knoflíků.

nyní se podívejme trochu na osvědčené postupy pro používání karet na vašem webu WordPress:

• Nechoďte na více řádků, bude to pro uživatele těžké si vzpomenout, kterou kartu navštívil. Pokud si uvědomíte, že potřebujete více řádků, znamená to, že budete muset najít lepší způsob, jak uspořádat informace
• Udržujte nadpisy karet krátké a sladké
• použijte karty pouze tehdy, když uživatelé nepotřebují vidět obsah z více karet současně
• jasně uveďte, která karta je aktivní
• nevybrané karty by měly zůstat viditelné a neztratit se na pozadí
• ujistěte se, že karta vypadá jako samostatná tlačítka, se kterými můžete komunikovat
• přidat hover efekty na kartách, jako byste na tlačítkách
• použijte karty, pokud máte mezi dvěma a devíti různých kategorie obsahu
• kategorie jsou podobné povahy, uživatel by očekával, že je tam uvidí (např.: popis produktu, Recenze produktu)
• nepoužívejte navigaci s kartami, Pokud máte v úmyslu vložit odkaz „Více“
• můžete použít přechody pro přidání hloubky a dimenze do karet.

jak vytvořit karty WordPress pomocí nástrojů pro tvorbu stránek

pro účely tohoto cvičení používám nástroj Colibri page builder.

karty lze nalézt jako součást.

komponenty najdete, když kliknete vlevo nahoře na“+“.

přejděte na komponenty a přetáhněte komponentu „Tab“ do náhledu webu vpravo.

dále můžete hrát s možnostmi přizpůsobení vlevo.

když vaše karta vypadá, že chcete, stačí kliknout na „Publikovat“ a jste aktivní.

záložky: plugin, který vám pomůže s nastavením karet WordPress

pokud spustíte internetový obchod integrovaný s WooCommerce, v WordPress existují dva velmi populární pluginy pro karty WordPress.

zdroj: wordpress.org

ale chci vám představit své oblíbené: karty.

zdroj: wordpress.org

karty mají mnoho možností přizpůsobení, které budete brzy mít rádi. Proč mám pocit, že se vám bude líbit příliš:

• navrhnete karty WordPress pro mobilní zařízení
• můžete pracovat s krátkými kódy
• karty fungují přetažením
• má 20 + šablon návrhů, takže se nemusíte obtěžovat inspirací
• 500 + Google Fonts
• karty pracují s většinou témat.

WordPress tabs: závěry

Tabs jsou zde, aby usnadnily trávení informací ve světě kratších rozpětí pozornosti. Pokud jde o nástroje, existuje spousta z nich, které vám mohou pomoci s nastavením karet WordPress. To je nejjednodušší věc.

důležitější je zjistit, jaký druh informací se vejde do vašich karet. Pokud si nejste jisti, že karta vám pomůže uspořádat určité informace, můžete vždy provést nějaký uživatelský průzkum nebo test A/B. Naše vlastní předpoklady nestačí. Skutečné údaje o chování vás dovedou ke správné odpovědi.

na konci dne se musíte starat o použitelnost, chunking a rychlost webových stránek.

Nyní, pokud se vám tento článek líbil a chcete se dozvědět více o tom, jak navrhnout web WordPress, nezapomeňte se přihlásit k odběru našeho kanálu Youtube a sledujte nás na Twitteru a Facebook!