Progetta una sezione caratteristica unica in Divi con icone animate da contatori circolari

La maggior parte dei siti Web necessita di una sezione delle funzionalità ben progettata per visualizzare le funzionalità di prodotti o servizi. Quindi, in questo tutorial, ti mostrerò come creare una sezione di funzionalità unica in Divi. Per fare questo, diventeremo un po' creativi con il modulo Circle Counter di Divi per aggiungere animazioni alle tue icone blurb. E usando una spaziatura personalizzata, ti mostrerò come posizionare facilmente i tuoi blurb in modo che coincidano bene con uno sfondo divisore. Il design finale è sia pulito che unico. E con qualche piccolo tocco, può essere un'ottima aggiunta al tuo prossimo progetto.

Iniziamo!

Sbirciata

Ecco una piccola anteprima del design e della gif per illustrare l'elemento di animazione.

Creazione di una nuova pagina e distribuzione di Visual Builder

Per iniziare, vai alla dashboard di WordPress e vai su Pagine > Aggiungi nuovo. Quindi dai un titolo alla pagina e fai clic per utilizzare Divi Builder. Quindi fare clic per utilizzare Visual Builder. Ti verranno richieste tre opzioni. Scegli l'opzione "Costruisci da zero".

La tua tela bianca ti aspetta!

Creazione dell'intestazione della sezione delle funzioni

L'intestazione superiore per la sezione delle funzionalità è piuttosto semplice. L'elemento unico è la sottile ombra della scatola visualizzata sotto per dare un po' di profondità al design.

Per crearlo, inserisci una riga a una colonna nella tua sezione normale.

Quindi aggiungi un modulo di testo alla riga e aggiorna le impostazioni come segue:

Contenuto:

<h1>Our Features</h2>
Everything you need.

Carattere del testo: Montserrat
Peso del carattere del testo: semi grassetto
Dimensione del testo del testo: 22px
Orientamento del testo: al centro
Peso del carattere dell'intestazione: Ultra grassetto
Dimensione del testo dell'intestazione: 6vw (desktop), 50px (tablet), 30px (smartphone)

Ora salva le tue impostazioni e passa alle impostazioni della sezione e aggiungi un'ombra di casella come segue:

Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 19 px
Intensità della sfocatura dell'ombra della scatola: 80 px
Forza di diffusione dell'ombra della scatola: -16px
Colore ombra: rgba (136,150,171,0.13)

Salva le impostazioni.

Roba abbastanza semplice. Ora passiamo alla parte divertente.

Creazione della sezione delle caratteristiche principali e del design dello sfondo

Dobbiamo aggiungere una nuova sezione per contenere le nostre funzionalità. Normalmente, potresti semplicemente aggiungere una nuova riga alla sezione precedente, ma in questo caso dobbiamo aggiungere uno sfondo Divisore che è disponibile nell'elemento Sezione.

Vai avanti e aggiungi una nuova sezione direttamente sotto la sezione che hai appena finito. Quindi aggiungi un layout a quattro colonne alla riga.

Aggiungeremo dei dettagli a queste colonne, ma per ora aggiorniamo le impostazioni della nostra sezione.

Per questa sezione, dobbiamo dargli una larghezza massima personalizzata. Questo è importante per mantenere il design in posizione su browser di dimensioni maggiori. Dobbiamo anche aggiungere una sezione Divisore per fungere da sfondo che coincide con la disposizione dei nostri blurb (ne parleremo più avanti).

Vai alle impostazioni della sezione e aggiorna quanto segue:

Larghezza: 1080px
Allineamento della sezione: Centro
Divisori: in alto
Stile divisore: vedi screenshot
Colore divisorio: rgba (136,150,171,0,07)
Altezza divisorio: 52%

Salva le impostazioni.

Dare alla sezione una larghezza personalizzata (o larghezza massima) di 1080px è fondamentalmente il modo in cui le tue righe sono impostate per impostazione predefinita all'interno di una sezione. Quindi, in sostanza, stiamo rendendo la nostra intera sezione delle dimensioni di una riga predefinita.

Aggiunta di blurb alla riga a quattro colonne

A questo punto possiamo andare avanti e iniziare ad aggiungere i nostri blurb a ciascuna delle quattro colonne. Fai clic sull'icona grigia nella prima colonna per aggiungere il tuo primo blurb. Aggiorna il contenuto nella casella per includere meno testo (2 frasi), quindi scegli di utilizzare un'icona invece di un'immagine (ho scelto l'icona dell'immagine).

Nella scheda Progettazione, aggiorna quanto segue:

Colore icona: #974450
Icona del cerchio: S
Colore del cerchio: rgba (255,255,255,0,5)
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 48px
Orientamento del testo: al centro

Salva le impostazioni.

Ora copia e incolla il modulo blurb in ciascuna delle colonne rimanenti in modo da avere un blurb in ogni colonna.

Puoi tornare indietro e aggiornare le icone se vuoi a questo punto, ma non è necessario.

Aggiungi contatori cerchio per sovrapporre icone Blurb

Per aggiungere l'animazione alle nostre icone blurb, sovrapporremo ciascuna icona con un contatore circolare che ha un valore numerico diverso. Ciò farà sì che l'animazione del cerchio aumenti gradualmente con ciascuna icona per mostrare la progressione. Tuttavia, puoi utilizzare qualsiasi valore nubmer che desideri con ciascun contatore di cerchi.

Fai clic sull'icona grigia "Aggiungi nuovo modulo" sotto il modulo blurb nella prima colonna, quindi aggiungi il modulo contatore.

Prima di iniziare a modificare le impostazioni del modulo cerchio, vai avanti e trascinalo sopra il modulo blurb. Ora puoi aggiornare le impostazioni del contenuto come segue:

Elimina il testo nella casella del titolo
Numero: 25

Quindi aggiorna le impostazioni della scheda di progettazione come segue:

Colore sfondo barra: #974450 (stesso colore delle icone blurb)
Colore testo numero: rgba(0,0,0,0) (questo è completamente trasparente in modo da nascondere il numero)
Dimensione testo numero: 0px (per eliminare qualsiasi spazio di testo indesiderato all'interno del cerchio)
Larghezza: 109 px (questo è stato impostato in base alla dimensione dell'icona che si sovrapporrà)
Allineamento del modulo: Centro
Margin-bottom: -102px (questo si sovrapporrà perfettamente all'icona)

Salva le impostazioni.

Ora tutto ciò che devi fare è copiare e incollare il modulo contatore del cerchio in ciascuna delle colonne rimanenti e quindi trascinarlo nella parte superiore di ogni contrassegno. Dopo che i contatori circolari duplicati sono a posto, aggiorna il secondo numero del contatore circolare a 50, il terzo numero contatore a 75 e il quarto numero contatore a 100. Il risultato dovrebbe essere simile a questo al termine dell'animazione.

Usa l'imbottitura delle righe per posizionare le icone in modo che coincidano con il divisore

L'ultimo passaggio di questo design è posizionare le icone in modo che coincidano con l'arco dello sfondo del divisore. Per fare ciò, è necessario aggiungere un'imbottitura personalizzata alla riga. Apri le impostazioni della riga e aggiorna quanto segue:

Rendi questa riga a larghezza intera: S
Imbottitura personalizzata colonna 2: 9% superiore (desktop), 0% superiore (tablet)
Imbottitura personalizzata della colonna 3: 9% in alto (desktop), 0% in alto (tablet)

Questo è tutto!

Controlla il risultato finale.

Nota come le icone sono ora animate dal contatore circolare con valori numerici variabili. E le icone coincidono con lo sfondo del divisore.

Come appare la sezione delle funzionalità sui dispositivi mobili

Ecco uno sguardo a come appare il design sui display di tablet e smartphone.

Pensieri finali

Gli elementi unici di questo design della sezione delle funzionalità sono leggeri e sottili, il che dovrebbe facilitarti l'integrazione nei tuoi layout con alcune piccole modifiche. E se le animazioni del contatore circolare non sono la tua tazza di tè, sentiti libero di lasciarle fuori e usa semplicemente l'icona del cerchio del modulo blurb. Oppure puoi scegliere di utilizzare solo i contatori circolari con i valori numerici visibili per un layout creativo per presentare le statistiche. Se non altro, spero che questo ti dia alcune idee da esplorare da solo.

Non vedo l'ora di sentirti nei commenti.

Saluti!