Creazione di design unici per pulsanti Divi utilizzando un modulo di testo

La creazione di design di pulsanti Divi unici utilizzando un modulo di testo potrebbe aver già attraversato la tua mente. Se è così, sei più creativo di quanto pensi! Con il rilascio delle opzioni al passaggio del mouse in Divi, tutti i moduli possono essere resi cliccabili. Questo apre la porta all'utilizzo di qualsiasi modulo (con tutte le sue impostazioni di progettazione integrate) come CTA o pulsante cliccabile. Un modulo di testo, ad esempio, ti consente di aggiungere tutto il testo che desideri al modulo in diversi formati. Inoltre, il modulo di testo ha anche alcune robuste opzioni di design per personalizzare gli angoli arrotondati per creare forme uniche.

In questo tutorial, esplorerò alcuni design unici di pulsanti Divi che sono possibili utilizzando un modulo di testo.

Iniziamo!

Sbirciata

Ecco alcuni esempi di design di pulsanti che creeremo facilmente con il modulo di testo.

Questo è un pulsante con testo su due righe...

Questo è un pulsante che utilizza una voce di elenco...

Questo è un pulsante che utilizza gli angoli creativi...

Creazione di design unici per pulsanti Divi utilizzando un modulo di testo

Iscriviti al nostro canale Youtube

#1 Creazione di un pulsante con più righe di testo

Come accennato in precedenza, il modulo di testo consente una quantità illimitata di testo, quindi sarebbe facile creare un pulsante con solo due righe di testo utilizzando il modulo di testo in più formati. Utilizzando il wysiwyg o l'editor di testo, puoi aggiungere testo in paragrafi, intestazioni, collegamenti, elenchi e citazioni. E la parte migliore del modulo di testo è che puoi scegliere come target e modellare ciascuno di questi formati di testo individualmente utilizzando l'interfaccia utente della scheda integrata nelle impostazioni di progettazione del generatore visivo.

Ciò rende davvero facile aggiungere più righe di testo e quindi modellare ciascuna riga di testo separatamente per un layout di pulsanti univoco.

Ecco un rapido esempio di come impostare il modulo di testo come un pulsante con più righe di testo.

Se non l'hai già fatto, crea una nuova pagina e distribuisci il visual builder. Scegli l'opzione "Costruisci da zero". Quindi crea una nuova sezione una riga a una colonna. Quindi aggiungi un modulo di testo alla riga.

Per il contenuto del testo, usa la scheda html e inserisci quanto segue:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Ci sono molti stili di sfondo diversi che possiamo aggiungere al nostro modulo, ma per questo esempio, aggiungiamo un semplice sfondo sfumato:

Colore sfondo sfumato sinistro: #FEE140
Colore sfondo sfumato a destra: #FA709A

Quindi vai alla scheda di progettazione e usa l'interfaccia utente della scheda di intestazione per modellare i tag di intestazione h3 e h4 come segue:

Intestazione 3 Peso del carattere: Ultra grassetto
Intestazione 3 Stile carattere: TT
Colore testo titolo 3: #ffffff
Intestazione 4 Stile carattere: TT
Colore testo titolo 4: #ffffff
Intestazione 4 Dimensioni del testo: 16 px

Ora tutto ciò che dobbiamo fare è ridimensionare il modulo di testo in modo che assomigli più a un pulsante. Per fare ciò, aggiorna quanto segue:

Larghezza: 230 px
Imbottitura personalizzata: 1em in alto, 0.5em in basso, 2em a sinistra, 2em a destra

Dal rilascio delle nuove opzioni al passaggio del mouse di Divi, tutti i moduli possono diventare cliccabili proprio come un pulsante. Per fare ciò, torna alla scheda dei contenuti e inserisci l'URL di un collegamento al modulo.

Questo è il risultato finale.

Come effetto al passaggio del mouse, puoi aggiungere un'ombra di riquadro che si estende sul pulsante, applicando infine un nuovo colore di sfondo per sostituire il gradiente.

Per fare ciò, apri le impostazioni del modulo di testo e aggiorna quanto segue:

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 0 px (predefinito), 230 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: 0px
Colore ombra: rgba(0,0,0,0) (predefinito), #fee140 (hover)

Ecco come appare al passaggio del mouse.

#2 Creare un Pulsante Voce di Elenco

Poiché i moduli di testo ti consentono di aggiungere elenchi (non ordinati o ordinati) al contenuto, puoi sfruttare questa funzionalità per creare un pulsante elenco. Fondamentalmente, tutto ciò che devi fare è creare un elenco con un elemento dell'elenco all'interno della casella del contenuto. Quindi avvolgere l'elemento dell'elenco in un tag di intestazione in modo da poter modellare separatamente l'elemento elenco puntato e il testo dell'intestazione.

Se non l'hai già fatto, crea una nuova pagina e distribuisci il visual builder. Scegli l'opzione "Costruisci da zero". Quindi crea una nuova sezione una riga a una colonna. Quindi aggiungi un modulo di testo alla riga.

Quindi aggiungi il seguente codice html nella scheda testo delle impostazioni del contenuto:

<ol><li><h3>Contact Us</h3></li></ol>

È importante racchiudere il testo dell'elemento dell'elenco in un tag di intestazione in modo da poter definire lo stile del punto elenco/numero dell'elemento dell'elenco separatamente dal testo.

Ora passa alla scheda Progettazione e finisci di progettare il modulo di testo come un pulsante:

Nella categoria delle impostazioni del testo, seleziona la scheda dell'elenco ordinato e aggiorna quanto segue:

Carattere elenco ordinato: Exo 2
Peso del carattere dell'elenco ordinato: leggero
Colore testo elenco ordinato: #000000
Dimensioni del testo dell'elenco ordinato: 20 px
Spaziatura delle lettere dell'elenco ordinato: 5px
Tipo di stile elenco ordinato: zero decimale iniziale
Stile elenco ordinato Posizione: esterno
Rientro dell'elemento dell'elenco ordinato: 2em

Nella categoria Testo intestazione, fai clic sulla scheda H3 e aggiorna quanto segue:

Carattere titolo 3: Exo 2
Intestazione 3 Peso del carattere: semi grassetto
Intestazione 3 Stile carattere: TT
Colore testo titolo 3: #0c71c3
Intestazione 3 Dimensione testo: 26px
Altezza della linea di intestazione 3: 0,3 em

Quindi, cambia la larghezza del modulo e assegnagli un bordo e una spaziatura per farlo sembrare un pulsante:

Larghezza (del modulo): 262px
Allineamento del modulo: centro
Imbottitura personalizzata: 2em in alto, 0px in basso, 2em a sinistra, 2em a destra
Angoli arrotondati: 10px2em
Larghezza del bordo: 1px
Colore del bordo: #000000
Stile del bordo: solido

E non dimenticare di aggiungere un collegamento al tuo modulo all'URL designato di tua scelta.

Ecco il disegno definitivo.

Sentiti libero di esplorare nuovi tipi di stili di elenco (come Upper Roman) per design di pulsanti di elenco unici.

#3 Creazione di un pulsante con angoli creativi (come una foglia)

Per questo prossimo progetto, sfrutteremo l'impostazione del design con angoli arrotondati all'interno di un modulo di testo. L'idea di base è quella di impostare diversi valori del raggio d'angolo per creare pulsanti dalla forma unica. In questo esempio, modellerò il nostro modulo in modo che assomigli a un pulsante foglia.

Se non l'hai già fatto, crea una nuova pagina e distribuisci il visual builder. Scegli l'opzione "Costruisci da zero". Quindi crea una nuova sezione una riga a una colonna. Quindi aggiungi un modulo di testo alla riga.

Apri le impostazioni del modulo di testo e inserisci il seguente codice html nella scheda di testo della casella del contenuto:

<h3>grow</h3>
<h4>with us</h4>

Questo ci permette di mettere il testo del pulsante su due righe (riducendo la larghezza verticale) e modellarle in modo indipendente.

Quindi aggiungi uno sfondo sfumato con un colore più "simile a una foglia".

Colore sfondo sfumato sinistro: #7cda24
Colore di sfondo sfumato a destra: #26e051
Direzione del gradiente: 90 gradi

Ora passiamo alle impostazioni di progettazione per centrare il nostro testo e modellare i tag di intestazione. dovrai selezionare la scheda h3 per progettare l'intestazione h3 e selezionare la scheda h4 per progettare l'intestazione h4:

Orientamento del testo: centro
Titolo 3 Carattere: Oswald
Intestazione 3 Peso del carattere: Leggero
Intestazione 3 Stile carattere: TT
Colore testo titolo 3: #ffffff
Intestazione 3 Dimensioni del testo: 27 px
Titolo 4 Carattere: Oswald
Intestazione 4 Stile carattere: TT
Colore testo titolo 4: #ffffff

Continua ad aggiornare il design per dare al tuo modulo di testo la larghezza e la spaziatura corrette per un pulsante.

Larghezza: 178 px
Allineamento del modulo: centro
Imbottitura personalizzata: 2em in alto, 2em in basso, 1em a sinistra, 1em a destra

Infine, possiamo aggiungere i nostri angoli arrotondati personalizzati per dare al modulo una forma a foglia e quindi aggiungere un'ombra a scatola per rendere la foglia più viva. Per fare questo aggiornare quanto segue:

Sblocca prima l'opzione degli angoli arrotondati in modo da poter assegnare valori individuali a ciascun angolo.

Angolo in alto a sinistra: 100 px
Angolo in basso a destra: 100 px

Quindi aggiungi un'ombra di scatola...

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: 25 px
Posizione verticale dell'ombra del riquadro: -4px
Forza di diffusione dell'ombra della scatola: -12px
Colore ombra: rgba(0,0,0,0.25)

Non dimenticare di aggiungere l'URL del collegamento al modulo in modo che il modulo si colleghi alla posizione desiderata.

Ecco il disegno definitivo.

Per un effetto al passaggio del mouse, puoi alternare i valori degli angoli arrotondati per posizionare il design del pulsante nella direzione opposta al passaggio del mouse:

Ed ecco come appare l'effetto hover.

Pensieri finali

È sempre bello pensare fuori dagli schemi ogni tanto quando si tratta di progettare siti Web con Divi. Si spera che questo tutorial aiuti a pensare a nuovi e creativi design di pulsanti divi utilizzando il modulo di testo. In effetti, suggerirei di esplorare altri moduli (come il modulo Blurb) per ulteriori opzioni di progettazione.

Non vedo l'ora di sentirti nei commenti.

Saluti!