Divi Plugin Highlight - Divi Breadcrumbs Module

Kiedy nawiguję po witrynie internetowej, jednym z narzędzi nawigacyjnych, których szukam, jest bułka tarta. Świetnie nadają się do pokazywania, gdzie jesteś w hierarchii nawigacji i ułatwiają znajdowanie innych artykułów w strukturze. Bułkę tartą można dodać do Divi za pomocą wtyczki o nazwie Divi Breadcrumbs Module.

Divi Breadcrumbs Module to wtyczka innej firmy od CodeCrater, która tworzy okruszki chleba oparte na lokalizacji. Innymi słowy, pokazuje hierarchię kategorii aktualnie czytanej strony. Zawiera również linki do każdego elementu w hierarchii, dzięki czemu możesz łatwo zobaczyć najnowsze posty dla każdej kategorii. Bułka tarta jest wysoce konfigurowalna.

Za pomocą modułu bułki tartej możesz umieszczać bułkę tartą na poszczególnych stronach i postach korzystających z Divi Builder. Działa również z wtyczką Extra i Divi Builder. W tym wyróżnieniu wtyczki przyjrzymy się wtyczce zarówno w Divi, jak i Extra i zobaczymy, jak można ją dostosować.

Dlaczego warto używać bułki tartej?

Bułka tarta pozostawia ślad, który pokazuje hierarchię kategorii i jest świetnym sposobem na poprawę nawigacji. Nie zajmują dużo miejsca i mogą zmniejszyć i uprościć liczbę czynności, które użytkownik musi wykonać, aby poruszać się po treści. Jest to szczególnie ważne, jeśli masz dużo osadzonych kategorii.

Divi Breadcrumbs Module poprawia SEO, dostarczając Google informacji o hierarchii Twojej witryny. Oznacza to, że powinieneś wybrać słowa kluczowe dla swoich kategorii, dla których chcesz się uszeregować. Zmusza to również projektantów do używania łatwiejszych do zrozumienia nazw kategorii.

Bułka tarta poprawia zarówno UX, jak i UI. Nie powinny zastępować standardowej nawigacji w menu, ale mogą wzbudzać zainteresowanie i dłużej zatrzymywać użytkowników w Twojej witrynie.

Moduł Divi bułki tartej

Prześlij i aktywuj wtyczkę jak zwykle. Moduł pojawi się w jaskrawoczerwonym kolorze o nazwie Hollywood Cerise. Wiele wtyczek do bułki tartej wymaga Yoast, ponieważ pobierają bułkę tartą z wtyczki Yoast, ale moduł Divi Breadcrumbs nie wymaga Yoast. Zamiast tego tworzy własne okruszki chleba. Więc nie są wymagane żadne inne wtyczki.

Ustawienia treści obejmują ukrywanie menu nawigacyjnego, dodawanie własnego tekstu nawigacyjnego, wybieranie ikony separatora (z 12 opcji), ukrywanie bieżącej strony, ustawienia tła i etykietę administratora. Ustawienia projektu obejmują styl ikon, tekstu i łączy oraz standardowe opcje odstępów.

Przykłady modułów Divi Breadcrumb

Jest to podstawowy układ artykułu z modułem tytułu posta z obrazem, modułem breadcrumbs i modułem tekstowym artykułów. Pozostawiłem domyślne ustawienia bułki tartej.

Tak wygląda moduł z ustawieniami domyślnymi. Linki do domu i ogrodzenia są niebieskie, aby pokazać, że można je kliknąć. Bułka tarta może być umieszczona po lewej stronie, pośrodku lub po prawej stronie.

W tym przykładzie umieściłem bułkę tartą na środku i dodałem gradientowe tło oraz zwiększyłem rozmiary czcionek zarówno w tytule artykułu (14 punktów), jak i linkach (12 punktów). Tekst jest biały. Ponieważ są drukowane na gradiencie, zrobiłem je w tym samym kolorze. Zmieniłem też separator linii. W zwykłym poście nie zwracałbym uwagi na bułkę tartą z gradientowym tłem, ale to pokazuje, co można z tym zrobić.

Dodawanie bułki tartej w menu o pełnej szerokości

Najlepszym miejscem na dodanie bułki tartej jest u góry strony. W tym przykładzie utworzyłem post za pomocą menu o pełnej szerokości i ustawiłem dopełnienie i marginesy na 0 zarówno dla sekcji pełnej szerokości, jak i sekcji standardowej. Osadziłem kategorie, aby pokazać hierarchię.

Zmieniłem kolory czcionki w bułce tartej, aby pasowały do ​​menu o pełnej szerokości, ale następnie zmiękczyłem je, aby się nie wyróżniały. Zmieniłem separator na strzałkę i usunąłem Home oraz bieżącą stronę z nawigacji w menu nawigacyjnym.

Zwróć uwagę, że nawigacja ma taką samą osadzoną strukturę, jak kategorie na obrazku powyżej. Sam artykuł również zawiera te kategorie, ale nie ma struktury hierarchicznej. Można je usunąć z tytułu, jeśli nie chcesz wielokrotnie wyświetlać tych samych kategorii.

W tym przykładzie umieściłem kolor tła w wierszu, zrobiłem go na pełną szerokość, zmieniłem kolor czcionki, aby nie przytłaczał menu i dodałem 1 piksel do odstępu między literami. Małe zmiany mogą mieć duże znaczenie.

Są to te same ustawienia, które wykorzystują tło w module bułka tarta zamiast wiersza. Dodałem wyściółkę, aby zmniejszyć szerokość. Podoba mi się, że tworzy mały element, który wygląda na osobny, ale jest dołączony do menu nad nim.

Stylizacja separatora

Separator posiada również cechy stylizacyjne. Zmień styl, rozmiar, kolor, odstępy i wysokość czcionki. Pomiędzy opcjami separatorów a funkcjami stylizacji możesz łatwo dopasować separatory do brandingu Twojej witryny.

W tym przykładzie użyto domyślnej czcionki w kolorze fioletowym i rozmiaru czcionki 20 dla separatorów.

Oto ten sam separator z czcionką Georgia jako separatora. Wystarczy zmienić czcionkę separatora, aby nadać mu nowy wygląd.

Oto ten sam separator używający czcionki Black Ops One. Jest odważniejszy i bardziej się wyróżnia.

To jest czcionka Droid Serif w 20 punktach z odstępem między wierszami 4 piksele. Zrobiłem czcionkę na ciemnoczerwoną.

Nawet kropki zmieniają kształt wraz z wyborem czcionki. Ten to Passion One w 24. punkcie. Warto poświęcić trochę czasu na eksperymentowanie z czcionkami, kolorami i rozmiarami, aby stworzyć coś wyjątkowego. Jest to łatwe dzięki standardowym elementom sterującym stylizacją.

Korzystanie z modułu Divi bułki tartej z dodatkiem

Moduł Divi Breadcrumbs współpracuje z Extra i wtyczką Divi Builder. Oto spojrzenie na Extra z bułką tartą pod obrazem po prawej stronie. Dołączyłem nazwę posta, ponieważ bułka tarta jest tak daleko od tytułu u góry ekranu. Wykorzystuje separator prętów.

Najlepiej byłoby, gdyby bułka tarta znajdowała się na górze strony. W moim układzie strony moduł bułki tartej znajduje się na górze. Powodem, dla którego pokazuje się pod obrazem, jest to, że zezwalam Extra na wyświetlanie polecanego obrazu.

W tym przykładzie umieściłem obraz w układzie i ustawiłem sekcję tak, aby miała 0 górnego wypełnienia. Usunąłem bieżący post i zrobiłem separator na czerwono.

Licencja, aktualizacje, wsparcie

Wtyczkę można zainstalować na nieograniczonej liczbie stron internetowych dla Ciebie i Twoich klientów. Aktualizacje są na całe życie. Obejmuje sześć miesięcy wsparcia.

• Kliknij tutaj, aby kupić: moduł Divi bułki tartej

Końcowe przemyślenia

Bułka tarta to jedna z tych małych rzeczy, które zauważasz, gdy ich brakuje. Jeśli są prawidłowo zaprojektowane, będą tam, kiedy użytkownik ich potrzebuje, i nie przeszkadzają, gdy tego nie potrzebują. Moduł Divi Breadcrumbs to świetny sposób na dodawanie ich do stron i postów Divi i można je łatwo dopasować do marki witryny. To proste i intuicyjne.

Jeśli chcesz dodać bułkę tartą do swoich układów Divi, moduł Divi Breadcrumbs może być potrzebną wtyczką.

Chcielibyśmy usłyszeć od Ciebie! Czy wypróbowałeś moduł Divi Breadcrumbs? Daj nam znać o swoim doświadczeniu w komentarzach poniżej.

Polecane zdjęcie za pośrednictwem Yevgenij_D / shutterstock.com