Podświetlenie wtyczki Divi – DotNav

Divi ma wbudowaną funkcję nawigacji o nazwie Dot Navigation, która umieszcza serię kropek po prawej stronie ekranu. Każda kropka reprezentuje sekcję tej strony. Kliknięcie kropek prowadzi do tej sekcji. Kropki są proste i pasują do większości projektów stron internetowych. A co, gdybyś chciał je wystylizować? Co więcej, co by było, gdybyś chciał pokazać etykietę lub animować je przy wczytywaniu? Być może zainteresuje Cię wtyczka o nazwie DotNav.

DotNav to wtyczka innej firmy z Divicio.us. DotNav udostępnia narzędzia do zmiany koloru, rozmiaru i kształtu kropek i tła, dodawania etykiet, wyłączania określonych kropek i kontrolowania animacji ładowania. Możesz ukryć DotNav według urządzenia. W tym wyróżnieniu wtyczki przyjrzymy się DotNav.

W tych przykładach używam układu dostarczanego z Divi o nazwie Funkcje produktu. Obrazy pochodzą z Unsplash.com. Najpierw włączmy Nawigację punktową Divi.

Włączanie nawigacji punktowej

Nawigację punktową można włączać lub wyłączać dla poszczególnych stron. Ustawienia znajdziesz w edytorze wizualnym strony, w prawym górnym rogu w obszarze Ustawienia strony z kropkami.

Nawigacja kropkowa pojawi się po prawej stronie strony. Kropki reprezentują sekcje. Kliknięcie kropki przeniesie Cię do tej sekcji. W tym przykładzie przeszedłem do drugiej sekcji i zapaliła się druga kropka.

Instalacja DotNav

Najpierw rozpakuj pobrany plik. W folderze będą trzy pliki. Prześlij i aktywuj plik divi-dotnav.

Ustawienia dostosowywania motywu DotNav

Ustawienia DotNav znajdują się w Konfiguratorze motywów. Obejmuje trzy obszary:

• Ustawienia główne
• Ustawienia kropki
• Ustawienia etykiet

Przyjrzyjmy się każdemu obszarowi.

Ustawienia ogólne DotNav

Ustawienia ogólne pozwalają ukryć DotNav według urządzenia, dostosować przesunięcie, obramowanie, dopełnienie, kolory i animację. Do wyboru jest 11 animacji, w tym poruszanie się z wybranego kierunku, zanikanie z wybranego kierunku lub obracanie się na osi x lub y.

Przykłady

Gdy dostosujesz sterowanie, zobaczysz zmiany w czasie rzeczywistym. W tym przykładzie ustawiłem prawe przesunięcie na 38 i dostosowałem szerokość obramowania, promień i dopełnienie, aby utworzyć zaokrągloną krawędź.

W tym przykładzie ustawiłem szerokość obramowania na 10 i promień obramowania na 30 ze wszystkich stron, a górne dopełnienie na 20, od prawej do 10, od dołu do 20 i od lewej do 9. Użyłem kolorów tła i obramowania z samej strony, dzięki czemu będzie się mieszać.

Ustawienia kropek DotNav

Ustawienia kropki pozwalają pokazać lub ukryć poszczególne sekcje (wymaga dodania CSS do sekcji), dostosować marginesy, promień obramowania, szerokość i kolor. Ustawienia kropki obejmują kolor, szerokość i wysokość oraz kolor, szerokość i wysokość wskaźnika.

Przykłady

W tym przykładzie ustawiłem promień obramowania kropki na 10 dookoła i dostosowałem szerokość kropki do 30. To tworzy interesujące poziome linie zamiast okrągłych kropek.

Ciekawe efekty można uzyskać dzięki dopasowaniu szerokości obramowania i wysokości kropki. Tutaj ustawiłem szerokość krawędzi kropki na 4 dla góry i 10 dla prawej.

Tutaj ustawiłem promień górnego lewego obramowania na 0, górny prawy na 98, a pozostałe na 10. Ustawiłem również szerokość obramowania kropki na 6 i dostosowałem zarówno kolor kropki, jak i aktywny kolor kropki.

Ten korzysta z domyślnych ustawień ogólnych i ma szerokość obramowania 1, szerokość i wysokość punktu 15 oraz aktywną szerokość i wysokość punktu 20. Kropki są ciemnoszare z czerwoną obwódką. Aktywna kropka jest biała z czerwoną obwódką.

Są to te same ustawienia kropki i dodają górną i dolną szerokość obramowania, promień i dopełnienie, aby utworzyć zaokrągloną krawędź.

Ustawienia etykiet DotNav

Ustawienia etykiet umożliwiają pokazywanie lub ukrywanie etykiet z kropkami, dostosowywanie czcionki, tła, szerokości, stosowanie stałej szerokości itp. Stała szerokość dodaje korekty dla zwykłej szerokości etykiety, aktywnej szerokości etykiety i wyrównania tekstu etykiety. Aby wyświetlić etykiety, sekcje muszą mieć identyfikator (który jest używany jako etykieta).

Dodaj etykietę do pola CSS ID na karcie Zaawansowane dla każdej sekcji.

Etykiety zostaną automatycznie wyświetlone. Etykiety można dostosować i możesz zrezygnować z wyświetlania określonych etykiet. Ten przykład pokazuje ustawienia domyślne.

W tym przypadku zmieniłem kolor tła i czcionki oraz wykonałem przesunięcie sekcji aktywnej i kolor łososiowy dla czcionki. Możesz dostosować odstępy między liniami w poziomie, ale w przypadku pionu musisz dostosować marginesy kropek w Ustawieniach kropek. Dla mnie był to jedyny taki zamęt dotyczący korekt.

Jeśli nie chcesz, aby wyświetlały się wszystkie etykiety, możesz ustawić opcję Tylko aktywna, Tylko aktywna lub Aktywna i unosząca się.

Dostosowałem ustawienia kropek, aby umieścić trochę miejsca między etykietami. Pozwoli mi to zwiększyć wysokość etykiet bez ich nakładania. W tym przypadku marginesy kropek są ustawione na 16 dla górnego i dolnego. Promień obramowania w prawym górnym i lewym dolnym rogu jest ustawiony na 72, a lewy górny i prawy dolny jest ustawiony na 22.

W ustawieniach etykiet dostosowałem dopełnienie do 10 ze wszystkich stron, ustawiłem aktywne przesunięcie w prawo na 45 i zwiększyłem rozmiar czcionki do 18. Etykiety wyróżniają się nieco bardziej.

Ukrywanie określonych kropek

Jeśli chcesz, możesz ukryć określone kropki. Dodaj klasę CSS do karty Ustawienia zaawansowane modułu sekcji. Kod CSS znajdziesz w ustawieniach kropki w konfiguratorze motywów.

W ustawieniach kropki pierwsze ustawienie to pole rozwijane. Domyślnie jest ustawiony na Pokaż. Wybierz Ukryj. Spowoduje to ukrycie wszystkich sekcji, do których dodano klasę CSS ukryj sekcję (klasa CSS znajduje się w notatce nad polem rozwijanym). Sekcja oznaczona etykietą WSZYSTKIE WŁAŚCIWE RZECZY nie znajduje się już w strukturze nawigacji punktowej.

Ten przykład pokazuje się tylko po najechaniu myszą. Kolor czcionki i aktywnej/nawisu kropki jest ustawiony na czerwony. Tło i obramowania są przezroczyste. Margines punktu jest ustawiony na 16 dla górnego i dolnego. Szerokość to 15, a wysokość 5, z aktywną kropką ustawioną na 20 i 8.

Ten używa stałej szerokości etykiet. Używam czarnego tła aktywnej etykiety z czerwoną czcionką i czerwonym obramowaniem dla lewej i prawej strony (ustawionej na 5). Promień obramowania jest ustawiony na 9, aby nadać mu niewielką krzywiznę. Wyśrodkowałem tekst w etykietach. Prawe przesunięcie to 6, aby etykiety wisiały na linii. Aktywny prawy offset to 20, aby zeskoczyć z linii.

Skróciłem również nazwy sekcji i ukryłem etykietę sekcji All The Right Things. Czcionki są kursywą.

W ustawieniach kropek ustawiłem szerokość na 6 i wysokość na 38. Aktywna kropka to 10 i 35. To sprawia, że ​​kropki wyglądają jak pionowa linia. Użyję tego przykładu do pokazania animacji.

Animacje DotNav

Animacje pokazują, jak pojawiają się kropki podczas wczytywania strony. Zawiera 11 animacji. Czas trwania animacji można regulować za pomocą suwaka. Oto kilka z nich.

Prawo w

Right In jest trudne do zauważenia, ale porusza się z prawej strony, jak się wydaje.

Dół w

Pojawia się Bottom In i przesuwa się w górę.

Zanikanie

Zanikanie pojawia się już na swoim miejscu.

Zanikanie w lewo

Zanikanie Lewo pojawia się, a następnie przesuwa się od lewej do prawej na miejsce.

Znikaj na górze

Fade In Top pojawia się, a następnie wykonuje duży ruch w dół.

Odwróć w X

Flip In X odwraca się od osi X i odbija się, gdy wchodzi na swoje miejsce.

Odwróć w Y

Flip In Y odwraca się od osi Y i wygląda jak drzwi.

Licencja i dokumentacja

Wtyczka może być używana z nieograniczoną liczbą stron internetowych dla Ciebie i Twoich klientów. Dokumentacja jest dołączona do pliku do pobrania. Odkryłem, że kontrolki są na tyle intuicyjne, że nie potrzebowałem dokumentacji, ale cieszę się, że jest ona dołączona na wszelki wypadek.

Końcowe przemyślenia

Uważam, że DotNav jest łatwy w użyciu. Zapewnia wiele dostosowań kropek i tła, a ja lubię dodawać etykiety. Sekcje unoszące się i aktywne wyróżniają się i można je dostosować osobno. Animacje są ciekawe, ale jest ich niewiele i animują się tylko przy wczytywaniu. Regulacja szerokości i wysokości etykiety na dwóch osobnych zakładkach (dostosuj wysokość kropki do wysokości etykiety) może początkowo być myląca, ale kiedy już to zrozumiałem, nie miałem problemów z wprowadzeniem zmian.

Podobnie jak wszystkie ustawienia w Konfiguratorze motywów, ustawienia DotNav dotyczą całej witryny. Musisz poeksperymentować z kolorami czcionek i tła, aby znaleźć kombinację pasującą do każdego tła w Twojej witrynie.

Jeśli jesteś zainteresowany dostosowaniem nawigacji punktowej Divi, DotNav Divicio.us może być wtyczką, której szukasz.

Chcemy usłyszeć od Ciebie. Czy używałeś DotNav dla Divi? Daj nam znać, co o tym myślisz w komentarzach.

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