Come creare effetti di passaggio del mouse sui social media unici con Divi

Il modulo Social Media Follow di Divi ti consente di modellare e aggiungere facilmente quei collegamenti importanti ai tuoi social network ovunque sul tuo sito web. E se vuoi sporcarti le mani con alcuni dei potenti effetti hover integrati di Divi, puoi progettare alcuni effetti hover creativi anche per i tuoi pulsanti follow sui social media.

In questo tutorial, ti mostrerò alcuni effetti al passaggio del mouse sui social media unici che potrebbero sorprenderti.

Controlla!

Sbirciata

Ecco un'anteprima degli effetti al passaggio del mouse che creeremo.

Parte 1: Spostare le ombre della casella per evidenziare i pulsanti Segui sui social media

Da bordi a punti

Punti ai bordi

Ombre rimbalzanti 1

Ombre rimbalzanti 2

Inizia a creare gli effetti al passaggio del mouse della parte 1

Parte 2: modifica di colore, dimensione e forma al passaggio del mouse

Modifica delle dimensioni e del colore

Modifica di dimensioni, colore e forma

Inizia a creare gli effetti al passaggio del mouse della parte 2

Parte 3: Effetti filtro

Inizia a costruire la parte 3 Effetto hover

Parte 4: icone grandi con effetti di fusione e filtro dello schermo

Inizia a costruire la parte 4 Effetto hover

Iniziare

Iscriviti al nostro canale Youtube

Per far funzionare le cose per questo tutorial, tutto ciò di cui hai veramente bisogno è il tema Divi installato e attivo. Quindi crea una nuova pagina e dai un titolo alla tua pagina. Quindi fare clic per utilizzare Divi Builder e selezionare l'opzione Usa un layout predefinito. Dal menu popup Carica dalla libreria, seleziona Pacchetto layout sviluppatore app. Quindi fare clic per utilizzare i pulsanti Segui per avviare il design dei nostri social media, utilizzeremo il layout della home page dello sviluppatore di app.

Pubblica la tua pagina e fai clic sul pulsante per costruire sul front-end.

Ora elimina tutte le sezioni della pagina ad eccezione della sezione contenente i pulsanti segui social media nella parte inferiore della pagina.

Questo servirà come modello iniziale per creare i nostri effetti al passaggio del mouse.

Salviamo la sezione nella Libreria Divi in ​​modo da poter aggiungere una nuova versione di questi social media seguendo i design dei pulsanti quando necessario.

Puoi anche duplicare la sezione più volte sulla tua pagina. Ciò ti consentirà di creare diversi effetti al passaggio del mouse a partire dalla sezione prefabbricata.

Ora sei pronto per iniziare a creare gli effetti al passaggio del mouse.

Iniziamo.

#1 Spostando le ombre della scatola per evidenziare i pulsanti Segui sui social media

Da bordi a punti

Per questo effetto al passaggio del mouse, aggiungeremo un'ombra di casella attorno al pulsante che si restringe e si libra sopra il pulsante al passaggio del mouse. Per fare ciò, apri il modulo follow sui social media e fai clic per aprire le impostazioni del social network facebook.

Quindi copia il colore di sfondo utilizzato per l'icona negli appunti (#3b5998). Questo colore verrà utilizzato per l'ombra della scatola.

Ora apri la scheda Design e aggiorna quanto segue:

Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0 px (predefinito), -46 px (al passaggio del mouse)
Forza sfocatura ombra scatola: 0px
Forza di diffusione dell'ombra del riquadro: 5 px (predefinito), -16 px (al passaggio del mouse)

Per il colore dell'ombra, incolla il colore di sfondo (# 3b5998) e riduci l'opacità del 50%. Questo ti darà una versione più chiara del colore di sfondo del pulsante.

Colore ombra: rgba (59,89,152,0,5)

Ora fai clic con il pulsante destro del mouse sulla categoria di stile Box Shadow e seleziona Copy Box Shadow Styles.

Salva le impostazioni per il social network Facebook, quindi fai clic con il pulsante destro del mouse su ciascuno dei social network e seleziona Incolla stili oggetto per ciascuno. Questo applicherà gli stessi stili di ombra della scatola al resto dei pulsanti.

Tuttavia, dovrai comunque aggiornare il colore dell'ombra della scatola che è specifico per ciascuno. Per farlo, ripeti la stessa procedura che abbiamo fatto per il social network Facebook. Apri le impostazioni specifiche del social network, copia il colore di sfondo utilizzato, incollalo come nuovo colore dell'ombra della casella e quindi riduci l'opacità del 50%.

Ecco i colori delle ombre della casella per ciascuno dei restanti social network:

Colore dell'ombra della casella Twitter: rgba (0,172,237,0,5)
Colore dell'ombra della scatola di Instagram: rgba (234,44,89,0,5)
Colore ombra scatola dribbling: rgba (234,76,141,0,5)
Colore dell'ombra della scatola di Youtube: rgba(168,36,0,0.5)

Una volta aggiornati i colori dell'ombra della scatola, controlla il risultato finale.

Punti ai bordi

Puoi facilmente invertire l'effetto al passaggio del mouse disattivando i valori predefiniti e al passaggio del mouse per la posizione verticale dell'ombra del riquadro e la forza di diffusione.

Duplica la sezione (se vuoi mantenere il design "dai bordi ai punti") e quindi apri i social media segui le impostazioni del modulo. Quindi apri le impostazioni per il social network Facebook e aggiorna quanto segue:

Posizione verticale dell'ombra del riquadro: -46px (predefinito), 0px (al passaggio del mouse)
Forza di diffusione dell'ombra del riquadro: -16px (predefinito), 5px (hover)

Dovrai aggiornare queste nuove impostazioni dell'ombra della casella per ciascuno dei restanti social network. Puoi farlo manualmente oppure puoi usare il tasto destro del mouse per copiare la posizione verticale dell'ombra del riquadro e diffondere la forza e quindi incollarli su ciascuna delle reti.

Una volta fatto, il tuo design finale sarà simile a questo.

Effetto ombre rimbalzanti

Per la prossima versione di questo design e dell'effetto al passaggio del mouse, l'ombra della casella (punto) di ciascuno dei pulsanti inizierà nella stessa posizione per impostazione predefinita. Questo creerà una sorta di effetto di rimbalzo.

Per iniziare, puoi duplicare il design "dai punti ai bordi" che abbiamo creato in precedenza. Apri le impostazioni del modulo Segui social media e quindi apri le impostazioni del social network Facebook. Aggiorna i seguenti stili di ombra della scatola:

Posizione orizzontale dell'ombra del riquadro: 140 px (predefinito), 0 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: -70 px (predefinito), 0 px (al passaggio del mouse)

Per il social network Twitter, aggiorna quanto segue:

Posizione orizzontale dell'ombra del riquadro: 70 px (predefinito), 0 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: -70 px (predefinito), 0 px (al passaggio del mouse)

Per il social network Instagram, aggiorna quanto segue:

Posizione orizzontale dell'ombra del riquadro: 70 px (predefinito), 0 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: -70 px (predefinito), 0 px (al passaggio del mouse)

Per il social network Dribble, aggiorna quanto segue:

Posizione orizzontale dell'ombra del riquadro: -70 px (predefinito), 0 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: -70 px (predefinito), 0 px (al passaggio del mouse)

Per il social network Youtube, aggiorna quanto segue:

Posizione orizzontale dell'ombra del riquadro: -140 px (predefinito), 0 px (al passaggio del mouse)
Posizione verticale dell'ombra del riquadro: -70 px (predefinito), 0 px (al passaggio del mouse)

Controlla il risultato finale.

Se non vuoi che il punto venga visualizzato inizialmente, puoi impostare il colore dell'ombra della casella predefinito su trasparente e quindi aggiungere un colore dell'ombra della casella al passaggio del mouse. Questo ti darebbe un design simile al seguente:

#2 Modifica di colore, dimensione e forma al passaggio del mouse

Per questa prossima serie di effetti al passaggio del mouse, ti mostrerò come modificare facilmente il colore, le dimensioni e/o la forma dei pulsanti dei social media al passaggio del mouse. Per iniziare, assicurati di utilizzare una nuova versione della sezione del pulsante Segui dei social media dal layout della home page dello sviluppatore di app. Se l'hai salvato nella tua libreria Divi, ora sarebbe un buon momento per aggiungerlo alla tua pagina.

Cambiare colore

Cambiare il colore di un pulsante di social media al passaggio del mouse è piuttosto semplice. Per questo esempio, iniziamo con un colore di sfondo grigio scuro per impostazione predefinita che si trasforma nel colore del social network.

Per fare ciò, apri il modulo Segui social media e quindi apri le impostazioni di Facebook Network. Aggiorna quanto segue:

Colore di sfondo: #333333 (predefinito), #3b5998 (al passaggio del mouse)

Quindi continua questo processo per aggiornare i restanti quattro colori di sfondo del social network come segue:

Colore di sfondo di Twitter: #333333 (predefinito), #00aced (al passaggio del mouse)
Colore di sfondo di Instagram: #333333 (predefinito), #ea2c59 (al passaggio del mouse)
Colore sfondo dribbling: #333333 (predefinito), #ea4c8d (hover)
Colore di sfondo di Youtube: #333333 (predefinito), a82400 (al passaggio del mouse)

Ecco il risultato.

Modifica delle dimensioni

Per modificare la dimensione del pulsante, possiamo aggiungere un'ombra di casella al passaggio del mouse. Ciò consente al pulsante di ingrandirsi senza aggiungere spazio effettivo al pulsante che spingerebbe via i pulsanti adiacenti al passaggio del mouse.

Per fare ciò, apri le impostazioni di rete di Facebook e aggiungi i seguenti stili di ombreggiatura della casella:

Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Forza sfocatura ombra scatola: 0px
Forza di diffusione dell'ombra del riquadro: 0 px (predefinito), 10 px (al passaggio del mouse)
Colore ombra: n. 3b5998 (dovrebbe essere lo stesso colore del colore di sfondo al passaggio del mouse del pulsante)

Per accelerare il processo di aggiunta dello stesso design dell'ombra della scatola al resto dei pulsanti del social network, fai clic con il pulsante destro del mouse sulla categoria dell'ombra della scatola della rete Facebook e fai clic su "Salva stili di ombra della scatola".

Salva le impostazioni, quindi fai clic con il pulsante destro del mouse su ciascuno dei social network e seleziona "Incolla stili oggetto".

Ora tutto ciò che resta da fare è aggiornare il colore dell'ombra della casella con il colore del social network corretto che corrisponda al colore di sfondo al passaggio del mouse.

Per fare questo aggiornare quanto segue:

Colore ombra Twitter Box: #00aced
Colore dell'ombra della scatola di Instagram: #ea2c59
Colore ombra scatola dribbling: #ea4c8d
Colore ombra Youtube Box: #a82400

Questo è il risultato finale.

Cambiare forma

Per cambiare la forma del pulsante al passaggio del mouse, tutto ciò che devi fare è regolare l'opzione "Angoli arrotondati". Questo modulo per seguire i social media ha attualmente gli angoli arrotondati impostati su 40 px che rendono i pulsanti circolari. Se vogliamo cambiarlo in quadrato, tutto ciò che devi fare è regolare gli angoli arrotondati su 0 px al passaggio del mouse.

Per fare ciò, apri le impostazioni di Facebook Network e aggiorna quanto segue:

Angoli arrotondati (hover): 4px su tutti e quattro gli angoli

Quindi copia gli stili del bordo e incollali su ogni rete rimanente.

Ecco il disegno definitivo.

#3 Effetti filtro

Per questo prossimo effetto al passaggio del mouse, ti mostrerò come utilizzare un paio di effetti filtro per modificare i colori dei pulsanti dei social media al passaggio del mouse. Per iniziare, assicurati di utilizzare una nuova versione della sezione del pulsante Segui dei social media dal layout della home page dello sviluppatore di app. Se l'hai salvato nella tua libreria Divi, ora sarebbe un buon momento per aggiungerlo alla tua pagina.

Effetti di saturazione e filtro invertito al passaggio del mouse

L'uso della saturazione e degli effetti del filtro invertito è un modo semplice e potente per cambiare lo stile dei pulsanti dei social media al passaggio del mouse. In questo esempio, ti mostrerò come combinare saturazione e inversione per creare pulsanti grigi con icone nere che tornano al colore originale al passaggio del mouse.

Per fare ciò, apri il social media segui le impostazioni del modulo, quindi apri ciascuna delle singole impostazioni del social network e aggiorna le seguenti opzioni di filtro:

Saturazione: 0% (predefinito), 100% (hover)
Inverti: 100% (predefinito), 0% (al passaggio del mouse)

Controlla il risultato.

#4 Grandi icone colorate con effetti filtro e sfumatura schermo

Per questo design finale del pulsante del mouse sui social media, inizieremo completamente da zero. Quindi crea una nuova sezione con una riga a una colonna e aggiungi un modulo follow sui social media alla riga.

Quindi apri le impostazioni di follow social media ed elimina il social network twitter predefinito lasciando solo la voce social network facebook.

Quindi aggiorna le impostazioni di follow dei social media come segue:

Colore di sfondo: #ffffff
Allineamento oggetto: centro
Modalità di fusione: schermo

Successivamente, apri le impostazioni della voce Social network di Facebook e aggiorna quanto segue:

Colore di sfondo: #000000
Margine personalizzato: 10px a sinistra, 10px a destra
Imbottitura personalizzata: 10px in alto, 10px in basso, 10px a sinistra, 10px a destra
Saturazione: 0% (predefinito), 100% (hover)
Inverti: 100% (predefinito), 0% (al passaggio del mouse)

Salva le impostazioni.

Quindi duplica l'elemento del social network di Facebook 4 volte in modo da avere un totale di 5 pulsanti del social network.

Ora apri ciascuno degli elementi del social network duplicati e aggiorna il social network e il colore di sfondo a # 000000.

Salva le impostazioni.

Ora, poiché abbiamo la modalità di fusione dello schermo attiva, possiamo aggiungere un colore di sfondo alla colonna della riga che contiene il nostro modulo di follow sui social media. Qualunque sia il colore di sfondo che utilizziamo determinerà il colore delle nostre icone dei social media e il colore di sfondo al passaggio del mouse.

Per fare ciò, apri le impostazioni della riga e aggiorna quanto segue:

Colore di sfondo della colonna 1: #0c71c3

Nota come i colori delle icone sono cambiati in questo colore di sfondo.

Ora controlla il risultato finora.

Per ingrandire le icone/i pulsanti, possiamo utilizzare uno snippet di Custom CSS. Per fare ciò, dobbiamo prima aggiungere un ID CSS al modulo follow sui social media e quindi aggiungere alcuni CSS alle impostazioni della nostra pagina.

Apri il modulo Segui social media e aggiungi il seguente ID CSS nella scheda Avanzate.

ID CSS: icone grandi

Quindi, apri le impostazioni della tua pagina e aggiungi il seguente CSS personalizzato.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Questo codice aumenta la dimensione delle icone a 50 px e l'altezza e la larghezza dei pulsanti a 100 px. La media query assicura che questo stile venga applicato solo al desktop.

Controlla il risultato finale.

Pensieri finali

Spero che questi effetti al passaggio del pulsante follow sui social media ti diano alcune nuove idee su come catturare i tuoi visitatori con alcuni design unici. La maggior parte di questi esempi è facile da creare, soprattutto se si ha familiarità con il funzionamento degli effetti al passaggio del mouse all'interno di Divi. Alla prossima volta, continua a padroneggiare le tue abilità Divi e crea qualcosa di bello per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!