Come creare capitoli di sezione utilizzando le nuove opzioni di progettazione di Divi

Nel tutorial Divi di oggi, ti mostreremo come creare fantastici capitoli di sezione per il tuo sito web. Questi capitoli servono come linea guida per i tuoi visitatori. Li mostrerà quando accedono a un'altra sezione di una pagina. Di solito, i capitoli vengono utilizzati in combinazione con un colore di sfondo specifico in tutte le sezioni.

Se stai pensando di utilizzare i capitoli delle sezioni sul tuo sito web, questo post potrebbe essere un bel posto per trarre ispirazione. Ti mostreremo 4 stili di capitoli di sezione che puoi facilmente ricreare seguendo questo post.

Risultato

Prima di entrare nel lato pratico degli stili dei capitoli in quattro sezioni, diamo un'occhiata a cosa puoi aspettarti dal risultato finale.

Sezione Capitolo Stile #1

Sezione Capitolo Stile #2

Sezione Capitolo Stile #3

Sezione Capitolo Stile #4

Come creare capitoli di sezione utilizzando le nuove opzioni di progettazione di Divi

Iscriviti al nostro canale Youtube

Sezione Capitolo Stile #1

Opzioni di riga

Inizia aggiungendo una riga a due colonne alla pagina su cui stai lavorando e selezionando l'allineamento della riga a sinistra nella scheda Progettazione.

Scorri verso il basso la stessa scheda e assicurati di selezionare "0px" per il riempimento superiore, destro, inferiore e sinistro. Il motivo per cui lo stiamo facendo è rendere la riga il più piccola possibile in modo che non occupi molto posto nella sezione.

Modulo divisore

In tutti i nostri esempi, utilizzeremo solo una delle due colonne (a seconda dell'allineamento delle righe). Se stai posizionando il tuo capitolo sul lato sinistro della pagina, scegli la colonna di sinistra. Quindi, aggiungi un modulo divisore e abilita l'opzione "Mostra divisore" nella scheda Contenuto.

Passa alla scheda Design e usa "#000000" come colore del divisore.

Quindi, apri la sottocategoria Stili e scegli "Punteggiato" come Stile divisore e "In alto" come Posizione divisore.

Quindi, assicurati che le seguenti impostazioni si applichino alla sottocategoria Ridimensionamento:

• Peso del divisore: 3px
• Altezza: 23px
• Larghezza: 62%
• Allineamento del modulo: a sinistra

Primo modulo di testo

Dopo aver aggiunto il modulo divisore, è il momento di aggiungere il primo modulo di testo proprio sotto di esso. Dopo aver scelto il numero del capitolo, usa il seguente sfondo sfumato:

• Primo colore: rgba (96,150,193,0.16)
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 51%
• Posizione finale: 51%

Quindi, passa alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

• Carattere del testo: Scimmia felice
• Dimensione carattere del testo: 53 (desktop e tablet), 25 (telefono)
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Apri la sottocategoria Dimensionamento, scegli una larghezza di "40%" e seleziona l'allineamento del modulo centrale.

L'ultima cosa di cui ha bisogno questo modulo di testo è il seguente margine e riempimento personalizzati:

• Margine superiore: -40 px
• Imbottitura superiore: 40px
• Imbottitura destra: 50px
• Imbottitura inferiore: 40 px
• Imbottitura sinistra: 50 px

Secondo modulo di testo

Aggiungi un altro modulo di testo con le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Arimo
• Dimensione carattere del testo: 19 px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Scorri verso il basso la stessa scheda, usa una larghezza del '97%' e abilita l'opzione Allineamento modulo centrale.

Infine, aggiungi anche un margine superiore di "-15px".

Terzo modulo di testo

L'ultimo modulo di testo del capitolo della sezione ha le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Arimo
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 19 px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

All'interno della sottocategoria Dimensionamento, utilizzare una larghezza di '99%' e selezionare l'allineamento del modulo centrale.

L'ultima cosa che devi fare per questo capitolo della sezione è aggiungere un margine superiore di '-20px'.

Sezione Capitolo Stile #2

Opzioni di riga

Il secondo esempio si trova sul lato destro dello schermo. Ancora una volta, aggiungi una riga a due colonne ma scegli invece l'allineamento riga corretto.

Apri la sottocategoria Spaziatura e assegna "0px" al padding superiore, destro, inferiore e sinistro.

Modulo divisore

Aggiungi un modulo divisore alla colonna a destra e abilita l'opzione "Mostra divisore".

Useremo il seguente sfondo sfumato per il divisore:

• Primo colore: rgba (132,132,132,0.61)
• Secondo colore: rgba (224,43,32,0.86)
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 43%
• Posizione finale: 100%

Passa alla scheda Design e seleziona "rgba(0,0,0,0.26)" come colore del divisore.

Quindi, usa "Solido" come stile del divisore e "Alto" come posizione del divisore.

Quindi, apri la sottocategoria Ridimensionamento e applica le seguenti impostazioni:

• Peso del divisore: 3px
• Altezza: 11px
• Larghezza: 68%
• Allineamento del modulo: a destra

Primo modulo di testo

Il primo modulo di testo ha le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Cantata One
• Dimensione carattere del testo: 100 px
• Colore del testo: #000000
• Altezza riga di testo: 1,7 em
• Orientamento del testo: a destra

Apri la sottocategoria Spaziatura e utilizza i seguenti margini personalizzati e spaziatura interna:

• Margine superiore: -95px
• Imbottitura superiore: 40px
• Imbottitura destra: 50px
• Imbottitura inferiore: 40 px
• Imbottitura sinistra: 50 px

Secondo modulo di testo

Aggiungi un altro modulo di testo e utilizza invece le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Arimo
• Dimensione carattere del testo: 20px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Quindi, aggiungi un margine superiore di "-50 px".

Terzo modulo di testo

Il terzo e ultimo modulo di testo di questo esempio ha le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Aragosta due
• Dimensione carattere del testo: 43 px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Infine, aggiungi un margine superiore di "-30px".

Sezione Capitolo Stile #3

Opzioni di riga

Per il terzo esempio, utilizzeremo una riga a due colonne con il seguente sfondo sfumato della colonna 1:

• Primo colore: #edf000
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente colonna 1: lineare
• Colonna 1 Direzione gradiente: 139 gradi
• Colonna 1 Posizione iniziale: 11%
• Posizione finale della colonna 1: 36%

Vai alla scheda Progettazione e seleziona l'allineamento delle righe a sinistra.

Ancora una volta, useremo '0px' per il margine superiore, destro, inferiore e sinistro.

Modulo divisore

Ora aggiungi un modulo divisore alla colonna di sinistra e abilita l'opzione "Mostra divisore".

Apri la sottocategoria Sfondo e usa il seguente sfondo sfumato:

• Primo colore: #4b61af
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione gradiente: 161°
• Posizione di partenza: 18%
• Posizione finale: 38%

Apri la scheda Design e scegli "#000000" come colore del divisore.

All'interno della sottocategoria Stili, utilizzare "Solido" come Stile divisore e "Alto" come Posizione divisore.

Quindi, assicurati che le seguenti impostazioni si applichino alla sottocategoria Ridimensionamento:

• Peso del divisore: 6px
• Altezza: 100 px
• Larghezza: 70%
• Allineamento del modulo: a sinistra

Primo modulo di testo

Continua aggiungendo il primo modulo di testo proprio sotto il modulo divisore e scegliendo il seguente sfondo sfumato:

• Primo colore: rgba (131,0,233,0,58)
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione gradiente: 151°
• Posizione di partenza: 20%
• Posizione finale: 40%

Vai alla scheda Design e usa le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Poiret One
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 69 px
• Colore del testo: #000000
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Apri la sottocategoria Dimensionamento, usa una larghezza del '70%' e seleziona l'allineamento modulo sinistro.

Infine, usa il seguente margine personalizzato e padding:

• Margine superiore: 124 px
• Imbottitura superiore: 60px
• Imbottitura inferiore: 150 px
• Imbottitura sinistra: 50 px

Secondo modulo di testo

Vai avanti e aggiungi un altro modulo di testo con le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Arimo
• Dimensione carattere del testo: 20px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Apri la sottocategoria Dimensionamento, seleziona una larghezza di "80%" e scegli l'allineamento modulo sinistro.

Infine, aggiungi un margine superiore di "-150 px".

Terzo modulo di testo

Aggiungi l'ultimo modulo di testo alla prima colonna e assicurati che siano applicate le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Arimo
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 20px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Apri la sottocategoria Dimensionamento, usa una larghezza di '80%' e scegli l'allineamento modulo sinistro.

Infine, scegli un margine superiore di "-20px" e un'imbottitura inferiore di "50px".

Sezione Capitolo Stile #4

Opzioni di riga

Per l'ultimo esempio, utilizzeremo di nuovo l'allineamento delle righe corretto.

Quindi, apri la sottocategoria Spaziatura e assegna "0px" al padding superiore, destro, inferiore e sinistro.

Primo modulo di testo

Quest'ultimo esempio non contiene un modulo divisore, quindi vai avanti e aggiungi un modulo di testo alla colonna di sinistra. Dopo averlo fatto, scegli il seguente sfondo sfumato:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: #92d84b
• Tipo di gradiente: lineare
• Direzione del gradiente: 55 gradi
• Posizione di partenza: 25%
• Posizione finale: 100%

Quindi, vai alla scheda Progettazione e assicurati che siano applicate le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Cantata One
• Dimensione carattere del testo: 220 (desktop e tablet), 100 px (telefono)
• Colore del testo: #f2f2f2 (corrisponde al colore di sfondo della sezione)
• Altezza riga di testo: 1,7 em
• Orientamento del testo: a destra

Apri la sottocategoria Dimensionamento, usa una larghezza di "82%" e seleziona l'allineamento del modulo corretto.

Infine, usa il seguente riempimento personalizzato:

• In alto: 60px
• A destra: 50 px
• In basso: 60 px
• Sinistra: 50px

Secondo modulo di testo

Aggiungi un altro modulo di testo e utilizza le seguenti impostazioni nella sottocategoria Testo:

• Carattere del testo: Arimo
• Dimensione carattere del testo: 20px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: a destra

Apri la sottocategoria Dimensionamento, scegli una larghezza di "39%" e scegli l'allineamento del modulo centrale.

Infine, aggiungi "-130px" al margine superiore.

Terzo modulo di testo

L'ultimo modulo di testo di questo esempio di capitolo ha le seguenti impostazioni della sottocategoria di testo:

• Carattere del testo: Script di danza
• Dimensione carattere del testo: 45px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: a destra

Apri la sottocategoria Dimensionamento, scegli una larghezza del '50%' e seleziona l'allineamento centrale del modulo.

Ultimo ma non meno importante, scegli un'imbottitura superiore di "-30px" e il gioco è fatto!

Pensieri finali

In questo post, ti abbiamo mostrato come puoi creare e modellare in modo creativo i capitoli delle sezioni sul tuo sito web. Queste sezioni del capitolo consentono di creare una divisione tra le sezioni utilizzando lo stesso colore di sfondo per ciascuna delle sezioni. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in evidenza di Kwok Design / shutterstock.com