Utilizzo del modulo di testo di Divi per creare elementi di blocco nel design della tua pagina Divi

I moduli di testo sono una parte vitale di qualsiasi design di pagina che crei con Divi, sono sicuro che è qualcosa su cui possiamo essere tutti d'accordo. Normalmente, vengono utilizzati per visualizzare il testo in modo semplice. Ma puoi usare i moduli di testo anche per creare straordinari elementi di design. Nei precedenti post del blog, ti abbiamo già mostrato come utilizzare il testo per migliorare il tuo web design.

In questo tutorial, continueremo ad aggiungere opzioni tra cui scegliere quando si progetta una pagina e si utilizzano i moduli di testo. Come forse saprai o meno, esistono diversi tipi di testo che puoi combinare all'interno dello stesso modulo di testo. Inoltre, un modulo può contenere diversi titoli, paragrafi, collegamenti e altro. In questo post, utilizzeremo tutti questi tipi di testo a nostro vantaggio per creare straordinari elementi di blocco nel design della nostra pagina.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale su schermi di diverse dimensioni.

Iniziamo!

Aggiungi nuova sezione regolare

Colore di sfondo

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando. Quindi, apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #000000

Spaziatura

Vai alle impostazioni di spaziatura della tua sezione successiva e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 280 px (desktop), 150 px (tablet e telefono)
• Imbottitura inferiore: 280 px (desktop), 150 px (tablet e telefono)

Aggiungi nuova riga

Struttura della colonna

Dopo aver modificato le impostazioni della sezione, aggiungi una nuova riga utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere alcun modulo, apri le impostazioni di riga e fai in modo che la riga occupi l'intera larghezza dello schermo nelle impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Infine, aggiungi un'imbottitura personalizzata nelle impostazioni di Spaziatura.

• Imbottitura sinistra colonna 1: 100 px (desktop e tablet), 50 px (telefono)
• Imbottitura personalizzata colonna 2: 50 px
• Imbottitura personalizzata colonna 3: 50 px

Aggiungi il modulo di testo del titolo alla colonna 1

Scatola dei contenuti

È ora di iniziare ad aggiungere i diversi moduli! Il primo modulo di cui avremo bisogno nella prima colonna è un modulo di testo. Aggiungi alcuni contenuti H2 alla casella del contenuto.

Impostazioni testo H2

Quindi, vai alle impostazioni del testo H2 e apporta alcune modifiche:

• Intestazione 2: Font: codice sorgente Pro
• Stile carattere titolo 2: maiuscolo
• Colore testo titolo 2: #ffffff
• Intestazione 2 Dimensioni del testo: 100 px
• Intestazione 2 Spaziatura lettere: 24px

Spaziatura

Riduci lo spazio in alto utilizzando un margine superiore negativo.

• Margine superiore: -50 px

Aggiungi il modulo di testo descrittivo alla colonna 1

Impostazioni testo

Il secondo modulo necessario nella prima colonna è un modulo di testo descrittivo. Dopo aver aggiunto i tuoi contenuti, vai alle impostazioni del testo e apporta alcune modifiche:

• Carattere del testo: codice sorgente Pro
• Colore del testo: #ffffff
• Orientamento del testo: giustifica

Dimensionamento

Riduci anche la larghezza del modulo di testo.

• Larghezza: 68%

Spaziatura

E, ultimo ma non meno importante, crea uno spazio tra questo modulo di testo e il precedente nelle impostazioni di Spaziatura.

• Margine superiore: 200 px (desktop), 100 px (tablet e telefono)
• Margine inferiore: 100 px (tablet e telefono)

Aggiungi il modulo di blocco del testo alla colonna 2

Scatola dei contenuti

È ora di passare alla seconda colonna! Qui, useremo i moduli di testo per creare elementi di blocco. Una parte vitale del fare questo lavoro è strutturare correttamente la casella del contenuto. Nella schermata di stampa qui sotto, puoi vedere che stiamo usando un titolo H3, un titolo H4, un paragrafo e un collegamento. Tra il titolo H4 e il paragrafo, ci assicuriamo che rimanga anche dello spazio aggiuntivo.

Colore di sfondo

Aggiungi un colore di sfondo nero al modulo di testo.

• Colore di sfondo: #000000

Impostazioni testo

Modificheremo singolarmente ciascuno dei tipi di testo. Inizia modificando le impostazioni del paragrafo.

• Carattere del testo: codice sorgente Pro
• Orientamento del testo: a sinistra
• Colore del testo: chiaro

Link alle impostazioni del testo

Quindi, apportare alcune modifiche aggiuntive alle impostazioni del collegamento.

• Stile carattere collegamento: maiuscolo e sottolineato
• Colore sottolineatura collegamento: #ffffff
• Colore del testo del collegamento: #edf000
• Dimensione del testo del collegamento: 16 px
• Spaziatura delle lettere del collegamento: 3px

Intestazione 3 Impostazioni testo

Il titolo H3 nella nostra casella dei contenuti richiede le seguenti impostazioni:

• Intestazione 3 Stile carattere: maiuscolo
• Intestazione 3 Dimensioni del testo: 33 px

Intestazione 4 Impostazioni testo

Continua aprendo le impostazioni del testo H4 e apporta alcune modifiche anche lì.

• Colore testo titolo 4: #4f4f4f
• Intestazione 4 Dimensioni del testo: 19 px
• Intestazione 4 spaziatura lettere: -1px

Dimensionamento

Per creare la forma esatta che desideriamo, ridurremo successivamente la larghezza del modulo di testo.

• Larghezza: 88% (desktop), 60% (tablet), 90% (telefono)

Spaziatura

Dovremo anche modificare le impostazioni di Spaziatura.

• Margine sinistro: 200 px (tablet)
• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

Quindi, aggiungi un bordo sottile al modulo di testo.

• Larghezza bordo: 2px
• Colore bordo: #424242

Scatola ombra

E per finire, aggiungi un'ombra colorata.

• Posizione orizzontale dell'ombra del riquadro: 19 px
• Posizione verticale dell'ombra del riquadro: 16 px
• Forza di diffusione dell'ombra della scatola: -4px
• Colore ombra: #f2ff00

Clona il modulo di testo del blocco due volte e posizionalo nella colonna 3

Per risparmiare tempo, cloneremo il modulo di testo del blocco che abbiamo creato due volte e posizioneremo entrambi i duplicati nella terza colonna della riga.

Modifiche al modulo di testo rosso

Cambia il colore del testo del collegamento

Apri il primo modulo di testo nella terza colonna e cambia il colore del collegamento.

• Colore del testo del collegamento: #e02b20

Cambia spaziatura

Quindi, vai alle impostazioni Spaziatura e aggiungi un margine superiore.

• Margine superiore: -150 px (desktop), -20 px (tablet), 50 px (telefono)

Cambia colore ombra casella

Cambia il colore dell'ombra della scatola nello stesso colore utilizzato per il testo del collegamento.

• Colore ombra: #e02b20

Modifiche al modulo di testo blu

Cambia il colore del testo del collegamento

Cambia anche il colore del collegamento del secondo modulo di testo nella terza colonna.

• Colore del testo del collegamento: #0ff3ff

Cambia taglia

Modificare le impostazioni di dimensionamento successivamente.

• Dimensioni: 67% (Desktop), 60% (Tablet), 90% (Telefono)

Cambia spaziatura

E per creare una sovrapposizione tra questo modulo e gli altri due moduli di testo, gioca con i valori dei margini personalizzati.

• Margine superiore: -20 px (desktop), -30 px (tablet), 50 px (telefono)
• Margine sinistro: -160 px (desktop), 200 px (tablet), 0 px (telefono)

Cambia colore ombra casella

Per finire, cambia il colore dell'ombra della scatola nello stesso colore blu usato per il testo del link e il gioco è fatto!

• Colore ombra: #0ff3ff

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'occhiata finale al risultato su schermi di diverse dimensioni.

Pensieri finali

Rimarrai stupito dal numero di design unici che puoi ottenere utilizzando i moduli di testo in combinazione con le opzioni integrate di Divi. Nessun codice CSS aggiuntivo richiesto. In questo post, ti abbiamo mostrato come utilizzare diversi tipi di testo per creare straordinari elementi di blocco sul design della tua pagina Divi. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!