Jak tworzyć nakładające się animacje z opóźnieniem za pomocą Divi

Opublikowany: 2019-04-12

Duża część sukcesu Twojej witryny zależy od tego, czy jesteś w stanie zaimponować odwiedzającym. Nie tylko z Twoimi produktami lub usługami, ale także ze sposobem, w jaki się komunikujesz i jak dobrze zaprojektowana jest Twoja strona internetowa. Bo nie oszukujmy się, strony internetowe to często pierwsze wrażenie. I podobnie jak w przypadku każdego innego rodzaju pierwszego wrażenia, chcesz, aby pozostawiło dobry posmak.

Teraz, jeśli szukasz wyjątkowego sposobu na umieszczenie niektórych treści w centrum uwagi, tworzenie subtelnych nakładających się animacji może być właśnie tym, czego szukasz. Te subtelne nakładające się animacje są dla odwiedzających czymś w rodzaju pokazu slajdów. Nie muszą niczego przewijać ani klikać, treść po prostu wyświetla się w elegancki sposób.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

nakładające się animacje

mobilny

nakładające się animacje

Zbliżać się

Zaczniemy od dodania wszystkich potrzebnych nam elementów projektu w kolejności pionowej, bez nakładania się
Ponieważ dodajemy wszystkie elementy projektu, dodamy również niestandardowe animacje z pewnym opóźnieniem animacji
Te opóźnienia animacji będą miały sens dopiero po przejściu ostatniej części samouczka, która koncentruje się na nakładaniu się
Ważną częścią tego samouczka jest używanie ukształtowanych modułów rozdzielających z tym samym kolorem tła co sekcja, aby zawartość wiersza "znikała" z opóźnieniem
Możesz zastosować tę technikę do dowolnego rodzaju projektu, nad którym pracujesz, gdy zrozumiesz różne kroki, które są niezbędne, aby podejście zadziałało

Zacznijmy tworzyć!

Dodaj nową sekcję

Kolor tła

Zacznij od utworzenia nowej strony lub otwarcia istniejącej i dodania do niej zwykłej sekcji. Otwórz ustawienia sekcji i dodaj tło.

Kolor tła: #f3f3ec

nakładające się animacje

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

nakładające się animacje

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu. Powodem, dla którego to robimy, jest pozbycie się wszystkich domyślnych odstępów między pikselami. W kolejnych krokach dodamy całą potrzebną nam przestrzeń za pomocą jednostki rzutni.

Stwórz ten wiersz o pełnej szerokości: Tak
Użyj niestandardowej szerokości rynny: Tak
Szerokość rynny: 1

nakładające się animacje

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Zacznijmy dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł tekstowy z zawartością H2. Pamiętaj, że ten moduł „zniknie” po kilku sekundach, więc chcesz, aby był krótki, trafny i łatwy do zapamiętania.

nakładające się animacje

Ustawienia tekstu H2

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H2.

Czcionka nagłówka 2: Poppins
Kolor tekstu nagłówka 2: #333333
Rozmiar tekstu nagłówka 2: 5vw

nakładające się animacje

Rozstaw

Stwórz żądaną przestrzeń, używając lewego i prawego dopełnienia w ustawieniach odstępów.

Lewa wyściółka: 15vw
Prawa wyściółka: 39vw

nakładające się animacje

Dodaj moduł dzielnika do kolumny

Widoczność

Przejdźmy do następnego modułu, którym jest moduł rozdzielający. Używamy tego modułu, aby moduł tekstowy „znikał”. Potrzebujemy do tego czterech rzeczy; kolor tła (który jest w tym samym kolorze co sekcja, więc nie możesz tego zauważyć), wystarczające wypełnienie (aby upewnić się, że możesz zakryć całą zawartość z poprzedniego modułu), nakładanie się w pionie (aby zakryć cały moduł obszar) oraz opóźnienie animacji (aby dać pierwszemu modułowi czas na zabłysnięcie przed przejęciem). Po dodaniu modułu dzielnika upewnij się, że wyłączyłeś opcję „Pokaż dzielnik”.

Pokaż dzielnik: Nie

nakładające się animacje