Come estendere i moduli per creare layout di colonna unici in Divi

Ogni nuova pagina che progetti con Divi Builder è strutturata utilizzando diversi layout di colonne. Divi include layout di colonna integrati per ogni riga che vanno da una colonna fino a sei colonne. Ma, a volte, potresti sentire la necessità di regolare queste colonne per layout ancora più unici. Oggi vi mostrerò un modo creativo per farlo.

In questo tutorial, ti mostrerò una semplice tecnica di progettazione che ti consente di estendere i moduli utilizzando margini negativi per occupare più di una colonna. Questa tecnica ti consentirà di progettare alcuni layout personalizzati unici che potresti non aver considerato possibili.

Iniziamo.

Sbirciata

Per comprendere meglio cosa andremo a costruire, ecco una versione prima e dopo del progetto che utilizza questa tecnica.

Prima

Questo è il design del layout senza utilizzare margini personalizzati per estendere i moduli ad altre colonne.

Dopo

Questo è il layout dopo aver esteso i due moduli immagine e i tre moduli di testo etichettati con i numeri "01", "03" e "05".

Il cambiamento è sottile ma dovresti essere in grado di vedere che i moduli si sono estesi per occupare la colonna adiacente. E l'unica cosa necessaria per ottenere ciò è una semplice impostazione del margine di -100%.

E il risultato su tablet è ancora più entusiasmante.

Capire il concetto

Per impostazione predefinita, ogni modulo Divi ha una larghezza del 100%, il che significa che ogni modulo posizionato in una colonna occuperà l'intera larghezza della colonna in cui si trova. La larghezza della grondaia è ciò che Divi utilizza per determinare la quantità di spazio tra ciascuna colonna. Quindi, per questo tutorial, è importante impostare la larghezza della grondaia su 1 per eliminare quello spazio.

Ecco un'illustrazione di come ogni modulo si estende per l'intera larghezza di una colonna in una riga con una larghezza della grondaia impostata su 1.

Ora, se aggiungi un margine negativo (sinistro o destro) a un modulo, puoi facilmente estendere quel modulo per occupare più di una colonna. Ciò ti consente di creare layout di colonna personalizzati per la tua pagina che potresti non aver considerato.

In questa illustrazione, puoi vedere che aggiungendo un margine sinistro -100% al modulo nella colonna 5, estende il modulo a sinistra per occupare sia la colonna 5 che la colonna 4.

E uno dei vantaggi dell'utilizzo del layout a sei colonne è che il design è ben conservato sul tablet.

Inoltre, a causa del modo in cui le colonne sono ordinate da sinistra a destra, i moduli dovrebbero generalmente essere estesi a sinistra in modo che il contenuto non venga nascosto dietro la colonna. Questo è particolarmente vero se hai un set di colori di sfondo. Quindi, se incontri il problema del contenuto del modulo nascosto dietro una colonna, probabilmente stai estendendo il modulo nella direzione sbagliata.

Perché utilizzare un layout a sei colonne?

Ci sono tre ragioni principali per utilizzare un layout a sei colonne per questa tecnica di progettazione. La prima ragione è che ti dà più colonne con cui lavorare. La seconda ragione è che i layout a sei colonne si convertono in un layout a tre colonne sul tablet, il che conserverà molto bene gli elementi di design. Il terzo motivo è che le colonne manterranno il loro ordine sui dispositivi mobili, quindi i colori di sfondo delle colonne rimarranno gli stessi. Questo è utile per i layout della griglia.

Questo design funziona anche con il layout di colonna 1/2 1/6 1/6 1/6 e il layout di colonna 1/6 1/6 1/6 1/2 poiché entrambi conserveranno le tre colonne anche sul tablet.

Implementazione del design

Per mostrare come funziona questa tecnica di progettazione, ti guiderò attraverso il processo di creazione di un semplice layout di griglia per presentare i prodotti. Quindi, ti mostrerò come estendere i moduli in altre colonne per creare un layout personalizzato.

Impostazione della sezione e delle righe

Per iniziare, crea una nuova pagina e distribuisci il visual builder. Quindi scegli "Costruisci da zero". Quindi vai avanti e aggiungi un layout di colonne 1/2 1/6 1/6 1/6 alla tua prima sezione.

Quindi aggiorna le impostazioni della riga come segue:

Colore di sfondo: #222831
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S
Margine personalizzato: 0 px in alto, 0 px in basso
Imbottitura personalizzata: 0px in alto, 0px in basso

Salva le impostazioni.

Poiché tutte e tre le righe per questo disegno condivideranno queste impostazioni di riga. Vai avanti duplicando la riga per creare una seconda riga. Quindi cambia la seconda riga per avere un layout a sei colonne.

Per creare la terza riga, duplica semplicemente la seconda riga.

Aggiunta di moduli alla riga 1

Nella prima colonna della prima riga in alto, aggiungi un modulo di testo con le seguenti impostazioni:

Colore del testo: chiaro
Dimensione del testo del testo: 16px
Imbottitura personalizzata: 2vw in alto, 2vw in basso, 2vw a sinistra, 2vw a destra

Nella seconda colonna della prima riga, aggiungi un modulo blurb con le seguenti impostazioni:

Titolo: [inserisci titolo]
Contenuto: [elimina]
Icona: [scegli icona]
Colore icona: #eeeeee
Dimensione carattere icona: 50 px
Colore del testo: chiaro
Orientamento del testo: al centro
Imbottitura personalizzata: 3vw superiore, 2vw inferiore

Salva le impostazioni

Nella terza colonna, aggiungi un'immagine.

Nell'ultima colonna, vogliamo lasciarla vuota in modo da poter estendere il modulo immagine per riempire anche quella colonna. Ma non vogliamo lasciarlo completamente vuoto in modo che la colonna sia attiva durante l'impilamento su dispositivo mobile. Quindi, la cosa più semplice da fare è aggiungere un modulo divisore e scegliere di non mostrare il divisore. Quindi possiamo nascondere il divisore per smartphone.

Aggiorna le impostazioni del divisore come segue:

Mostra divisore: NO
Disabilita su: Telefono

Aggiunta di moduli alle righe 2 e 3

Ora passiamo alla riga 2. Nella prima colonna copia e incolla il modulo blurb che hai creato nella seconda colonna della prima riga. Quindi cambia l'icona e il testo del titolo in un colore nero.

Quindi aggiungi un modulo di testo alla seconda colonna con quanto segue:

Contenuto:

<h2>Product</h2>
01

Colore del testo del testo: #ffffff
Dimensione del testo del testo: 50 px
Altezza riga di testo: 1em
Orientamento del testo: a destra
Intestazione 2 Allineamento del testo: a sinistra
Colore testo titolo 2: #ffffff
Intestazione 2 Altezza riga: 3em
Imbottitura personalizzata: 2vw in alto, 2vw in basso, 2vw a sinistra, 2vw a destra

Avanti Copia il modulo di testo appena creato e incollalo nella colonna 4 e nella colonna 6.

Puoi anche incollare lo stesso modulo di testo nella colonna 3, 5 e 6 della riga 3. Successivamente puoi utilizzare l'editor in linea per modificare i numeri di ciascuno dei moduli di testo in modo da poter vedere come si accumulano questi moduli cellulare in seguito.

Nella colonna 2 della riga 3, aggiungi un'altra immagine.

Dopodiché riempi tutte le colonne vuote della sezione con un divisore copiando e incollando il divisore che hai creato nella riga 1.

Ecco come dovrebbe apparire il tuo layout a questo punto (i quadrati vuoti rappresentano un modulo divisore):

Aggiunta di un margine negativo per estendere i moduli ad altre colonne

A questo punto possiamo iniziare ad estendere i nostri moduli utilizzando il margine negativo. Questo processo è estremamente semplice da eseguire.

Apri le impostazioni del modulo immagine per l'immagine nella prima riga. Poiché vogliamo estendere l'immagine a destra, aggiungeremo un margine destro di -100%.

Quindi, aggiungi un margine sinistro del -100% al modulo di testo nella riga 2, colonna 3.

Ora copia gli stili del modulo e incollali nei moduli di testo nella riga 2, colonna 6 e anche nel modulo di testo nella riga 3, colonna 5.

Non resta che estendere l'immagine nella riga 3, colonna 2. Aggiorna il modulo immagine con un margine personalizzato di -100% sinistro.

Aggiungere i colori di sfondo alle tue colonne

L'ultima fase del design consiste nell'aggiungere i colori di sfondo alle colonne. Per la prima riga (in alto) aggiungi quanto segue:

Colore di sfondo della colonna 1: #393e46

Per la seconda riga, aggiungi quanto segue:

Colore di sfondo della colonna 1: #eeeeee
Colore di sfondo della colonna 4: #7971ea
Colore di sfondo della colonna 5: #393e46
Colore di sfondo della colonna 6: #393e46

E per l'ultima riga, aggiungi quanto segue:

Colore di sfondo della colonna 3: #7971ea
Colore di sfondo della colonna 6: #7971ea

Questo è tutto per il design del desktop. Ora assicuriamoci che le cose vadano bene sui dispositivi mobili.

Regolazione del layout per il display dello smartphone

In questo momento, il layout attuale avrà un bell'aspetto su desktop e tablet, ma quei margini negativi che abbiamo aggiunto dovranno essere regolati su smartphone.

Normalmente, se volessi correggere il margine negativo sullo smartphone, imposterei semplicemente il margine sinistro su 0% nelle impostazioni del modulo per i dispositivi smartphone. Tuttavia, sarà comunque necessaria una regolazione per le dimensioni dello schermo tra 479 px e 767 px di larghezza. Per questo motivo, il modo migliore per correggere il margine negativo sullo smartphone è farlo con un frammento di CSS personalizzato.

Vai alle impostazioni della pagina e aggiungi il seguente CSS personalizzato nella scheda Avanzate:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

Ciò che fa questo frammento CSS è impostare il margine destro e sinistro di tutti i moduli su 0% ogni volta che la dimensione dello schermo è uguale o inferiore a 479 px di larghezza. Questo risolve bene il problema!

Ora diamo un'occhiata al progetto finale.

Pensieri finali

L'utilizzo del margine negativo per estendere i moduli può essere un modo conveniente per ottenere design di layout unici su desktop e tablet senza dover ricorrere a un mucchio di CSS per modificare i layout di colonna predefiniti di Divi. E una delle cose che preferisco di questa tecnica di progettazione è quanto sia bello il layout sul tablet. Spero che possa tornare utile per il tuo prossimo progetto. Semmai, aiuta sempre ad avere una comprensione più profonda di Divi.

Non vedo l'ora di sentirti nei commenti.

Saluti!