Come combinare in modo creativo sfondi di righe e colonne con le nuove opzioni di Divi

In questo tutorial Divi, ti mostreremo come combinare le opzioni di sfondo di riga e colonna per creare risultati sorprendenti. Scegliendo le giuste combinazioni e impostazioni, puoi ottenere design che migliorano l'aspetto generale del tuo sito web. Per dimostrare di cosa stiamo parlando, abbiamo creato un esempio che ti aiuteremo a costruire passo dopo passo. Abbiamo creato questo risultato utilizzando solo le opzioni integrate di Divi, quindi non dovrai aggiungere alcun CSS aggiuntivo.

Risultato

Se segui questo tutorial passo dopo passo, sarai in grado di ottenere il seguente risultato:

Sebbene abbiamo utilizzato tre righe diverse per ottenere questo risultato, sembra che facciano tutte parte di un'immagine più ampia. Iniziamo!

Passa a Visual Builder

Crea una nuova pagina e abilita Divi Builder e passa a Visual Builder.

Crea sezione

La prima cosa che dobbiamo fare è creare una nuova sezione standard. Tutte le righe che creeremo e uniremo tra loro faranno parte di questa sezione. Per creare un effetto ombra box sulle righe, aggiungeremo la seguente sezione sfondo sfumato:

• Primo colore: rgba (61,65,86,0,59)
• Secondo colore: #f7f7f7
• Tipo di gradiente: radiale
• Direzione radiale: In basso
• Posizione di partenza: 31%
• Posizione finale: 76%

Aggiungi riga a una colonna

La prossima cosa che dovremo fare è aggiungere una riga di una colonna alla sezione. Questa riga rappresenterà la seguente parte del nostro risultato finale:

Impostazioni di riga e colonna

Crea riga a larghezza intera

Vai avanti e rendi la riga a larghezza intera all'interno della scheda Design.

Impostazioni sfondo riga

Quindi, puoi tornare alla scheda Contenuto e aggiungere il seguente sfondo sfumato:

• Primo colore: #3d4156
• Secondo colore: rgba (114,81,114,0.91)
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 0%
• Posizione finale: 65%

Carica un'immagine di sfondo (in questo caso un motivo) e scegli "Moltiplica" come miscela di immagini di sfondo.

Impostazioni sfondo colonna

Quindi, scorri verso il basso e assegna le seguenti impostazioni di sfondo sfumato alla colonna della tua riga:

• Primo colore: rgba (255,255,255,0.15)
• Secondo colore: rgba (214,44,104,0)
• Tipo di gradiente di colonna: lineare
• Direzione gradiente colonna: 161°
• Posizione di partenza della colonna: 43%
• Posizione di fine colonna: 43%

Spaziatura

Continua aggiungendo il seguente riempimento alla tua riga:

• In alto: 20px
• A destra: 30px
• Sinistra: 30px

E anche il riempimento della tua colonna:

• In alto: 200 px
• In basso: 200 px

Modulo Aggiungi testo

La prossima cosa che faremo è aggiungere un modulo di testo alla riga e apportare le seguenti modifiche alla sottocategoria di testo di quel modulo di testo:

• Carattere di testo: display Playfair
• Dimensione carattere testo: 77 px (desktop), 64 (tablet), 51 (telefono)
• Colore del testo: #f7f7f7
• Altezza riga di testo: 1,7 (desktop), 1 em (tablet e telefono)

Aggiungi modulo divisore

Continua aggiungendo un modulo divisore sotto il modulo testo appena creato e abilita l'opzione "Mostra divisore" nella sottocategoria Visibilità.

Scorri verso il basso la stessa scheda e usa "rgba(114,57,114,0.91)" come colore di sfondo.

Passa alla scheda Design e seleziona "#3d4156" come colore del divisore.

Apri la sottocategoria Stili e usa "Solido" come stile del divisore e "Alto" come posizione del divisore.

Quindi, assegna le seguenti impostazioni alla sottocategoria Ridimensionamento:

• Peso del divisore: 11px
• Altezza: 23px
• Larghezza: 0%
• Allineamento del modulo: a sinistra

Ultimo ma non meno importante, aggiungi un riempimento sinistro del "48%" all'opzione Imbottitura personalizzata.

Aggiungi riga a tre colonne

La riga successiva che aggiungeremo alla sezione sembra un'estensione della riga precedente sebbene siano realizzate separatamente.

Impostazioni di riga e colonna

Crea riga a larghezza intera

Inizia, di nuovo, rendendo la nuova riga a tutta larghezza.

Impostazioni sfondo riga

Quindi, usa le seguenti impostazioni di sfondo:

• Primo colore: rgba (114,81,114,0.91)
• Secondo colore: #f7f7f7
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 9%
• Posizione finale: 100%

Aggiungi un motivo di sfondo e usa "Moltiplica" come Miscela immagine di sfondo.

Impostazioni sfondo colonna

Scorri verso il basso la scheda e usa "#f7f7f7" come colore di sfondo per ogni colonna.

Spaziatura

All'interno della sottocategoria Spaziatura, inizia assegnando '30px' al riempimento superiore, inferiore, destro e sinistro di ciascuna colonna. Quindi, aggiungi il seguente riempimento alla versione desktop della tua riga:

• In alto: 19px
• A destra: 200 px
• Sinistra: 200 px

L'imbottitura sui tablet è leggermente diversa:

• In alto: 0px
• A destra: 70px
• In basso: 0px
• Sinistra: 70px

E l'imbottitura sui cellulari è la seguente:

• In alto: 0px
• A destra: 50 px
• In basso: 30 px
• Sinistra: 50px

Aggiungi il primo modulo di testo

Continua aggiungendo un modulo di testo alla prima colonna della riga. Quindi, usa le seguenti impostazioni per la sottocategoria Testo della scheda Progettazione:

• Carattere del testo: Raleway
• Stile carattere: grassetto e maiuscolo
• Dimensione carattere del testo: 23px
• Colore del testo: #3d4156
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Aggiungi il secondo modulo di testo

Aggiungi un altro modulo di testo proprio sotto il precedente e utilizza invece le seguenti impostazioni:

• Carattere del testo: Raleway
• Dimensione carattere del testo: 12px
• Colore del testo: #3d4156
• Altezza riga di testo: 1,7 em
• Orientamento del testo: a sinistra

Clona moduli di testo e posizionali in altre colonne

Una volta creati i due moduli di testo, clonali e posizionali anche nelle due colonne rimanenti.

Aggiungi riga a una colonna

L'ultima colonna che andremo ad aggiungere è quella che andremo a sovrapporre alla precedente. Il motivo per cui lo stiamo facendo è che in questo modo possiamo combinare diversi sfondi sfumati. Sebbene le tre righe che stiamo creando siano separate, sembreranno una cosa sola. Nel frattempo, siamo anche in grado di godere di più sfondi sfumati invece di uno solo.

Impostazioni di riga e colonna

Crea riga a larghezza intera

Per l'ultima riga, dovremo abilitare anche 'Make This Row Fullwidth'.

Impostazioni sfondo riga

Quindi, aggiungi uno sfondo sfumato alla riga:

• Primo colore: rgba (61,65,86,0)
• Secondo colore: rgba (114,81,114,0.34)
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 45%
• Posizione finale: 91%

Impostazioni sfondo colonna

Scorri verso il basso la stessa scheda e usa il seguente sfondo sfumato per la colonna:

• Primo colore: rgba (239,239,239,0.15)
• Secondo colore: rgba (214,44,104,0)
• Tipo di gradiente di colonna: lineare
• Direzione gradiente colonna: 340 gradi
• Posizione di partenza della colonna: 45%
• Posizione finale della colonna: 45%
  

Spaziatura

L'ultima cosa che dobbiamo fare è aggiungere un po' di imbottitura e margine. Inizia aggiungendo '-100%' al margine superiore e continua utilizzando il seguente riempimento personalizzato:

• In alto: 14px
• A destra: 30px
• Sinistra: 30px

Anche la colonna avrà bisogno di un po' di imbottitura; '200px' per la parte superiore e '155px' per la parte inferiore.

Risultato

Se hai seguito i diversi passaggi che abbiamo fornito in questo post, dovresti essere in grado di ottenere il seguente risultato:

Pensieri finali

Con le nuove opzioni Divi, sono possibili molte cose nuove. Una di queste cose è combinare sfondi di righe e colonne per ottenere un ottimo design. 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 medejaja / shutterstock.com