Come creare 3 fantastici design di caratteri a spaziatura fissa in Divi
Pubblicato: 2019-09-02I caratteri a spaziatura fissa sono una risorsa deliziosa per il web design. Sono particolarmente utili per creare disegni che hanno una bella simmetria ed equilibrio. Un font a spaziatura fissa è composto da lettere e caratteri che hanno ciascuno la stessa larghezza (o spazio orizzontale). In quanto tali, forniscono una struttura coerente ed elegante per la visualizzazione del testo. I caratteri a spaziatura fissa sono ampiamente utilizzati nella codifica per questo motivo.
In questo tutorial, creeremo tre fantastici design di caratteri a spaziatura fissa in Divi. Esamineremo come personalizzare correttamente i moduli di testo per posizionare e progettare caratteri a spaziatura fissa in modi piuttosto unici e molto altro.
Iniziamo.
Sbirciata
Ecco una rapida occhiata ai design che creeremo in questo tutorial.
Carattere a spaziatura fissa n. 1: stile del logo
Inizia a costruire il design n. 1
Carattere a spaziatura fissa n. 2: grandi blocchi di lettere
Inizia a costruire il design #2
Carattere a spaziatura fissa n. 3: cruciverba
Inizia a costruire il progetto n. 3
Scarica GRATUITAMENTE il layout dei disegni di caratteri a spaziatura fissa
Per mettere le mani sui disegni 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 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.
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!
Iscriviti al nostro canale Youtube
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non lo hai ancora fatto, installa e attiva il tema Divi installato (o il plug-in Divi Builder se non utilizzi il tema Divi).
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Carica alcune immagini fittizie nella libreria multimediale da utilizzare per il tutorial. Utilizzeremo un logo immagine di 200 x 200 pixel dal pacchetto di layout HVAC e due immagini di sfondo (larghe almeno 1920 px) prese da Cake Maker Layout Pack e Home Improvement Layout Pack.
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Carattere a spaziatura fissa n. 1: stile del logo
Iniziamo con un semplice design del carattere a spaziatura fissa che evidenzia l'equilibrio simmetrico delle lettere. Poiché le lettere sono spaziate in modo uniforme, i caratteri a spaziatura fissa sono ottimi per la grafica e i loghi. Ecco un rapido esempio di come puoi incorporare il carattere a spaziatura fissa con una semplice icona dell'immagine per creare una bella grafica.
Innanzitutto, crea una sezione regolare con una riga a una colonna.
Prima di aggiungere il modulo di testo, aggiungeremo uno sfondo alla sezione. Lo sfondo sarà costituito da un'immagine icona centrata con uno sfondo grigio scuro. L'immagine dell'icona che useremo è presa dal pacchetto di layout HVAC. Assicurati che l'icona dell'immagine sia di circa 200 px per 200 px poiché utilizzeremo la dimensione effettiva come immagine di sfondo.
Apri le impostazioni della sezione e aggiorna quanto segue:
- Colore di sfondo: #121212
- Immagine di sfondo: [inserisci icona immagine 200px per 200px]
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: Centro
Aggiungi il modulo di testo
Una volta completata la sezione, aggiungi un modulo di testo alla riga a una colonna.
Qui è dove aggiungiamo il testo con un carattere a spaziatura fissa. L'aspetto conveniente delle lettere a spaziatura fissa è che, poiché ogni lettera ha la stessa larghezza, puoi facilmente centrare la lettera centrale del testo sulla pagina. Ciò semplificherà l'allineamento con l'icona dell'immagine di sfondo che abbiamo aggiunto alla sezione.
Apri le impostazioni del modulo di testo e aggiorna il contenuto del corpo con la parola "elegante". In realtà puoi usare praticamente qualsiasi parola che ha un numero dispari di lettere in modo da avere una lettera centrale per sovrapporsi bene all'icona dell'immagine di sfondo.
Aggiunta del design del carattere a spaziatura fissa
Divi ha circa 12 diversi caratteri a spaziatura fissa inclusi nel generatore Divi tra cui possiamo scegliere. Per vederli, possiamo fare clic per selezionare un carattere di testo e inserire "mono" nella barra di ricerca. Questo mostrerà l'elenco dei caratteri a spaziatura fissa disponibili.
Quindi aggiorna le impostazioni di progettazione come segue:
- Carattere del testo: Droid Sans Mono
- Dimensione del testo del testo: 5vw
- Spaziatura delle lettere del testo: 1.3em
- Altezza riga di testo: 1em
Questa combinazione dell'unità di lunghezza vw per la dimensione del testo e dell'unità di lunghezza em per la spaziatura delle lettere e l'altezza della riga assicurerà che il testo risponda perfettamente a tutte le dimensioni del browser.
Spaziatura
Dopo che il carattere è pronto, aggiungi un po' di spazio al modulo di testo per assicurarti che il testo sia perfettamente centrato. Possiamo vedere che il testo è un po' decentrato a causa della spaziatura delle lettere. Possiamo facilmente risolvere questo problema aggiungendo un padding sinistro uguale al valore che abbiamo aggiunto per la spaziatura delle lettere.
Aggiorna quanto segue:
- Margine: 0px in basso
- Imbottitura: 2em in alto, 2em in basso, 1.3em a sinistra
Cambia il colore della lettera centrale
Un modo semplice per cambiare il colore di una singola lettera in Divi consiste nell'utilizzare le opzioni di stile in linea quando si utilizza il builder sul front-end.
Evidenzia semplicemente la lettera che desideri modificare e fai clic sull'icona del colore del testo nella barra dei menu.
Quindi aggiungi il seguente codice colore: rgba(248, 142, 96, 0.54)
Questo è tutto!
Crea riga a larghezza intera
Dobbiamo fare spazio per il testo che verrà aggiunto, quindi vai avanti e rendi la riga a larghezza intera aprendo le impostazioni della riga e aggiornando quanto segue:
- Larghezza: 100%
- Larghezza massima: 100%
Risultato finale
Questo è il risultato finale.
E se lo desideri, puoi aggiungere uno spazio per il carattere centrale nel testo per utilizzare l'icona dell'immagine di sfondo per lo spazio vuoto. Ecco come sarebbe.
Carattere a spaziatura fissa n. 2: grandi blocchi di lettere
Questo prossimo design mostra la struttura del carattere a blocchi che è possibile con i caratteri a spaziatura fissa. A differenza dei caratteri normali (a larghezza variabile), i caratteri a spaziatura fissa si impilano uno sopra l'altro per un design equilibrato, moderno e piacevole alla vista.
Ecco come farlo.
Crea una nuova sezione regolare con una riga a una colonna.
Prima di aggiungere qualsiasi modulo, aggiorna la sezione con un design di sfondo come segue:
- Colore sfondo sfumato sinistro: #fcd1e5
- Colore di sfondo sfumato a destra: rgba (255,255,255,0)
- Direzione del gradiente: 135 gradi
- Posizione di partenza: 50%
- Posizione finale: 76%
Quindi aggiungi un'immagine di sfondo. Io ne uso uno dal Cake Maker Layout Pack.
Aggiungi larghezza riga
Quindi, aggiorna la larghezza della riga come segue:
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi il modulo di testo
Una volta che hai una riga a larghezza intera, aggiungi un modulo di testo alla riga.
Quindi aggiorna il contenuto del corpo con quanto segue:
<p>dividesign<a href="#">learnmore</a></p>
Quindi modella il testo del paragrafo come segue:
- Carattere del testo: Cavalcavia Mono
- Stile del carattere del testo: TT
- Colore del testo del testo: #2e298f
- Dimensione del testo del testo: 15vw
- Spaziatura delle lettere del testo: 0,16 em
- Altezza riga di testo: 1em
Aggiungeremo uno stile diverso al testo del collegamento come segue:
- Stile carattere collegamento: sottolineato
- Colore del testo del collegamento: #2e298f
- Dimensione del testo del collegamento: 3.5vw
- Spaziatura delle lettere del collegamento: 0em
Spaziatura
Dopo che il testo è stato stilizzato, aggiorna la spaziatura come segue:
- Margine: 0px in basso
- Imbottitura: 0.16em a sinistra, 3em a destra
Successivamente, salva le impostazioni. Quindi usa le opzioni di stile in linea per cambiare il colore delle lettere come abbiamo fatto nel primo esempio di design in precedenza nel post.
Per fare ciò, evidenzia le prime quattro lettere e cambia il colore in bianco.
Cambia il colore della seconda lettera come segue: #f34a43
Infine, evidenzia le prime cinque lettere nel testo del collegamento ("impara") e aggiorna il colore come segue: #f34a43.
Progetto definitivo
Ora diamo un'occhiata al risultato finale su una pagina live.
Carattere a spaziatura fissa n. 3: cruciverba
Quest'ultimo design sfrutta i caratteri a spaziatura fissa per creare un layout di tipo cruciverba per il tuo testo. Ecco come farlo.
Innanzitutto, crea una nuova sezione regolare con una riga a una colonna.
Prima di aggiungere qualsiasi modulo, apri le impostazioni della sezione e aggiungi un'immagine di sfondo con un gradiente come segue:
- Immagine di sfondo: [inserisci immagine]
- Colore di sfondo sfumato a sinistra:
- Colore di sfondo sfumato a destra:
- Direzione del gradiente: 90 gradi
- Posizione di partenza: 25%
- Posizione finale: 0%
- Posiziona il gradiente sopra l'immagine di sfondo: S
Impostazioni riga
Una volta terminato lo sfondo della sezione, apri le impostazioni della riga con una nuova larghezza e una spaziatura.
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 22vw sopra, 5vw sinistra
Aggiungi modulo di testo
Dopo che la riga è stata aggiornata, aggiungi un nuovo modulo di testo alla riga con la parola "mono" come contenuto del corpo.
Quindi aggiorna il design del modulo di testo come segue:
- Carattere del testo: Rubik Mono One
- Colore del testo del testo: #faac00
- Dimensione del testo del testo: 8vw
- Spaziatura delle lettere del testo: 0,15 em
- Altezza riga di testo: 1em
Duplica il modulo di testo
Per velocizzare la progettazione dei nostri prossimi due blocchi di testo, duplichiamo il modulo di testo che abbiamo appena progettato due volte in modo da avere un totale di tre moduli di testo impilati uno sopra l'altro.
Aggiorna modulo testo n. 2
Dopo aver duplicato il modulo di testo, apri le impostazioni per il secondo modulo di testo (centrale) e cambia il corpo del testo con la parola "caratteri".
Quindi aggiorna quanto segue:
- Corpo: "caratteri"
- Colore di sfondo: #dddddd
- Colore del testo del testo: #930565
- Larghezza: 0,86 em
- Margine: -3em in alto, 2em a sinistra
Nota come la modifica della larghezza del modulo di testo fa sì che il testo venga visualizzato verticalmente. E poiché è un carattere a spaziatura fissa, si impilano uniformemente. E con una larghezza pari alla dimensione di ogni blocco di lettere, possiamo spostare il modulo di testo con incrementi di 1 em. Quindi -3em margine superiore porterà il testo esattamente 3 blocchi di lettere. E il margine sinistro di 2em sposterà il modulo di testo esattamente su 2 blocchi di lettere a destra. Ciò semplifica il posizionamento degli elementi in un layout di cruciverba come questo.
Scatola ombra
Aggiungiamo un'ombra di casella per aumentare la dimensione dello sfondo dietro il modulo di testo.
- Box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 0px
- Forza sfocatura ombra scatola: 0px
- Forza di diffusione dell'ombra della scatola: 0,08 em
- Colore ombra: #dddddd (uguale al colore di sfondo)
Indice Z
Per assicurarti che questo blocco di testo rimanga al di sopra degli altri moduli di testo, aggiorna l'indice z come segue:
- Indice Z: 11
Aggiorna modulo testo n. 3
Una volta completato il modulo di testo n. 2, apri le impostazioni per il terzo modulo di testo e modifica il corpo del testo con la parola "spaziato".
Quindi sposta il modulo in posizione utilizzando i nostri magici valori di margine em:
- Margine: -1em in alto, 2em a sinistra
Progetto definitivo
Mobile
Poiché questi design sono realizzati utilizzando unità di lunghezza vw ed em, il design rimarrà coerente su tutte le dimensioni del browser. Ecco come appare il design sul display del tablet e del telefono.
Nota: l'unico elemento che non risponde è l'icona dell'immagine di sfondo nel primo design. Tuttavia, puoi facilmente aggiungere un'immagine di sfondo più piccola su tablet e telefono per risolvere questo problema.
Pensieri finali
Forse la cosa migliore della creazione di design di caratteri a spaziatura fissa in Divi è la versatilità degli stili di carattere. Solo qualche piccolo tocco può fare una grande differenza. Inoltre le applicazioni sono abbastanza pratiche per qualsiasi sito web.
Quale di questi tre esempi hai trovato più promettente?
Non vedo l'ora di sentirti nei commenti.
Saluti!