Jak stworzyć prosty namiot tekstowy za pomocą Divi

Markizy tekstowe zapewniają przewijany obszar tekstu w Twojej witrynie, który przyciąga czytelników przydatnymi fragmentami treści. Są one również nazywane paskami (lub paskami wiadomości) i są często używane do wyświetlania stałego strumienia aktualizacji wiadomości na górze lub na dole strony . Zwykle animacja przewijania jest wykonywana z pojedynczym wierszem treści w pętli, dzięki czemu informacje są wyświetlane wielokrotnie. Niestety tag html <marquee> jest przestarzały, więc w dzisiejszych czasach liczymy na CSS i JavaScript, aby tworzyć markizy. Jednak dzięki Divi możesz stworzyć prostą markizę bez martwienia się o niestandardowy kod.

W tym samouczku pokażemy Ci, jak łatwo jest stworzyć prostą markizę tekstową za pomocą Divi. Omówimy nawet, jak wstrzymać animację przewijanego tekstu po najechaniu myszą i jak dodać dużą markizę tekstową jako unikalny element projektu nagłówków.

Zacznijmy.

zapowiedź

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Subskrybuj nasz kanał YouTube

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, będziesz potrzebować:

1. Zainstalowany i aktywny motyw Divi
2. Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Część 1: Tworzenie prostej markizy tekstowej w Divi

W tym pierwszym przykładzie utworzymy prostą markizę tekstową dla wiersza tekstu. Aby to zrobić, nadamy wierszowi maksymalną szerokość z ukrytym przepełnieniem. Następnie dodamy zapętloną animację slajdu do modułu tekstowego zawierającego wiersz tekstu, tak aby przesuwał się po wierszu wielokrotnie, pojawiając się w widoku jak markiza.

Oto jak to zrobić.

Najpierw utwórz zwykłą sekcję z jednym rzędem kolumn.

Następnie przed dodaniem modułu zaktualizuj wiersz o stałą szerokość, cień pudełka i promień obramowania w następujący sposób:

• Maksymalna szerokość: 200px
• Padding: 10px góra, 10px dół
• Zaokrąglone rogi: 10px
• Cień pudełka: patrz zrzut ekranu
• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj moduł tekstowy

Po zakończeniu wiersza dodaj do niego nowy moduł tekstowy.

Następnie zaktualizuj treść treści jednym wierszem tekstu. Na razie upewnij się, że linia tekstu nie przełamuje się w inną linię.

• Treść: „To jest zdanie”

Projekt modułu tekstowego

Zaktualizuj ustawienia projektu modułu tekstowego w następujący sposób:

• Margines: -100% lewy, 100% prawy

Spowoduje to umieszczenie modułu tekstowego poza lewą stroną wiersza. Ponieważ wiersz ma ukrytą widoczność przepełnienia, moduł będzie ukryty, dopóki nie dodamy animacji, aby go zobaczyć.

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Czas trwania animacji: 5000 ms
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%
• Krzywa prędkości animacji: liniowa
• Powtórzenie animacji: pętla

Wynik

Sprawdźmy teraz wynik.

Tworzenie dłuższych linii tekstu

W powyższym prostym projekcie markizy tekstowej ograniczyliśmy szerokość linii tekstu do tej samej szerokości wiersza. Jeśli jednak chcemy stworzyć dłuższą linię tekstu o tej samej szerokości wiersza, będziemy musieli nieco zmodyfikować ustawienia.

Najpierw w module tekstowym i zastąp tekst treści następującym:

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

Dodaj większą szerokość i margines, aby pomieścić dłuższą linię tekstu

Jak możesz zauważyć, tekst dzieli się teraz na trzy wiersze zamiast jednego.

Dlatego musimy dostosować margines i intensywność animacji.

• Szerokość: 207%
• Margines: -207% lewy, 207% prawy
• Intensywność animacji: 75%

Sztuczka polega na tym, aby zwiększyć szerokość i zaktualizować wartości marginesów, aby zapewnić wystarczająco dużo miejsca na pojedynczy wiersz tekstu. Następnie dostosuj intensywność animacji, aby nie było dużej przerwy między zapętloną animacją.

Wynik

Oto ostateczny wynik.

Wstrzymywanie animacji tekstu markizy po najechaniu kursorem

Ponieważ ta markiza zawiera łącze, użytkownikom będzie trudno faktycznie kliknąć łącze podczas jego przenoszenia. Możemy jednak dodać mały fragment css do modułu tekstowego, który zatrzyma animację po najechaniu myszą.

Dodaj fragment kodu CSS, aby wstrzymać animację po najechaniu kursorem

Aby dodać fragment kodu css, otwórz ustawienia modułu tekstowego i dodaj następujący niestandardowy kod CSS do głównego elementu pod zakładką najechania :

animation-play-state: paused;

Ostateczny wynik

Teraz sprawdź efekt końcowy. Zwróć uwagę, jak animacja tekstu zatrzyma się, gdy kursor znajdzie się nad tekstem, umożliwiając użytkownikowi kliknięcie łącza.

Część 2: Tworzenie markizy tekstowej jako responsywnego elementu projektu w Divi

Teraz, gdy wiemy, jak utworzyć prostą markizę tekstową w Divi, możemy wykorzystać tę samą koncepcję, aby utworzyć responsywny element projektu markizy tekstowej. To działałoby dobrze przy tworzeniu unikalnych projektów animacji dla nagłówków lub nagłówków sekcji.

W tym celu użyjemy gotowego układu strony głównej Divi's Job Recruiter.

Dodaj gotowy układ

Aby dodać układ do swojej strony, otwórz menu ustawień u dołu kreatora Divi i kliknij symbol plusa. Z wyskakującego okna wczytywania z biblioteki wybierz pakiet układu rekrutera pracy. Następnie kliknij, aby użyć układu strony głównej.

Usuń dodatkową zawartość z układem

Po załadowaniu układu na stronę wdróż tryb widoku szkieletowego i usuń całą zawartość układu z wyjątkiem nagłówka o pełnej szerokości i sekcji znajdującej się bezpośrednio pod nim.

Tworzenie animacji markizy tekstu

Jak widać, słowo „zatrudniony” jest już używane jako duży element projektu tekstu w module tekstowym w drugiej sekcji. Zamienimy ten moduł tekstowy w responsywny element projektu markizy tekstowej. Kluczem do tego, aby markiza tekstu była responsywna, jest upewnienie się, że wiersz i moduł tekstowy obejmują całą szerokość okna przeglądarki. Możemy to zrobić używając szerokości 100%. Następnie możemy użyć jednostki długości vw dla rozmiaru tekstu. Dzięki temu tekst będzie ładnie skalowany wraz z szerokościami przeglądarki. Następnie zastosujemy te same zasady, których użyliśmy do wykonania naszego prostego przykładu markizy tekstowej.

Oto jak to zrobić.

Zaktualizuj ustawienia wiersza

Jak wspomniano wcześniej, wiersz musi mieć 100%, aby ten responsywny projekt markizy tekstowej działał. Dzięki temu nasz moduł tekstowy może używać jednostek długości vw, które są zależne od szerokości przeglądarki. Ponieważ nasz gotowy układ ma już wiersz o szerokości 100%, nie musimy nic robić.

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

• Margines: -24vw dół
• Przekształć Przesuń oś Y: -24vw
• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Ujemny dolny margines ma na celu pozbycie się ujemnej przestrzeni pozostałej za każdym razem, gdy przesuwamy wiersz w górę za pomocą translacji przekształcenia. I musimy ukryć przepełnienie wiersza dla naszego efektu markizy tekstu.

Aktualizuj projekt tekstu modułu tekstowego

Teraz wystarczy, że zaktualizujemy moduł tekstowy, aby przekształcić go w duży element projektu markizy tekstowej.

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

• Kolor tekstu tekstu: rgba (255,255,255,0.16)
• Rozmiar tekstu: 36vw
• Margines: -100% lewy, 100% prawy

Rozmiar tekstu jest oparty na jednostce długości vw, więc tekst będzie się ładnie skalował wraz z szerokością przeglądarki.

Dodaj animację do modułu tekstowego

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Czas trwania animacji: 10000 ms
• Intensywność animacji: 100%
• Krzywa prędkości animacji: liniowa
• Powtórzenie animacji: pętla

Ostateczny projekt

Teraz sprawdź ostateczny projekt.

Końcowe przemyślenia

Markizy tekstowe mogą być wygodnym narzędziem do projektowania stron internetowych. Nie ograniczają się one również do pełnienia funkcji pasków informacyjnych. Mogą również dodać ładny element animacji do twojego projektu strony internetowej. A najlepsze jest to, że Divi ułatwia ich tworzenie i projektowanie na wiele pięknych sposobów. Mam nadzieję, że ten samouczek pomoże ci stworzyć proste markizy tekstowe, gdy tylko nadejdzie czas, kiedy będziesz ich potrzebować.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!