Posiadanie wyróżniającego się tytułu oznacza, że ​​masz szansę przyciągnąć uwagę swoich odwiedzający. Tytuły zwykle nie pozostają niezauważone ze względu na ich rozmiar i centralną pozycję, ale jeśli chcesz pójść o krok dalej i sprawić, by tytuł dosłownie wyskoczył, trafiłeś we właściwe miejsce.

W tym samouczku połączymy ustawienia animacji z Divi stworzyć nagłówek, który się wyróżnia i przykuwa uwagę odwiedzający.

Ostateczny wynik

Część pierwsza: Projektowanie

Konfiguracja sekcji

Kolor tła

Zacznijmy projektować! Utwórz nową stronę i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #EEE

rozstaw

Następnie przejdź do ustawień odstępów sekcji i dodaj niestandardowe marginesy wypełnienia.

• Wyściółka u dołu: 10vw

Dodaj wiersz 1

Struktura kolumny

Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień kolor tła wiersza.

•  Kolor tła: #DDD

zaklejania

Następnie przejdź do ustawień rozmiaru i pozwól, aby wiersz wypełnił całą szerokość ekranu.

• Ustaw tę linię na pełną szerokość: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

rozstaw

Usuń także domyślne górne i dolne wewnętrzne wypełnienie linii.

• Wypełnienie na górze: 0px
• Padding Bottom: 0px

Dodaj moduł tekstowy

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł tekstowy. Wpisz pierwszą część tytułu w polu treść przy użyciu stylu tekstu akapitowego.

Kolor tła

Następnie przejdź do ustawień tła modułu i dodaj kolor tła.

• Kolor tła: #ccc

Ustawienia tekstu

Zmień także ustawienia tekstu na karcie Projekt.

• Tekst czcionki: Didact Gothic
• Waga czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 10vw
• Wysokość linii tekstu: 0.9em
• Orientacja tekstu: Centrum

rozstaw

Następnie utwórz żądany kształt, używając niestandardowej wyściółki u góry iu dołu.

• Wypełnienie na górze: 10vw
• Wyściółka u dołu: 3vw

Animacja

Na koniec dodamy animację. Ważne jest, aby upewnić się, że czas trwania animacji i początkowa przezroczystość wynoszą zero. Umożliwi to wyświetlanie modułu tekstowego z efektem flash.

• Styl animacji: Zanik
• Powtórz animację: Raz
• Czas trwania animacji: 0ms
• Opóźnienie animacji: 1000 ms

Sklonuj moduł tekstowy x4

Po zakończeniu edycji pierwszego modułu tekstowego możesz kontynuować i klonować go tyle razy, ile chcesz, w zależności od długości tytułu. Dla każdej części tytułu, którą chcesz wyświetlić z efektem flash, potrzebujesz osobnego modułu tekstowego. W tym przykładzie będziemy potrzebować dodatkowych modułów 4.

Kolor tła

Z kolorem tła.

• Copy 1 = Kolor tła: # 5900ff, kolor tekstu: #FFF
• Kopiuj 2 = pozostaw bez zmian, zmodyfikuj czas trwania animacji (opóźnienie animacji): 1500 ms
• Kopiuj 3 = Kolor tła: # ffb200, kolor tekstu: #FFF, zmodyfikuj czas trwania animacji: 2000 ms
• Kopiuj 4 = Kolor tła: # 000, kolor tekstu #FFF, zmodyfikuj czas trwania animacji: 2500ms

Dodaj ujemny margines do każdego modułu tekstowego oprócz pierwszego

Gdy skończysz dostosowywać wszystkie moduły tekstowe, możesz przejść dalej i utworzyć nakładkę. Aby utworzyć to nakładanie, dodamy ujemny górny margines do każdego z powielonych modułów tekstowych. Innymi słowy, upewniamy się, że wszystkie moduły następujące po pierwszym module pojawiają się powyżej tego pierwszego modułu tekstowego.

• Górny margines: -31.98vw

Linia transformacji

Przekształć Tłumacz

Kontynuuj, przekształcając całą linię, zaczynając od parametrów transformacji.

• Dół: -35vw

Przekształć obrót

Zmień także wartości obrotu transformacji.

• Po lewej: 320deg

Dodaj linię 2

Struktura kolumny

Na drugim miejscu! Po wprowadzeniu efektu tytułowego możemy rozpocząć dodawanie pozostałych modułów. Dodaj nowy wiersz, używając następującej struktury kolumn:

zaklejania

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól, aby wiersz zajmował całą szerokość ekranu w ustawieniach rozmiaru:

• Ustaw tę linię na pełną szerokość: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

rozstaw

Usuwa domyślne górne wypełnienie z następnego wiersza.

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

Dodaj moduł opisu tekstowego do kolumny 2

Dodaj zawartość H1

Czas dodać moduły. Pierwszym modułem będzie moduł tekstowy. Możesz dodać treść że sobie życzysz.

Ustawienia tekstu H1

Następnie przejdź do zakładki projekt i zmień ustawienia H1.

• Czcionka tytułu: Didact Gothic
• Tytuł Waga: Bold
• Rozmiar czcionki: 1.8vw (komputer), 3.8vw (tablet), 4vw (telefon)

rozstaw

Dodaj niestandardowe marginesy w sekcji odstępów.

• Górny margines: -4vw
• Dolny margines: 2vw
• Lewy margines: 30vw
• Prawy margines: 30 vw (komputer), 15 vw (tablety i telefon)

Dodaj moduł separatora do kolumny 2

widoczność

Kolejnym modułem jest moduł separatora. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż separator: tak

Kolor

Następnie przejdź do zakładki „Projekt” i zmień kolor separatora.

• Kolor: #000000

Dimentionnement

Zmień również opcje odstępów.

• Waga rozstawu: 8px
• Szerokość: 7%

rozstaw

Zawsze z opcjami rozmiaru.

• Niski margines: 1vw
• Lewy margines: 30vw

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

Następnym modułem będzie kolejny moduł tekstowy. Musisz podać treść do wyboru.

Ustawienie tekstu

Następnie musisz zmienić ustawienia tekstu w zakładce „Projekt”.

• Rozmiar tekstu: 0.8vw (komputer), 1.3vw (tablet), 1.6vw (telefon)
• Wysokość linii: 2.2em

rozstaw

Dodaj również marginesy w sekcji odstępów.

• Niski margines: 3vw
• Lewy margines: 30vw
• Prawy margines: 30 vw (komputer), 15 vw (tablety i telefony)

Dodaj moduł przycisku do kolumny 2

Ustawienia modułu przycisków

Dla ostatniego modułu, który będzie modułem przycisku. Dodasz wybraną zawartość i zmienisz ustawienia w następujący sposób:

• Użyj stylu niestandardowego: Tak
• Rozmiar czcionki: 1vw (komputer), 1.5vw (tablet), 2vw (telefon)
• Szerokość obramowania przycisku: 0px
• Czcionka przycisku: Poppins
• Waga tekstu: pogrubiony
• Styl czcionki: wielkie litery

rozstaw

Przejdź do ustawień odstępów i dodaj niestandardowy margines zewnętrzny, a także margines wewnętrzny i to wszystko.

• Lewy margines zewnętrzny: 30vw
• Wewnętrzna wysoka marża: 1vw
• Wewnątrz niskiej marży: 1vw
• Lewy wewnętrzny margines: 3vw
• prawy wewnętrzny margines: 3vw

Aby zakończyć

W tym samouczku zobaczyliśmy, jak zaprojektować tytuł z animowanym tekstem, używając tylko wewnętrznych opcji Divi. To doskonała technika, która pozwoli Ci przykuć uwagę odwiedzający w bardzo oryginalny sposób.