Come configurare le linee su Divi Builder

Le righe sono i diversi layout di colonna che possono essere posizionati all'interno delle sezioni. Proprio come i moduli, le righe hanno vari parametri accessibili facendo clic sull'icona dei parametri in alto a sinistra della riga. In questo tutorial, esamineremo alcune delle funzionalità e come possono essere utilizzate per creare layout davvero unici. Le impostazioni delle righe in particolare possono essere utilizzate per aumentare in modo significativo la diversità dei layout creati con Divi Builder, poiché creano la struttura in cui sono ospitati i moduli.

Impostazioni del contenuto

Colore di sfondo

Le immagini di sfondo possono essere applicate a un'intera riga. Per impostazione predefinita, le linee hanno un colore di sfondo trasparente.

Immagine di sfondo

Le immagini di sfondo possono essere applicate a un'intera riga.

Video di sfondo MP4

I video di sfondo possono essere applicati alle linee. Se vuoi applicare il video di sfondo, devi scaricare il video MP4 e WEBM e prendere i video qui.

Video di sfondo Web

I video di sfondo possono essere applicati alle linee. Se vuoi applicare il video di sfondo, devi scaricare il video MP4 e WEBM e prendere i video qui.

Larghezza del video di sfondo

Una volta caricati i tuoi video, devi inserire qui la larghezza del tuo video. Deve essere uguale alla larghezza effettiva del video, altrimenti la posizione dello sfondo non sarà corretta.

Altezza del video di sfondo

Una volta caricati i tuoi video, devi inserire qui l'altezza del tuo video. Deve essere uguale all'altezza effettiva del video, altrimenti la posizione dello sfondo non sarà corretta.

Pausa video

Se si desidera mettere in pausa i video quando si fa clic, abilitare questa opzione.

Colore di sfondo della colonna

Per ogni colonna di una riga, puoi assegnare un colore di sfondo univoco.

Immagine di sfondo della colonna

Per ogni colonna di una riga, puoi assegnare un'immagine di sfondo univoca.

Etichetta amministratore

Questo cambierà l'etichetta del modulo nel generatore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette appariranno nel blocco del modulo dell'interfaccia di Divi Builder.

Parametri di progettazione

Usa l'effetto parallasse

Se desideri utilizzare l'effetto di parallasse per l'immagine di sfondo della tua linea, puoi abilitarlo qui, quindi scegliere il metodo di parallasse che desideri.

Colonna effetto parallasse

Qui puoi scegliere se utilizzare o meno l'effetto di parallasse per l'immagine di sfondo di una colonna specifica nella tua riga.

Rendi questa linea a tutta larghezza

Se questa opzione è abilitata, la linea si estenderà per l'intera larghezza della finestra del browser (simile a una sezione a larghezza intera). Questo è un ottimo modo per creare alcuni fantastici layout di colonne a larghezza intera.

Usa larghezza personalizzata

Puoi anche assegnare una larghezza personalizzata a una linea. Ad esempio, se desideri aggiungere una variazione al feed di pagina e rendere una riga più grande delle altre, puoi inserire qui un valore di larghezza personalizzato

Usa la larghezza della grondaia personalizzata

La larghezza della grondaia regola la distanza tra le colonne. Sono disponibili 4 dimensioni del margine interno, a partire da 0. L'impostazione della larghezza del margine interno su 1 non comporterà alcun intervallo tra le colonne. Se combinato con l'opzione Larghezza intera, questo può creare effetti simili al modulo Portfolio a schermo intero.

Equalizza le altezze delle colonne

Questa è un'ottima opzione, particolarmente utile quando hai applicato i colori di sfondo a singole colonne. Abilitando questa opzione, tutte le colonne nella riga hanno lo stesso valore di altezza.

Imbottitura personalizzata

Se vuoi regolare il riempimento della linea, puoi farlo qui.

Margine personalizzato

Se vuoi regolare il margine della linea, puoi farlo qui.

Imbottitura colonna personalizzata

Se vuoi regolare il riempimento di una colonna specifica nella tua riga, puoi farlo qui.

Margine di colonna personalizzato

Se vuoi regolare il margine di una colonna specifica nella tua riga, puoi farlo qui.

Impostazioni avanzate

ID CSS

Puoi assegnare un ID CSS alla riga se desideri impostarla come target nel tuo foglio di stile o con collegamenti di ancoraggio.

Classe CSS

Puoi assegnare una classe CSS alla linea se vuoi indirizzarla nel tuo foglio di stile.

ID colonna CSS

Puoi assegnare un ID CSS a una colonna specifica nella riga se desideri impostarlo come target nel foglio di stile o con collegamenti di ancoraggio.

Colonna della classe CSS

Puoi assegnare una classe CSS a una colonna specifica della tua riga se vuoi indirizzarla nel tuo foglio di stile.

Prima

Voce CSS qui da applicare: prima della div della linea principale.

Elemento principale

Voce CSS qui da applicare al div della linea principale.

Dopo

Voce CSS qui da applicare: dopo il div della riga principale.

Colonna anteriore

Inserisci qui CSS per applicare: prima della colonna specificata div.

Elemento colonna principale

Immettere qui CSS per applicare alla colonna div specificata.

Colonna dopo

Voce CSS qui da applicare: dopo la colonna div specificata.

visibilità

Questa opzione consente di controllare i dispositivi su cui appare il modulo di linea. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare mod differenti su dispositivi differenti o se vuoi semplificare il design mobile rimuovendo alcuni elementi dalla pagina.

Mettere in pratica il tutorial

Ora che abbiamo esaminato tutte le impostazioni, proviamone alcune per mostrarti cosa è possibile fare quando ciascuna impostazione viene utilizzata in modo creativo. In questo esempio, tratterò l'impostazione Riga a schermo intero come introduzione. L'opzione per creare una riga "Schermo intero" è una delle opzioni più versatili del set. Questo estenderà la larghezza della linea fino al bordo del browser, come una sezione a schermo intero (o a tutta larghezza). A differenza di una sezione Fullwidth, tuttavia, le righe FullWidth possono avere strutture di colonne e possono contenere qualsiasi modulo! Nell'esempio seguente ho creato una riga di 4 colonne e ho aggiunto un'immagine quadrata a ciascuna colonna. Successivamente, ho abilitato "Rendi questa linea a tutta larghezza" per estendere la linea fino ai bordi della finestra del browser.

Quindi ho ridotto la dimensione "Margine interno" a "1" per rimuovere la spaziatura tra le colonne nella riga.

Infine, ho rimosso il riempimento sopra e sotto la linea modificando i valori superiore e inferiore con un'opzione "Riempimento personalizzato" su "0".

Il risultato è una trasformazione di riga completa, trasformando la nostra normale riga di 4 colonne di immagini in una galleria di immagini a larghezza intera e al vivo che sembra sbalorditiva rispetto alla sezione verde sottostante. Questo stesso effetto può anche essere creato utilizzando colori di sfondo delle colonne personalizzati e mod basati su testo. Le possibilità sono infinite!