Vai al contenuto principale

Come creare pulsanti con icone su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

I pulsanti con caratteri iconici hanno molti usi nel mondo del web design. Poiché i caratteri iconici rimangono nitidi nei colori e nel design mentre si adattano a dimensioni diverse, è una buona idea utilizzarli nei pulsanti. Inoltre, creare un pulsante con caratteri iconici su Divi è in realtà abbastanza facile utilizzando i caratteri della libreria " ElegantIcons". In questo tutorial, ti mostrerò come utilizzare i caratteri icona con il modulo pulsante Divi per creare un singolo pulsante icona.

Alcuni dei punti salienti di questo tutorial includono:

  • Come utilizzare ElegantIcons per aggiungere un'icona come testo pulsante
  • Come aggiungere imbottitura e raggio del bordo per far sembrare il pulsante un quadrato o un cerchio perfetto
  • Come sostituire l'icona del pulsante con un'icona diversa durante il passaggio del mouse
  • Come posizionare l'icona di un pulsante per sovrapporre un'immagine
  • e altro ancora ...

Panoramica

Ecco un'anteprima di ciò che sta arrivando ...

pulsanti di carattere icona

cambia la dimensione di un pulsante divi image.gif

pulsante dimostrativo divi lista delements.png

Di che cosa hai bisogno?

Per questo tutorial userò quanto segue:

  • Tema Divi (ovviamente)
  • Icone di carattere alla moda, un tutorial su Tema elegante è molto più preciso. Dopo aver scaricato il file zip dal post del blog, lo trascineremo nel file del carattere eleganticons.ttf da utilizzare come carattere personalizzato per il nostro modulo dei pulsanti.
  • La home page del Bed & Breakfast (disponibile gratuitamente da Divi Builder)

Cominciamo!

Aggiungi il carattere Elegante icone al tuo modulo pulsanti

Aggiungi un modulo pulsante

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

aggiungi un pulsante divi builder.jpg

Trascina il carattere icona elegante

Per ottenere il gioco dei colori ElegantFontspuoi scaricare questo pacchetto di font tramite questo link. Estrai il contenuto del file zip e trova i file dei caratteri dell'icona elegante navigando nella classe elegant_font> HTML CSS>. Quindi trascina il file "ElegantIcons.ttf" sul tuo computer e rilascialo nel visual builder.

estrai il file zip divi.jpg

Questo farà apparire il modale Scarica automaticamente font. Basta fare clic sul pulsante di download per scaricare il carattere su Divi Builder.

metti online divi.jpg

Ora avrai accesso all'elegante font dell'icona quando personalizzi un font mod nel visual builder.

Vai alle impostazioni del modulo dei pulsanti e aggiorna il carattere del pulsante con il nuovo carattere Elegant Icon appena scaricato. Apparirà nell'elenco delle icone sotto "Caratteri personalizzati".

pulsante font divi.jpg

Potresti notare che il testo del tuo pulsante si è trasformato in un mucchio di icone. Infatti, ogni carattere inserito nell'area di immissione del testo del pulsante ora ha un'icona corrispondente alla lettera / carattere attualmente utilizzato.

uso dell'icona button.jpg

Poiché abbiamo solo bisogno di un'icona 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.

icona pulsante divi 5.jpg

Scambia le icone dei pulsanti al passaggio del mouse

Come sai, il modulo dei pulsanti include l'opzione per aggiungere icone al passaggio del mouse. Possiamo usare questa funzione 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 dei pulsanti come segue:

Dimensione del testo del pulsante: 30px Icona del pulsante: vedi screenshot (questa sarà l'icona che sostituirà l'icona del carattere usato per il pulsante) Icona Colore pulsante: # 0c71c3 (che dovrebbe corrispondere al colore usato per il testo del pulsante ) Posizionamento dell'icona del pulsante: Colore del testo al passaggio del mouse del pulsante sinistro: rgba (255,255,255,0) (questo è completamente trasparente per nascondere il carattere dell'icona del pulsante al passaggio del mouse). Riempimento personalizzato: 1 ° a sinistra, 1 ° a destra (questo riempimento sostituirà l'espansione durante il passaggio del mouse)

pulsante di personalizzazione divi.jpg

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

margin-left0 !important;

aggiungi un pulsante margin diiv.png

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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

pulsante dimostrativo sostituito su hover.gif

Pulsanti icona creativi con cerchio in scala con la dimensione del testo del pulsante

I pulsanti a forma di cerchio funzionano alla grande per i pulsanti a icona singola. E, se comprendi il funzionamento interno della spaziatura dei moduli dei pulsanti, puoi creare pulsanti perfettamente circolari che si adattano alle dimensioni del testo del pulsante.

Il trucco è distanziare il pulsante usando l'unità di lunghezza "em". Questa unità di lunghezza è relativa alla dimensione del testo sul pulsante. Quindi, se la dimensione del testo del pulsante è 30px, 1em sarà anche 30px (2em sarà 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 di testo del pulsante è 1.7em 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 pulsanti circolari, ecco:

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

Imbottitura 30px sinistra + 30px per icona-carattere + imbottitura 30px destra = 90px totale

L'altezza della riga di testo del pulsante è 1.7em, che equivale al 170% della dimensione del testo del pulsante (30px) che è 51px.

Per il riempimento superiore e inferiore, impostare entrambi su 0,65 em. 0.65em è l'equivalente del 65% della dimensione del testo del pulsante (30px), che equivale a 19.5px.

Pertanto…

Imbottitura superiore 19.5px + altezza della linea 51px + imbottitura inferiore 19.5px = totale 90px

Ciò significa che quando il testo del pulsante è impostato su 30px, la dimensione totale del pulsante sarà 90px per 90px (un quadrato perfetto). In effetti, puoi pensarla in questo modo. Indipendentemente dalla dimensione del testo del pulsante, la dimensione totale del pulsante è 3 volte il valore. Quindi, il testo del pulsante 40px creerà un pulsante 120px per 120px, ecc.

Al momento, il pulsante ha le dimensioni corrette, ma è ancora quadrato. Tutto quello che dobbiamo fare è aggiungere un raggio del bordo del 50% per cambiare il pulsante quadrato in un pulsante circolare perfetto.

Ecco cosa è necessario per modificare il pulsante in un pulsante circolare:

Pulsante Raggio bordo: 50%
Tappezzeria personalizzata: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left

modificare un button.png

Ricorda, puoi regolare la dimensione del testo del pulsante e il pulsante rimarrà in un cerchio perfettamente come il riempimento delle dimensioni del testo.

personalizzare la dimensione del button.gif

Aggiunta di pulsanti su Divi

Divi semplifica l'aggiunta e la personalizzazione di pulsanti icona unici 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 generatore di immagini sia abilitato). Quindi fare clic sull'icona Carica dalla libreria. Selezionare il layout della home page del Bed & Breakfast e fare clic sul pulsante "Usa questo layout" per distribuire il layout nella pagina.

seleziona un layout divi.png

Aggiunta di un pulsante icona a un'immagine

Supponiamo di voler aggiungere un piccolo pulsante icona per sovrapporre l'angolo di un'immagine con un CTA aggiuntivo relativo 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 fare in modo che l'icona si sovrapponga all'immagine con una spaziatura personalizzata.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Cerca la sezione "Chi siamo" nella home page. Quindi aggiungere un modulo pulsante direttamente sotto una delle immagini utilizzate per presentare la "Camera doppia" (il primo nella prima colonna della riga di tre colonne).

pulsante divi.png

Quindi apri le impostazioni del pulsante e inserisci una "P" maiuscola nella casella di testo del pulsante. Questo cambierà nella nostra icona una volta selezionati i fantastici set di sfondi come il carattere del pulsante.

divi.png testo del pulsante

Per iniziare rapidamente ad abbinare il design del pulsante al layout, salva le impostazioni del pulsante e trova il pulsante "Prenota ora" nella parte superiore del layout. Apri Impostazioni pulsante e copia gli stili dei pulsanti facendo clic con il pulsante destro del mouse sull'interruttore Opzioni pulsante e selezionando l'opzione "Copia stili pulsante" dall'elenco.

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

incolla il modulo style.jpg

Quindi aggiornare le impostazioni del pulsante come segue:

Font Button: Awesome Font
pulsante font Larghezza bordo: 0 px
Mostra l'icona del pulsante: NO

Quindi aggiungi la nostra intelligente imbottitura personalizzata in modo che il pulsante sia un quadrato perfetto:

Imbottitura personalizzata: 0.65em Top, 0.65em Bottom, 1em Left, 1em Right

pulsanti di carattere icona

Per posizionare il pulsante in modo che copra l'angolo inferiore destro dell'immagine, è necessario prima rimuovere il margine inferiore dal modulo immagine sopra. Apri le impostazioni di Image Image Module direttamente sopra il pulsante e imposta il margine inferiore su 0px.

personalizzazione di button.png

Ora dobbiamo trascinare il pulsante sull'immagine utilizzando 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 articolo, con il riempimento personalizzato in atto, possiamo conoscere la dimensione esatta del nostro pulsante in base alla dimensione corrente del testo del pulsante. Poiché la dimensione del testo del pulsante è 20px, sappiamo che l'altezza del nostro pulsante è 3em (3 volte la dimensione del testo del pulsante), che è 60px. Pertanto, dobbiamo impostare un margine personalizzato per il nostro pulsante come segue:

Margine personalizzato: -60px Top

E quindi possiamo posizionare il nostro pulsante sulla destra regolando l'allineamento del pulsante sulla destra.

cambia l'allineamento di un pulsante divi.png

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

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

estendere l'immagine style.jpg

Nella finestra di dialogo Estendi stili, seleziona "Questa sezione" per l'opzione Across e fai clic sul pulsante Espandi. Ora tutte le immagini hanno un margine inferiore di 0px.

L'ultimo passo è semplicemente quello di copiare e incollare i moduli Button sotto ogni immagine.

Ecco il design finale.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

pulsante di progettazione finale divi.png

E poiché abbiamo utilizzato tecniche di spaziatura adeguate, il pulsante rimarrà anche in posizione sul cellulare ...

pulsante di anteprima su mobile.png

Icone disponibili utilizzando il modulo pulsanti

Poiché il testo del pulsante del modulo pulsante è limitato ai caratteri disponibili sulla tastiera, sarà necessario esplorare questi 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 un carattere elegante e digitare i caratteri nella casella di testo del pulsante.

Ecco uno screenshot dei personaggi con la loro icona del carattere corrispondente:

elenco delle icone disponibili divi.png

Se trovi questo elenco in qualche modo esaustivo, puoi sempre utilizzare un modulo di testo per creare collegamenti a icone utilizzando i codici Unic elencati. qui .

Considerazioni finali

L'utilizzo di icone eleganti con il modulo dei pulsanti di Divi è un modo conveniente per creare pulsanti unici per il tuo sito web. Questo apre la porta alla creatività 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 i 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 l'esempio di utilizzo trattato in questo tutorial aggiunga ispirazione ai propri progetti.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
7 azioni
quota4
Tweet
Enregistrer3