Przejdź do głównej treści

Jak stworzyć strefę superbohatera z animowanym tekstem

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

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

Ten samouczek jest dodatkiem do samouczka, który stworzyliśmy kilka dni temu. Rzeczywiście pokazaliśmy ci, jak dodać przewijany tekst w kolumnie Divi. Dziś pokażemy, jak zastosować tę samą technikę, aby dodać sekcję „superbohater” (wyrażenie używane do opisania dużego obszaru strony internetowej zaprojektowanej w celu przyciągnięcia uwagi i podkreślenia pewnych elementów) .

Zacznijmy.

Dodaj predefiniowany układ

Aby dodać układ do swojej strony, otwórz menu ustawień u dołu kreatora Divi i kliknij symbol plusa. W wyskakującym oknie Prześlij z biblioteki wybierz pakiet układów rekrutacji pracy. 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ń całą zawartość z 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ć.

Ł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]

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

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]

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 tylko jako telekodarki. Mogą również dodać ciekawy element animacji do projektu strony internetowej. A najlepsze jest to, że Divi ułatwia tworzenie i projektowanie wszelkiego rodzaju pięknych rzeczy. Mam nadzieję, że ten samouczek pomoże Ci stworzyć proste teksty do wyboru, kiedy tylko ich potrzebujesz.

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]

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

Do twojego zdrowia!

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie 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