Jak dodać animacje bloków tekstowych CSS do nagłówka za pomocą Divi

Twój nagłówek jest jedną z najważniejszych części Twojej strony głównej. Zwykle jest to pierwsza kopia, którą ludzie czytają, co robi na nich pierwsze wrażenie. Jak każde pierwsze wrażenie, chcesz, żeby było dobre. Teraz, jeśli szukasz kreatywnego sposobu na zaprezentowanie swojego nagłówka, spodoba ci się ten post. W tym samouczku pokażemy, jak dodać animacje bloku tekstu CSS do nagłówka, a także będziesz mógł bezpłatnie pobrać plik JSON układu!

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 układ animacji bloku tekstowego ZA DARMO

Aby położyć ręce na dowolnym układzie animacji blokowych tekstu, musisz najpierw pobrać go 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ć!

Dodaj sekcję #1

Tło gradientowe

Zacznij od dodania zwykłej sekcji do nowej strony lub strony, nad którą pracujesz. Otwórz ustawienia sekcji i zastosuj następujące tło gradientowe:

• Kolor 1: #ff0f2b
• Kolor 2: #c10b1a
• Typ gradientu: liniowy
• Kierunek gradientu: 63deg

Rozstaw

Przejdź do karty projektu sekcji i zastosuj następujące niestandardowe wartości górnego i dolnego wypełnienia na różnych rozmiarach ekranu:

• Górna wyściółka: 7vw (komputer), 20vw (tablet), 25vw (telefon)
• Dolna wyściółka: 7vw (komputer), 20vw (tablet), 25vw (telefon)

Granica

Dodaj również obramowanie do sekcji.

• Szerokość obramowania: 2vw (góra, lewo, prawo)
• Szerokość dolnej granicy: 0vw
• Kolor obramowania: #ffffff

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H1

Następnie dodaj moduł tekstowy z wybranym nagłówkiem H1.

Dodaj znaczniki Div do każdego słowa w nagłówku H1

Przełącz się na kartę tekstową kopii nagłówka i dodaj inny element div do każdego słowa w nagłówku. Identyfikator CSS musi być inny dla każdego słowa.

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

Ustawienia tekstu H1

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj ustawienia tekstu H1:

• Czcionka nagłówka: Work Sans
• Grubość czcionki nagłówka: średnia
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 4vw (komputer), 5vw (tablet), 6vw (telefon)
• Wysokość linii nagłówka: 1,4 em

Rozstaw

Następnie zmodyfikuj wartości marginesów na różnych rozmiarach ekranu.

• Lewy margines: 20vw (komputer stacjonarny i tablet), 15vw (telefon)
• Prawy margines: 35vw (komputer stacjonarny), 20vw (tablet), 15vw (telefon)

Dodaj moduł kodu do kolumny

Wstaw kod CSS

Aby animacja bloku tekstu została zastosowana do naszego nagłówka, potrzebujemy kodu CSS. Dodamy ten kod CSS do nowego modułu kodu.

<style>

.display-state {
display: inline !important;
}

#word-1 {
-webkit-animation: slide-right 0.5s linear 0.3s both;
	        animation: slide-right 0.5s linear 0.3s both;
}

#word-2 {
-webkit-animation: slide-right 0.5s linear 0.6s both;
	        animation: slide-right 0.5s linear 0.6s both;
}

#word-3 {
-webkit-animation: slide-right 0.5s linear 0.9s both;
	        animation: slide-right 0.5s linear 0.9s both;
}

#word-4 {
-webkit-animation: slide-right 0.5s linear 1.2s both;
	        animation: slide-right 0.5s linear 1.2s both;
}
#word-5 {
-webkit-animation: slide-right 0.5s linear 1.5s both;
	        animation: slide-right 0.5s linear 1.5s both;
}

@-webkit-keyframes slide-right {
0% {
background-color: #000;
opacity: 0.5;
color: transparent;
}

1% {
opacity: 1;
}
}

</style>

Rozstaw

Przejdź do zakładki projektowania modułu i usuń wszystkie domyślne wyściółki dolne.

• Margines dolny: 0px

Dodaj moduł przycisku do kolumny

Dodaj kopię

Następnym modułem, którego potrzebujemy, jest moduł przycisku. Wprowadź wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia przycisków:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 0px

• Czcionka przycisku: Work Sans

Rozstaw

Następnie przejdź do ustawień odstępów i zastosuj niestandardowe wartości marginesów i dopełnienia dla różnych rozmiarów ekranu.

• Górny margines: 3vw (komputer stacjonarny),
• Lewy margines: 20vw (komputer stacjonarny i tablet), 15vw (telefon)
• Górna wyściółka: 1.2vw (komputer stacjonarny), 2vw (tablet), 4vw (telefon)
• Dolna wyściółka: 1.2vw (komputer stacjonarny), 2vw (tablet), 4vw (telefon)
• Lewa wyściółka: 1.8vw (komputer stacjonarny), 3vw (tablet), 6vw (telefon)
• Prawa wyściółka: 1.8vw (komputer), 3vw (tablet), 6vw (telefon)

Animacja

Dostosuj również ustawienia animacji.

• Styl animacji: Odwróć
• Kierunek animacji: w dół
• Opóźnienie animacji: 2000 ms
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Dodaj sekcję #2

Kontynuuj, dodając nową zwykłą sekcję tuż pod poprzednią.

Rozstaw

Otwórz ustawienia sekcji i usuń domyślną górną wyściółkę.

• Górna wyściółka: 0px

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ść kontenera sekcji.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Następnie dodaj moduł tekstowy z wybraną zawartością opisu.

Kolor tła

Dodaj biały kolor tła.

• Kolor tła: #ffffff

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj ustawienia tekstu:

• Czcionka tekstu: Work Sans
• Kolor tekstu: #9b9b9b
• Rozmiar tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Wysokość linii tekstu: 2,6 em

Rozstaw

Dodaj również niestandardowe wartości odstępów dla różnych rozmiarów ekranu.

• Górny margines: -5vw (komputer), -20vw (tablet), -27vw (telefon)
• Lewy margines: 20vw (komputer stacjonarny), 13vw (tablet), 8vw (telefon)
• Prawy margines: 20vw (komputer stacjonarny), 13vw (tablet), 8vw (telefon)
• Górna wyściółka: 5vw (komputer stacjonarny), 7vw (tablet i telefon)
• Dolna wyściółka: 5vw (komputer stacjonarny), 7vw (tablet i telefon)
• Lewa wyściółka: 3vw (komputer), 5vw (tablet), 6vw (telefon)
• Prawa wyściółka: 3vw (komputer), 5vw (tablet), 6vw (telefon)

Cień Pudełka

I uzupełnij ustawienia modułu, stosując subtelny cień pudełkowy. Otóż ​​to!

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (0,0,0,0.1)

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak dodać animacje bloku tekstu CSS do nagłówka. Ważne jest, aby upewnić się, że nagłówek jest widoczny i czytelny od samego początku, dodanie animacji do nagłówka może z pewnością w tym pomóc! Udało Ci się również bezpłatnie pobrać plik JSON układu. Jeśli masz jakieś pytania lub sugestie, możesz zostawić 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.