Vorresti sapere come utilizzare il modulo Icon di Divi creare icone personalizzate?
I pulsanti icona sono diventati un punto fermo nel mondo del web design. Le icone forniscono inviti all'azione visivi concisi che funzionano perfettamente per i dispositivi mobili perché non occupano molto spazio. Funzionano bene anche come pulsanti di commutazione o popup che gli utenti riconoscono intuitivamente senza bisogno di testo.
Nel tutorial di oggi ti mostreremo come progettare pulsanti icona con Divi. Crea un pulsante icona in Divi è abbastanza semplice e divertente da fare.
Utilizzando il modulo Icone, possiamo scegliere tra centinaia di icone e utilizzare innumerevoli opzioni di progettazione integrate Divi Builder per creare praticamente qualsiasi tipo di pulsante icona che ti viene in mente.
Ci auguriamo che questo articolo ti aiuti a iniziare a creare fantastici pulsanti icona per il tuo prossimo progetto.
Cominciamo!
Panoramica
Ecco una rapida panoramica dei pulsanti icona che creeremo in questo tutorial.
Crea una nuova pagina con Divi Builder
Guarda anche: Divi: Come personalizzare il carrello e le icone di ricerca del modulo "Menu a larghezza intera".
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Crea pulsanti icona con il modulo Divi Icons
Parte 1: creazione di un pulsante icona
Per iniziare, aggiungiamo una riga di una colonna alla sezione normale predefinita.
Quindi aggiungi un nuovo modulo Icona alla colonna.
Icona, URL del collegamento e colore di sfondo
Sotto la scheda Contenuti impostazioni del modulo icona, aggiorna quanto segue:
- Icona: Freccia destra (vedi screenshot)
- URL collegamento icona: # (solo un riempitivo per ora)
- Sfondo: #3e22ff
Confine e raggio di confine
Sotto la scheda Design, aggiorna quanto segue:
- Angoli arrotondati: 10px
- Larghezza bordo: 2px
- Colore bordo: #7272ss
Scatola delle ombre
- Box Shadow: vedi screenshot
- Colore ombra: rgba(62,34,255,0.48)
Corrispondenza dello spazio cliccabile con la dimensione del pulsante dell'icona
Attualmente, il modulo icona si estenderà per l'intera larghezza del contenitore (o colonna) padre. Ciò significa che lo spazio selezionabile è più grande del pulsante dell'icona effettivo.
Per far corrispondere lo spazio cliccabile con la dimensione del pulsante dell'icona, possiamo assegnare al modulo una larghezza massima che è la stessa della larghezza del pulsante dell'icona.
In questo esempio, la larghezza totale del pulsante è 94 pixel.
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'elemento principale:
max-width: 94px
Ecco il risultato.
Parte 2: crea un pulsante con un'icona quadrata
Per creare il nostro pulsante icona quadrato, duplica la riga contenente il primo pulsante icona che abbiamo appena creato. Questo ci darà un pulsante duplicato nella riga con cui lavorare.
Assegna all'icona la stessa altezza e larghezza mantenendola centrata
L'ampia raccolta di icone disponibili per l'uso nel modulo Icon include sia le icone Divi che le icone Fontawesome. Tuttavia, non tutte le icone avranno la stessa altezza e larghezza. Ciò rende un po' più difficile determinare la larghezza e l'altezza esatte del pulsante dell'icona.
Per creare un pulsante perfettamente quadrato che coinvolga l'icona al passaggio del mouse, possiamo aggiungere CSS personalizzati per impostare un'altezza e una larghezza per l'icona, nonché centrare l'icona utilizzando la proprietà CSS Flex.
Ecco come.
Innanzitutto, apri le impostazioni dell'icona duplicata. Quindi aggiorna l'icona con una nuova dal selettore di icone.
Rimuovere il riempimento dal modulo icona. Questo non sarà necessario poiché imposteremo un'altezza e una larghezza per l'icona.
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato a Elemento icona :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Ora il pulsante icona avrà altezza e larghezza pari a 90 pixel, rendendolo un quadrato perfetto. Inoltre, la proprietà flex allinea l'icona al centro del modulo. Ciò ti consente di aggiornare facilmente la dimensione dell'icona nel modulo icona.
Per completare questo pulsante, diamogli un gradiente di sfondo e un colore del bordo bianco come segue:
- Gradiente si ferma:
- 0%: #3e22ss
- 100%: #ff2000
- Colore bordo: #fff
Ecco il risultato finale.
Crea pulsante icona circolare
Una volta che il pulsante dell'icona è un quadrato perfetto, renderlo circolare è semplice. Ma prima di mostrarti questo semplice trucco, duplichiamo la riga precedente per iniziare a costruire il nostro pulsante icona circolare.
Ora apri le impostazioni per la nostra nuova icona duplicata e sotto la scheda Design, aggiorna il raggio del bordo (o gli angoli arrotondati) come segue:
- Angoli arrotondati: 50%
E proprio così, abbiamo un pulsante icona circolare!
Per modificare un po' il design, diamo al modulo icona un'icona e un colore di sfondo diversi come segue:
- Icona: vedi screenshot
- Sfondo: #121212
Ecco il risultato.
Crea un menu orizzontale con un pulsante icona
Una tendenza popolare consiste nell'utilizzare le icone per creare un menu di icone che di solito consiste in diversi pulsanti affiancati. Per fare ciò, possiamo utilizzare la proprietà flex.
Ecco come farlo.
Innanzitutto, aggiungi una nuova riga a una colonna della pagina.
Apri le impostazioni della linea e aggiorna la larghezza della grondaia a 1.
- Larghezza grondaia: 1
Quindi, apri le impostazioni della colonna all'interno della riga e aggiungi il seguente CSS personalizzato all'elemento della colonna principale:
display:flex;
align-items:center;
Aggiungi un nuovo modulo Icona alla colonna.
Sotto la scheda Contenuti impostazioni dell'icona, selezionare un'icona e aggiungere l'URL del collegamento dell'icona.
Sotto la scheda Design, aggiorna quanto segue:
- Colore icona: #3e22ff
- Dimensione icona: 40px
- Margine (sinistra e destra): 10px
- Larghezza bordo: 2px
- Colore bordo: #3e22ff
NOTA : Il margine creerà spazio tra i pulsanti adiacenti una volta che ne aggiungeremo altri in seguito.
Sotto la scheda Tecnologia, aggiungi il seguente CSS personalizzato nel campo Elemento icona (come abbiamo fatto in precedenza per il pulsante icona quadrata):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Ora ogni volta che aggiungiamo nuovi pulsanti icona, appariranno fianco a fianco. Per illustrare ciò, duplichiamo tre volte il pulsante icona esistente per creare un totale di quattro pulsanti icona nel menu orizzontale.
Successivamente, possiamo tornare indietro e aggiornare le icone secondo necessità.
Ecco il risultato.
Aggiunti effetti al passaggio del mouse al pulsante icona
È difficile parlare del design dei pulsanti delle icone senza menzionare gli effetti al passaggio del mouse. Sono semplicemente troppo divertenti per essere ignorati.
Modifica del colore dello sfondo e del colore dell'icona al passaggio del mouse
La modifica dei colori dei pulsanti è un effetto al passaggio del mouse popolare ed efficace. Ad esempio, possiamo cambiare il colore di sfondo e il colore dell'icona contemporaneamente quando l'utente passa il mouse sopra il pulsante.
Per fare ciò, apri le impostazioni del modulo icona e abilita le opzioni al passaggio del mouse per il colore di sfondo e scegli un colore diverso per lo stato al passaggio del mouse. Quindi puoi fare lo stesso per l'icona.
In questo esempio, cambiamo il colore di sfondo da bianco a blu e l'icona da blu a bianco.
Cambia icona al passaggio del mouse
Un altro effetto al passaggio del mouse che potrebbe piacerti è quello di cambiare completamente l'icona. Per fare ciò, puoi scegliere un'icona diversa per lo stato al passaggio del mouse quando scegli un'icona nelle impostazioni dell'icona.
Scala del pulsante icona al passaggio del mouse
Un effetto al passaggio del mouse difficile da ignorare è l'effetto di ridimensionamento al passaggio del mouse. Questo ingrandisce o ingrandisce il pulsante dell'icona. Il modo migliore per aggiungere questo tipo di effetto al passaggio del mouse è utilizzare le opzioni di trasformazione di Divi. Ciò consentirà al pulsante di crescere senza influenzare gli elementi che lo circondano.
Per aggiungere un effetto di scala al passaggio del mouse sul pulsante dell'icona, apri le impostazioni dell'icona e nella scheda di Design, cerca le opzioni di trasformazione. Abilita le opzioni al passaggio del mouse, quindi assegna la seguente scala di trasformazione allo stato al passaggio del mouse:
- Trasforma Y: 118%
- Trasforma X: 118%
Ciò aumenterà la dimensione del pulsante dell'icona del 18% quando l'utente passa sopra di esso.
Pulsante icona Ruota al passaggio del mouse
La rotazione degli oggetti in bilico è sempre una micro-interazione divertente. Per ruotare un pulsante icona al passaggio del mouse, possiamo utilizzare l'opzione di rotazione della trasformazione. Ma prima, rendiamo circolare il pulsante in modo che solo l'icona sembri ruotare.
Per rendere l'icona circolare, supponendo che il pulsante sia un quadrato, aggiorna semplicemente l'impostazione degli angoli arrotondati al 50% su tutti e quattro gli angoli.
Quindi aggiorna le opzioni di trasformazione per includere il seguente valore di rotazione della trasformazione nello stato al passaggio del mouse:
- Trasforma Ruota Z: 180 gradi
Diamo un'occhiata ai nostri 4 effetti al passaggio del mouse in azione.
Risultato finale
Diamo un'occhiata ai risultati finali del nostro tutorial.
Leggi anche: Divi: come evidenziare un modulo "Sfocatura" al passaggio del mouse e sfocare gli altri
Ecco i nostri tre pulsanti icona (standard, quadrato e circolare).
Ed ecco il menu del pulsante icona orizzontale con effetti al passaggio del mouse.
Scarica DIVI ora!!!
Conclusione
Sapere come progettare pulsanti icona per a sito web è essenziale. E, come abbiamo visto in questo tutorial, non è così difficile con Divi. Il modulo icona di Divi ha un sacco di opzioni integrate che aprono la porta a design di pulsanti icona creativi.
Si spera che le tecniche in questo articolo ti aiutino a sbloccare parte della magia dei tuoi pulsanti icona.
Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
