Jak tworzyć zakrzywione projekty tekstowe w Divi

Jeśli szukasz wyjątkowego sposobu na zaprezentowanie tekstu na stronie internetowej, wiedza o tym, jak tworzyć zakrzywione projekty tekstowe w Divi, może się przydać. Ten rodzaj projektu działałby przy tworzeniu niestandardowych grafik lub kreatywnych projektów nagłówków w Divi bez konieczności korzystania z edytora zdjęć. Zwykle wymaga to wykonania bardziej kompletnego HTML i CSS, ale dzięki Divi, niestandardowy CSS w minimalnym stopniu i masz o wiele więcej wbudowanych opcji, aby łatwo zaprojektować swój tekst w unikalny sposób.

W tym samouczku pokażemy, jak stworzyć kilka zakrzywionych projektów liter, które można wykorzystać jako pomocny szablon do własnych celów. Jeśli już, możesz dodać coś nowego do swojego zestawu narzędzi projektowych na przyszłość.

Zacznijmy.

zapowiedź

Oto zapowiedź zakrzywionych projektów tekstowych, które zbudujemy w tym samouczku.

Pobierz układ przykładów projektowania animacji listów ZA DARMO

Aby położyć swoje ręce na zakrzywionych projektach tekstowych z tego samouczka, najpierw musisz je 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!

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?

Podstawowa idea tworzenia zakrzywionego tekstu w Divi

Aby utworzyć zakrzywiony tekst za pomocą metody opisanej w tym samouczku, musisz dodać każdą literę tekstu w osobnym module tekstowym (w celu uzyskania najlepszych wyników będziesz chciał użyć czcionki o stałej szerokości). Nadaj modułowi tekstowemu ustaloną wysokość. Następnie musisz nadać każdemu modułowi tekstowemu wyśrodkowaną pozycję bezwzględną, aby wszystkie układały się jeden na drugim.

Jest to ważne, ponieważ chcemy, aby każda litera obracała się od tego samego punktu środkowego. Następnie możesz użyć opcji transformacji Divi, aby obrócić każdą literę wzdłuż osi Z, aby utworzyć zakrzywiony tekst (pomyśl o użyciu kompasu na lekcji matematyki do narysowania koła). Zauważ też, że wysokość każdego modułu tekstowego określa promień okręgu, co również zwiększy obwód okręgu, aw rezultacie więcej odstępów między literami.

Oto przykład 8 modułów tekstowych obracanych co 45 stopni, aby stworzyć idealny układ okręgu dla tekstu. Dodałem białą ramkę wokół każdego modułu, dzięki czemu można łatwo zobaczyć rotację.

A oto przykład tych samych modułów tekstowych obracanych co 20 stopni.

Pierwsze kroki

Subskrybuj nasz kanał YouTube

Aby rozpocząć, utwórz nową stronę w Divi. Następnie nadaj tytuł stronie i wdróż konstruktor Divi z przodu. Wybierz opcję „buduj od podstaw”. Teraz jesteś gotowy do drogi!

Tworzenie zakrzywionego projektu tekstu

Tworzenie sekcji i wiersza

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

Zanim dodamy nasze moduły, zaktualizuj ustawienia sekcji w następujący sposób:

• Kolor lewego gradientu tła: #1e003d
• Prawy gradient tła: #121212
• Typ gradientu: Promieniowy

• Obraz tła: [wstaw obraz logo około 100 na 100 pikseli]
• Rozmiar obrazu tła: rzeczywisty rozmiar

Zapisz ustawienia, a następnie przejdź do ustawień wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Minimalna wysokość: 400px
• Wysokość: 40vw
• Maksymalna wysokość: 600px
• Niestandardowe wypełnienie: 0px na górze, 0px na dole

Następnie dodaj następujący niestandardowy kod CSS do głównego elementu kolumny, aby upewnić się, że wszystkie moduły tekstowe pozostaną wyśrodkowane w poziomie:

Główny element kolumny CSS:

display:flex;
justify-content:center;

Tworzenie modułów tekstowych dla każdej litery

Teraz jesteśmy gotowi, aby dodać nasz pierwszy moduł tekstowy z naszą pierwszą literą. Aby to zrobić, dodaj nowy moduł tekstowy do kolumny wiersza i zaktualizuj następujące elementy:

• Treść: d (tylko pojedyncza litera)
• Czcionka tekstowa: Ubuntu Mono (zrobi to każda czcionka o stałej szerokości)
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 5vw (komputer), 40px (telefon)
• Orientacja tekstu: środek
• Minimalna wysokość: 200px
• Wysokość: 20vw
• Maksymalna wysokość: 300px

Następnie zaktualizuj początek transformacji do dołu. Będzie to ważne dla określenia, gdzie następuje obrót tekstu. Chcemy, aby moduł tekstowy obracał się w dolnym punkcie modułu. Mimo że ten pierwszy moduł tekstowy nie będzie musiał być obracany, ważne jest, aby dodać go tutaj, abyśmy mogli zachować tę opcję za każdym razem, gdy powielimy moduł tekstowy dla dodatkowych liter.

• Pochodzenie transformacji: 100% (lub dół)

Następnie dodaj następujący niestandardowy kod CSS do elementu głównego, aby nadać modułowi tekstowemu pozycję bezwzględną.

position: absolute !important;

Tworzenie i obracanie innych modułów tekstowych

Aby stworzyć resztę liter, będziemy powielać moduł tekstowy. Po zduplikowaniu modułu tekstowego wystarczy zaktualizować literę, a następnie z każdym nowym modułem zwiększyć obrót o 45 stopni.

Ponieważ moduły tekstowe będą ułożone jeden na drugim w interfejsie, najlepiej jest użyć trybu widoku krawędziowego, aby dokonać tych aktualizacji.

Śmiało i zduplikuj moduł tekstowy, a następnie zaktualizuj następujące elementy:

• Treść: ja
• Przekształć obrót osi z: 45 stopni

Kontynuuj proces duplikowania modułu tekstowego, a następnie aktualizowania modułu tekstowego o nową literę i zwiększania obrotu transformacji o 45 stopni. Oto zestawienie pozostałych 6 aktualizacji modułu tekstowego:

Moduł tekstowy 3

• zawartość: v
• Przekształć obrót osi z: 90deg

Moduł tekstowy 4

• treść: ja
• Przekształć obrót osi z: 135 stopni

Moduł tekstowy 5

• zawartość: d
• Przekształć obrót osi z: 180 stopni

Moduł tekstowy 6

• treść: ja
• Transformacja obrotu osi z: 225deg

Moduł tekstowy 7

• zawartość: v
• Przekształć obrót osi z: 270 stopni

Moduł tekstowy 8

• treść: ja
• Przekształć obrót osi z: 315 stopni

Otóż ​​to! Teraz sprawdź efekt końcowy.

Ostateczny wynik

Dostosowywanie rozmiaru tekstu i stopnia obrotu dłuższego tekstu

Jeśli chcesz dostosować zakrzywiony tekst, aby uzyskać większe opcje projektowania tekstu, możesz zmienić rozmiar tekstu i przekształcić obrót każdego modułu tekstowego.

Wdróż tryb widoku krawędziowego, a następnie użyj funkcji wielokrotnego wyboru Divi, aby wybrać wszystkie moduły tekstowe zawierające zakrzywione litery. Następnie kliknij, aby otworzyć ustawienia jednego z wybranych modułów tekstowych, aby otworzyć modalne ustawienie elementu, które zaktualizuje wszystkie wybrane moduły jednocześnie.

W ustawieniach elementu zmień rozmiar tekstu na 40 pikseli na komputerze.

Zapisz ustawienia, a następnie otwórz ustawienia dla każdego z modułów tekstowych i zaktualizuj litery i rotację dla każdego z nich. Pozostaw pierwszy moduł tekstowy z obrotem 0 stopni, a następnie zwiększ obrót osi Z o 10 stopni dla każdego kolejnego modułu tekstowego. Następnie w razie potrzeby zduplikuj moduł tekstowy, aby uzyskać jeszcze więcej liter. W tym przykładzie przeliteruję „eleganckie.motywy”.

Oto podział litery treści i rotacji potrzebnej dla każdego modułu tekstowego.

• Moduł tekstowy 1
  • treść: e
  • Przekształć obrót osi z: 0deg
• Moduł tekstowy 2
  • zawartość: l
  • Przekształć obrót osi z: 10deg
• Moduł tekstowy 3
  • treść: e
  • Przekształć obrót osi z: 20 stopni
• Moduł tekstowy 4
  • zawartość: g
  • Przekształć obrót osi z: 30deg
• Moduł tekstowy 5
  • treść: a
  • Przekształć obrót osi z: 40deg
• Moduł tekstowy 6
  • zawartość: n
  • Przekształć obrót osi z: 50deg
• Moduł tekstowy 7
  • zawartość: t
  • Przekształć obrót osi z: 60deg
• Moduł tekstowy 8
  • zadowolony: .
  • Przekształć obrót osi z: 70deg
• Moduł tekstowy 9
  • zawartość: t
  • Przekształć obrót osi z: 80deg
• Moduł tekstowy 10
  • zawartość: h
  • Przekształć obrót osi z: 90deg
• Moduł tekstowy 10
  • treść: e
  • Przekształć obrót osi z: 100 stopni
• Moduł tekstowy 11
  • zawartość: m
  • Przekształć obrót osi z: 110deg
• Moduł tekstowy 12
  • treść: e
  • Przekształć obrót osi z: 120deg
• Moduł tekstowy 13
  • treść: s
  • Przekształć obrót osi z: 130deg

Oto dotychczasowy wynik.

Prostym sposobem na dostosowanie obrotu całego tekstu jest zastosowanie obrotu transformacji do wiersza. Otwórz ustawienia wiersza i użyj pokrętła sterującego indeksu Z, aby umieścić zakrzywiony tekst w dowolnym miejscu.

Oto ostateczny projekt.

Zachęcamy do odkrywania dodawania większej ilości tekstu i dostosowywania stopnia obrotu, aby uzyskać odpowiednie odstępy między literami. Możesz także dostosować wysokość modułów tekstowych, aby zmniejszyć lub zwiększyć promień.

Końcowe przemyślenia

Tworzenie zakrzywionych projektów tekstowych w Divi jest dość prostym procesem, gdy zrozumiesz, jak to działa. Ten artykuł powinien pomóc w zrozumieniu geometrii związanej z konfiguracją modułów tekstowych tak, aby obracały się po krzywej. A gdy już uzyskasz prawidłową konfigurację, oprócz kilku fragmentów niestandardowego css, możesz użyć wbudowanych ustawień projektowych Divi, aby uzyskać całkiem kreatywność. Mam nadzieję, że da ci to trochę inspiracji do stworzenia własnych unikalnych zakrzywionych projektów tekstowych.

A jeśli chcesz dodać animację do swoich zakrzywionych liter, zapoznaj się z naszym artykułem o tym, jak animować litery.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!