Come creare colonne sovrapposte con le opzioni Colonna e trasformazione di Divi

In uno degli ultimi aggiornamenti Divi, abbiamo aggiunto alcuni controlli davvero sorprendenti alle colonne nel builder. Ora è più facile che mai creare sovrapposizioni di colonne. In questo tutorial, ti mostreremo come creare una sezione di testimonianze con tre colonne sovrapposte utilizzando la colonna di Divi e le impostazioni di trasformazione.

Per questo design, utilizzeremo tre colori, un arancione intenso #ff8300, un giallo caldo #ffd400 e una sfumatura blu che spicca #0c99c1. Puoi applicare questo design di colonne sovrapposte a un progetto di sito Web in pochissimo tempo.

Iniziamo.

Anteprima

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

Desktop

Mobile

1. Crea nuova sezione regolare + riga a tre colonne

La prima cosa che devi fare è creare una sezione regolare con una riga a tre colonne.

Regola la spaziatura della sezione

Aumenta l'imbottitura superiore e inferiore della sezione.

• Imbottitura superiore: 4vw
• Imbottitura inferiore: 16vw

Regola le dimensioni e la spaziatura delle righe

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:

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

Successivamente, modifica le impostazioni di spaziatura:

• Imbottitura inferiore: 0px
• Imbottitura sinistra: 11vw
• Imbottitura destra: 8vw

Aggiungi sfondo sfumato

Aggiungi uno sfondo sfumato dopo:

• Stile di sfondo: gradiente
• Primo Colore: bianco #ffffff
• Secondo colore: arancione #ff8300
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 35%
• Posizione finale: 35%

2. Colonne di stile

Prima di aggiungere moduli alle colonne, cambieremo lo stile, la spaziatura e le impostazioni di trasformazione di ogni colonna individualmente.

Colonna 1

I primi passi dello stile della colonna sono gli angoli arrotondati e l'ombra della scatola:

• Bordo: 20px su tutti gli angoli arrotondati
• Ombra riquadro: prima opzione ombra riquadro
• Posizione verticale dell'ombra del riquadro: 0px
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)
• Posizione ombra scatola: esterno

* Prima di aggiungere qualsiasi impostazione di trasformazione, copieremo e incolleremo questi stili di elementi nelle colonne due e tre.

Apri di nuovo le impostazioni della colonna 1 e vai alla scheda design. Useremo le impostazioni di trasformazione per fare in modo che la prima colonna si sovrapponga alla seconda. Nel caso te ne fossi dimenticato, l'asse x è orizzontale e l'asse y è verticale.

• Trasforma Traduci:
  • Desktop: asse x = 3vw. asse y = 14.2vw
  • Tablet e telefono: asse x = -14vw. asse y = 16vw
• Visibilità: Indice Z 10

Colonna 2

Alla seconda colonna! Vai all'ombra della scatola (che hai aggiunto in uno dei passaggi precedenti) e aumenta l'intensità della sfocatura dell'ombra della scatola.

• Forza sfocatura ombra scatola: 50 px

Continua aggiungendo alcuni valori di spaziatura personalizzati alla colonna 2.

• Imbottitura superiore:
  • Desktop = 3vw
  • Tablet + Telefono = 5vw
• Imbottitura inferiore:
  • Desktop = 5vw
  • Tablet + Telefono = 7vw
• Imbottitura sinistra:
  • Desktop = 2vw
  • Tablet + Telefono = 4vw
• Imbottitura destra:
  • Desktop = 2vw
  • Tablet + Telefono = 4vw

È ora di trasformare la seconda colonna! La seconda colonna rimane al suo posto per il desktop, ma dobbiamo applicare alcune impostazioni di trasformazione personalizzate su schermi più piccoli. Vai avanti e regola la scheda di traduzione della trasformazione. Inoltre, aumenteremo l'indice Z a 9.

• Trasforma Traduci:
  • Tablet e telefono: asse x = 9vw. asse y = 13vw
• Visibilità: Indice Z 9

Colonna 3

Alla terza colonna! Aumenta l'intensità della sfocatura dell'ombra della scatola dell'ombra della scatola già esistente.

• Forza sfocatura ombra scatola: 50 px

Apri le impostazioni dello sfondo e aggiungi uno sfondo sfumato blu.

• Sfondo: gradiente
• Colore sfumato uno: #0c99c1
• Colore sfumato due: rgba(5,0,78,0.72)
• Tipo di gradiente: lineare
• Direzione del gradiente: 220 gradi
• Posizione di partenza: 0%
• Posizione finale: 100%

Ora aggiungiamo la spaziatura.

• Imbottitura superiore:
  • Desktop = 3vw
  • Tablet + Telefono = 10vw
• Imbottitura inferiore:
  • Desktop = 3vw
  • Tablet + Telefono = 7vw
• Imbottitura sinistra:
  • Desktop = 1.5vw
  • Tablet + Telefono = 10vw
• Imbottitura destra:
  • Desktop = 1.5vw
  • Tablet + Telefono = 10vw

Ultimo ma non meno importante, faremo in modo che la terza colonna si sovrapponga alla seconda modificando le impostazioni di trasformazione della trasformazione.

• Trasforma Traduci:
  • Desktop: asse x = -10vw. asse y = 14.2vw
  • Tablet: asse x = -14vw. asse y = 9vw
  • Telefono: asse x = -14vw. asse y = 11vw
• Visibilità: Indice Z 9

Ecco un'anteprima delle nostre colonne prima di aggiungere i moduli.

3. Aggiungi moduli alle colonne e modellali

Ora aggiungiamo i moduli a ciascuna colonna!

Colonna 1

Nella prima colonna, inseriremo un modulo immagine e un modulo testo. Aggiungi prima il modulo immagine.

1. Aggiungi il modulo immagine

Inserisci una foto del tuo cliente e modellalo come segue:

• Allineamento: Sinistra
• Forza intera larghezza: Sì

Aggiungi anche un bordo inferiore all'immagine.

• Colore bordo inferiore: giallo #ffd400
• Larghezza bordo inferiore: 9px
• Stile bordo: solido

2. Aggiungi il modulo di testo

Aggiungi un nuovo modulo di testo proprio sotto il modulo immagine e inserisci il nome e la posizione del cliente.

• Nome: Intestazione 4
• Posizione: paragrafo

Dopo aver aggiunto il contenuto, modelleremo le impostazioni del testo:

• Carattere del testo: Nunito Sans
• Peso del carattere del testo: normale
• Allineamento del testo: Centro
• Colore del testo: nero #000000
• Dimensione del testo:
  • Desktop = 0,8 vw
  • Tablet = 1.8vw
  • Telefono = 2.8vw

Passa alle impostazioni del testo dell'intestazione e applica le seguenti modifiche:

• Testo dell'intestazione: H4
• Intestazione 4 Carattere: Poppins
• Intestazione 4 Peso del carattere: grassetto
• Intestazione 4 Colore testo: Nero #000000
• Intestazione 4 Dimensione del testo:
  • Desktop = 1vw
  • Tablet = 3vw
  • Telefono = 4vw

Cambieremo anche le impostazioni di spaziatura:

• Margine superiore:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefono = 7vw
• Margine inferiore:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefono = 7vw

La tua colonna dovrebbe essere simile a questa una volta completati entrambi i moduli:

Colonna 2

Nella colonna 2, abbiamo bisogno di un testo, un blurb e un modulo divisore. Il primo modulo di testo è quello che sembra un banner angolato nell'angolo in alto a destra della colonna. Useremo le opzioni di trasformazione per ottenere questo effetto.

1. Aggiungi modulo di testo.

Aggiungi un nuovo modulo di testo e aggiungi la parola "Testimonianza" nella casella del contenuto.

Aggiungi uno sfondo giallo al modulo.

• Colore di sfondo: giallo #ffd400

Passa alla scheda Progettazione e modifica le impostazioni di testo e spaziatura di conseguenza:

• Carattere del testo: Poppins
• Peso del carattere del testo: grassetto
• Allineamento del testo: Centro
• Colore del testo: bianco #ffffff
• Dimensione del testo: 23px
• Margine destro: -50px
• Margine sinistro: -50px
• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px

Ultimo ma non meno importante, regoleremo le impostazioni di trasformazione come segue:

• Trasforma Traduci:
  • Desktop = 17vw sull'asse x
  • Tablet = 24vw sull'asse x, 1vw sull'asse y
  • Telefono = 20vw sull'asse x, 1vw sull'asse y
• Trasforma Ruota: 32 gradi sul primo asse

2. Aggiungi il modulo Blurb.

Una volta completato il primo modulo, è il momento di aggiungere un modulo blurb.

Il modulo blurb è dove viene visualizzata la testimonianza del cliente. Innanzitutto, fai clic sull'icona + per aggiungere un modulo e seleziona blurb.

Successivamente, inserisci il contenuto, seleziona un'icona e modella l'icona come segue:

• Usa l'icona: sì, una stella
• Colore icona: giallo #ffd400
• Posizionamento dell'icona: a sinistra
• Usa dimensione carattere icona: Sì, 48 px

Continua modellando il testo del titolo a un livello H4

• Testo del titolo: H4
• Carattere del titolo: Poppins
• Peso del carattere del titolo: grassetto
• Colore carattere titolo: nero #ffffff

• Dimensione del testo del titolo:
  • Desktop = 1.2vw
  • Tablet = 2.3vw
  • Telefono = 3.3vw
• Altezza della riga del titolo:
  • Desktop = 2vw
  • Tablet = 3.4vw
  • Telefono = 4.6vw

Modella le impostazioni del testo del corpo di conseguenza:

• Carattere del corpo del testo: Nunito Sans
• Peso del corpo del testo: semi grassetto
• Colore del corpo del testo: nero # 000000
• Dimensione del testo del corpo:
  • Desktop = 0.7vw
  • Tablet = 1.6vw
  • Telefono = 2.4vw
• Altezza della linea del corpo:
  • Desktop = 1.6vw
  • Tablet = 4vw
  • Telefono = 5vw

Vogliamo che il blurb sia meno largo della sua colonna, per farlo, regoleremo la larghezza, i margini e i valori di riempimento.

Per prima cosa, regoleremo la larghezza del blurb:

• Larghezza contenuto: 100%
• Larghezza:
  • Desktop = 58,4%
  • Tablet + Telefono = 90%

E poi, le impostazioni di spaziatura:

• Margine superiore: 3vw
• Margine inferiore: 3vw
• Margine destro: -24vw
• Imbottitura sinistra: 0px
• Imbottitura destra: 4px

3. Aggiungi divisore

L'ultimo modulo di cui abbiamo bisogno in questa colonna è un modulo divisore. Applicare le seguenti modifiche al divisore:

• Vedi Divisore: Sì
• Colore divisorio: nero #oooooo
• Peso del divisore: 1px

Ci siamo quasi! Questo è il nostro risultato fino ad ora:

Colonna 3

Alla terza e ultima colonna! Utilizziamo questa colonna per visualizzare un invito all'azione. Stiamo usando tre moduli; un modulo testo, un modulo divisore e un modulo pulsanti.

1. Aggiungi modulo di testo

La prima cosa che aggiungeremo a questa colonna è il modulo di testo.

Aggiungeremo un titolo in H3 e un po' di testo in paragrafo nella casella del contenuto.

Vai avanti e modella le impostazioni del testo di conseguenza:

• Carattere del testo: Nunito Sans
• Peso del carattere del testo: normale
• Colore del carattere del testo: bianco #ffffff
• Dimensione carattere del testo:
  • Desktop = 0,8 vw
  • Tablet=- 2vw
  • Telefono = 2.6vw
• Altezza riga di testo:
  • Desktop = 1.5vw
  • Tablet = 4vw
  • Telefono = 5vw

Completa il modulo di testo applicando uno stile alle impostazioni del testo dell'intestazione.

• Testo dell'intestazione: H3
• Intestazione 3 Carattere: Poppins
• Intestazione 3 Peso del carattere: grassetto
• Intestazione 3 Colore testo: bianco #ffffff
• Intestazione 3 Dimensione del testo:
  • Desktop = 1.1vw
  • Tablet = 3vw
  • Telefono = 4vw
• Intestazione 3 Altezza riga:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefono = 4.5vw

2. Aggiungi modulo divisore

Continua aggiungendo un modulo divisore alla colonna 3. Per applicare uno stile al divisore, copieremo e incolleremo gli stili dei divisori da quello che puoi trovare nella colonna 2.

Apri le impostazioni del divisore e cambia il colore da nero a bianco. Aggiungi anche un po 'di imbottitura superiore e inferiore.

• Colore divisorio: bianco #ffffff
• Imbottitura superiore: 40px
• Imbottitura inferiore: 20px

3. Aggiungi modulo pulsante

Su all'ultimo modulo, che è un modulo pulsante. Aggiungi una copia a tua scelta.

Passa alla scheda Design e modella il pulsante come segue:

• Usa stile personalizzato per pulsante: Sì
• Dimensione del testo del pulsante:
  • Desktop = 0,8 vw
  • Tablet = 2,4 vw
  • Telefono = 3vw
• Colore del testo del pulsante: bianco #ffffff

• Colore di sfondo del pulsante: gradiente
• Colore sfumato uno: giallo #ffd400
• Colore sfumato due: arancione #ff8300
• Tipo di gradiente: lineare
• Direzione del gradiente: 202deg.

• Larghezza bordo pulsante: 0px
• Spaziatura tra le lettere dei pulsanti: 1px
• Carattere pulsante: Nunito Sans
• Peso del carattere del pulsante: pesante
• Stile carattere pulsante: TT

Per fare in modo che il pulsante abbia un bell'aspetto su tutte le dimensioni dello schermo, regoleremo l'imbottitura del pulsante come segue:

Desktop

• Imbottitura superiore: 1vw
• Imbottitura inferiore: 1vw
• Imbottitura destra: 3vw
• Imbottitura sinistra: 3vw

Tavoletta

• Imbottitura superiore: 2vw
• Imbottitura inferiore: 2vw
• Imbottitura destra: 6vw
• Imbottitura sinistra: 6vw

Telefono

• Imbottitura superiore: 3vw
• Imbottitura inferiore: 3vw
• Imbottitura destra: 8vw
• Imbottitura sinistra: 8vw

Anteprima

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

Desktop

Mobile

Avvolgendo

Questa build a tre colonne sovrapposte sembra ottima come testimonianza, ma siamo sicuri che puoi implementarla per altre cose sorprendenti. Ci auguriamo che questo ti ispiri a utilizzare le opzioni di trasformazione e sovrapposizione delle colonne per progetti futuri. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!