Podświetlenie wtyczki Divi: Divi Next Texts

Divi Next Texts to wtyczka innej firmy do Divi, która dodaje wiele modułów z funkcjami projektowania typografii. Moduły dodają animacje, podświetlenia, gradienty, maski, efekty kolorystyczne, a nawet usterki, które pomogą Ci tworzyć efekty tekstowe. Moduły ułatwiają korzystanie z typografii w unikalny sposób w projektach Divi. W tym artykule przyjrzymy się tekstom Divi Next, zobaczymy, co potrafi i jak łatwy w użyciu.

Moduły Divi Next Texts

Do Divi Buildera dodano 12 nowych modułów. Każdy z modułów zawiera oczekiwane zakładki Treść, Projekt i Zaawansowane modułu Divi, dzięki czemu można je stylizować jak każdy moduł Divi. Przyjrzyjmy się każdemu modułowi. W moich przykładach używam pakietu układu Divi Tutor.

Divi Next Teksty Animacja tekstu

Animacja tekstu działa jak suwak dla określonego tekstu w zdaniu. Dodaj tekst przed i po, a następnie dodaj tekst animacji w podmodułach.

Wybierz jedną z 10 animacji. Ten przykład pokazuje animację pisania.

Pasek ładowania ma opcje koloru i wysokości. Podobnie jak wiele z tych modułów, możesz wybrać tag h z zakładki Treść. Możesz także ułożyć tekst. Ułożenie tekstu w stos umieszcza tekst przed na górze, animowany tekst na środku, a tekst po na dole. W tym przykładzie ułożyłem tekst.

Oto spojrzenie na animację spirali.

Divi Next Teksty Kolor tekstu Ruch

Kolor tekstu Ruch powoli zmienia kolor tekstu.

Karta Projekt ma dwa style ruchu i możesz ustawić czas trwania ruchu.

Wybierz cztery różne kolory, aby stworzyć gradient.

Ustaw gradient jako liniowy lub promieniowy. Promieniowy obejmuje 8 kierunków. Wybrałem promienisty i środek. Możesz także ustawić pozycję początkową każdego z czterech kolorów.

Oto mój przykład w ruchu. Wybrałem styl 2, ustawiłem czas trwania na 4s, zmieniłem jeden z kolorów i ustawiłem go na liniowy.

Divi Next Teksty Dzielnik tekstu

Podział tekstu umieszcza linię podziału po obu stronach tekstu. Ten przykład pokazuje wybory znaczników h.

Karta Projekt zawiera Ustawienia dzielnika, w którym możesz wybrać styl dzielnika. Wybierz spośród 8 stylów lub wybierz, aby nie wyświetlać dzielnika.

Możesz także wybrać kolor, wagę i odstęp między tekstem.

Opcje tekstu pozwalają zmienić wyrównanie tekstu i wybrać cień tekstu. Umieściłem tekst po prawej stronie separatora.

Ustawienie Czcionka kontroluje styl tekstu, dzięki czemu masz pełną kontrolę nad rodziną czcionek, kolorem, rozmiarem itp.

Divi Next Teksty Usterka tekstu

Text Glitch zniekształca tekst z animacją.

Karta Projekt zawiera ustawienia dotyczące stylu, kolorów i położenia usterki. Do wyboru jest 7 stylów glitch. Niektóre są bardziej ożywione niż inne.

Wybierz kolor tekstu i dwa różne kolory usterki.

Ustaw pozycję usterki z osobnymi ustawieniami dla lewej, prawej i górnej części.

To jest usterka 4. To jeden z bardziej animowanych usterek.

Divi Next Teksty Gradient tekstu

Gradient tekstu koloruje tekst za pomocą gradientu.

Karta Projekt zawiera ustawienia kolorów gradientu. Wybierz dwa kolory, rodzaj gradientu (liniowy lub radialny) i ustaw kierunek oraz pozycję początkową i końcową.

Efekt odsłonięcia to pasek, który szybko przesuwa się po ekranie. Możesz włączyć efekt i wybrać kolor.

Zawiera również efekt najechania. Wybierz spośród 29 animacji.

Oto spojrzenie na animację gradientu tekstu. Dołączyłem efekt odsłonięcia i efekt najechania chybotliwym dnem.

Divi Next Teksty Podświetlenie tekstu

Podświetlenie tekstu umieszcza podświetlenie tekstu. Zawiera również tekst przed i po, co pozwala wyróżnić tylko część frazy. Możesz również wyświetlić tekst jako stos.

Wybierz styl podświetlenia z 14 opcji. Styl wyróżnienia zostanie narysowany na tekście. Animacja powtarza się po określonym czasie. W tym przykładzie użyto Double.

Karta Projekt zawiera ustawienia podświetlenia, w których można wybrać kolor, szerokość obrysu i opóźnienie animacji. W tym przykładzie użyto Zig Zag.

Ten używa Usuń. Dostosowałem szerokość obrysu do maksymalnego ustawienia i zmniejszyłem krycie, aby tekst był widoczny.

Możesz dostosować czcionki tekstu nagłówka i osobno wyróżnić tekst. Pozostawiłem domyślnie tekst nagłówka, pogrubiłem podświetlony tekst i zwiększyłem jego rozmiar.

Możesz także włączyć efekt najechania. Ma to wpływ na cały tekst.

W tym przykładzie zastosowano styl podświetlenia fali. Ustawiłem szerokość na 26px, wybrałem czerwony i zmniejszyłem krycie, aby wyglądał jak zakreślacz, i wybrałem Wobble Skew dla efektu najechania.

Divi Next Teksty Podświetlenie tekstu po najechaniu kursorem

Podświetlenie tekstu po najechaniu myszą obejmuje tylko podświetlenie po najechaniu myszą. Ten pozwala wyłączyć przed i po tekście.

Ma 59 efektów najechania do wyboru.

Możesz dostosować wysokość podświetlenia. Wartość domyślna to 3 piks. W tym przykładzie wybrałem efekt najechania lewym przyciskiem myszy i ustawiłem wysokość podświetlenia na 10px.

Ustawienia podświetlenia obejmują kolor i gradient. Włączyłem tekst przed i po, wybrałem Podkreślenie w prawo dla podświetlenia i ustawiłem wysokość na 16px. Kolor podświetlenia jest czerwony ze zmniejszonym kryciem.

Ten zawiera gradient. Wybierz dwa kolory, typ gradientu, kierunek, pozycję początkową i pozycję końcową.

Czcionki mają niezależną kontrolę nad tekstem i podświetleniem tekstu. Wprowadziłem poprawki w obu.

Oto animacja. Wybrałem Double Underling Right dla efektu zawisu, ustawiłem wysokość na 24px i użyłem gradientu dla efektu zawisu.

Divi Next Texts Maska tekstowa

Maska tekstowa ma kilka ustawień i opcji, w tym opcje obracania w pionie i odwracania w pionie. Włączyłem obie opcje.

Maska obrazu pozwala wybrać obraz, który będzie wyświetlany jako kolory tekstu. Wybierz rozmiar tła, położenie i powtarzanie obrazu.

Ten efekt działa szczególnie dobrze w przypadku dużych, bardzo pogrubionych czcionek.

Świetnie wyglądają również z kolorem na obrazie tła.

Maska tekstowa zawiera również animacje najechania.

Ten przykład pokazuje efekt najechania Pop. Dołączyłem brązową nakładkę i ustawiłem czcionkę na kursywę i wielkie litery.

Divi Next Teksty Tekst Multi Heading

Tekst Multi Heading dodaje trzy zestawy tekstu nagłówka i zawiera inne tło dla każdego nagłówka.

Tła zawierają kolory i gradienty. Ten przykład umieszcza niebieskie tło za pierwszym nagłówkiem.

Gradient ma dwa kolory. Wybierz typ gradientu (liniowy lub promieniowy), kierunek, pozycję początkową i końcową. Dodałem gradient do drugiego nagłówka.

Trzy nagłówki można regulować niezależnie. Dopasowałem kolory, rozmiary i wagę nagłówków. Zwiększyłem też rozmiar czcionek. Każdy nagłówek ma inny rozmiar.

Każdy nagłówek może mieć gradient. Dodałem gradient do drugiego nagłówka.

Nagłówki zawierają osobny efekt odsłonięcia, w którym można wybrać inny kolor dla każdego nagłówka.

Efekt najechania obejmuje wszystkie trzy nagłówki.

Każdy nagłówek ma osobne ustawienia odstępów. Dodałem 30px z prawej i lewej strony drugiego nagłówka.

Nagłówki mają również niezależne granice. Dodałem obramowanie do drugiego nagłówka.

Divi Next Teksty Obrys tekstu

Text Stroke tworzy animację obrysu i duży tekst z konturem.

Ustawienia obrysu obejmują kolor, efekty najechania, kierunek najechania i czas trwania ruchu. Dopasowałem kolor i ustawiłem szerokość obrysu na 6px. Zmienia to grubość linii czcionki. Animacje obejmują Obrys do wypełnienia i Wypełnij do obrysu. Do wyboru jest 6 kierunków.

Kolor najechania zmienia kolor wewnątrz czcionki. Ma jednolity kolor i gradient. To jest jednolity kolor.

Oto gradient. Dopasowałem kolory, ustawiłem je na promienie i ustawiłem kierunek na środek.

Divi Next Teksty Tekst Obrysu ruchu

Tekst Stroke Motion dodaje efekt obrysu z animacjami.

Dopasowania kolorów obejmują pojedyncze, wielokrotne i wypełnienie. To jest Single, który pokazuje tylko jeden kolor.

Multi pozwala wybrać 5 różnych kolorów. Kolory są animowane.

Wypełnienie pozwala wybrać kolor wewnątrz tekstu.

Ustawienia obrysu obejmują szerokość linii, długość kreski, wielkość przerwy i przesunięcie kreski. Działają one razem, tworząc ciekawe projekty.

Oto animacja. Zmieniłem kolory, szerokość i rozmiar kreski.

Divi Next Teksty Pochylenie tekstu

Text Tilt udostępnia kartę z tytułem i obszarem zawartości. Dodaj swoją treść za pomocą edytora. Karta przechyla się w innym kierunku w zależności od tego, gdzie najedziesz.

Treść tła zawiera jednolite kolory i gradienty. Oto przykład przechylania karty.

Blask dodaje efekt odblasku, który wygląda inaczej w zależności od przechylenia karty.

Funkcja 3D Tilt sprawia, że ​​tekst znika z karty.

Tilt Reverse powoduje, że karta przechyla się w przeciwnym kierunku. Ustawienia obejmują również perspektywę, maks., prędkość, początek dla x i y oraz skalę.

Zawiera również ustawienia odstępów zawartości, obramowania zawartości i cienia pola zawartości.

Oto efekt pochylenia za pomocą olśnienia. Dołączyłem obramowanie i cień pudełka.

Cena tekstów Divi Next i wsparcie

Divi Next Texts jest dostępny na stronie dewelopera. Dostępne są 3 opcje licencji:

• Pojedyncza licencja – $29.00
• Licencja nieograniczona – 49,00 $
• Licencja dożywotnia – 129,00 $

Wsparcie zapewnia system zgłoszeń. Strona pomocy zawiera łącza do często zadawanych pytań. Kilka z nich zawiera szczegółowe filmy i instrukcje.

Końcowe myśli

Divi Next Texts to doskonała wtyczka, która dodaje wiele funkcji typograficznych do Divi. Szczególnie podobają mi się animacje, efekty najechania, maska, obrysy i, właściwie, lubię je wszystkie.

Moduły są bardzo intuicyjne. Wydaje się, że niektóre ustawienia, takie jak znaczniki h, powinny znajdować się na karcie Projekt. Niektóre animacje wyglądają podobnie. W żadnym wypadku nie są to skargi, ale chciałem o nich wspomnieć.

Jeśli chcesz dodać wiele typograficznych funkcji animacji do swoich witryn Divi, Divi Next Texts to świetny wybór.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś Divi Next Texts? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem Mascha Tace / shutterstock.com