Come aggiungere un testo curvo su Divi

A tutti noi piace distinguerci dalla concorrenza, e questo può essere fatto mettendo in mostra il nostro sito web diversamente. Quindi può essere utile sapere come creare disegni di testo curvo in Divi. Questo tipo di design funzionerebbe per creare grafica personalizzata o design di intestazioni speciali su Divi senza dover utilizzare un editor di foto. Di solito ciò comporta attività html e css più estese, ma con Divi la padronanza dei CSS non è un must, poiché hai molte più opzioni integrate per progettare facilmente il tuo testo in un modo unico.

In questo tutorial, ti mostreremo come creare due modelli di lettere curve che puoi utilizzare come modello utile per i tuoi scopi. Nella migliore delle ipotesi, puoi aggiungere qualcosa di nuovo alla tua scatola. outils design per il futuro.

Cominciamo.

Panoramica

Ecco una panoramica dei disegni di testo curvo che progetteremo in questo tutorial.

Per importare il layout nella tua pagina, basta estrarre il file zip e trascinarlo in Divi Builder.

L'idea di base alla base della creazione di testo curvo in Divi

Per creare testo curvo usando il metodo in questo tutorial, dovresti aggiungere ogni lettera del tuo testo in un modulo di testo separato (ti consigliamo di utilizzare un carattere a spaziatura fissa per ottenere i migliori risultati). Assegna al modulo di testo un'altezza definita. Successivamente, è necessario assegnare a ciascun modulo di testo una posizione assoluta centrata in modo che si accatasti uno sopra l'altro.

Questo è importante perché vogliamo che ogni lettera ruoti dallo stesso punto centrale. Dopodiché, puoi utilizzare le opzioni di trasformazione di Divi per ruotare ogni lettera lungo l'asse z per creare il testo curvo (considera l'utilizzo di una bussola in classe di matematica per disegnare un cerchio). Si noti inoltre che l'altezza di ogni modulo di testo determina il raggio del cerchio, che aumenta anche la circonferenza del cerchio e, quindi, aumenta lo spazio tra le lettere.

Di seguito è riportato 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 ruotano con incrementi di 20 gradi.

Commencer

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

Creazione del design del testo a forma di curva

Creazione della sezione e della linea

Inizia creando una sezione regolare con una riga di una colonna.

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

• Gradiente di sfondo sinistro: #1e003d
• Sfondo sfumato a destra - colore: # 121212
• Tipo di gradiente: radiale

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

Salvare le impostazioni, quindi modificare le impostazioni per la linea e aggiornare quanto segue:

• Larghezza della grondaia: 1
• Larghezza: 100%
• Altezza minima: 400px
• Altezza: 40vw
• Altezza massima: 600px
• Imbottitura personalizzata: 0px alta, 0px verso il basso

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

Colonna principale elemento CSS:

visualizzare flex; justify-felice: center;

Creazione di 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 lettera)
• Carattere testo: Ubuntu Mono (va bene qualsiasi carattere con spaziatura singola)
• Colore testo testo: #ffffff
• Dimensione del testo: 5vw (desktop), 40px (telefono)
• Orientamento del testo: centro
• Altezza minima: 200px
• Altezza: 20vw
• Altezza massima: 300px

Quindi aggiorna l'origine della trasformazione verso il basso. Questo sarà importante per determinare dove avviene la rotazione del testo. Vogliamo che il modulo di testo ruoti nella parte inferiore di esso. Sebbene non sia necessario ruotare questo primo modulo di testo, è importante aggiungerlo qui in modo da poter trasferire questa opzione ogni volta che duplichiamo il modulo di testo per lettere aggiuntive.

• Origine della trasformazione: 100% (o inferiore)

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

Creazione e rotazione di altri moduli di testo

Per creare il resto delle lettere, duplicheremo il modulo di testo. Una volta duplicato il modulo di testo, tutto ciò di cui abbiamo bisogno è aggiornare la lettera e quindi aumentare la rotazione di 45 gradi con ogni nuovo modulo.

Poiché i moduli di testo verranno sovrapposti all'inizio, è meglio utilizzare la modalità di visualizzazione cablata per eseguire questi aggiornamenti.

Continuare e duplicare il modulo di testo, quindi aggiornare quanto segue:

• Contenuto: I
• Trasforma l'asse di rotazione: 45deg

Continua il processo di duplicazione del modulo di testo, quindi aggiorna il modulo di testo con una nuova lettera e aumenta la rotazione della trasformazione di 45 gradi. Di seguito è riportato un elenco dei 6 aggiornamenti rimanenti al modulo di testo:

Modulo di testo 3

• contenuto:v
• Trasforma l'asse di rotazione: 90deg

Modulo di testo 4

• contenuto: i
• Trasformazione della rotazione dell'asse z: 135deg

Modulo di testo 5

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

Modulo di testo 6

• contenuto: i
• Trasformazione della rotazione dell'asse z: 225deg

Modulo di testo 7

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

Modulo di testo 8

• contenuto: i
• Trasforma la rotazione dell'asse z: 315deg

È tutto! Ora controlla il risultato finale.

Risultato finale

Considerazioni finali

La creazione di design di testo curvo in Divi è un processo abbastanza semplice una volta capito come funziona. Questo articolo dovrebbe aiutarti a capire la geometria coinvolta nella configurazione dei moduli di testo per ruotare su una curva. E una volta completata l'installazione, oltre ad alcuni frammenti di file CSS personalizzati, puoi utilizzare le impostazioni di progettazione integrate di Divi per ottenere un po 'di creatività. Spero che questo ti dia qualche ispirazione per creare i tuoi disegni di testo curvo.