Come diventare creativi con le unità di righe e finestre a 6 colonne di Divi

La varietà delle strutture delle colonne di Divi ti consente di creare praticamente qualsiasi progetto tu abbia in mente. E sebbene utilizzare le strutture delle colonne nella loro forma originale sia la cosa più semplice da fare, puoi anche fare un ulteriore passo avanti combinando gli elementi di design in una riga di 6 colonne con unità di visualizzazione.

Una delle cose che potresti creare, ad esempio, è un collage. Non dovrai assolutamente utilizzare alcun software di modifica delle immagini! Inoltre, puoi anche consentire a ciascuna delle immagini di aprirsi in una lightbox separata. In questo post, ti mostreremo come eseguire tutto quanto sopra utilizzando solo le opzioni integrate di Divi.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Approccio

• Stiamo rimuovendo tutta la larghezza della grondaia tra la sezione, la riga e le colonne in modo da poter aggiungere manualmente margine e riempimento personalizzati a ciascun modulo (utilizzando le unità di visualizzazione)
• Le unità di visualizzazione assicurano che il posizionamento degli elementi di design rimanga lo stesso in tutte le dimensioni dello schermo del desktop
• Regoleremo le impostazioni di spaziatura di ciascun elemento di design individualmente in modo che corrispondano al design generale del collage
• Grazie alle opzioni reattive in Divi, possiamo assicurarci che le impostazioni sopra menzionate non si applichino a tablet e telefono

Iniziamo a creare

Anteprima backend

Questo è il risultato finale da una prospettiva di backend:

Aggiungi nuova sezione

La prima cosa che devi fare è creare una nuova pagina o aprirne una esistente e aggiungervi una sezione normale.

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento. Questo è un passaggio importante in questo tutorial. Rimuovendo tutti i margini predefiniti e i valori di riempimento tra la sezione, la riga e i moduli, siamo in grado di aggiungere manualmente spaziatura a ogni singolo elemento di design utilizzando le unità di visualizzazione.

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

Spaziatura

Aggiungi anche un'imbottitura personalizzata sinistra e destra alla riga.

• Imbottitura sinistra: 6.5vw
• Imbottitura destra: 6.5vw

Aggiungi il modulo di testo del titolo alla colonna 6

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Inizieremo aggiungendo un titolo Modulo di testo alla colonna 6. Includere una copia dell'intestazione 2 a scelta.

Impostazioni del testo dell'intestazione

Quindi, vai alla scheda Progettazione e modifica le impostazioni del testo dell'intestazione del modulo.

• Carattere titolo 2: Battambang
• Intestazione 2 Peso del carattere: grassetto
• Titolo 2: Dimensione testo: 4.2vw (desktop), 10vw (tablet), 8vw (telefono)
• Intestazione 2 Spaziatura lettere: -1px

Spaziatura

Aggiungi alcuni valori di spaziatura personalizzati accanto per fare in modo che questa riga si sovrapponga alla sesta e alla quinta colonna della riga.

• Margine superiore: 10vw
• Margine sinistro: -8vw (desktop), 0vw (tablet e telefono)
• Margine destro: -50vw (tablet e telefono)

Aggiungi il modulo di testo descrittivo alla colonna 6

Aggiungi contenuto

Il prossimo modulo di cui avremo bisogno nella colonna 6 è una descrizione del modulo di testo. Aggiungi alcuni contenuti a tua scelta.

Spaziatura

Quindi, vai alle impostazioni di spaziatura e spingi anche questo modulo a sinistra.

• Margine superiore: 2vw
• Margine sinistro: -8vw (desktop), 0vw (tablet e telefono)
• Margine destro: -50vw (tablet), -3vw (telefono)

Aggiungi modulo pulsante alla colonna 6

Aggiungi copia

Il modulo successivo e ultimo necessario nella colonna 6 è un modulo pulsante. Aggiungi qualche copia a tua scelta.

Impostazioni dei pulsanti

Quindi, vai alla scheda Design e modifica le impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Colore del testo del pulsante: #ffffff
• Larghezza bordo pulsante: 1px
• Colore bordo pulsante: #000000
• Raggio bordo pulsante: 0px
• Spaziatura lettere pulsante: -2px

Spaziatura

E ancora, dovremo fare in modo che questo modulo si sovrapponga alle colonne 5 e 6 utilizzando valori di margine personalizzati nelle impostazioni di spaziatura.

• Margine superiore: 2vw (desktop), 5vw (tablet), 10vw (telefono)
• Margine sinistro: -8vw (desktop), 0vw (tablet e telefono)
• Margine destro: -50vw (tablet e telefono)
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Aggiungi il modulo immagine n. 1 alla colonna 1

Dimensioni dell'immagine

È ora di iniziare ad aggiungere tutti i diversi moduli immagine! L'esempio che stiamo ricreando è reattivo al 100% se utilizzi solo immagini con larghezza 880 px e altezza 1320 . Quindi, se stai cercando di creare lo stesso identico esempio da zero, dovresti usare immagini con quel set specifico di dimensioni. Se, tuttavia, desideri che questo funzioni per qualsiasi tipo di set di dimensioni dell'immagine, dovrai regolare manualmente le unità di visualizzazione di ciascun modulo immagine per adattarlo al design generale.

Carica immagine

Ognuna delle prime tre colonne conterà due moduli immagine. Aggiungi il primo modulo immagine alla colonna 1.

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aumenta le dimensioni dell'immagine utilizzando le unità di visualizzazione.

• Margine superiore: 0,5 vw (solo tablet e telefono)
• Margine inferiore: 0,5 vw (solo tablet e telefono)
• Margine sinistro: -5vw (desktop), 0,5vw (tablet e telefono)
• Margine destro: -2vw (desktop), 0,5vw (tablet e telefono)

Aggiungi il modulo immagine n. 2 alla colonna 1

Carica immagine

Carica anche il secondo modulo immagine nella colonna 1.

Spaziatura

E cambia anche le impostazioni di spaziatura di questo modulo.

• Margine superiore: 0,4 vw (desktop), 0,5 vw (tablet e telefono)
• Margine inferiore: 0,5 vw (solo tablet e telefono)
• Margine sinistro: -8,1 vw (desktop), 0,5 vw (tablet e telefono)
• Margine destro: 3,7 vw (desktop), 0,5 vw (tablet e telefono)
• Imbottitura sinistra: 3vw (desktop), 0vw (tablet e telefono)
• Imbottitura destra: 3vw (desktop), 0vw (tablet e telefono)

Aggiungi il modulo immagine n. 3 alla colonna 2

Carica immagine

Alla seconda colonna! Aggiungi un nuovo modulo immagine e carica un'immagine.

Spaziatura

Continua utilizzando margini personalizzati e valori di riempimento nelle impostazioni di spaziatura per ridurre le dimensioni dell'immagine.

• Margine superiore: 0,5 vw (solo tablet e telefono)
• Margine inferiore: 0,5 vw (solo tablet e telefono)
• Margine sinistro: -0,5 vw (desktop), 0,5 vw (tablet e telefono)
• Margine destro: 0,5 vw (solo tablet e telefono)
• Imbottitura sinistra: 3vw (desktop), 0vw (tablet e telefono)
• Imbottitura destra: 3vw (desktop), 0vw (tablet e telefono)

Aggiungi il modulo immagine n. 4 alla colonna 2

Carica immagine

Aggiungi anche un secondo modulo immagine alla colonna 2.

Spaziatura

E cambia anche le impostazioni di spaziatura qui.

• Margine superiore: 0,5 vw
• Margine inferiore: 0,5 vw (solo tablet e telefono)
• Margine sinistro: -0,5 vw (desktop), 0,5 vw (tablet e telefono)
• Margine destro: 0,5 vw (solo tablet e telefono)
• Imbottitura sinistra: 3vw (desktop), 0vw (tablet e telefono)
• Imbottitura destra: 3vw (desktop), 0vw (tablet e telefono)

Aggiungi il modulo immagine n. 5 alla colonna 3

Carica immagine

Alla prossima e ultima colonna. Aggiungi il primo modulo immagine.

Spaziatura

Modificare le impostazioni di spaziatura del modulo immagine successivamente. Questi valori aiuteranno ad aumentare le dimensioni dell'immagine come puoi notare nella schermata di stampa qui sotto.

• Margine superiore: 0,5 vw (solo tablet e telefono)
• Margine inferiore: 0,5 vw (solo tablet e telefono)
• Margine sinistro: -2,5 vw (desktop), 0,5 vw (tablet e telefono)
• Margine destro: -17.5vw (desktop), 0.5vw (tablet e telefono)

Aggiungi il modulo immagine n. 6 alla colonna 3

Carica immagine

Aggiungi il successivo e l'ultimo modulo immagine nella colonna 3.

Spaziatura

E cambia la sua intera posizione aggiungendo valori di margine personalizzati. Per scopi reattivi, stiamo aggiungendo questo modulo alla colonna 3 anziché alla colonna 2.

• Margine superiore: -26,7 vw (desktop), 0,5 vw (tablet e telefono)
• Margine inferiore: 0,5 vw (solo tablet e telefono)
• Margine sinistro: -20.5vw (desktop), 0.5vw (tablet e telefono)
• Margine destro: 17,3 vw (desktop), 0,5 vw (tablet e telefono)

Abilita Lightbox per il modulo immagine n. 1

Una volta posizionate tutte le immagini, puoi andare avanti e abilitare l'opzione lightbox nelle impostazioni del primo modulo immagine.

• Apri in Lightbox: Sì

Copia l'opzione Lightbox e applica a tutte le immagini nella sezione

Dopo aver abilitato l'opzione lightbox per il primo modulo immagine, puoi copiare questa opzione e incollarla in tutti gli altri moduli immagine nella sezione.

Aggiungi raggio bordo all'immagine Modulo n. 1

Aggiungi anche alcuni angoli arrotondati al primo modulo immagine.

Estendi il raggio del bordo a tutte le immagini nella sezione

Ed estendi questi angoli arrotondati a tutti i moduli immagine nella sezione per risparmiare tempo.

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

Le opportunità che hai con la nuova riga a 6 colonne di Divi sono infinite. In questo post, ti abbiamo mostrato come creare un collage straordinario e unico utilizzando la riga a 6 colonne e le unità di visualizzazione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!