Jak dodać efekty animacji do sekcji/wierszy w Divi

W dzisiejszym samouczku Divi pokażemy, jak dodawać efekty animacji do sekcji i wierszy w Divi. Sam motyw Divi zapewnia odpowiednie efekty animacji, które pomagają wprowadzić dodatkowy poziom interakcji do Twojej witryny. Te efekty można łatwo przypisać do obrazu w Divi Builder w podkategorii Animacja na karcie Zaawansowane.

Jeśli jednak szukasz sposobu na dodanie tych efektów animacji do innych modułów, sekcji lub wierszy witryny, jest to również możliwe. W tym poście pokażemy Ci dokładnie, jak to zrobić. Oprócz pokazania, jak dodać wbudowane efekty animacji, pokażemy również, jak zintegrować wow.js i animate.css ze swoją witryną Divi.

Na końcu tego posta będziesz mógł dodać ładne efekty zarówno do swoich wierszy, jak i sekcji. Aby pomóc Ci zwizualizować proces, chcielibyśmy podzielić się następującym przykładem (który pokażemy, jak osiągnąć na końcu tego postu):

Animacje Divi czy Wow.js i Animate.css?

Prawdopodobnie zastanawiasz się, w jakich przypadkach powinieneś rozważyć użycie animacji Divi, a w których wow.js i animate.css zrobiłyby to lepiej. Chociaż korzystanie z wbudowanej animacji Divi jest najłatwiejszym rozwiązaniem, jeśli nie chcesz tworzyć zaawansowanych efektów animacji, efekty wow.js i animate.css z pewnością przyniosą również doskonałą wartość dodaną Twojej witrynie.

Kiedy używać animacji Divi

W Divi dostępnych jest pięć efektów animacji, których możesz użyć:

• Zanikanie
• Dolny slajd
• Lewa wsuwana
• Właściwa wsuwana
• Górna wsuwana

Chociaż jest tylko pięć możliwości, są one również najczęściej używane. Są proste i na temat. Jeśli chcesz nadać swojej witrynie miły dodatkowy efekt, bez wkładania zbyt dużego wysiłku, efekty animacji Divi są dobrym rozwiązaniem. Każdy z tych efektów jest aktywowany od momentu przewinięcia i ma widok na moduł, wiersz lub sekcję, do której dodano efekt. W ten sposób odwiedzający nie przegapią efektów, które znajdują się na przykład na dole strony.

Aby zintegrować efekty animacji Divi, nie musisz umieszczać motywu podrzędnego na swojej stronie internetowej. Możesz łatwo dodać te efekty, nadal pracując nad motywem nadrzędnym.

Kiedy używać Wow.js i Animate.css

Integracja wow.js i animate.css ze swoją witryną to coś, co prawdopodobnie naprawdę Ci się spodoba ze względu na wiele dostępnych opcji. Istnieje 14 kategorii efektów animacji, które zawierają różne efekty odpowiednie dla tej kategorii. Do wyboru są następujące kategorie:

• Poszukiwacze uwagi
• Skaczące wejścia
• Odbijające się wyjścia
• Zanikające Wejścia
• Zanikające wyjścia
• Płetwy
• Prędkość światła
• Wejścia obrotowe
• Wyjścia obrotowe
• Wejścia przesuwne
• Wysuwane wyjścia
• Powiększenie wejść
• Wyjścia powiększenia
• Promocje

Możesz wyświetlić wszystkie dostępne efekty, klikając poniższy link. Te efekty animacji pojawiają się również podczas przewijania.

Jak dodać efekty animacji do sekcji/wierszy w Divi

Subskrybuj nasz kanał YouTube

Użyj wbudowanych efektów animacji

Pierwszą możliwością, którą pokażemy, są wbudowane efekty animacji. Pokażemy Ci, jak zastosować efekty zarówno do sekcji, jak i do wiersza. Otwórz stronę, na której chcesz wprowadzić zmiany.

W naszym przykładzie dodamy efekty animacji do pierwszej sekcji i wiersza naszej strony. Dodanie animacji dla przekroju lub wiersza jest w obu przypadkach takie samo. Kody klas CSS dla różnych efektów animacji są następujące:

• Klasa CSS zanikania : et-waypoint et_pb_animation_fade_in
• Dolna wsuwana klasa CSS: et-waypoint et_pb_animation_bottom
• Lewa wsuwana klasa CSS: et-waypoint et_pb_animation_left
• Prawy suwak: klasa CSS: et-waypoint et_pb_animation_right
• Najlepsza wsuwana klasa CSS: et-waypoint et_pb_animation_top

Dodaj efekt animacji do wiersza

Aby dodać animację do określonego wiersza, otwórz ustawienia tego wiersza i przejdź do zakładki Zaawansowane. Na karcie Zaawansowane umieść klasę CSS efektu animacji w polu Klasa CSS. W tym przypadku pokażemy, jak dodać animację pojawiania się.

Dodaj efekt animacji do sekcji

Ta sama metoda dodawania efektu animacji do wiersza dotyczy również sekcji. Przejdź do zakładki Zaawansowane i umieść wybraną klasę CSS efektu animacji w polu Klasa CSS. W tym przykładzie pokażemy, jak dodać górny efekt animacji wsuwania.

Wynik

Po dodaniu efektów do sekcji i wiersza zobaczysz następujący wynik:

Dodaj Wow.js i Animate.css do swojego motywu potomnego

W następnej części pokażemy, jak dodać wow.js i animate.css do swojej witryny WordPress i jak z nich korzystać w całym motywie Divi.

Przede wszystkim chciałbym podziękować Jeremy'emu Cooksonowi za ten post na temat integracji wow.js i animate.css z WordPress. W tej części wpisu pokażemy dokładnie, jak przeprowadzić integrację dla witryny WordPress zbudowanej z motywem Divi.

Aby dodać wow.js i animate.css do swojej strony internetowej, musisz użyć motywu podrzędnego w swojej witrynie. Jeśli zastanawiasz się, jak stworzyć motyw potomny, sprawdź ten post. Po utworzeniu głównych plików motywu potomnego musisz dodać dwa inne pliki, aby uzupełnić motyw potomny efektami animacji.

Pobierz pliki i dodaj je do motywu dziecka

Trzymaj motyw podrzędny w zasięgu ręki i w międzyczasie pobierz następujące dwa pliki, klikając następujące dwa łącza:

• animacja.min.css
• wow.min.js

Po pobraniu dwóch plików utwórz podfoldery w motywie podrzędnym. Nazwij jeden z nich CSS, a drugi JS. Następnie umieść animate.min.css w folderze CSS, a wow.min.js w folderze JS.

Prześlij motyw potomny

Następną rzeczą, którą musisz zrobić, to przesłać i aktywować motyw potomny, do którego właśnie dodałeś pliki wow.js i animate.css. Przejdź do pulpitu WordPress > Wygląd > Motywy > i kliknij „Dodaj nowy” u góry strony.

Dodaj kod PHP do pliku Functions.php

Po przesłaniu motywu potomnego dodaj następujące wiersze kodu PHP do pliku functions.php motywu potomnego:

//* Umieść w kolejce Animate.CSS i WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
funkcja sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, true );
}
//* Umieszczaj w kolejce skrypt do aktywacji WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() { add_action( 'print_footer_scripts', 'wow_init' );}
//* Dodaj JavaScript przed </body>function wow_init() { ?>
<script type=”text/javascript”>
nowy WOW().init(); </script><?php }

Dodaj animacje do wierszy i sekcji

System dodawania efektów wow.js i animate.css do wierszy i sekcji jest taki sam, jak w przypadku efektów animacji Divi. Musisz otworzyć ustawienia wiersza lub sekcji, do której chcesz dodać efekt animacji. Następnie możesz umieścić klasę CSS przypisaną do animacji w polu Klasa CSS sekcji lub wiersza.

Dodaj animację do wiersza

W przykładzie, który pokażemy z wierszem, używamy efektu fadeInRight, który znaleźliśmy na liście efektów animacji. Przejdź do zakładki Zaawansowane w ustawieniach wiersza i dodaj „wow fadeInRight” do pola CSS Class. Za każdym razem, gdy chcesz dodać efekt do części swojej witryny, upewnij się, że przed efektem, którego używasz, wstawiasz „wow”.

Wynik

Po dodaniu klasy CSS i podglądzie strony, nad którą pracujesz, powinieneś osiągnąć następujący wynik:

Dodaj animację do sekcji

Ta sama metoda dotyczy dodawania efektu animacji do sekcji. Przejdź do zakładki Zaawansowane i dodaj klasę CSS „wow bounceInDown” do pola Klasy CSS swojej sekcji.

Wynik

Jeśli poprawnie wykonałeś wszystkie kroki, powinieneś osiągnąć następujący wynik:

Zaawansowane opcje

Jeśli chcesz dodać dodatkowe specyfikacje do swojej animacji, możesz to również zrobić. Możesz na przykład dodać czas opóźnienia do jednego z efektów animacji. Może się to przydać, gdy łączysz animację sekcji z animacją wiersza w tej samej sekcji. W ten sposób upewnisz się, że efekty animacji nie nakładają się na siebie.

Aby pokazać, jak dodać ten czas opóźnienia, połączymy dwa efekty, których użyliśmy w poprzedniej części tego postu. Jeden efekt animacji jest przypisany do sekcji, a drugi do rzędu. Aby mieć pewność, że efekt animacji wiersza nie zostanie utracony, dodamy do niego 2 sekundy opóźnienia.

Otwórz ustawienia wiersza i wróć do zakładki Zaawansowane. W polu Klasa CSS dodaj kolejną klasę o nazwie „opóźnienie”. Ta klasa jeszcze nie istnieje, ale zamierzamy ją dodać w następnym kroku.

Teraz dodaj klasę opóźnienia CSS do ustawień strony, nad którą pracujesz, klikając następujący przycisk:

Następnie dodaj klasę CSS z liniami kodu CSS do pola Custom CSS. Jeśli chcesz dodać czas opóźnienia wynoszący 2 sekundy, tak jak to zrobimy w tym przykładzie, będziesz potrzebować następujących linii kodu CSS:

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Wynik

Po dodaniu czasu opóźnienia wynik powinien wyglądać tak:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak dodać efekty animacji do swojej witryny Divi. Daliśmy Ci dwie możliwości. Pierwsza pokazuje, jak korzystać ze standardowych efektów animacji dostarczanych przez Divi. Druga możliwość pozwala zintegrować wow.js i animate.css. Korzystanie z efektów animacji w witrynie może pomóc w podkreśleniu treści, które chcesz udostępnić odwiedzającym. Poza tym wygląda po prostu świetnie. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie Stocker top / shutterstock.com