Come creare titoli di sezione vivaci per il tuo prossimo progetto Divi

Sappiamo che la maggior parte di voi è sempre alla ricerca di nuovi modi per rendere unici i siti web che crei. Con Divi, ci sono molti modi per far risaltare il tuo sito web dagli altri là fuori. Oggi ti mostreremo come creare fantastici titoli di sezione utilizzando solo le opzioni integrate di Divi. Questo approccio è ottimo se vuoi creare un design straordinario, mantenere la struttura generale della pagina e mantenere la navigazione senza interruzioni.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato che miriamo a ottenere su schermi di diverse dimensioni:

Iniziamo a creare!

Aggiungi nuova sezione regolare

Spaziatura

Inizia aprendo una nuova pagina, passando a Visual Builder e aggiungendo la prima sezione. Senza aggiungere ancora righe o moduli, apri le impostazioni della sezione e aggiungi un po' di riempimento:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una riga utilizzando la seguente struttura di colonne:

Colore di sfondo

Apri le impostazioni della riga e aggiungi un colore di sfondo all'intera riga:

• Colore di sfondo: #f9f9f9

Sfondo sfumato colonna 1

Quindi, aggiungi uno sfondo sfumato sottile alla tua prima colonna. Ciò contribuirà a creare la sovrapposizione dei titoli delle sezioni tra le colonne.

• Colore 1: #0031c4
• Colore 2: #00aeff
• Colonna 1 Direzione gradiente: 125deg

Dimensionamento

Modifica anche la spaziatura della riga per assicurarti che occupi l'intera larghezza dello schermo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Infine, modifica le impostazioni di Spaziatura in base alle diverse dimensioni dello schermo:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura superiore colonna 2: 200 px
• Imbottitura inferiore colonna 2: 200 px
• Imbottitura sinistra colonna 2: 350 px (desktop), 50 px (tablet e telefono)
• Imbottitura destra colonna 2: 50 px

Aggiungi il modulo di testo del titolo della sezione alla colonna 1

Impostazioni testo H2

Ora che tutte le impostazioni di riga sono a posto, possiamo iniziare ad aggiungere moduli. Inizieremo con la prima colonna. Qui, l'unico modulo di cui avremo bisogno è un modulo di testo. Dopo aver aggiunto il contenuto H2 nella casella Contenuto, vai avanti e modifica le impostazioni del testo H2:

• Peso carattere titolo 2: Ultra grassetto
• Stile carattere titolo 2: maiuscolo
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #ffffff
• Intestazione 2 Dimensioni del testo: 150 px
• Altezza della linea di intestazione 2: 1,25 em
• Intestazione 2 Lunghezza verticale dell'ombra del testo: -0,55 em
• Colore ombra testo titolo 2: rgba (0,255,255,0.25)

Spaziatura

La sovrapposizione tra le colonne è diversa su desktop, tablet e telefono. Per creare la sovrapposizione, apporteremo alcune modifiche alle impostazioni di Spaziatura del nostro modulo di testo:

• Margine superiore: 325 px (desktop), 150 px (tablet e telefono)
• Margine inferiore: 325 px, -120 px (tablet), -110 px (telefono)
• Margine destro: -100% (desktop), 0px (tablet e telefono)

Filtro

Ultimo ma non meno importante, utilizzeremo una modalità di fusione per creare la differenza di colore per il testo visualizzato.

• Modalità di fusione: sovrapposizione

Aggiungi il modulo di testo del titolo alla colonna 2

Impostazioni testo H3

Passiamo alla seconda colonna. Lì, il primo modulo di cui avremo bisogno è un titolo Text Module. Dopo aver aggiunto il contenuto H3, modifica le impostazioni del testo H3:

• Intestazione 3 Peso del carattere: semi grassetto
• Colore testo titolo 3: #00aeff
• Intestazione 3 Dimensioni del testo: 60 px
• Intestazione 3 spaziatura lettere: -3px

Spaziatura

Crea un po 'di spazio aggiungendo il margine inferiore successivo:

• Margine inferiore: 50 px

Aggiungi modulo divisore alla colonna 2

Colore divisore

Il secondo modulo di cui avremo bisogno è un modulo divisore. Apri le Impostazioni colore e cambia il colore in modo che corrisponda alla tavolozza dei colori del disegno:

• Colore divisore: #00ffff

Dimensionamento

Quindi, modifica le impostazioni di dimensionamento:

• Altezza: 56px
• Larghezza: 75%

Aggiungi il modulo di testo descrittivo alla colonna 2

Impostazioni testo

Continua aggiungendo una descrizione Modulo di testo utilizzando le seguenti impostazioni di testo:

• Dimensione del testo: 17px
• Altezza riga di testo: 1,3 em
• Orientamento del testo: giustifica

Dimensionamento

Modifica le impostazioni di dimensionamento in seguito:

• Dimensioni: 70% (desktop), 100% (tablet e telefono)

Spaziatura

Aggiungi dello spazio sotto questo modulo usando anche un margine inferiore:

• Margine inferiore: 50 px

Aggiungi modulo pulsante alla colonna 2

Impostazioni dei pulsanti

L'ultimo modulo di cui avremo bisogno in questa colonna è un modulo pulsante. Dopo aver aggiunto il CTA, modifica le impostazioni del pulsante:

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 17 px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #00aeff
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 100 px
• Spaziatura delle lettere dei pulsanti: -1px
• Peso del carattere: Ultra grassetto
• Stile carattere: maiuscolo

Spaziatura

E per dare al pulsante un aspetto più pulito, aggiungeremo anche un po' di imbottitura:

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Scatola ombra

Ultimo ma non meno importante, useremo un'ombra sottile per aggiungere un po' di profondità alla nostra sezione:

• Intensità sfocatura ombra scatola: 54 px
• Forza di diffusione dell'ombra della scatola: -8px
• Colore ombra: rgba(0,0,0,0.3)

Clona sezione

Cambia tutto Copia

Per creare la seconda sezione, cloneremo semplicemente quella che abbiamo già creato e quindi cambieremo tutta la copia.

Cambia il colore di sfondo della riga

Per questa nuova sezione, useremo un'altra tavolozza di colori. Inizia cambiando il colore di sfondo della tua riga.

• Colore di sfondo: #efefef

Cambia lo sfondo sfumato della colonna 1

Quindi, scegli anche un altro sfondo sfumato.

• Colore 1: #5f00a8
• Colore 2: #9000ff

Cambia il colore dell'ombra del titolo della sezione

Stiamo abbinando anche il colore dell'ombra del testo con la nostra nuova tavolozza di colori:

• Colore ombra testo titolo 2: rgba(255,0,255,0.24)

Modifica le impostazioni di spaziatura del titolo della sezione

A seconda della lunghezza della copia che stai utilizzando, dovrai giocare con il margine destro negativo.

• Margine destro: -110% (desktop)

Cambia il colore del testo del modulo di testo del titolo

Quindi, cambia il Colore del testo del titolo Modulo di testo nella colonna 2.

• Colore testo titolo 3: #9000ff

Cambia colore divisore

Allo stesso modo, fai in modo che il colore del divisore corrisponda al design.

• Colore: #ff00ff

Cambia il colore di sfondo del pulsante

Per finire, dovrai cambiare il colore di sfondo del modulo pulsante.

• Colore di sfondo del pulsante: #9000ff

Anteprima

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

Pensieri finali

Ci sono molti modi in cui puoi far risaltare il tuo web design dagli altri siti web là fuori. In questo post, ti abbiamo mostrato come creare fantastici titoli di sezione e sezioni in generale, utilizzando solo le opzioni integrate di Divi. Abbiamo combinato sfondi sfumati di colonna con sovrapposizioni di moduli di testo, ombre di testo e modalità di fusione per creare un risultato finale straordinario. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!