Come creare pulsanti di carattere icona con Divi

I pulsanti dei caratteri delle icone hanno molti usi nel mondo del web design. Poiché le icone dei caratteri rimangono nitide nel colore e nel design mentre si adattano a dimensioni diverse, ha senso usarle nei pulsanti. Inoltre, creare un pulsante per il carattere dell'icona in Divi è in realtà abbastanza semplice utilizzando l'elegante carattere dell'icona. In questo tutorial, ti mostrerò come puoi utilizzare i caratteri delle icone con il modulo dei pulsanti di Divi per creare un singolo pulsante dell'icona.

Alcuni dei punti salienti di questo tutorial includono:

• Come utilizzare il carattere elegante per aggiungere un'icona come testo del pulsante
• Come aggiungere un'imbottitura e un raggio del bordo che assicurino che il pulsante assuma la forma di un quadrato o cerchio perfetto
• Come sostituire l'icona del pulsante con un'icona diversa al passaggio del mouse?
• Come posizionare l'icona di un pulsante per sovrapporre un'immagine
• e altro ancora...

Sbirciata

Ecco un'anticipazione di quello che verrà...

Quello di cui hai bisogno

Per questo tutorial, utilizzerò quanto segue:

• Tema Divi (ovviamente)
• Le icone dei caratteri eleganti – Una volta scaricato il file zip dal post del blog, trascineremo il file dei caratteri eleganticons.ttf da utilizzare come carattere personalizzato per il nostro modulo pulsanti.
• Il layout della home page del Bed & Breakfast (disponibile gratuitamente dal Divi Builder)

Iniziamo!

Aggiungere il carattere dell'icona elegante al modulo del pulsante

Aggiungi un modulo pulsante

Per iniziare, crea una nuova pagina e distribuisci il visual builder. Scegli "Crea da zero" e quindi, una volta distribuito il visual builder, aggiungi una riga di una colonna alla sezione e quindi aggiungi un modulo pulsante alla riga.

Trascina il carattere dell'icona elegante

Per ottenere l'Elegant Icon Font, vai al post del blog Elegant Icon Font e scarica il file del carattere. Estrai il contenuto del file zip e trova i file di caratteri dell'icona elegante navigando su elegant_font > HTML CSS > font. Quindi trascina il file "ElegantIcons.ttf" dal file del tuo computer e rilascialo nel visual builder.

Questo farà apparire automaticamente la modalità di caricamento del carattere. Basta fare clic sul pulsante di caricamento per caricare il carattere in Divi Builder.

Ora avrai accesso all'elegante carattere dell'icona durante la personalizzazione di qualsiasi carattere del modulo nel generatore visivo.

Vai alle impostazioni del modulo pulsanti e aggiorna il carattere del pulsante con il nuovo carattere dell'icona elegante appena caricato. Verrà visualizzato nell'elenco delle icone sotto "Caratteri personalizzati".

Potresti notare che ora il testo del tuo pulsante è stato trasformato in un mucchio di icone. Questo perché ogni carattere inserito nella casella di immissione del testo del pulsante ora ha un'icona che corrisponde alla lettera/carattere attualmente in uso.

Dal momento che abbiamo solo bisogno di un'icona da utilizzare per il nostro pulsante, puoi selezionare qualsiasi carattere sulla tastiera per generare l'icona associata a quel carattere. Ad esempio, inserisci il numero 5 per il testo del pulsante per ottenere una freccia chevron destra.

Scambia le icone dei pulsanti al passaggio del mouse

Come sai, il modulo pulsante include l'opzione per aggiungere icone al passaggio del mouse. Possiamo usare questa funzionalità per sostituire il carattere dell'icona con l'icona al passaggio del mouse per un piacevole effetto al passaggio del mouse. Tutto quello che dobbiamo fare è modificare le impostazioni del pulsante come segue:

Dimensione del testo del pulsante: 30px
Icona pulsante: vedi screenshot (questa sarà l'icona che sostituirà il carattere dell'icona utilizzato per il pulsante)
Colore icona pulsante: #0c71c3 (dovrebbe corrispondere al colore utilizzato per il testo del pulsante)
Posizionamento dell'icona del pulsante: a sinistra
Colore del testo al passaggio del mouse del pulsante: rgba (255,255,255,0) (questo è completamente trasparente per nascondere il carattere dell'icona del pulsante al passaggio del mouse)
Padding personalizzato: 1em Left, 1em Right (questo padding sovrascriverà il padding predefinito del pulsante e impedirà che si espanda al passaggio del mouse)

Ora tutto ciò che dobbiamo fare è sovrascrivere il margine per l'elemento before nel css personalizzato. Vai alla scheda Avanzate e inserisci il seguente CSS nella casella precedente:

margin-left: 0 !important;

Ora l'icona del tuo pulsante verrà sostituita dall'icona al passaggio del mouse.

Creazione di pulsanti con icone perfettamente circolari che si ridimensionano con la dimensione del testo del pulsante

I design dei pulsanti circolari funzionano molto bene per i pulsanti a icona singola. E, se comprendi il funzionamento interno della spaziatura del modulo del pulsante, puoi creare pulsanti perfettamente circolari che si ridimensionano in base alla dimensione del testo del pulsante.

Il trucco è distanziare il pulsante usando l'unità di lunghezza "em". Questa unità di lunghezza è relativa alla dimensione del testo del pulsante. Quindi, se la dimensione del testo del pulsante è 30px, anche 1em è 30px (2em sarebbe 60px e così via...). Sapendo questo, dobbiamo solo assicurarci che la nostra imbottitura attorno al nostro pulsante sia la stessa su tutti e 4 i lati. Ma quello che potresti non aver considerato è che l'altezza della riga del testo del pulsante è 1,7 em per impostazione predefinita. Ciò significa che dobbiamo tenerne conto quando aggiungiamo i nostri valori di riempimento superiore e inferiore.

Per quelli di voi che vogliono conoscere la matematica dietro i valori di riempimento necessari per creare i pulsanti del cerchio, ecco:

Per il padding sinistro e destro, impostali entrambi su 1em. Ciò significa che la larghezza totale del nostro pulsante sarà di 90 px (o 3 em) perché...

30px di spaziatura interna sinistra + 30px di carattere icona + 30px di spaziatura interna destra = 90px in totale

L'altezza della riga del testo del pulsante è 1,7 em, che è l'equivalente del 170% della dimensione del testo del pulsante (30 px), che è pari a 51 px.

Per l'imbottitura superiore e inferiore, impostale entrambe su 0,65 em. 0,65em è l'equivalente del 65% della dimensione del testo del pulsante (30px) che equivale a 19,5px.

Perciò…

19,5 px di spaziatura superiore + 51 px di altezza della linea + 19,5 px di spaziatura inferiore = 90 px in totale

Ciò significa che quando il testo del pulsante è impostato su 30 px, la dimensione totale del pulsante sarà 90 px per 90 px (un quadrato perfetto). In effetti, puoi pensarla in questo modo. Qualunque cosa imposti come dimensione del testo del pulsante, la dimensione totale del pulsante sarà 3 volte quel valore. Quindi, un testo di un pulsante di 40 pixel creerà un pulsante di 120 pixel per 120 pixel e così via.

In questo momento, il pulsante ha le dimensioni giuste, ma è ancora quadrato. Tutto ciò che dobbiamo fare è aggiungere un raggio del bordo del 50% per trasformare il pulsante quadrato in un pulsante circolare perfetto.

Ecco cosa ti serve per cambiare il tuo pulsante in un pulsante circolare:

Raggio del bordo del pulsante: 50%
Imbottitura personalizzata: 0,65 em in alto, 0,65 em in basso, 1 em a destra, 1 em a sinistra

Non dimenticare che puoi regolare la dimensione del testo del pulsante e il pulsante rimarrà perfettamente circolare poiché l'imbottitura si adatta alle dimensioni del testo.

Aggiunta di pulsanti icona al layout Divi

Divi semplifica l'aggiunta e la personalizzazione dei pulsanti a icona singola per adattarli al design di qualsiasi layout predefinito.

Per questo esempio, ti mostrerò come aggiungere un singolo pulsante icona al layout della home page del Bed & Breakfast.

Per aggiungere il layout alla tua pagina, apri il menu delle impostazioni facendo clic sull'icona viola nella parte inferiore della pagina (assicurati che il visual builder sia abilitato). Quindi fare clic sull'icona Carica dalla libreria. Seleziona il layout della home page del Bed & Breakfast e fai clic sul pulsante "Usa questo layout" per distribuire il layout nella pagina.

Aggiunta di un pulsante icona a un'immagine

Supponiamo che tu voglia aggiungere un piccolo pulsante icona per sovrapporre l'angolo di un'immagine per un CTA aggiuntivo che si collega a un particolare prodotto o servizio. Tutto quello che devi fare è aggiungere un modulo pulsante sotto l'immagine e personalizzarlo per includere il carattere dell'icona e farlo sovrapporre all'immagine con una spaziatura personalizzata.

Trova la sezione "Chi siamo" sul layout della home page. Quindi aggiungi un modulo pulsante direttamente sotto una delle immagini utilizzate per caratterizzare la "Camera doppia" (è il primo nella prima colonna della riga di tre colonne).

Quindi apri le impostazioni del pulsante e inserisci una "P" maiuscola nella casella di testo del pulsante. Questo cambierà nella nostra icona una volta selezionato il carattere Elegant come carattere del pulsante.

Per iniziare subito ad abbinare il design del pulsante con il layout, salva le impostazioni del pulsante e trova il pulsante "Prenota ora" nella sezione superiore del layout. Apri le impostazioni dei pulsanti e copia gli stili dei pulsanti facendo clic con il pulsante destro del mouse su Opzioni pulsante Attiva/disattiva titolo e selezionando l'opzione "Copia stili pulsanti" dall'elenco.

Ora fai clic con il pulsante destro del mouse sul modulo pulsante che hai aggiunto sotto l'immagine e seleziona "Incolla stili pulsante".

Quindi aggiorna le impostazioni del pulsante come segue:

Carattere pulsante: carattere elegante
Larghezza bordo pulsante: 0px
Mostra icona pulsante: NO

Quindi aggiungiamo la nostra elegante imbottitura personalizzata per garantire che il pulsante sia un quadrato perfetto:

Imbottitura personalizzata: 0,65 em in alto, 0,65 em in basso, 1 em a sinistra, 1 em a destra

Per posizionare il pulsante in modo che si sovrapponga all'angolo inferiore destro dell'immagine, dovrai prima eliminare il margine inferiore del modulo immagine sopra. Apri le impostazioni del modulo immagine dell'immagine direttamente sopra il pulsante e imposta il margine inferiore su 0 px.

Ora abbiamo bisogno di tirare il pulsante sopra l'immagine usando un valore di margine negativo personalizzato uguale all'altezza del pulsante. Per fare ciò dobbiamo determinare l'altezza del nostro pulsante. Come accennato in precedenza in questo post, con l'imbottitura personalizzata in atto, possiamo conoscere la dimensione esatta del nostro pulsante in base alla dimensione del testo del pulsante corrente. Poiché la dimensione del testo del pulsante è 20 px, sappiamo che l'altezza del nostro pulsante è 3 em (3 volte la dimensione del testo del pulsante) che è 60 px. Pertanto, dobbiamo impostare un margine personalizzato per il nostro pulsante come segue:

Margine personalizzato: -60 px in alto

E poi possiamo posizionare il nostro pulsante a destra regolando l'allineamento del pulsante a destra.

Ora che abbiamo un design funzionante per la nostra immagine e il pulsante. Tutto quello che dobbiamo fare è aggiungere lo stesso pulsante a tutte le immagini nella sezione.

Poiché abbiamo eliminato il margine inferiore dell'immagine, possiamo facilmente applicare tale modifica a tutte le immagini nella sezione utilizzando Estendi stili. Fare clic con il tasto destro sull'immagine e selezionare "Estendi stili immagine".

Nel popup Estendi stili, seleziona "Questa sezione" per l'opzione Tutto e fai clic sul pulsante Estendi. Ora tutte le immagini hanno un margine inferiore di 0 px.

L'ultimo passaggio consiste semplicemente nel copiare e incollare i moduli Button sotto ciascuna delle immagini.

Ecco il disegno definitivo.

E poiché abbiamo utilizzato tecniche di spaziatura adeguate, il pulsante rimarrà in posizione anche sui dispositivi mobili...

Icone disponibili utilizzando il modulo pulsanti

Poiché il testo del pulsante del modulo pulsante è limitato ai caratteri disponibili sulla tastiera, dovrai esplorare quei tasti per trovare le icone disponibili associate a ciascun tasto. Un modo semplice per farlo è creare un modulo pulsante con il carattere del pulsante impostato su Elegant Font e digitare i caratteri nella casella di testo del pulsante.

Ecco lo screenshot dei personaggi con l'icona del carattere corrispondente:

Se ritieni che questo processo sia un limite, puoi sempre utilizzare un modulo di testo per creare collegamenti alle icone utilizzando gli unicodes elencati qui.

Pensieri finali

L'utilizzo dell'Elegant Icon Font con il modulo pulsante di Divi è un modo conveniente per creare pulsanti a icona singola per il tuo sito web. Questo apre alcune porte per essere creativi con le impostazioni del modulo per personalizzare il tuo pulsante con stili di testo unici, effetti al passaggio del mouse e altro ancora. Mi piacciono particolarmente quei valori di spaziatura dei pulsanti personalizzati che assicurano che i pulsanti assumano la forma di un quadrato o un cerchio perfetto.

Ci sono un sacco di usi per i pulsanti icona. Si spera che il caso d'uso di esempio che ho trattato aggiunga un po' di ispirazione per i tuoi progetti.

Per ulteriori idee, controlla come utilizzare il carattere dell'icona elegante o come incorporare un carattere dell'icona sul tuo sito web.

Mi piacerebbe qui alcune idee da te nei commenti qui sotto.

Saluti!