5 design di moduli di pulsanti Divi creativi e come realizzarli

In questo post, ti mostrerò 5 progetti creativi di moduli di pulsanti Divi che puoi facilmente ottenere con il modulo di pulsanti Divi. Il modulo pulsanti è uno dei più popolari di tutti i moduli Divi perché i pulsanti sono così importanti per condurre i visitatori agli obiettivi desiderati in un sito Web. Pertanto, è molto importante che noi come designer e sviluppatori rendiamo questi pulsanti accattivanti e accattivanti.

Scaviamo!

Sbirciata

Ecco una rapida occhiata ai pulsanti che creeremo in questo tutorial.

1. Pulsante bordo freccia sinistra

2. Pulsante linea mobile

3. Pulsante di estrazione della linguetta

4. Pulsante logo cerchio

5. Pulsante bagliore

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

5 modelli di moduli di pulsanti Divi e come realizzarli

1. Pulsante bordo freccia sinistra

Per iniziare, crea una nuova sezione con una riga di una colonna e aggiungi un modulo pulsante alla riga.

Quindi cambia il testo del contenuto predefinito del pulsante per leggere "Inizia" (o qualunque cosa tu voglia in realtà).

Ora è il momento di passare alle impostazioni di progettazione e aggiornare quanto segue:

Usa stili personalizzati per il pulsante: S
Colore del testo del pulsante: #ffffff
Colore di sfondo del pulsante: #324376
Larghezza bordo: 0px
Spaziatura tra le lettere dei pulsanti: 0,2 em
Carattere pulsante: Fira Sans
Stile carattere: TT (maiuscolo), U (sottolineato)
Colore sottolineatura: rgba (255,255,255,0.2)
Stile sottolineato: doppio
Icona del pulsante: vedi screenshot
Colore icona pulsante: #ff4751
Posizionamento dell'icona del pulsante: a sinistra

Imbottitura personalizzata: 40 pixel a sinistra, 20 pixel a destra

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 22 px
Posizione verticale dell'ombra del riquadro: 0px
Colore ombra: #ff4751

(Il riempimento sinistro personalizzato di 40 px crea uno spazio fisso che viene riempito con l'ombra della scatola per sedersi a filo con l'icona del pulsante freccia sinistra.)

Poiché l'ombra della casella di sinistra è a filo con l'inizio dell'icona della freccia, questo crea un bell'effetto del bordo della freccia. Se per qualche motivo non si trova a filo dell'icona, è possibile regolare la posizione orizzontale secondo necessità. La bellezza di questo design è che il bordo della freccia sinistra rimarrà al suo posto anche quando si aggiungono diverse quantità di testo del pulsante.

Questo è il risultato finale.

2. Pulsante linea mobile

Questo stile di pulsante successivo ha un aspetto più tecnico e minimalista. Le linee vengono create utilizzando un'ombra riquadrata e un gradiente di sfondo separati da un bordo trasparente. Ho anche aggiunto un effetto hover che sposta l'ombra del riquadro a destra che a sua volta sposta leggermente la linea di fondo a destra per un'interazione sottile.

Per iniziare, crea una nuova sezione con una riga di una colonna e aggiungi un modulo pulsante alla riga.

Aggiorna il contenuto del testo del pulsante come preferisci. Sto lasciando l'impostazione predefinita "clicca qui" per questo esempio. Quindi aggiorna le impostazioni di progettazione come segue:

• Usa stili personalizzati per il pulsante: S
• Colore del testo del pulsante: #3b7986
• Pulsante Gradiente di sfondo a sinistra Colore: rgba (255,255,255,0)
• Pulsante Gradiente di sfondo a destra Colore: #3b7986
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 96%
• Posizione finale: 0%
• Larghezza bordo pulsante: 10 px
• Colore bordo pulsante: rgba(0,0,0,0)
• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 6px
• Carattere pulsante: Exo 2
• Peso del carattere: grassetto
• Stile carattere: Tt (maiuscoletto)
• Icona del pulsante: freccia destra (vedi screenshot)
• Mostra solo l'icona al passaggio del mouse per il pulsante: NO
• Imbottitura personalizzata: 0px in basso
• Box Shadow: vedi screenshot
• Posizione orizzontale dell'ombra del riquadro: -15px
• Posizione verticale dell'ombra del riquadro: 15px
• Forza di diffusione dell'ombra della scatola: -13px
• Colore ombra: #3b7986

Potrebbe essere necessario impostare il colore di sfondo su #ffffff anche al passaggio del mouse poiché questa è l'impostazione predefinita per il pulsante.

La chiave di questo design è il gradiente del colore di sfondo e l'ombra della scatola. Impostando il punto iniziale del gradiente del colore di sfondo al 96%, si crea una linea con una larghezza del 4% nella parte inferiore del pulsante. Quindi, una volta posizionata e colorata l'ombra della scatola, abbiamo un altro elemento di linea che avvolge bene il pulsante. Inoltre, l'icona della freccia a destra funziona bene anche con gli elementi di design della linea.

Ecco il disegno definitivo.

Per aggiungere l'effetto al passaggio del mouse che sposta l'ombra della scatola, torna alle impostazioni di progettazione e passa con il mouse sull'opzione "Posizione orizzontale dell'ombra della scatola". Vedrai un'icona a forma di freccia popup proprio accanto al testo. Fare clic su di esso per aprire le opzioni al passaggio del mouse per quella particolare impostazione.

Quindi fare clic sulla scheda al passaggio del mouse e modificare il valore in 13 px.
Vedrai l'effetto hover in anteprima nel visual builder.

Ecco come appare l'effetto hover:

3. Pulsante di estrazione della linguetta

Questo design del pulsante successivo aggiunge un'ombra di casella per inquadrare l'icona del pulsante destro che rimane in una posizione assoluta. Al passaggio del mouse il pulsante si estende a destra creando l'effetto che stai tirando una linguetta.

Per creare il pulsante, creare prima una nuova sezione con una riga a una colonna e quindi aggiungere un modulo pulsante alla riga.

Apri le impostazioni del modulo dei pulsanti e aggiorna il testo del pulsante sotto la scheda del contenuto in base a ciò che desideri (utilizzerò il testo "Ulteriori informazioni").

Quindi passa alla scheda Progettazione e aggiorna quanto segue:

Usa stili personalizzati per il pulsante: S
Colore del testo del pulsante: #ffffff
Colore sfondo sfumato a sinistra del pulsante: #7D80DA
Pulsante Gradiente di sfondo a destra Colore: # 8EEDF7
Direzione gradiente: 90 gradi
Larghezza bordo pulsante: 0px
Raggio del bordo del pulsante: 10 px
Spaziatura tra le lettere dei pulsanti: 1px
Carattere pulsante: Source Sans Pro
Peso del carattere: grassetto
Stile carattere: TT
Icona del pulsante: vedi screenshot
Colore icona pulsante: #ffffff
Imbottitura personalizzata: 1 em a sinistra, 2,5 em a destra
Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: -35px
Posizione verticale dell'ombra del riquadro: 0px
Colore ombra: #7d80da

La chiave di questo design è l'ombra della casella sulla destra che incornicerà l'icona. Ma in questo momento l'icona deve essere posizionata per adattarsi all'area del gradiente. Per fare ciò, dobbiamo aggiungere alcuni CSS personalizzati.

Vai alla scheda Avanzate e inserisci il seguente CSS all'interno della casella di input Dopo:

position: absolute;
right: 5%;

Questo CSS mira alla posizione dell'icona e le assegna una posizione assoluta del 5% dal bordo destro del pulsante.

Dai un'occhiata al design finora.

Ora per aggiungere l'effetto al passaggio del mouse, dobbiamo solo aggiornare l'opzione di imbottitura corretta nella scheda al passaggio del mouse. Per fare ciò, apri le impostazioni del pulsante e apri le opzioni al passaggio del mouse passando con il mouse sull'elemento di riempimento personalizzato e facendo clic sull'icona del cursore che si apre. Quindi seleziona la scheda al passaggio del mouse e inserisci quanto segue:

Imbottitura personalizzata: 4em a destra

Ora diamo un'occhiata al risultato finale.

4. Pulsante logo cerchio

Per il prossimo design, trasformeremo un'icona/immagine circolare in un pulsante cliccabile con un fantastico effetto al passaggio del mouse che mostra un breve invito all'azione.

Per iniziare, crea una nuova sezione con una riga di una colonna e aggiungi un modulo pulsante alla riga.

Quindi apri le impostazioni di progettazione del pulsante. Nella scheda del contenuto, aggiungi la parola "Vai" per il testo del pulsante.

Quindi vai alle impostazioni del design e seleziona per utilizzare gli stili dei pulsanti personalizzati. Per prima cosa aggiungi l'immagine del cerchio come immagine di sfondo per il pulsante. Affinché questo design funzioni, assicurati di utilizzare un'immagine png di un logo o di un'icona che sia un cerchio perfetto e che le dimensioni dell'immagine siano della stessa altezza e larghezza. L'immagine che sto usando è un png di 118px per 118px. Prendilo qui se vuoi:

Una volta aggiunta l'immagine di sfondo, assicurati che la dimensione dell'immagine di sfondo sia impostata su "Dimensioni effettive". Ciò assicurerà che l'immagine mantenga le sue dimensioni originali (118px per 118px).

Quindi vogliamo ridimensionare il nostro pulsante in modo che corrisponda alle dimensioni esatte della nostra immagine circolare. Per fare ciò, passa alla scheda Avanzate e inserisci il seguente CSS personalizzato nell'elemento principale:

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

Nota che il CSS imposta la larghezza, l'altezza e l'altezza della linea sullo stesso valore di 118 px. Questa è la stessa larghezza e altezza della nostra immagine. Ora l'immagine si adatta perfettamente al pulsante. L'altezza della linea è impostata su 118 px in modo che il testo all'interno del pulsante sia centrato verticalmente all'interno del pulsante (non è ancora perfettamente centrato perché c'è ancora un po' di riempimento di cui dobbiamo sbarazzarci che lo sta buttando via). E il text-align: center assicura che il testo all'interno del pulsante rimanga centrato anche quando il modulo pulsante è allineato a sinistra oa destra.

Ora tutto ciò che dobbiamo fare è finire con alcune impostazioni di progettazione che completeranno il design. Vai alla scheda Design e aggiorna quanto segue:

Colore testo pulsante (predefinito): rgba(0,0,0,0)
Colore del testo del pulsante (passa il mouse): #ffffff

(Questo nasconde il testo del pulsante per impostazione predefinita e lo mostra in bianco al passaggio del mouse)

Colore di sfondo (predefinito): #121212
Colore di sfondo (al passaggio del mouse): #da00f2

(Questo mostra uno sfondo nero dietro l'immagine per impostazione predefinita e poi un colore di sfondo rosa brillante al passaggio del mouse.)

Larghezza bordo pulsante: 0px
Raggio pulsante: 50%;

(Impostando il raggio del pulsante al 50% cambierà il pulsante in una forma circolare perché l'altezza e la larghezza del pulsante sono state impostate su 118 px in CSS personalizzato.)

Carattere pulsante: Poppins
Peso del carattere: grassetto
Stile carattere: TT
Mostra icona pulsante: NO (avere un'icona a pulsante eliminerà il testo centrato)
Imbottitura personalizzata: 0px in alto, 0px in basso

(È importante rimuovere l'imbottitura superiore e inferiore in modo che l'altezza della linea impostata nel CSS personalizzato renda il testo centrato verticalmente.)

Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Colore ombra (predefinito): rgba(0,0,0,0)
Colore ombra (al passaggio del mouse): rgba(0,0,0,0.68)

(Questo mostrerà una leggera ombra intorno al cerchio al passaggio del mouse per un ulteriore effetto popout.)

Ecco il design finale con l'effetto hover.

5. Pulsante bagliore

Quest'ultimo design è piuttosto semplice e semplice da fare. Tutto ciò che serve è un uso creativo dei colori sfumati di sfondo e dei colori delle ombre della scatola. L'effetto al passaggio del mouse aumenta semplicemente la dimensione dell'ombra della scatola per dare più effetto bagliore.

Per iniziare, crea una nuova sezione con una riga a una colonna e aggiungi un modulo pulsante alla riga. Prima di aggiornare il modulo pulsanti, apri le impostazioni della sezione e assegna alla sezione un colore di sfondo scuro (#333333).

Ora apri le impostazioni del pulsante.

Puoi lasciare il testo del pulsante predefinito "Fai clic qui". Quindi aggiorna le seguenti impostazioni di progettazione:

Allineamento dei pulsanti: centro
Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 18px
Colore del testo del pulsante: #ffffff

Colore sfondo sfumato a sinistra del pulsante: #00ff8c
Colore sfondo sfumato a destra pulsante: #15c39a
Tipo di gradiente: radiale
Direzione radiale: Centro
Posizione finale: 75%

(Impostando il tipo di sfumatura su Radiale darà alla sfumatura una forma circolare che si espande verso l'esterno. Assicurati che il colore più chiaro sia visualizzato al centro della sfumatura per creare l'effetto bagliore.)

Larghezza bordo pulsante: 0px
Raggio del bordo del pulsante: 100 px
Spaziatura lettere pulsanti (predefinita): 4px
Spaziatura lettere pulsante (passa il mouse): 5px

(Aumentando la spaziatura delle lettere al passaggio del mouse si espanderà leggermente l'intero pulsante per un bell'effetto)

Peso del carattere: Ultra grassetto
Stile carattere: I, TT
Icona pulsante: freccia destra (vedi screenshot)
Imbottitura personalizzata: 20 px in alto, 20 px in basso, 30 px a sinistra, 50 px a destra

(hai bisogno di più padding destro per tenere conto dell'icona del pulsante freccia destra)

Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Intensità sfocatura ombra riquadro (predefinito): 64 px
Forza sfocatura dell'ombra del riquadro (al passaggio del mouse): 100 px
Forza di diffusione dell'ombra della scatola: -12px
Colore ombra: rgba (0,255,140,0.66)

(L'ombra della scatola si aggiunge all'effetto bagliore quando si abbina il colore dell'ombra con il colore del pulsante. Aumentando l'intensità della sfocatura al passaggio del mouse si ingrandisce anche il bagliore del pulsante)

Scopri il design finale con l'effetto hover.

Più ispirazione per i pulsanti

Per conoscere l'ispirazione sugli stili dei pulsanti, dai un'occhiata ad alcuni di questi altri articoli:

• Come creare il pulsante del carattere dell'icona con Divi
• Progetta un layout Divi unico a schermo intero con un pulsante di scorrimento animato
• Come modellare i tuoi pulsanti social Monarch in modo che corrispondano al design del tuo sito
• 7 chiavi per creare un pulsante di iscrizione irresistibile

Pensieri finali

Spero che questi esempi ti abbiano ispirato a massimizzare il Divi Button Module in modi nuovi e creativi! Poiché un invito all'azione è così importante per il tuo sito web, è sempre bene avere una varietà di idee nella nostra cassetta degli attrezzi per creare alcune opzioni di pulsanti uniche. Sentiti libero di usare queste idee per creare dei tuoi fantastici stili di bottoni!

Non vedo l'ora di sentirti nei commenti.

Saluti!