Come creare disegni di testo curvi in ​​Divi

Se stai cercando un modo unico per mostrare il testo su una pagina web, sapere come creare design di testo curvo in Divi può tornare utile. Questo tipo di design funzionerebbe per creare grafica personalizzata o design di intestazioni creative in Divi senza dover utilizzare un editor di foto. Di solito ciò comporta HTML e CSS più completi da realizzare, ma con Divi, il CSS personalizzato è minimo e hai così tante più opzioni integrate per progettare facilmente il tuo testo in modi unici.

In questo tutorial, ti mostreremo come creare un paio di design di lettere curve che puoi utilizzare come modello utile per i tuoi scopi. Semmai, potresti aggiungere qualcosa di nuovo alla tua cassetta degli attrezzi di progettazione per il futuro.

Iniziamo.

Sbirciata

Ecco un'anteprima dei design di testo curvo che creeremo in questo tutorial.

Scarica GRATUITAMENTE il layout degli esempi di progettazione dell'animazione della lettera

Per mettere le mani sui disegni di testo curvo di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

L'idea di base dietro la creazione di testo curvo in Divi

Per creare un testo curvo utilizzando il metodo in questo tutorial, devi aggiungere ogni lettera del tuo testo in un modulo di testo separato (per ottenere i migliori risultati vorrai utilizzare un carattere a spaziatura fissa). Assegna al modulo di testo un'altezza impostata. Quindi è necessario assegnare a ciascun modulo di testo una posizione assoluta centrata in modo che si accumulino tutti uno sopra l'altro.

Questo è importante perché vogliamo che ogni lettera ruoti dallo stesso punto centrale. Dopodiché puoi usare le opzioni di trasformazione di Divi per ruotare ogni lettera lungo l'asse z per creare il testo curvo (pensa a usare un compasso nella classe di matematica per disegnare un cerchio). Inoltre, nota che l'altezza di ciascun modulo di testo determina il raggio del cerchio che aumenterà anche la circonferenza del cerchio e, di conseguenza, più spazio tra le lettere.

Ecco un esempio di 8 moduli di testo ruotati con incrementi di 45 gradi per creare un layout circolare perfetto per il testo. Ho aggiunto un bordo bianco attorno a ciascun modulo in modo da poter vedere facilmente la rotazione.

Ed ecco un esempio degli stessi moduli di testo che vengono ruotati con incrementi di 20 gradi.

Iniziare

Iscriviti al nostro canale Youtube

Per iniziare, crea una nuova pagina in Divi. Quindi dai un titolo alla pagina e distribuisci il generatore Divi sul front-end. Seleziona l'opzione "costruisci da zero". Ora sei pronto per partire!

Creazione del design del testo curvo

Creazione della sezione e della riga

Per prima cosa crea una sezione regolare con una riga a una colonna.

Prima di aggiungere i nostri moduli, vai avanti e aggiorna le impostazioni della sezione come segue:

• Colore sfondo sfumato sinistro: #1e003d
• Colore di sfondo sfumato a destra: #121212
• Tipo di gradiente: radiale

• Immagine di sfondo: [inserire l'immagine del logo di circa 100 px per 100 px]
• Dimensione dell'immagine di sfondo: dimensione reale

Salva le impostazioni, quindi passa alle impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Altezza minima: 400 px
• Altezza: 40vw
• Altezza massima: 600 px
• Imbottitura personalizzata: 0px in alto, 0px in basso

Quindi aggiungi il seguente CSS personalizzato all'elemento principale della colonna per assicurarti che tutti i moduli di testo rimangano centrati orizzontalmente:

Elemento principale della colonna CSS:

display:flex;
justify-content:center;

Creare i moduli di testo per ogni lettera

Ora siamo pronti per aggiungere il nostro primo modulo di testo con la nostra prima lettera. Per fare ciò, aggiungi un nuovo modulo di testo alla colonna della riga e aggiorna quanto segue:

• Contenuto: d (solo la singola lettera)
• Carattere di testo: Ubuntu Mono (qualsiasi carattere a spaziatura fissa andrà bene)
• Colore del testo del testo: #ffffff
• Dimensione del testo del testo: 5vw (desktop), 40px (telefono)
• Orientamento del testo: centro
• Altezza minima: 200 px
• Altezza: 20vw
• Altezza massima: 300 px

Quindi aggiorna l'origine della trasformazione in basso. Questo sarà importante per determinare dove avviene la rotazione del testo. Vogliamo che il modulo di testo ruoti nel punto inferiore del modulo. Anche se questo primo modulo di testo non dovrà essere ruotato, è importante aggiungerlo qui in modo da poter trasferire questa opzione ogni volta che duplichiamo il modulo di testo per le lettere aggiuntive.

• Origine trasformazione: 100% (o inferiore)

Quindi aggiungi il seguente CSS personalizzato all'elemento principale per dare al modulo di testo una posizione assoluta.

position: absolute !important;

Creazione e rotazione degli altri moduli di testo

Per creare il resto delle lettere, duplichiamo il modulo di testo. Una volta duplicato il modulo di testo, tutto ciò che dovremo fare è aggiornare la lettera e quindi aumentare la rotazione di 45 gradi con ogni nuovo modulo.

Poiché i moduli di testo verranno impilati uno sopra l'altro sul front-end, è meglio utilizzare la modalità di visualizzazione wireframe per effettuare questi aggiornamenti.

Vai avanti e duplica il modulo di testo, quindi aggiorna quanto segue:

• Contenuto: io
• Trasforma la rotazione dell'asse z: 45 gradi

Continua il processo di duplicazione del modulo di testo e quindi aggiorna il modulo di testo con una nuova lettera e aumenta la rotazione della trasformazione di 45 gradi. Ecco una ripartizione dei restanti 6 aggiornamenti del modulo di testo:

Modulo di testo 3

• contenuto: v
• Trasforma la rotazione dell'asse z: 90 gradi

Modulo di testo 4

• contenuto: io
• Trasforma la rotazione dell'asse z: 135 gradi

Modulo di testo 5

• contenuto: d
• Trasforma la rotazione dell'asse z: 180 gradi

Modulo di testo 6

• contenuto: io
• Trasforma rotazione asse z: 225deg

Modulo di testo 7

• contenuto: v
• Trasforma la rotazione dell'asse z: 270 gradi

Modulo di testo 8

• contenuto: io
• Trasforma la rotazione dell'asse z: 315 gradi

Questo è tutto! Ora controlla il risultato finale.

Risultato finale

Regolazione della dimensione del testo e del grado di rotazione per un testo più lungo

Se desideri regolare il testo curvo per opzioni di progettazione del testo più grandi, puoi modificare le dimensioni del testo e trasformare la rotazione di ciascun modulo di testo.

Distribuisci la modalità di visualizzazione wireframe e quindi usa la funzione di selezione multipla di Divi per selezionare tutti i moduli di testo che contengono le lettere curve. Quindi fare clic per aprire le impostazioni di uno dei moduli di testo selezionati per aprire il modale di impostazione dell'elemento che aggiornerà tutti i moduli selezionati contemporaneamente.

Sotto le impostazioni dell'elemento, modifica la dimensione del testo del testo a 40 px sul desktop.

Salva le impostazioni, quindi apri le impostazioni per ciascuno dei moduli di testo e aggiorna le lettere e la rotazione per ciascuno. Lascia il primo modulo di testo con una rotazione di 0 gradi e quindi aumenta la rotazione dell'asse z di 10 gradi per ogni modulo di testo che segue. Quindi duplica il modulo di testo per ancora più lettere, se necessario. In questo esempio, scriverò "elegant.themes".

Ecco la ripartizione della lettera di contenuto e la rotazione necessaria per ciascun modulo di testo.

• Modulo di testo 1
  • contenuto: e
  • Trasforma rotazione asse z: 0deg
• Modulo di testo 2
  • contenuto: l
  • Trasforma rotazione asse z: 10deg
• Modulo di testo 3
  • contenuto: e
  • Trasforma rotazione asse z: 20deg
• Modulo di testo 4
  • contenuto: g
  • Trasforma rotazione asse z: 30deg
• Modulo di testo 5
  • contenuto: a
  • Trasforma la rotazione dell'asse z: 40 gradi
• Modulo di testo 6
  • contenuto: n
  • Trasforma la rotazione dell'asse z: 50 gradi
• Modulo di testo 7
  • contenuto: t
  • Trasforma la rotazione dell'asse z: 60 gradi
• Modulo di testo 8
  • contenuto: .
  • Trasforma la rotazione dell'asse z: 70 gradi
• Modulo di testo 9
  • contenuto: t
  • Trasforma la rotazione dell'asse z: 80 gradi
• Modulo di testo 10
  • contenuto: h
  • Trasforma la rotazione dell'asse z: 90 gradi
• Modulo di testo 10
  • contenuto: e
  • Trasforma la rotazione dell'asse z: 100 gradi
• Modulo di testo 11
  • contenuto: m
  • Trasforma la rotazione dell'asse z: 110 gradi
• Modulo di testo 12
  • contenuto: e
  • Trasforma rotazione asse z: 120deg
• Modulo di testo 13
  • Contenuti
  • Trasforma la rotazione dell'asse z: 130 gradi

Ecco il risultato finora.

Un modo semplice per regolare la rotazione dell'intero testo consiste nell'applicare una rotazione di trasformazione alla riga. Apri le impostazioni della riga e usa la ghiera di controllo z-index per posizionare il testo curvo dove vuoi.

Ecco il disegno definitivo.

Sentiti libero di esplorare aggiungendo più testo e modificando il grado di rotazione per ottenere la giusta spaziatura tra le lettere. Puoi anche regolare l'altezza dei moduli di testo per diminuire o aumentare il raggio.

Pensieri finali

La creazione di design di testo curvo in Divi è un processo piuttosto semplice una volta capito come funziona. Questo articolo dovrebbe aiutarti a capire la geometria coinvolta nell'impostazione dei moduli di testo in modo che ruotino su una curva. E una volta ottenuta la configurazione corretta, oltre ad alcuni frammenti di CSS personalizzati, puoi utilizzare le impostazioni di progettazione integrate di Divi per essere piuttosto creativo. Speriamo che questo ti dia un po' di ispirazione per creare dei tuoi disegni di testo curvi unici.

E, se vuoi aggiungere un po' di animazione alle tue lettere curve, dai un'occhiata al nostro articolo su come animare le lettere.

Non vedo l'ora di sentirti nei commenti.

Saluti!