5 esempi di layout di sezione in stile editoriale creati con Divi

Le nuove opzioni Divi offrono tantissime possibilità. Moduli, righe e colonne, più che mai, si rafforzano a vicenda sulla strada verso un design web sorprendente e intuitivo. Una delle cose che può fare è creare notevoli sezioni in stile editoriale. Ed è esattamente quello che ti mostreremo in questo post; 5 diversi layout di sezione in stile editoriale che puoi utilizzare all'interno di diversi siti web. La parte migliore? Il post viene realizzato utilizzando le impostazioni corrette per ogni modulo, riga e colonna solo.

Diamo un'occhiata ai cinque esempi che ti mostreremo come creare.

Primo esempio

Desktop

Mobile

Secondo esempio

Desktop

Mobile

Terzo esempio

Desktop

Mobile

Quarto esempio

Desktop

Mobile

Quinto Esempio

Desktop

Mobile

5 esempi di layout di sezione in stile editoriale creati con Divi

Iscriviti al nostro canale Youtube

Inizia a creare il primo esempio

Iniziamo creando il nostro primo layout in stile editor.

Aggiungi nuova sezione

Aggiungi una nuova pagina, abilita Divi Builder e passa a Visual Builder. Una volta che sei nel Visual Builder, aggiungi una sezione standard.

Aggiungi riga a tre colonne

All'interno di quella sezione standard, avremo bisogno di una riga a tre colonne.

Sfondo sfumato

Apri le impostazioni della riga e aggiungi il seguente sfondo sfumato:

• Primo colore: #636363
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 0%
• Posizione finale: 47%

Colore di sfondo della colonna 2

Avremo anche bisogno di impostare '# d8d8d8' come Colore di sfondo della colonna 2.

Dimensionamento

Passa alla scheda Progettazione e utilizza le seguenti impostazioni per la sottocategoria Dimensionamento:

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 100%
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Apri la sottocategoria Spaziatura e aggiungi "50px" al riempimento superiore, destro, inferiore e sinistro della seconda colonna.

Modulo immagine prima colonna

Sfondo sfumato

Aggiungi un'immagine alla prima colonna della riga e usa il seguente sfondo sfumato per essa:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: #086191
• Tipo di gradiente: lineare
• Direzione del gradiente: 107 gradi
• Posizione di partenza: 60%
• Posizione finale: 60%

Allineamento

Vai alla scheda Design, usa l'Allineamento immagine a sinistra e abilita l'opzione "Centra sempre l'immagine sul cellulare".

Spaziatura

Quindi, apri la sottocategoria Spaziatura e utilizza le seguenti impostazioni di margine e spaziatura interna:

• Margine superiore: 100 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

Modulo di testo della seconda colonna

Impostazioni testo

Quindi, aggiungi un modulo di testo alla seconda colonna della riga. Vai alla scheda Design e usa le seguenti impostazioni per la sottocategoria Testo:

• Dimensione carattere del testo: 12px
• Colore del testo: #000000
• Orientamento del testo: al centro

Dimensionamento

Apri la sottocategoria Dimensionamento, usa una Larghezza di "84%" e seleziona l'allineamento del modulo centrale.

Spaziatura

Infine, aggiungi "50 px" al margine superiore e inferiore.

Modulo immagine della terza colonna

Sfondo sfumato

Aggiungi un altro modulo immagine alla terza colonna e usa il seguente sfondo sfumato:

• Primo colore: #a36100
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione gradiente: 73 gradi
• Posizione di partenza: 40%
• Posizione finale: 40%

Allineamento

Vai alla scheda Design, seleziona l'Allineamento immagine a sinistra e abilita l'opzione "Centra sempre l'immagine sul cellulare".

Spaziatura

Infine, aggiungi il seguente margine e padding personalizzati:

• Margine superiore: 300 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

Risultato

Diamo un'altra occhiata al risultato sul desktop:

E sul cellulare:

Inizia a creare un secondo esempio

Il secondo esempio è simile a questo sul desktop:

Aggiungi nuova sezione

Innanzitutto, aggiungi una nuova sezione standard.

Aggiungi riga a due colonne

Quindi, aggiungi una riga a due colonne.

Colore di sfondo della colonna 2

Apri le impostazioni della riga e aggiungi "#ededed" come Colore di sfondo della colonna 2.

Dimensionamento

Vai alla scheda Progettazione e applica le seguenti modifiche alla sottocategoria Dimensionamento:

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 100%
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Modulo immagine prima colonna

Allineamento

Aggiungi un modulo immagine alla prima colonna, usa l'Allineamento immagine a sinistra e abilita l'opzione "Centra sempre l'immagine sul cellulare".

Spaziatura

Apri la sottocategoria Spaziatura e utilizza le seguenti impostazioni:

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

Modulo di testo della seconda colonna

Impostazioni testo

Quindi, aggiungi un modulo di testo alla seconda colonna e applica le seguenti impostazioni alla sottocategoria Testo:

• Carattere del testo: Lato
• Dimensione carattere del testo: 12px
• Colore del testo: #000000
• Altezza riga di testo: 2,2 em
• Orientamento del testo: al centro

Dimensionamento

Apri la sottocategoria Dimensionamento e applica una Larghezza di '75%'.

Spaziatura

Infine, assicurati che le seguenti impostazioni si applichino alla sottocategoria Spaziatura:

• Margine superiore: 120 px (desktop), -80 (tablet e telefono)
• Margine sinistro: -240px (Desktop), 80 (Tablet), 45 (Telefono)
• Imbottitura superiore, destra, inferiore e sinistra: 50 pixel (desktop e tablet), 20 pixel (telefono)

Risultato

Una volta fatto, noterai il seguente design sul desktop:

E sul cellulare:

Inizia a creare il terzo esempio

Successivamente, abbiamo il seguente esempio che assomiglia a questo:

Aggiungi nuova sezione

Ancora una volta, aggiungi una nuova sezione standard.

Aggiungi riga a due colonne

La struttura delle colonne di cui avremo bisogno per questa riga è la seguente:

Colore di sfondo della colonna 1

Apri le impostazioni della riga e usa "# e8e8e8" come colore di sfondo della colonna 1.

Sfondo sfumato colonna 2

Lo sfondo sfumato necessario per la seconda colonna è il seguente:

• Primo colore: #e8e8e8
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente colonna 2: lineare
• Colonna 2 Direzione gradiente: 147 gradi
• Colonna 2 Posizione iniziale: 25%
• Posizione finale della colonna 2: 9%

Dimensionamento

Apri la sottocategoria Dimensionamento e utilizza le seguenti impostazioni:

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 100%
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Infine, aggiungi "70px" all'imbottitura superiore e inferiore della prima colonna.

Modulo immagine prima colonna

Allineamento

Aggiungi un modulo immagine alla prima colonna, usa l'Allineamento immagine a sinistra e abilita l'opzione "Centra sempre l'immagine sul cellulare".

Spaziatura

Apri la sottocategoria Spaziatura e aggiungi "-300 px" al margine sinistro.

Modulo di testo della seconda colonna

Colore di sfondo

Aggiungi un modulo di testo alla seconda colonna e usa '#3d3d3d' come colore di sfondo.

Impostazioni testo

Vai alla scheda Design e usa le seguenti impostazioni per la sottocategoria Testo:

• Carattere del testo: Lato
• Dimensione carattere del testo: 12px
• Colore del testo: #FFFFFF
• Altezza riga di testo: 2,2 em
• Orientamento del testo: al centro

Dimensionamento

Apri la sottocategoria Dimensionamento e usa "75%" per Larghezza.

Spaziatura

Infine, usa le seguenti impostazioni per la sottocategoria Spaziatura:

• Margine superiore: 130 px (desktop), -200 (tablet e telefono)
• Margine sinistro: -180 px (Desktop), 80 (Tablet), 50 (Telefono)
• Imbottitura superiore, destra, inferiore e sinistra: 50 pixel (desktop e tablet), 20 pixel (telefono)

Risultato

Una volta terminato, il risultato sul desktop sarà simile a questo:

E così sul cellulare:

Inizia a creare il quarto esempio

Il quarto esempio che creeremo è simile a questo:

Aggiungi nuova sezione

Inizia aggiungendo una sezione standard alla pagina su cui stai lavorando.

Aggiungi riga a due colonne

Quindi, aggiungi una riga a due colonne.

Dimensionamento

Apri la sottocategoria Ridimensionamento e apporta le seguenti modifiche:

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 60%
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Modulo Prima Colonna Prima Immagine

Allineamento

Aggiungi un modulo immagine alla prima colonna, utilizza l'allineamento immagine corretto e abilita l'opzione "Centra sempre immagine su dispositivo mobile".

Dimensionamento

Vai alla sottocategoria Dimensionamento di quel modulo immagine, usa una larghezza di "89%" e seleziona l'allineamento del modulo corretto.

Visibilità

Vai alla scheda Avanzate e disabilita il Modulo immagine su telefono e tablet. Lo faremo per 3 dei moduli immagine che vengono utilizzati. Puoi decidere tu stesso quale vuoi che appaia su tablet e telefono, nel nostro caso, sarà l'immagine nell'angolo in alto a destra.

Modulo Prima Colonna Seconda Immagine

Allineamento

Aggiungi un altro modulo immagine, usa l'allineamento immagine corretto e abilita l'opzione "Centra sempre immagine su dispositivo mobile".

Frontiera

Scorri verso il basso e utilizza il seguente bordo:

• Usa bordo: Sì
• Colore bordo: #FFFFFF
• Larghezza bordo: 5px
• Stile bordo: solido

Visibilità

Infine, vai alla scheda Avanzate e disabilita il Modulo immagine su telefono e tablet.

Modulo prima immagine della seconda colonna

Allineamento

Aggiungi il modulo immagine successivo alla seconda colonna, usa l'Allineamento immagine a sinistra e abilita l'opzione "Centra sempre l'immagine sul cellulare".

Frontiera

Scorri verso il basso, apri la sottocategoria Bordo e applica le seguenti impostazioni:

• Usa bordo: Sì
• Colore bordo: #FFFFFF
• Larghezza bordo: 4px
• Stile bordo: solido

Seconda colonna Modulo seconda immagine

Allineamento

Aggiungi l'ultimo modulo immagine alla seconda colonna, utilizza l'allineamento immagine a sinistra e abilita l'opzione "Centra sempre immagine su dispositivo mobile".

Dimensionamento

Quindi, apri la sottocategoria di dimensionamento, usa a Larghezza di '89%' e seleziona l'Allineamento modulo sinistro.

Visibilità

Disabilita questo modulo immagine anche su telefono e tablet.

Aggiungi riga a una colonna

Una volta terminata la riga precedente, vai avanti e aggiungine un'altra. Questa volta, la riga avrà bisogno solo di una colonna.

Dimensionamento

Vai alla scheda Design delle impostazioni della riga, abilita l'opzione "Usa larghezza personalizzata" e usa "581px" come larghezza personalizzata.

Modulo di testo

Colore di sfondo

Aggiungi un modulo di testo a quella nuova riga e seleziona "rgba(255,255,255,0.92)" come colore di sfondo.

Impostazioni testo

Passa alla scheda Progettazione e applica le seguenti impostazioni alla sottocategoria Testo:

• Carattere del testo: Lato
• Dimensione carattere del testo: 12px
• Colore del testo: #000000
• Altezza riga di testo: 2,2 em
• Orientamento del testo: al centro

Dimensionamento

Quindi, apri la sottocategoria Dimensionamento, aggiungi "75%" alla Larghezza e seleziona l'allineamento del modulo centrale.

Spaziatura

Infine, applica le seguenti impostazioni alla sottocategoria Spaziatura:

• Margine superiore: -580px (desktop), -200 (tablet e telefono)
• Margine sinistro: – 180 px (Desktop), 80 (Tablet), 50 (Telefono)
• Imbottitura superiore, destra, inferiore e sinistra: 50 px

Risultato

Una volta fatto, sarai in grado di assistere al seguente risultato sul desktop:

E quanto segue sul cellulare:

Inizia a creare il quinto esempio

L'ultimo esempio che ti mostreremo come ricreare è il seguente:

Aggiungi sezione a larghezza intera

Inizia aggiungendo una sezione a larghezza intera alla tua pagina.

Modulo immagine a larghezza intera

All'interno di quella sezione Fullwidth, aggiungi un modulo immagine Fullwidth.

Aggiungi nuova sezione

Proprio sotto la sezione precedente, aggiungi un'altra sezione. Questa volta, la sezione deve essere standard anziché a larghezza intera.

Aggiungi una riga a tre colonne

Aggiungi una riga a tre colonne a quella nuova sezione standard.

Colore di sfondo delle colonne 1, 2 e 3

Apri le impostazioni delle righe e assegna i seguenti colori di sfondo alle colonne:

• Colonna 1: #eaeaea
• Colonna 2: rgba(12,113,195,0.17)
• Colonna 3: rgba(131,0,233,0.09)

Dimensionamento

Vai alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Dimensionamento:

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

Spaziatura

Quindi apri la sottocategoria Spaziatura, aggiungi "-60 px" al margine superiore e "50 px" al riempimento inferiore di ciascuna colonna.

Modulo testo prima colonna

Colore di sfondo

Continua aggiungendo un modulo di testo alla prima colonna e utilizzando 'rgba(255,255,255,0.89)' come colore di sfondo.

Impostazioni testo

Vai alla scheda Progettazione e applica le seguenti impostazioni alla sottocategoria Testo:

• Carattere del testo: Lato
• Dimensione carattere del testo: 12px
• Colore del testo: #000000
• Altezza riga di testo: 2,2 em
• Orientamento del testo: al centro

Frontiera

Apri la sottocategoria Border e utilizza le seguenti impostazioni:

• Usa bordo: Sì
• Colore bordo: #FFFFFF
• Larghezza bordo: 17 px
• Stile bordo: solido

Dimensionamento

Quindi, utilizzare una Larghezza di "75%" e selezionare l'allineamento del modulo centrale all'interno della sottocategoria Dimensionamento.

Spaziatura

Infine, apri la sottocategoria Spaziatura e applica le seguenti impostazioni:

• Margine superiore: -300 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore, destra, inferiore, sinistra: 50 pixel (desktop e tablet), 20 pixel (telefono)

Clona il modulo di testo due volte e posizionalo in altre due colonne

Vai avanti e clona il modulo di testo due volte. Quindi, posiziona ciascuno dei cloni nelle due colonne rimanenti.

Modifica della spaziatura del modulo di testo della seconda colonna

Dovremo cambiare il margine superiore del modulo di testo posizionato all'interno della seconda colonna in '-220px'.

Modifica la spaziatura del modulo di testo della terza colonna

Stessi conteggi per il modulo di testo nella terza colonna ma il valore è invece '-140px'.

Risultato

Ed ecco il risultato sul desktop:

E sul cellulare:

Pensieri finali

In questo post, ti abbiamo mostrato alcuni layout di sezione in stile editoriale belli e divertenti che puoi utilizzare in tutto il tuo sito web. Questi esempi mostrano quanto siano flessibili le opzioni di Divi e quanto puoi diventare creativo. 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 primo piano di Julia Tim / shutterstock.com