Podświetlenie wtyczki Divi: Przybornik Divi

Divi Toolbox to wtyczka innej firmy, która dodaje wiele nowych efektów do Divi, które normalnie wymagałyby CSS, JavaScript, PHP lub wielu pojedynczych wtyczek. Efekty są łatwe w użyciu i dostosowywaniu oraz dodają Twojej witrynie Divi dodatkowego blasku, aby wyróżnić się z tłumu.

Efekty obejmują zmiany w całej witrynie, nowe menu mobilne, tła cząstek, stopki, widżety, stylizacje, animacje, nagłówki, nawigację, nowe układy blogów, układy Divi w nowych lokalizacjach, dostosowywanie ekranu logowania, wyskakujące okienka i wiele więcej. Wiele funkcji można stylizować za pomocą nowych dodatków do dostosowywania motywów. Divi Toolbox nie działa z dodatkiem Extra lub wtyczką Divi Builder.

Ustawienia ogólne Przybornika Divi

Ekran opcji Przybornika Divi zostanie dodany do menu pulpitu nawigacyjnego Divi. Ustawienia są tutaj włączone, ale dostosowania są wprowadzane w konfiguratorze.

Ustawienia ogólne obejmują styl nagłówków globalnych, dostosowywanie strony logowania, ukrywanie projektów, zezwalanie na przesyłanie plików SVG, niestandardowy pasek przewijania przeglądarki, ustawienia strony 404 (wybierz układ i ukryj nagłówek i stopkę) oraz ustawienia ikon społecznościowych (włącz stylizację, otwórz w nową kartę i dodaj więcej ikon).

Dodanie większej liczby ikon społecznościowych otwiera pole, w którym można wpisać adres URL 9 kolejnych sieci społecznościowych.

Oto karta Ogólne w konfiguratorze, w której mogę dostosować włączone ustawienia. Ustawienia obejmują nagłówki i czcionki, pasek przewijania przeglądarki oraz ekran logowania. W tym przykładzie dokonałem kilku zmian w h1 i tekście głównym oraz dodałem stylizację do paska przewijania. Dodałem też więcej ikon społecznościowych.

Aby wyświetlić ekran logowania, musisz wprowadzić zmiany, a następnie wylogować się lub wyświetlić ekran w innej przeglądarce.

Oto mój ekran logowania po dodaniu obrazu tła, logo oraz zmianie rozmiaru i kolorów pól i tekstu. Trzeba trochę poprawić, ponieważ nie widzisz ekranu podczas wprowadzania zmian.

Ustawienia nagłówka Divi Toolbox

Ustawienia nagłówka dodają stylizację do menu, włącz niestandardowe menu rozwijane, dodaj przycisk menu CTA, zmień logo w stałym menu, włącz nakładające się logo i dodaj układ Divi przed nawigacją na stronie głównej oraz układ przed i po nawigacja na innych stronach.

Przycisk menu CTA pozwala zastosować CTA do pierwszego lub ostatniego elementu menu lub zastosować niestandardową klasę. Zawiera CSS i instrukcje, gdzie go dodać.

Oto dostosowywanie nagłówka. Dodałem układ nad menu (w tym przykładzie jest to tylko moduł tekstowy, ale możesz dodać cały układ, jeśli chcesz). Nakładające się logo ma kwadratowe pole z efektami cienia. Zmieniłem rozmiar logo z 200 na 140 i przeniosłem ikony społecznościowe do menu głównego. Najeżdżam na pozycję menu Usługi, aby zobaczyć efekt CSS.

Ustawienia stopki przybornika Divi

Ustawienia stopki obejmują przyklejoną stopkę, odsłanianie stopki, dostosowywanie menu i widżetów, dostosowywanie przycisku od tyłu do góry (który dodaje opcję niestandardowego łącza do przycisku) oraz dodawanie układów przed i po stopce.

W tym przykładzie zmieniłem czcionki nagłówka i menu na wersaliki i zwiększyłem odstępy. Dostosowałem również kolory najechania kursorem i dodałem ikonę obok tekstu po najechaniu. Dodałem układ po układzie stopki. Ten używa odsłoniętej stopki (dlatego tekst znajduje się za modułem tekstowym nad nim).

Stylizowałem przycisk z powrotem na górę, aby wyświetlał tekst. Ma efekt cienia i dostosowałem jego lokalizację. Kolory zostawiłem domyślnie. Wyśrodkowałem dolny tekst i ikony społecznościowe. Do efektu najechania wybrałem Grow (obejmuje on również kurczenie się, przesuwanie w górę, przesuwanie w dół, chybotanie, bicie serca, jello i puls). Najeżdżam na ikonę Facebooka, żeby zobaczyć efekt.

Ustawienia urządzenia mobilnego Divi Toolbox

Ustawienia mobilne zawierają pole do wprowadzenia punktu przerwania menu mobilnego (dokładną szerokość ekranu, gdy menu zmienia się z pulpitu na mobilny), niestandardowe style, zmianę logo, wybór efektu kliknięcia ikony hamburgera, zwinięcie zagnieżdżonego podmenu i włączenie kilka klas CSS. Klasy CSS pozwalają odwrócić kolumny i wyśrodkować tekst, moduły i przyciski.

Oto spojrzenie na stronę w Google Chrome z wybraną opcją Responsive. Gdy tylko wziąłem rozmiar ekranu mniejszy niż 980 pikseli, zmienił się on na wybraną przeze mnie ikonę mobilną i dodałem menu hamburgera z wybraną przeze mnie animacją.

Na tym ekranie stylizuję kolor tła menu mobilnego, kolor tła po najechaniu kursorem i menu hamburgera. Zmieniłem tekst elementów menu głównego na wersaliki i pozostawiłem standard tekstu CTA. Zmieniłem również tło elementu menu CTA. Możesz także dostosować menu i rozmiar ikon.

Ustawienia bloga Divi Toolbox

Ustawienia bloga pozwalają dostosować pasek boczny i widżety, meta postu, strony archiwum i kategorii, wybrać układ (z 6 opcji), ukryć pasek boczny archiwów i dostosować tekst przycisku Czytaj więcej.

W przypadku pojedynczych postów możesz wybrać układ paska bocznego, ukryć tytuł posta, dodać pole autora, dodać poprzednie i następne linki, dodać powiązane posty i dostosować formularz komentarzy. Możesz także dodać niestandardowe układy po nawigacji do pojedynczych postów, archiwów, kategorii, stron autorów i stron wyników wyszukiwania.

Na stronie bloga dodałem efekt cienia do paska bocznego, zmieniłem czcionki i ich stylizację, stylizowałem pole wyszukiwania i zwiększyłem rozmiar obramowania. Używa naprzemiennego układu i dostosowałem tekst przycisku Czytaj więcej.

Ten przykład to układ 6. Ponownie dostosowałem kolory czcionek meta i dodałem kolor najechania. Dostosowałem również tło przycisku Czytaj więcej.

Poszczególne wpisy na blogu pozwalają dostosować każdy z elementów dodanych w ustawieniach bloga. Na tym ekranie dostosowuję powiązane posty, następne i poprzednie linki oraz pole autora. Masz kontrolę nad całym tekstem, kolorami, cieniami itp.

W tym przykładzie dostosowuję formularz komentarzy. Masz kontrolę nad kolorami pola (zarówno fokusowe, jak i nieostre), obramowaniem, tekstem, kolorami, przyciskiem itp. Zmieniłem kolor tła przycisku, kolor fokusa pola, dodałem obramowanie do pola i zmieniłem promień.

Ustawienia modułów Divi Toolbox

Karta Moduły zawiera ustawienia umożliwiające dodawanie efektu najechania myszą, dodawanie opcji „smukłych wiadomości e-mail” (zapewnia CSS dla trzech różnych opcji), przycisków pomocniczych (co dodaje nową warstwę dostosowywania) i wielu poprawek.

Ulepszenia obejmują animowaną ikonę trójkąta dla akordeonów i modułów przełączania, usunięcie poziomej dolnej krawędzi i wyściółki dla tabel cenowych, przesunięcie obrazu pionowego pod treścią w referencjach, ukrycie poziomych pasków przewijania oraz dodanie CSS do pionowego wyrównania kolumn i zmiany wysokości dowolnego elementu do 100% jego wysokości rzutni.

Oto spojrzenie na opcję zgody na smukłe e-maile. Umieszcza wszystkie pola w jednej linii. W tym przykładzie zastosowano również przycisk pomocniczy. Tylko przyciski, do których dodałem klasę CSS, otrzymają te zmiany. Korzystanie z klasy CSS oznacza, że ​​mam teraz dwa globalne style przycisków.

Ustawienia dodatków Divi Toolbox

Karta Dodatki zawiera preloadery, wyskakujące okienka, tło cząsteczek, efekt pochylenia 3D i przewijanie paralaksy dla modułów.

Do wyboru jest 12 preloaderów. Możesz je wyświetlać tylko na stronie głównej, jeśli chcesz, i wybierz ich typ przejścia i szybkość. Ekran wyboru pokazuje animacje modułów ładujących. Możesz je dalej dostosować w konfiguratorze motywów.

Wyzwalaj wyskakujące okienka za pomocą dowolnego linku z pozycji menu, przycisku, linku w tekście itp. Utwórz tyle, ile chcesz. Wybierz dowolny gotowy układ dla wyskakującego okienka. Dostosuj tło i przycisk zamykania w konfiguratorze.

To poruszające się cząstki. Masz pełną kontrolę nad kolorem, kształtem, liczbą cząsteczek, prędkością, rozmiarem, rozmiarem linii, przezroczystością i interaktywnością. Istnieją dwa identyfikatory CSS dla cząstek, dzięki czemu masz dwa różne projekty.

Oto spojrzenie na funkcję przechylania. Możesz dostosować nachylenie, perspektywę, skalę, prędkość i odblaski. Dodaj go do dowolnej sekcji, wiersza lub modułu.

Licencja Divi Toolbox

Do wyboru są dwie licencje:

• Licencja zwykła (do wykorzystania w jednym projekcie) – 49,00 €
• Licencja rozszerzona (do użytku w nieograniczonych projektach) – 169,00 €

Końcowe myśli

Jestem pod wrażeniem ilości funkcji i ustawień tej wtyczki. Szczególnie podoba mi się to, że dodaje powiązane posty, poprzednie i następne linki oraz pole autora do postów na blogu, które nie są tworzone za pomocą konstruktora Divi. Pasek przewijania jest również miłym akcentem.

Istnieje kilka ustawień, do których można uzyskać dostęp w modułach Divi, takich jak tekst nagłówka, ale zapewnia to więcej szczegółów dotyczących tych ustawień. Chciałbym zobaczyć kilka dodatkowych korekt (na przykład efekty cienia w polu komentarzy, więcej opcji logo, rozmieszczenie ikon mediów społecznościowych itp.).

Jeśli jesteś zainteresowany dodaniem mnóstwa nowych efektów do Divi w najprostszy możliwy sposób, warto zajrzeć do Divi Toolbox.

Chcemy usłyszeć od Ciebie. Czy próbowałeś Divi Toolbox? Daj nam znać o swoim doświadczeniu w komentarzach poniżej.

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