Przejdź do głównej treści

Jak dodać animację bloku tekstowego do swoich tytułów w Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Twój tytuł jest jedną z najważniejszych części strony głównej. Zwykle to jest to, co widzisz jako pierwsze i dlatego determinuje pierwsze wrażenie. Jak każde inne pierwsze wrażenie, chcesz, żeby było dobre. Teraz, jeśli szukasz kreatywnego sposobu prezentacji swojego tytułu, spodoba ci się ten samouczek, ponieważ pokażemy, jak dodać animacje bloków tekstowych CSS do twojego tytułu, a także możesz pobrać plik JSON układu bezpłatnie!

badanie

Przed zanurzeniem się w samouczku, spójrzmy na wynik na różnych rozmiarach ekranu.

Zacznijmy projekt

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: # f0f2b
  • Kolor 2: # c10b1a
  • Rodzaj gradientu: liniowy
  • Kierunek gradientu: 63 stopni

rozstaw

Przejdź do karty Projektowanie sekcji i zastosuj następujące niestandardowe górne i dolne wartości wypełnienia dla różnych rozmiarów ekranu:

  • Górna wyściółka: 7vw (komputer stacjonarny), 20vw (tablet), 25vw (telefon)
  • Wyściółka u dołu: 7vw (biurko), 20vw (tablet), 25vw (telefon)

granica

Dodaj także granicę do sekcji.

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

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

zaklejania

Otwórz parametry linii i odpowiednio zmodyfikuj parametry wymiarowania:

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

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H1

Następnie dodaj moduł tekstowy z wybranym tytułem H1.

Dodaj tagi Div do każdego słowa w tytule H1

Przejdź do karty tekstowej w tytule i dodaj inny div do każdego słowa w tytule. Identyfikator CSS musi być inny dla każdego słowa.

<h1> <div id = ”word-1 ″ class =” display-state ”> Gotowy </div>
<div id = ”word-2 ″ class =” display-state ”> na </div>
<div id = "Word-3 ″ class =" display-state "> Kompilacja </div>
<div id = "word-4 ″ class =" display-state "> Piękne </div>
<div id = "word-5 ″ class =" display-state "> Strony internetowe? </div> </h1>

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Ustawienia tekstu H1

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj parametry tekstowe H1:

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

rozstaw

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

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

Dodaj moduł kodu do kolumny

Wstaw kod CSS

Aby animacja bloku tekstu miała zastosowanie do naszego tytułu, 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 karty projektu modułu i usuń wszystkie domyślne dolne wypełnienia.

  • Dolny margines: 0px

Dodaj moduł przycisku do kolumny

Dodaj kopię

Następny moduł, którego potrzebujemy, to moduł przycisku. Wpisz wybraną kopię.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Ustawienia przycisków

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj parametry przycisku:

  • Użyj niestandardowych stylów przycisku: Tak
  • Rozmiar tekstu przycisku: 1vw (komputer stacjonarny), 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 wypełnienia dla różnych rozmiarów ekranu.

  • Górny margines: 3vw (biuro),
  • Lewy margines: 20 vw (biurko i tablet), 15 vw (telefon)
  • Górna wyściółka: 1.2vw (komputer stacjonarny), 2vw (tablet), 4vw (telefon)
  • Wyściółka u dołu: 1.2vw (biurko), 2vw (tablet), 4vw (telefon)
  • Lewe wypełnienie: 1.8vw (komputer stacjonarny), 3vw (tablet), 6vw (telefon)
  • Prawa wyściółka: 1.8vw (biurko), 3vw (tablet), 6vw (telefon)

Animacja

Dostosuj także ustawienia animacji.

  • Styl animacji: Flip
  • Kierunek animacji: w dół
  • Opóźnienie animacji: 2000 ms
  • Intensywność animacji: 100%
  • Nieprzezroczystość początkowa animacji: 100%
  • Krzywa prędkości animacji: łatwość wprowadzania
  • Powtarzanie animacji: raz

Dodaj sekcję # 2

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

rozstaw

Otwórz ustawienia sekcji i usuń domyślne górne wypełnienie.

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

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza, korzystając z następującej struktury kolumn:

zaklejania

Bez dodawania kolejnych modułów otwórz parametry linii i pozwól linii zajmować całą szerokość kontenera sekcji.

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

Dodaj moduł tekstowy do kolumny

Dodaj treść

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 karty projektu modułu i odpowiednio zmień ustawienia tekstu:

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

rozstaw

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

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Górny margines: -5vw (komputer stacjonarny), -20vw (tablet), -27vw (telefon)
  • Lewy margines: 20vw (biurko), 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)
  • Wyściółka u dołu: 5vw (biurko), 7vw (tablet i telefon)
  • Lewe wypełnienie: 3vw (komputer stacjonarny), 5vw (tablet), 6vw (telefon)
  • Prawa wyściółka: 3vw (biurko), 5vw (tablet), 6vw (telefon)

Pole cienia

I uzupełnij parametry modułu, stosując subtelny cień pola. To jest to!

  • Pole Shadow Blur Strength: 50px
  • Kolor cienia: rgba (0,0,0,0,1)

badanie

Teraz, gdy przeszliśmy przez wszystkie etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym artykule pokazaliśmy, jak dodać animacje bloków tekstowych CSS do twojego tytułu. Ważne jest, aby upewnić się, że tytuł jest widoczny i czytać od samego początku, dodanie animacji do tytułu z pewnością może ci pomóc! Możesz także pobrać plik JSON układu za darmo. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej.

Tłumaczenie z: ElegantThemes

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
2 akcji
udział2
ćwierkanie
Enregistrer