Ten samouczek jest dodatkiem do samouczka, który stworzyliśmy kilka dni temu. Rzeczywiście pokazaliśmy Ci, jak dodać przewijany tekst w kolumnie na Divi. Dzisiaj pokażemy Ci, jak użyć tej samej techniki, aby dodać sekcję "super bohatera" (wyrażenie używane dla dnapisać duży obszar strony internetowej zaprojektowany w celu przyciągnięcia uwagi i wyróżnienia określonych elementów).

Zacznijmy.

Dodaj predefiniowany układ

Aby dodać układ do swojej strony, otwórz menu ustawień na dole kreatora Divi i kliknij symbol plusa. W wyskakującym oknie Załaduj z biblioteki wybierz pakiet układu Job Recruiter. Następnie kliknij, aby użyć układu strony głównej.

Szablon modelu divi

Usuń dodatkową zawartość z układem

Po załadowaniu prezentacji na stronę wdróż widok szkieletowy i usuń wszystko treść prezentacji, z wyjątkiem nagłówka o pełnej szerokości i sekcji tuż pod nim.

Sekcja modyfikacji projektu divi

Tworzenie animacji tekstu wyboru

Jak widać, słowo „zatrudniony” jest już używane jako duży element tekstowy w module tekstowym w drugiej sekcji. Zamierzamy zmienić ten moduł tekstowy w responsywny element projektu głośnika tekstowego. Kluczem do tego, aby prostokąt tekstowy był responsywny, jest upewnienie się, że linia i moduł tekstowy obejmują całą szerokość okna przeglądarki. Możemy to zrobić używając 100% szerokości. Następnie możemy użyć jednostki długości vw dla rozmiaru tekstu. Dzięki temu tekst będzie dobrze dopasowany do szerokości przeglądarki. Następnie zastosujemy te same zasady, których używaliśmy wcześniej, aby zilustrować nasz prosty przykład przewijania tekstu.

Oto jak to zrobić.

Zaktualizuj parametry linii

Jak wspomniano wcześniej, wiersz musi mieć 100%, aby projekt tego responsywnego zaznaczenia tekstu działał. Dzięki temu nasz moduł tekstowy może używać jednostek długości vw w stosunku do szerokości przeglądarki. Ponieważ nasz predefiniowany układ ma już linię o 100% szerokości, nie musimy nic robić.

Konfiguracja szerokości modułu Divi Line

Musimy jednak dostosować pozostałe ustawienia w następujący sposób.

  • Margines: -24vw w dół
  • Przekształć translację osi Y: -24vw
  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty

Konfiguracja ustawień Divi Line

Ujemny dolny margines służy do usunięcia ujemnej spacji, która pozostaje za każdym razem, gdy przesuwamy wiersz za pomocą polecenia transform translate. I musimy ukryć przepełnienie wiersza dla naszego efektu tekstu zaznaczenia.

Zaktualizuj projekt tekstowy modułu tekstowego

Teraz wszystko, co musisz zrobić, to zaktualizować moduł tekstowy, aby przekonwertować go na duży element tekstowy.

Otwórz moduł tekstowy i zaktualizuj następujące elementy:

  • Kolor tekstu tekstu: rgba (255,255,255,0.16)
  • Rozmiar tekstu: 36vw
  • Margines: -100% po lewej, 100% po prawej

Rozmiar tekstu wykorzystuje jednostkę długości vw, więc tekst jest dobrze dopasowany do szerokości przeglądarki.

Konfiguracja modułu tekstowego Divi

Dodaj animację do modułu tekstowego

  • Styl animacji: slajd
  • Kierunek animacji: w lewo
  • Czas trwania animacji: 10000 ms
  • Intensywność animacji: 100%
  • Animacja krzywej prędkości: liniowa
  • Powtórz animację: Loop

Konfiguracja animacji tekstu DiviOstateczny projekt

Teraz sprawdź ostateczny projekt.

Wynajęty divi animatorówkońcowe przemyślenia

Pola tekstowe mogą być przydatnym narzędziem do projektowania stron internetowych. Nie ograniczają się do działania jedynie jako tickery. Mogą także dodać ciekawy element animacji do Twojego projektu strony internetowej. A najlepsze jest to Divi ułatwia tworzenie i projektowanie wszelkiego rodzaju pięknych rzeczy. Mam nadzieję, że ten samouczek pomoże Ci w tworzeniu prostych tekstów wyboru, kiedy tylko będziesz ich potrzebować.

Mam nadzieję, że usłyszę od Ciebie w komentarzach.

Do twojego zdrowia!