Jak tworzyć animowane nakładające się obramowania, aby wyróżnić zawartość za pomocą Divi

Szukasz wyjątkowego sposobu na wyeksponowanie określonej części swojej strony? Czytaj dalej! Dzisiaj pokażemy, jak tworzyć animowane nakładanie się ramek, aby wyróżnić zawartość na Twojej stronie. Utworzymy trzy różne animowane nakładające się obramowania na stronie docelowej pakietu App Developer Layout Pack, ale możesz użyć tej techniki dla dowolnego rodzaju tworzonej witryny. To na pewno pomoże Ci dodać dodatkowy wymiar do Twojej strony. Mamy nadzieję, że ten samouczek zainspiruje Cię również do stworzenia własnych alternatywnych animowanych nakładających się ramek.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki wszystkich trzech przykładów. Możesz spodziewać się podobnego wyniku również na mniejszych ekranach.

Przykład 1

Przykład #2

Przykład #3

Subskrybuj nasz kanał YouTube

Utwórz nową stronę za pomocą strony docelowej pakietu układów programisty aplikacji

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę za pomocą strony docelowej pakietu App Developer Layout Pack.

Sekcja bohaterów klonów

Nasze pierwsze dwa przykłady są tworzone w sekcji bohaterów. Jeśli chcesz odtworzyć oba przykłady, zaleca się sklonowanie sekcji bohatera, aby przejść do duplikatu i odtworzyć drugi przykład.

Odtwórz przykład nr 1

Dodaj nowy wiersz do sekcji bohatera

Struktura kolumny

Zacznijmy odtwarzać pierwszy przykład! Dodaj nowy wiersz w sekcji specjalności, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy

Pozostaw puste pole zawartości

Dodaj nowy moduł tekstowy do wiersza i upewnij się, że pole zawartości zostało puste. Używamy modułu do jego wbudowanych opcji projektowych, a nie do wyświetlania pisanej treści.

Rozstaw

Przejdź do ustawień odstępów modułu tekstowego i nadaj modułowi kształt, dodając niestandardowe dopełnienie górne i dolne. Utwórz zakładkę między tym modułem a poprzednimi modułami, dodając również ujemny górny margines.

• Górny margines: -480px
• Górna wyściółka: 223px
• Dolna wyściółka: 223px

Granica

Następnie przejdź do ustawień obramowania modułu i dodaj wybraną obramowanie.

• Szerokość obramowania: 9px
• Kolor obramowania: #0ae2ff
• Styl obramowania: Początek

Cień Pudełka

Dodaj też cień do pudełka.

• Siła rozmycia cieni w pudełku: 1px
• Siła rozprzestrzeniania się cieni w pudełku: 15px
• Kolor cienia: rgba (10 226 255 0,59)

Animacja

I baw się z ustawieniami animacji, aby zawartość była widoczna.

• Styl animacji: Odwróć
• Powtórzenie animacji: raz
• Kierunek animacji: w prawo
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 1500 ms
• Intensywność animacji: 500%

Odtwórz przykład nr 2

Dodaj nowy wiersz do zduplikowanej sekcji bohatera

Przejdźmy do drugiego przykładu! Dodaj nowy wiersz do zduplikowanej sekcji bohatera, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy nr 1

Pozostaw puste pole zawartości

Ponownie używamy pustego modułu tekstowego.

Rozstaw

Przejdź do ustawień odstępów i nadaj modułowi kształt, używając niestandardowego dopełnienia górnego i dolnego. Spraw, aby nakładał się na poprzednie moduły, dodając również ujemny górny margines.

• Górny margines: -480px
• Górna wyściółka: 223px
• Dolna wyściółka: 223px

Granica

Kontynuuj, dodając obramowanie do modułu tekstowego.

• Szerokość obramowania: 9px
• Kolor obramowania: #0ae2ff
• Styl obramowania: podwójny

Animacja

I pobaw się ustawieniami animacji, aby stworzyć efekt toczenia.

• Styl animacji: rolka
• Powtórzenie animacji: raz
• Kierunek animacji: Centrum
• Czas trwania animacji: 4500 ms
• Opóźnienie animacji: 1500 ms
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%

Klonuj moduł tekstowy

Gdy skończysz modyfikować pierwszy moduł tekstowy, sklonuj go.

Zmień odstępy

Otwórz ustawienia duplikatu i zmień wartość górnego marginesu w ustawieniach odstępów.

• Górny margines: -495px

Zmień ramkę

Zmodyfikuj również kolor obramowania.

• Kolor obramowania: #ededed

Zmień animację

I zmodyfikuj ustawienia animacji, aby osiągnąć efekt, który widziałeś na podglądzie tego posta.

• Powtórzenie animacji: pętla
• Czas trwania animacji: 5000 ms
• Opóźnienie animacji: 2000 ms

Odtwórz przykład nr 3

Zmień odstępy modułu obrazu w kolumnie 2

Przejdźmy do następnego i ostatniego przykładu! Przejdź do sekcji procesu na stronie i dodaj górne wypełnienie do modułu obrazu zawierającego dużą ilustrację pośrodku.

• Górny margines: 70px (komputer), 0px (tablet i telefon)

Dodaj kolor tła do istniejących modułów tekstowych

Kontynuuj, dodając białe tło do każdego z modułów tekstowych w pierwszej i trzeciej kolumnie.

• Kolor tła: #ffffff

Dodaj moduł tekstowy do kolumny 1

Pozostaw puste pole zawartości

Możemy teraz zacząć dodawać pierwsze animowane nakładanie się obramowania! Dodaj nowy moduł tekstowy do pierwszej kolumny (patrz ekran drukowania) i upewnij się, że pole zawartości zostało puste.

Rozstaw

Przejdź do ustawień odstępów modułu tekstowego i utwórz kształt i nakładanie się, używając niestandardowych wartości marginesów i dopełnienia.

• Górny margines: -230px
• Lewy margines: 80px
• Prawy margines: 100px
• Górna wyściółka: 120px
• Dolna wyściółka: 120px

Granica

Następnie dodaj obramowanie.

• Szerokość obramowania: 13px
• Kolor obramowania: #bcf5f3
• Styl obramowania: podwójny

Animacja

Kontynuuj, dodając wybraną animację, która pomoże Ci wyróżnić udostępniane treści.

• Styl animacji: składanie
• Powtórzenie animacji: raz
• Kierunek animacji: w prawo
• Intensywność animacji: 100%

Indeks Z

Aby upewnić się, że obramowania pojawiają się pod treścią, użyjemy ujemnej wartości dla indeksu Z modułu tekstowego zawierającego ustawienia obramowania.

• Indeks Z: -1

Klonuj moduł tekstowy i umieść na końcu kolumny 1

Po zakończeniu tworzenia i modyfikowania modułu tekstowego sklonuj go. Umieść duplikat na końcu pierwszej kolumny.

Zmień ramkę

Zmień kolor obramowania.

• Kolor obramowania: #ffc0ec

Zmień animację

I dodaj również opóźnienie animacji.

• Opóźnienie animacji: 1000 ms

Dodaj moduł tekstowy do kolumny 3

Pozostaw puste pole zawartości

Kontynuuj, dodając moduł tekstowy do trzeciej kolumny (patrz ekran drukowania) i upewnij się, że pole zawartości zostało puste.

Rozstaw

Przejdź do ustawień odstępów i utwórz kształt oraz nakładanie się, używając niestandardowych wartości marginesów i dopełnienia.

• Górny margines: -230px
• Lewy margines: 100px
• Prawy margines: -80px
• Górna wyściółka: 120px
• Dolna wyściółka: 120px

Granica

Następnie dodaj wybraną ramkę.

• Szerokość obramowania: 13px
• Kolor obramowania: #7479ff
• Styl obramowania: podwójny

Animacja

Wraz z animacją, która zawiera opóźnienie animacji większe niż te, które zostały podane w dwóch poprzednich modułach tekstowych.

• Styl animacji: składanie
• Powtórzenie animacji: raz
• Kierunek animacji: w lewo
• Opóźnienie animacji: 2000 ms
• Intensywność animacji: 100%

Indeks Z

Upewnij się, że moduł pojawia się pod treścią, używając ujemnego indeksu Z.

• Indeks Z: -1

Klonuj moduł tekstowy i umieść na końcu kolumny 3

Po zakończeniu dodawania i modyfikowania modułu tekstowego sklonuj go i umieść duplikat na końcu trzeciego wiersza.

Zmień ramkę

Zmień kolor obramowania duplikatu.

• Kolor obramowania: #b3d1ff

Zmień animację

Dodaj dodatkowe opóźnienie animacji i gotowe!

• Opóźnienie animacji: 3000 ms

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi wszystkich trzech przykładów, które odtworzyliśmy w tym samouczku.

Przykład 1

Przykład #2

Przykład #3

Końcowe przemyślenia

W tym poście pokazaliśmy, jak umieścić swoje treści w centrum uwagi za pomocą animowanych nakładających się ramek. Jest to świetna technika przyciągania uwagi do określonej części strony i robienia tego w elegancki sposób. Możesz użyć tej techniki do każdego rodzaju witryny, którą tworzysz. Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!