Wyróżnienie wtyczki Divi: Ultimate Divi Builder Addons

Divi Builder Addons to wtyczka innej firmy, która dodaje do Divi Builder wiele skryptów jQuery używanych przez wysokiej klasy witryny. Po prostu przełącz żądane skrypty i dodaj klasy CSS do modułów Divi Builder. Jest łatwy w użyciu i zawiera wiele funkcji i animacji.

Menu dodatków Ultimate Divi Builder

Prześlij i aktywuj wtyczkę jak zwykle. Do menu pulpitu nawigacyjnego dodawany jest nowy element menu o nazwie Ultimate Divi Builder Addons. Kliknięcie tego otwiera ekran z wieloma funkcjami w lewym oknie. Kliknięcie dowolnego z nich powoduje wyświetlenie przełącznika i informacji w prawym oknie. Prawe okno zawiera również klasy CSS dla niektórych efektów i pokazuje, jak ich używać. Inne obejmują wiele przełączników, aby uzyskać więcej funkcji i opcji, takich jak kolory, rozmiary obrazów, czas trwania itp. Wszystkie są domyślnie wyłączone.

Funkcje, które są wyświetlane na fioletowo, są włączone, a te, które są wyszarzone, są wyłączone. W powyższym przykładzie funkcja zawiera inne opcje, a także klasę CSS. Wszystkie potrzebne informacje o tym, jak korzystać z danej funkcji, są wyświetlane w prawym oknie po jej kliknięciu.

Dodatki zawarte:

• Niestandardowy pasek przewijania
• DoSlide w poziomie
• Zniknij w widoku
• Odwracanie tekstu
• Ukryj nagłówek motywu Divi podczas przewijania w dół
• Przewijanie stron jQuery w pionie
• Przewijanie stron jQuery w poziomie
• jQuery Scrollflow
• jQuery ScrollFX
• jQuery ScrollTrigger
• Pole strony końcowej jQuery
• Ładowanie nagłówka podczas przewijania Efekt1
• Ładowanie nagłówka podczas przewijania Efekt2
• Ładowanie nagłówka podczas przewijania Efekt3
• Ładowanie nagłówka podczas przewijania Efekt4
• Animacja ujawniająca
• Czas trwania reakcji ScrollMagic
• PrzewińUjawnij
• StickyStack: efekt układania jQuery
• Przewijanie okien
• Super prosty rotator tekstu / pasek informacyjny
• Wow animacja

Przykłady dodatków Ultimate Divi Builder

Oto kilka przykładów funkcji używanych z układami Divi.

Niestandardowy pasek przewijania

Niestandardowy pasek przewijania umożliwia umieszczanie pasków przewijania w treści. Ma 8 różnych efektów. Wklej klasę CSS w polu Klasa CSS sekcji, wiersza lub modułu, w którym chcesz użyć efektu. W tym przypadku dodałem niestandardowy efekt paska przewijania do zawartości modułu tekstowego w układzie Esports.

Pasek przewijania pojawia się teraz po najechaniu kursorem, dzięki czemu mogę przewijać, aby zobaczyć więcej treści w tym samym miejscu. To jest efekt 1. Ma inny wygląd w aktywnej witrynie. Rozjaśniłem tło, żeby się wyróżniało.

To jest efekt 3. Dodaje strzałki na górze i na dole slajdu.

Efekt 5 zmienia uchwyt z linii na kropkę i zmienia styl strzałek.

Odwracanie tekstu

Odwracanie tekstu to efekt wpisywania tekstu, który tworzy tykającą animację wstępną. Ma 5 efektów. W tym przykładzie dodałem Odwracanie tekstu do układu Paralegal. Jest to pierwszy efekt wpisywania tekstu z przerzucaniem. Wpisuje jedną literę na raz. Istnieje kilka różnych klas, z których możesz korzystać. Każdy wpisuje się z inną prędkością.

jQuery ScrollFlow

jQuery Scroll Flow dodaje animacje przewijania do wierszy lub modułów. Posiada 5 animacji. Dodałem go do wiersza w układzie Paralegal, aby wpływał na wszystkie moduły razem. Możesz również dodać go tylko do jednego z modułów w rzędzie, aby wsunął się na miejsce, aby dopasować się do reszty zawartości, która już tam jest.

Gdy przewijam do wiersza, zaczyna się pokazywać zawartość. Jest mniejszy niż normalnie i ma wystarczająco niskie krycie, aby tło było widoczne.

Nieco większe przewijanie zwiększa rozmiar treści i krycie, dopóki nie zostanie ujawniona w pełnej szerokości i przezroczystości. Zmniejsza się ponownie, gdy przewijam z powrotem w górę. Ten pozostaje w tych samych lokalizacjach, ale ma kilka innych klas, dzięki czemu możesz przesuwać go z prawej, lewej strony lub przesuwać w górę lub w dół, dostosowując jego rozmiar i krycie.

jQuery ScrollFX

jQuery ScrollFX skaluje tekst i zmienia krycie tła. Do sekcji została dodana klasa scrollfx. Moduły w tej sekcji wyświetlają się normalnie po przewinięciu do nich i gdy są na ekranie.

Podczas przewijania obok nich zawartość sekcji zmniejsza się i zmniejsza się krycie.

Wyzwalacz przewijania jQuery

Wyzwalacz przewijania jQuery przesuwa moduł na przewijanie strony. Dodaj klasę wyzwalacza przewijania do sekcji. To jest układ Resortu. Obraz tła jest automatycznie przesuwany na bok po dodaniu klasy.

Cała zawartość, w tym obrazy, przyciski, tekst itp., wsuwa się na miejsce, gdy przechodzisz do tej sekcji.

A potem układa się, gdy wszystko jest na swoim miejscu.

Pole strony końcowej jQuery

jQuery End Page Box umieszcza pole, które pozostaje na dole ekranu. Jest tworzony przez dodanie kodu do modułu tekstowego na końcu sekcji.

Spowoduje to dodanie pola, które pojawi się u dołu ekranu i zmiany, aby pokazać inną zawartość określoną dla każdej sekcji.

Oto następna sekcja. Pudełko wysuwa się i wysuwa z różnych kierunków lub z różnymi animacjami dla każdej z sekcji.

Ładowanie nagłówka podczas przewijania

Wczytywanie nagłówka podczas przewijania dodaje pasek do menu, który pokazuje, ile strony widziałeś. Nie wymaga klasy CSS. Możesz dostosować kolor paska przewijania. Do wyboru są cztery style.

To jest efekt 1. Dodaje przewijaną linię u góry ekranu. Zwiększa się podczas przewijania, pokazując, jaką część strony odwiedził odwiedzający.

To jest efekt 2. Wyświetla znacznie szerszy pasek.

To jest efekt 3. Rośnie w pionie podczas przewijania, zajmując wysokość logo. Nie robi się bardzo duży, ale nadal pokazuje efekt przewijania.

Efekt 4 ma szerokość logo.

Objawiciel

Revealator dodaje animacje wyzwalane przewijaniem do sekcji, wierszy lub modułów. Ma blisko 40 opcji. Dodaję do notki w layoucie Piekarnia. Brakuje notki, dopóki pojemnik na nią nie będzie w pełni widoczny na ekranie.

Animuje się na ekranie zgodnie z wybraną klasą. Ten ma wiele opcji animacji, w tym zanikanie, obracanie w lewo, obracanie w prawo, przesuwanie w lewo, przesuwanie w prawo, przesuwanie w górę, przesuwanie w dół, powiększanie i pomniejszanie.

Przewiń Magic Sekcje Chusteczki

Scroll Magic Section Wipes tworzy animację, która podczas przewijania usuwa zawartość ekranu. Myślę, że to mój ulubiony ze wszystkich efektów. Został dodany do sekcji.

Gdy ta sekcja zostanie w pełni wyświetlona na ekranie, zawiesza się w miejscu, a następna sekcja przewija się nad nią. Możesz dodać to do dowolnej liczby sekcji, aby stworzyć ciekawą metodę przewijania dla całej strony. Jeśli chcesz, aby każda sekcja nakładała się na siebie, zainteresowała Cię funkcja StickyStack.

Ujawnij przewijanie

Scroll Reveal ujawnia moduły na scrollu. Wybierz spośród 17 różnych animacji. Możesz dodać go do sekcji, wierszy lub modułów. Sekcja na dole jest powiększana w kierunku czytnika podczas przewijania.

To jest efekt 1f. Wiersz obraca się na miejsce podczas przewijania do niego.

StickyStack: efekt układania jQuery

StickyStack: jQuery Stacking Effect układa panele w stosy, gdy dotrą do górnej części widocznego obszaru. Innymi słowy, każda sekcja zawiesza się na ekranie podczas przewijania, a następna sekcja przewija się, aby ją nałożyć. Rezultat wygląda niesamowicie na scrollu. To jest układ zarządzania ryzykiem.

Oto kolejna sekcja tej samej strony. Zachodzące na siebie części działają idealnie.

Super prosty rotator tekstu / pasek informacyjny

Super Simple Text Rotator / Ticker pozwala dodawać znaczniki do tekstu i obracać kilka słów. Posiada 5 stylów animacji. Ten obraca się między słowami Prosty i Konfigurowalny.

Tutaj jest obrócony, aby wyświetlić drugie słowo. Oba słowa pojawiają się i znikają.

Ultimate Divi Builder Dodatki Cena

Dodatki Ultimate Divi Builder to 59 USD do użytku na nieograniczonej liczbie stron internetowych i obejmują dożywotnie aktualizacje. Aktualizacje często dodają nowe funkcje. Możesz wypróbować demo za darmo, aby zobaczyć, czy Ci się podoba.

• Możesz kupić dodatki Ultimate Divi Builder z DiviBuilderAddons.com.

Końcowe myśli

Dodatki Ultimate Divi Builder mają wiele do zaoferowania i mogą zaoszczędzić dużo czasu na tworzeniu funkcji i animacji. Byłem pod wrażeniem liczby zawartych funkcji i łatwości ich użycia.

Niektóre są trudniejsze do pokazania bez wypełnienia tego artykułu dużymi GIF-ami. Na przykład Wow Animation ma 75 animacji do wyboru i możesz zmienić opóźnienie, czas trwania, odległość i liczbę powtórzeń.

Wtyczka wymaga wygodnego wklejania klasy CSS do sekcji, wiersza lub modułu. Na szczęście jest to łatwe i w dokumentacji Divi jest mnóstwo informacji o wklejaniu w klasach CSS.

Jeśli interesuje Cię łatwy sposób dodawania wielu funkcji i animacji do Divi, warto sprawdzić dodatki Ultimate Divi Builder.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś dodatki Ultimate Divi Builder? Daj nam znać, co o tym myślisz w komentarzach.

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