Jak tworzyć animowane kolory tła za pomocą Divi

Opcje animacji Divi mogą szybko zmienić już piękną stronę w angażującą. Do tej pory wszyscy przyzwyczailiśmy się do różnych animacji wbudowanych w różne elementy projektu oferowane przez Divi. Ale czy wiesz, że możesz wykorzystać te animacje do podkreślenia jednej konkretnej opcji projektu?

W tym samouczku skupimy się na tworzeniu animowanych kolorów tła. Aby osiągnąć pożądany rezultat, użyjemy modułu rozdzielającego jako koloru tła i umieścimy na nim moduł tekstowy. Mamy nadzieję, że ten samouczek zainspiruje Cię do dodania animowanych kolorów tła do nadchodzących projektów internetowych.

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Pobierz animowany układ kolorów tła ZA DARMO

Aby położyć swoje ręce na darmowym animowanym układzie kolorów tła, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Rozstaw

Pierwszą rzeczą, którą musisz zrobić, to dodać nową sekcję do strony, nad którą pracujesz. Otwórz ustawienia sekcji i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 5vw
• Dolna wyściółka: 17vw

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł rozdzielacza nr 1 do kolumny

Widoczność

Czas zacząć dodawać różne potrzebne nam moduły, zaczynając od modułu rozdzielającego. Ten moduł dzielnika będzie używany ze względu na kolor tła, rozmiar i animację. Upewnij się, że opcja „Pokaż dzielnik” jest wyłączona.

• Pokaż dzielnik: Nie

Kolor tła

Przejdź do ustawień tła i dodaj następujący kolor tła:

• Kolor tła: #212121

Rozstaw

Przejdź do ustawień odstępów i nadaj modułowi żądany kształt za pomocą jednostki wysokości rzutni.

• Górna wyściółka: 30vh
• Dolna wyściółka: 30vh

Animacja

Pozwalamy na animację koloru tła, dodając niestandardową animację z opóźnieniem animacji.

• Styl animacji: slajd
• Powtórzenie animacji: raz
• Kierunek animacji: w prawo
• Opóźnienie animacji: 1000 ms
• Intensywność animacji: 88%
• Początkowe krycie animacji: 100%

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość

Następnym modułem, którego potrzebujemy, jest moduł tekstowy. Dodaj wybrane przez siebie H2 i treść akapitu.

Ustawienia tekstu

Następnie przejdź do ustawień tekstowych i odpowiednio zmodyfikuj wartości:

• Czcionka tekstu: Didact Gothic
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1.1vw (komputer), 1.7vw (tablet), 2.5vw (telefon)
• Wysokość linii tekstu: 2,1 em
• Orientacja tekstu: wyjustuj

Domyślne ustawienia tekstu nagłówka 2

Następnie wprowadź kilka zmian w ustawieniach tekstu H2.

• Czcionka nagłówka 2: Abril Fatface
• Kolor tekstu nagłówka 2: #1c1c1c
• Rozmiar tekstu nagłówka 2: 3vw (komputer), 5vw (tablet), 7vw (telefon)
• Nagłówek 2 Wysokość linii: 1,8 em

Umieść kursor na nagłówku 2 Ustawienia tekstu

Zmieniamy też kolor tekstu po najechaniu myszą.

• Kolor tekstu nagłówka 2: #ffffff

Sklonuj oba moduły

Gdy skończysz dodawać i dostosowywać oba moduły, możesz je sklonować. W kolejnych krokach tego posta zmodyfikujemy wszystkie cztery moduły, aby utworzyć animację koloru tła po obu stronach. Dodamy również nakładanie się modułów tekstowych, aby wyglądało, że moduły rozdzielające i moduły tekstowe są tworzone w tym samym kontenerze.

Modyfikuj moduł dzielnika Duplikat

Zmień kolor tła

Otwórz zduplikowany moduł rozdzielacza i zmień kolor tła.

• Kolor tła: #0bbfa1

Zmień animację

Aby animacja tła była widoczna z drugiej strony, zmieniamy kierunek animacji. Dodamy również nieco większe opóźnienie animacji, aby osiągnąć pożądany efekt.

• Kierunek animacji: w lewo
• Opóźnienie animacji: 1500 ms

Modyfikuj moduł tekstowy Duplikat

Zmień zawartość

Kontynuuj, otwierając zduplikowany moduł tekstowy i zmieniając zawartość.

Zmień ustawienia tekstu nagłówka 2

Przejdź do zakładki projektu i zmień również ustawienia tekstu H2.

• Wyrównanie tekstu nagłówka 2: do prawej
• Kolor tekstu nagłówka 2: #0cc9ad

Pozycjonowanie dzielnika

Moduł rozdzielający nr 1

Aby umożliwić pojawienie się białej przestrzeni po prawej stronie pierwszego modułu dzielnika, dodamy trochę prawego marginesu za pomocą jednostki szerokości rzutni.

• Prawy margines: 20vw

Moduł rozdzielający nr 2

Otwórz również drugi moduł rozdzielający i pozwól na zajęcie tej samej przestrzeni, ale zamiast tego po lewej stronie strony.

• Górny margines: 2vw
• Lewy margines: 20vw

Dodaj nakładanie się

Moduł tekstowy nr 1

Teraz, gdy dostosowaliśmy wszystkie moduły w naszym wierszu, możemy zacząć tworzyć nakładanie się, zaczynając od pierwszego modułu tekstowego. Dodaj następujące niestandardowe wartości marginesów do ustawień odstępów modułu:

• Górny margines: -49vh
• Prawy margines: 20vw (komputer stacjonarny), 15vw (tablet), 10vw (telefon)

Moduł tekstowy nr 2

Użyj następujących niestandardowych wartości marginesów również dla zduplikowanego modułu tekstowego:

• Górny margines: -49vh
• Lewy margines: 20vw (komputer stacjonarny), 15vw (tablet), 10vw (telefon)

Wyjdź z programu Visual Builder, aby wyświetlić wynik

Po utworzeniu nakładek musisz wyjść z programu Visual Builder, aby wyświetlić wynik!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

Zawsze szukamy sposobów, które pomogą Ci przekraczać granice w projektowaniu stron internetowych i tworzyć piękne i wciągające strony internetowe. W tym poście twórczo połączyliśmy różne elementy projektu i nakładanie się, aby stworzyć animowane kolory tła. To świetny sposób na dodanie dodatkowego wymiaru do każdej strony, nad którą pracujesz, i sprawienie, by Twoja witryna idealnie pasowała do aktualnych trendów projektowych. Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.