Creazione di una sezione "Il nostro processo" con le nuove strutture di colonne di Divi

Le nuove strutture delle colonne di Divi hanno innegabilmente aggiunto una tonnellata di possibilità di design in più a Divi. Per mostrarti quanto puoi diventare unico con le versatili strutture di colonne di Divi, ti mostreremo come creare una sezione "il nostro processo" unica utilizzando solo le opzioni integrate di Divi. Inoltre, aggiungeremo anche un sottile effetto al passaggio del mouse che appare quando passi il mouse su uno dei passaggi del processo. Queste sezioni sono ottime per spiegare come fai ciò che fai ai tuoi clienti o potenziali clienti.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato che puoi aspettarti da questo tutorial.

Aggiungi nuova sezione

Colore di sfondo

Aggiungi una sezione standard a una pagina nuova o esistente e utilizza il seguente colore di sfondo:

• Colore di sfondo: #3a1dad

Spaziatura

Vai alle impostazioni di spaziatura successiva e aggiungi un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 170 px
• Imbottitura inferiore: 170 px

Visibilità

Stiamo creando un'alternativa su schermi di dimensioni più piccole, ma inizieremo creando la versione desktop. Ecco perché disabilitavamo questa sezione su telefono e tablet nelle impostazioni di visibilità.

Aggiungi riga n. 1

Struttura della colonna

Dopo aver modificato le impostazioni della sezione, continua aggiungendo una nuova riga utilizzando la seguente struttura a colonne:

Aggiungi sfondo sfumato alle colonne 1, 3 e 5

Per creare un bell'effetto al passaggio del mouse, aggiungeremo uno sfondo sfumato alle colonne 1, 3 e 5. Queste sono le colonne che conterranno ciascuna una fase del processo. Utilizzeremo le due colonne rimanenti per collegare i passaggi tra loro. Ognuna delle tre colonne che abbiamo menzionato avrà bisogno dello stesso sfondo sfumato:

• Colore 1: #580cf2
• Colore 2: RGB (41,196,169,0)
• Colonna 1 Tipo di gradiente: radiale
• Colonna 1 Posizione iniziale: 38%
• Posizione finale della colonna 1: 38%

Dimensionamento

Una volta che hai finito di aggiungere gli sfondi sfumati, vai alle impostazioni di dimensionamento e abilita l'opzione a larghezza intera.

• Rendi questa riga a larghezza intera: Sì

Spaziatura

Avremo anche bisogno di alcuni valori di riempimento personalizzati per l'intera riga e la colonna dedicati a contenere le fasi del processo.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura superiore colonna 1: 20px
• Imbottitura inferiore colonna 1: 20px
• Imbottitura superiore colonna 3: 20px
• Imbottitura inferiore colonna 3: 20px
• Imbottitura superiore colonna 5: 20px
• Imbottitura inferiore colonna 5: 20 px

Clona riga n. 1 due volte

Prima di aggiungere qualsiasi modulo, cloneremo la riga due volte. Questo ci aiuterà a risparmiare tempo nei passaggi successivi.

Modifica primo duplicato

Rimuovi gli sfondi sfumati delle colonne

Apri la seconda riga nella tua sezione (il primo duplicato) e rimuovi tutti gli sfondi sfumati di colonna che sono stati applicati ad essa. Non ne avremo bisogno poiché la seconda riga non conterrà alcun passaggio del processo, solo un titolo e divisori verticali che collegheranno i passaggi.

Rimuovi spaziatura colonne

Allo stesso modo, rimuovi tutto il riempimento personalizzato della colonna che è stato applicato alle colonne 1, 3 e 5.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi il modulo Blurb alla prima colonna della riga n. 1

Aggiungi contenuto

È ora di iniziare ad aggiungere i moduli! Inizieremo con un modulo Blurb nella colonna 1 della prima riga. Questo modulo Blurb conterrà il contenuto del nostro primo passaggio, quindi vai avanti e aggiungi del testo a tua scelta.

Scegli icona

Utilizziamo anche la seguente icona che indicherà dove cercare il passaggio successivo:

Colore di sfondo predefinito

Quindi, aggiungi un colore di sfondo predefinito al modulo Blurb. Questo colore di sfondo è lo stesso che abbiamo usato per la sezione. Nasconde lo sfondo sfumato della colonna che abbiamo aggiunto nella parte precedente di questo tutorial.

• Colore di sfondo: #3a1dad

Colore di sfondo al passaggio del mouse

Tuttavia, vogliamo che lo sfondo del gradiente della colonna venga visualizzato al passaggio del mouse. Ecco perché stiamo cambiando il colore di sfondo al passaggio del mouse in uno completamente trasparente.

• Colore di sfondo: rgba (255,255,255,0)

Impostazioni predefinite dell'icona

Continua andando nelle impostazioni dell'icona e apportando alcune modifiche.

• Colore icona: #9d8ad8
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 80px

Impostazioni dell'icona al passaggio del mouse

Applica un colore dell'icona e una dimensione del carattere diversi al passaggio del mouse.

• Colore icona: #ffffff
• Dimensione carattere icona: 120 px

Impostazioni testo

Quindi, vai alle impostazioni del testo e apporta alcune modifiche.

• Orientamento del testo: al centro
• Colore del testo: chiaro

Impostazioni del testo del titolo

Anche le impostazioni del testo del titolo devono essere modificate.

• Peso del carattere del titolo: Ultra grassetto
• Stile carattere del titolo: maiuscolo

transizioni

Per creare una transizione graduale, aumenteremo la durata della transizione.

• Durata della transizione: 500 ms

Clona modulo Blurb e posiziona in colonne irregolari (entrambe le righe n. 1 e n. 3)

Ora che abbiamo creato il primo passaggio del modulo Blurb, possiamo clonarlo 5 volte e posizionare i duplicati nelle colonne contrassegnate nella schermata di stampa sottostante.

Cambia contenuto e icona di ogni duplicato

Naturalmente, dovrai modificare il contenuto di ciascuno dei duplicati insieme all'icona per assicurarti che il processo abbia senso.

Aggiungi divisore orizzontale alla seconda colonna della riga n. 1

Visibilità

Il secondo modulo che dovremo aggiungere è un modulo divisore. Utilizziamo questo modulo per collegare tra loro tutti i passaggi del modulo Blurb. Vai avanti e aggiungine uno alla seconda colonna della prima riga.

• Mostra divisore: Sì

Colore divisore

Cambia il colore del divisore successivo.

• Colore: #dddddd

Spaziatura

Per allineare verticalmente il modulo divisore, utilizzeremo un margine superiore. Aumenteremo anche la larghezza del modulo utilizzando un margine sinistro e destro negativo.

• Margine superiore: 150 px
• Margine sinistro: -60px
• A destra: -60px

Clona divisore orizzontale e posiziona in colonne pari (entrambe le righe n. 1 e n. 3)

Clonare il modulo divisore e posizionarlo nelle colonne contrassegnate nella schermata di stampa di seguito:

Aggiungi divisore verticale alla prima colonna della riga n. 2

Visibilità

Avremo bisogno anche di un divisore verticale. Per crearne uno, aggiungeremo un nuovo modulo divisore alla colonna 1 della seconda riga, ma ci assicureremo che l'opzione "Mostra divisore" sia disabilitata.

• Mostra divisore: No

Colore di sfondo

Aggiungi un colore di sfondo al modulo successivo.

• Colore di sfondo: #dddddd

Dimensionamento

E poi cambia le impostazioni di dimensionamento. Una volta fatto, noterai che un divisore verticale va a posto.

• Larghezza: 0,5%
• Allineamento del modulo: Centro

Spaziatura

Per aumentare l'altezza del divisore verticale, utilizzeremo alcuni valori di spaziatura personalizzati.

• Margine superiore: 20px
• Imbottitura superiore: 120 px
• Imbottitura inferiore: 120 px

Clona divisore verticale e posiziona duplicato nella colonna 5 della riga n. 2

Clona il divisore verticale che hai creato e posizionalo nell'ultima colonna della seconda riga.

Aggiungi il modulo di testo del titolo alla colonna 3 della riga n. 2

Aggiungi contenuto

L'ultimo modulo di cui avremo bisogno è un modulo di testo del titolo. Aggiungi questo modulo alla terza colonna della seconda riga con alcuni contenuti a tua scelta.

Impostazioni del testo dell'intestazione

Vai alle impostazioni del testo dell'intestazione e apporta alcune modifiche all'aspetto del tuo titolo.

• Peso carattere titolo 2: Ultra grassetto
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: rgba (255,255,255,0,09)
• Titolo 2: Dimensione testo: 220 px (desktop), 150 px (tablet), 100 px (telefono)
• Intestazione 2 Spaziatura lettere: -50 px (desktop), -30 px (tablet), -25 px (telefono)

Spaziatura

Infine, aggiungi alcuni valori di spaziatura personalizzati per consentire al modulo di testo del titolo di posizionarsi.

• Margine superiore: 30px
• Margine sinistro: -800 px
• Margine destro: -800 px

Crea un'alternativa per tablet e telefono

Aggiungi nuova sezione

Colore di sfondo

Come accennato all'inizio di questo post, creeremo un'alternativa per schermi di dimensioni inferiori. Vai avanti e aggiungi una nuova sezione normale usando lo stesso colore di sfondo della precedente.

• Colore di sfondo: #3a1dad

Spaziatura

Aggiungi alcuni valori di riempimento personalizzati in alto e in basso.

• Imbottitura superiore: 170 px
• Imbottitura inferiore: 170 px

Visibilità

E nascondi la sezione sul desktop nelle impostazioni di visibilità.

Aggiungi riga n. 1

Struttura della colonna

Invece di utilizzare una riga a 6 colonne, come abbiamo fatto per la sezione desktop, stiamo usando solo una colonna.

Clona il modulo di testo del titolo della sezione precedente e posizionalo nella riga n. 1

Clona il titolo Modulo di testo della sezione desktop e posiziona il duplicato nella nuova riga.

Rimuovi spaziatura

Continua rimuovendo le impostazioni di spaziatura di questo modulo.

Aggiungi riga #2

Struttura della colonna

Quindi, aggiungi un'altra riga con una colonna.

Clona modulo Blurb della sezione precedente e posizionalo nella riga n. 2

Clona uno dei passaggi del Modulo Blurb nella sezione desktop e posiziona il duplicato nella nuova riga.

Cambia icona

Cambia l'icona in quella che punta verso il basso.

Cambia taglia

Modificare le impostazioni di dimensionamento successivo.

• Larghezza: 39% (tablet), 59% (telefono)
• Allineamento del modulo: Centro

Clona divisore verticale della sezione precedente e posizionalo nella riga n. 2

Anche qui stiamo usando il divisore verticale della sezione precedente. Vai avanti e clonalo e posiziona il duplicato proprio sotto il modulo Blurb.

Cambia spaziatura

Modifica le impostazioni di spaziatura di questo modulo per ridurne l'altezza.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px

Clona entrambi i moduli tutte le volte che vuoi

Puoi clonare entrambi questi moduli tutte le volte che vuoi per mostrare tutte le fasi del processo su schermi di dimensioni più piccole.

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato.

Pensieri finali

In questo post, ti abbiamo mostrato come utilizzare in modo creativo le strutture delle colonne di Divi per creare una sezione di processo straordinaria e unica. Inoltre, abbiamo anche aggiunto un sottile effetto al passaggio del mouse a ciascuna delle fasi del processo che appare quando passi il mouse su un elemento. Sentiti libero di giocare con questo design per creare la tua alternativa unica. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!