Jak stworzyć inteligentne i piękne karty WordPress

Jak stworzyć inteligentne i piękne karty WordPress

ciekawostka :czy zauważyłeś, że nawet wordpress.org używa zakładek WordPress do fragmentowania informacji?

sprawdź to:

wordpress.org

karty WordPress to rodzaj nawigacji, która może poprawić wrażenia klienta. Jak to? Nie zaśmiecając dużo informacji w akapitach, ale stosując lepszą metodę organizowania.

nawigacja z zakładkami jest podobna do organizacji plików w biurze lub u lekarza.

nie mylić z menu. W większości przypadków pozycje menu otwierają osobną stronę z własnym adresem URL. Tutaj nie nastąpi zmiana adresu URL.

nie mylić z akordeonami. Akordeon ułoży informacje pionowo. Nagłówki można kliknąć, aby ujawnić lub ukryć powiązaną z nimi zawartość.

dlaczego Twoja witryna WordPress potrzebuje kart? Aby poprawić nawigację, użyteczność, a tym samym zadowolenie klienta i współczynniki konwersji.

wiele powodów, prawda?

Nawigacja w kartach jest nadal powszechną praktyką w e-commerce do prezentacji produktów. Wielu odwiedzających już rozpoznaje karty lub oczekuje kart w niektórych miejscach.

powiedzmy, że sprzedajesz elektronikę. Będziesz musiał przedstawić wiele informacji o produkcie:

• opis produktu
• Zdjęcia produktu
• parametry techniczne
• recenzje
• informacje o gwarancji
• szczegóły wysyłki

zakładki pomogą Ci skompresować Duże treści w ograniczonych przestrzeniach.

teraz w tym artykule zaczniemy od dostarczenia Ci inspiracji do projektowania kart. Następnie przejdziemy do kilku najlepszych praktyk. W końcu poprowadzę Cię przez techniczne aspekty kart WordPress.

ruszajmy!

karty: trochę inspiracji

teraz sprawdźmy niektóre strony internetowe, które używają kart. Na pewno mam dowód. Obrazy mogą wyjaśnić lepsze rzeczy niż słowa, nie sądzisz?

zobaczmy, eBay używa kart do opisu produktu. Wszystkie specyfikacje techniczne znajdują się w zakładce „Opis”, A na tej samej zakładce zebrano „Wysyłka i płatność”. Jestem prawie pewien, że przetestowali układ, ponieważ w przypadku witryny o takim ruchu każda zmiana może mocno wpłynąć na współczynniki konwersji.

źródło: ebay.com

kosmetyki BobbyBrown są minimalistyczne, zakładki nie mają przycisku. Używają podkreślenia, aby poinformować użytkownika, że wybrał kartę.

źródło: bobbibrowncosmetics.kom

zawsze czuję się zagubiony, gdy idę do booking.com. mają wiele informacji, których potrzebujesz, aby przewinąć w dół. Ostatnio zauważyłem, że wprowadzili pewne zmiany w celu zmniejszenia scrolla, ale to wciąż za mało (dla mnie).

z drugiej strony Trivago wydaje się nieco lepiej organizować informacje. Wiem, że to trudne, gdy trzeba podać tyle szczegółów.

używają zakładek do organizowania informacji o hotelu, takich jak przegląd, informacje, zdjęcia, opinie, oferty.

źródło: trivago.com

zakładki są powszechną praktyką na stronach internetowych, które oferują pakiety podróży, takie jak loty, zakwaterowanie, wynajem samochodów.

Expedia ładnie prezentuje swoją ofertę na 6 usług. Doświadczenie jest czyste i unintrusive.

źródło: expedia.com

Honda używa kart w bardziej kreatywny sposób. Łączy obrazy i filmy wraz z tekstem, aby sprzedać wspaniałe wrażenia Hondy.

źródło: automobiles.honda.com

WordPress tabs: najlepsze praktyki

Mówiąc najprościej, tabulatory to zestaw przycisków ustawionych Zwykle poziomo. Dlatego ich konstrukcja powinna być bardzo zbliżona do projektu przycisku.

teraz przyjrzyjmy się nieco najlepszym praktykom korzystania z kart w witrynie WordPress:

• nie przechodź do wielu wierszy, utrudni to użytkownikowi zapamiętanie, którą kartę odwiedził. Jeśli zdasz sobie sprawę, że potrzebujesz więcej wierszy, oznacza to, że musisz znaleźć lepszy sposób na uporządkowanie informacji
• Zachowaj nagłówki kart krótkie i słodkie
• używaj kart tylko wtedy, gdy użytkownicy nie muszą widzieć zawartości z wielu kart w tym samym czasie
• wyraźnie wskaż, która karta jest aktywna
• niezaznaczone karty powinny pozostać widoczne i nie znikać w tle
• upewnij się, że karta wygląda jak oddzielne przyciski, z którymi możesz wchodzić w interakcje
• dodaj efekty najechania kursorem na kartach tak, jak na przyciskach
• użyj kart, gdy masz od dwóch do dziewięciu różnych kategorie treści
• kategorie mają podobny charakter, użytkownik spodziewałby się ich tam zobaczyć (np.: opis produktu, recenzje produktów)
• nie używaj nawigacji z zakładkami gdy zamierzasz wstawić link „Więcej”
• możesz użyć gradientów, aby dodać głębokość i wymiar do kart.

jak utworzyć zakładki WordPress za pomocą kreatorów stron

używam kreatora stron Colibri do celów tego ćwiczenia.

karty można znaleźć jako komponent.

możesz znaleźć komponenty po kliknięciu „+” w lewym górnym rogu.

przejdź do komponentów i przeciągnij komponent ” Tab ” do podglądu witryny po prawej stronie.

następnie możesz grać z opcjami dostosowywania po lewej stronie.

gdy Twoja karta wygląda tak, jakbyś chciał, po prostu naciśnij „Publikuj” i jesteś na żywo.

: wtyczka, która pomoże Ci w konfiguracji kart WordPress

jeśli prowadzisz sklep internetowy zintegrowany z WooCommerce, w WordPress są dwie bardzo popularne wtyczki do kart WordPress.

źródło: wordpress.org

ale, chcę wam przedstawić moją ulubioną: Tabs.

źródło: wordpress.org

Tabs ma wiele opcji dostosowywania, które wkrótce polubisz. Dlaczego czuję, że ty też to pokochasz:

• zaprojektujesz przyjazne dla urządzeń mobilnych zakładki WordPress
• możesz pracować z shortcodes
• zakładki działają poprzez przeciąganie i upuszczanie
• ma ponad 20 szablonów projektowych, dzięki czemu nie musisz męczyć się z inspiracją
• 500+ czcionek Google
• zakładki działają z większością tych tematów.

zakładki WordPress: wnioski

zakładki są tutaj, aby ułatwić przyswajanie informacji w świecie krótszych zakresów uwagi. Jeśli chodzi o narzędzia, jest ich wiele, które mogą Ci pomóc w konfigurowaniu kart WordPress. To najłatwiejsza rzecz do zrobienia.

ważniejsze jest ustalenie, jakie informacje mogą zmieścić się w twoich kartach. Jeśli nie jesteś pewien, czy zakładka pomoże Ci uporządkować pewne informacje, zawsze możesz przeprowadzić badania użytkowników lub test a / B. Nasze własne założenia nie wystarczą. Prawdziwe dane behawioralne doprowadzą cię do właściwej odpowiedzi.

pod koniec dnia musisz dbać o użyteczność, chunking i szybkość witryny.

teraz, Jeśli podoba Ci się ten artykuł i chcesz dowiedzieć się więcej o tym, jak zaprojektować stronę WordPress, zapisz się na nasz kanał Youtube i śledź nas na Twitterze i Facebooku!