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 ...
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.
Trascina il carattere icona elegante
Per ottenere il gioco dei colori ElegantFontspuoi scaricare questo pacchetto di font tramite questo link. Estrailo contenuto dal file zip e trova i file dei caratteri delle icone eleganti accedendo a eleganti_font > HTML CSS > class. Quindi trascina il file "ElegantIcons.ttf" sul tuo computer e rilascialo nel visual builder.
Questo farà apparire il modale Scarica automaticamente font. Basta fare clic sul pulsante di download per scaricare il carattere su Divi Builder.
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".
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.
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.
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)
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-left: 0 !important; |
Ora l'icona del tuo pulsante verrà sostituita dall'icona al passaggio del mouse.
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
Ricorda, puoi regolare la dimensione del testo del pulsante e il pulsante rimarrà in un cerchio perfettamente come il riempimento delle dimensioni del testo.
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.
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.
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).
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.
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".
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
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.
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.
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".
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.
E poiché abbiamo utilizzato tecniche di spaziatura adeguate, il pulsante rimarrà anche in posizione sul cellulare ...
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:
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'uso di icone eleganti con il modulo pulsanti di Divi è un modo conveniente per creare pulsanti unici per il tuo sito web. Questo apre le porte 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 prendano la forma di un quadrato o di 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.
