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 600.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 stanowi uzupełnienie samouczka, który zrealizowaliśmy kilka dni temu. Pokazaliśmy, jak dodać przewijany tekst w kolumnie Divi. Dzisiaj pokażemy Ci, jak korzystać z tej samej techniki, dodawać sekcję „superbohatera” (wyrażenie używane do opisania dużego obszaru strony internetowej, którego celem jest przyciągnięcie uwagi i przedstawienie niektórych elementów) ,

Zacznijmy.

Dodaj predefiniowany układ

Aby dodać układ strony do swojej strony, otwórz menu ustawień u dołu Konstruktora Divi i kliknij symbol plus. W wyskakującym oknie Wczytaj z biblioteki wybierz pakiet układu rekrutującego pracę. Następnie kliknij, aby użyć prezentacji strony głównej.

Usuń dodatkową zawartość z układem

Po załadowaniu prezentacji na stronę otwórz widok przewodowy i usuń całą zawartość prezentacji, z wyjątkiem nagłówka o pełnej szerokości i sekcji tuż pod nim.

Tworzenie animacji tekstu zaznaczenia

Jak widać, słowo „wynajęty” jest już używane jako duży element projektu tekstowego w module tekstowym w drugiej sekcji. Zamienimy 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 pokrywają całą szerokość okna przeglądarki. Możemy to zrobić przy użyciu szerokości 100%. 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óre poprzednio stosowaliśmy do zilustrowania naszego prostego przewijanego 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, linia musi mieć wartość 100%, aby projekt tego responsywnego zaznaczania 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 szerokości 100%, nie mamy nic do roboty.

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]

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

  • Margines: -24vw w dół
  • Przekształć Przetłumacz oś Y: -24vw
  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty

Ujemny dolny margines polega na usuwaniu pozostałej ujemnej spacji za każdym razem, gdy przesuwamy linię za pomocą polecenia przekształcenia tłumaczenia. I musimy ukryć przepełnienie linii dla naszego efektu tekstu zaznaczenia.

Zaktualizuj projekt tekstowy modułu tekstowego

Teraz wystarczy zaktualizować moduł tekstowy, aby przekształcić go w duży element projektu tekstowego.

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, dzięki czemu tekst pasuje do szerokości przeglądarki.

Dodaj animację do modułu tekstowego

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

Ostateczny projekt

Teraz sprawdź ostateczny projekt.

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]

końcowe przemyślenia

Pola tekstowe mogą być przydatnym narzędziem do projektowania stron internetowych. Nie ograniczają się one wyłącznie do działania jako pisarze teletypów. Mogą również dodać interesujący element animacji do swojego projektu internetowego. A co najważniejsze, Divi ułatwia tworzenie i projektowanie wszelkiego rodzaju pięknych rzeczy. Mam nadzieję, że ten samouczek pomoże Ci tworzyć proste teksty selekcji, gdy tylko ich potrzebujesz.

Mam nadzieję usłyszeć od ciebie w komentarzach.

Do twojego zdrowia!

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