Come aggiungere un effetto hover al bios dei membri del team in Divi

Non è un segreto che le pagine siano fantastiche per creare click-through sul tuo sito web. È anche quel tipo di pagina che enfatizzerà la parte umana dell'azienda dietro il sito web. Sapere questo ci rende consapevoli che è importante prestare attenzione al modo in cui strutturiamo le pagine, al tipo di informazioni che condividiamo e al modo in cui creiamo interazioni. Una delle cose che puoi fare per migliorare l'esperienza della pagina Informazioni è fornire una sezione dei membri del team che metta i tuoi dipendenti sotto i riflettori. Inoltre, puoi aggiungere un effetto bio hover alle foto dei membri del team utilizzando solo le opzioni integrate di Divi. Ciò ti consentirà di risparmiare spazio sulla pagina su cui stai lavorando e di creare un'interazione al passaggio del mouse tra te e i tuoi visitatori.

In questo tutorial, ti mostreremo passo dopo passo come arrivarci. Una volta ottenuto l'approccio, sarai in grado di personalizzare lo stile di design in base alle tue esigenze.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Iniziamo a ricreare

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Spaziatura

Crea una nuova pagina o aprine una esistente e aggiungi una nuova sezione utilizzando i seguenti valori di riempimento personalizzati:

• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px

Aggiungi riga n. 1

Struttura della colonna

Dopo aver aggiunto il riempimento personalizzato alla tua sezione, puoi chiudere le impostazioni della sezione e aggiungere una nuova riga utilizzando una sola colonna.

Modulo Aggiungi testo

Aggiungi contenuto H2

Aggiungi un titolo Modulo di testo alla colonna con una copia H2 a scelta.

Impostazioni testo H2

Quindi, vai alle impostazioni del testo H2 e apporta alcune modifiche all'aspetto della copia.

• Intestazione 2 Carattere: Cinzel
• Stile carattere titolo 2: maiuscoletto
• Intestazione 2 Allineamento del testo: Centro
• Intestazione 2 Dimensioni del testo: 70 px

Aggiungi modulo divisore

Visibilità

Continua aggiungendo un nuovo modulo divisore proprio sotto il titolo Modulo testo.

• Mostra divisore: Sì

Colore divisore

Vai alla scheda design, apri le impostazioni del colore e cambia il colore del tuo divisore di conseguenza:

• Colore divisore: #333333

Dimensionamento

Successivamente, ridurremo le dimensioni del divisore e lo centrate.

• Larghezza: 26%
• Allineamento del modulo: Centro

Aggiungi riga #2

Struttura della colonna

Proprio sotto la riga precedente che hai aggiunto, vai avanti e aggiungi una nuova riga usando tre colonne di uguali dimensioni.

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e apporta alcune modifiche alle impostazioni di dimensionamento.

• Usa larghezza personalizzata: Sì
• Unità: PX
• Larghezza personalizzata: 2000 px
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi margini personalizzati e valori di riempimento.

• Margine superiore: 50 px
• Margine inferiore: 50 px
• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px
• Imbottitura sinistra: 5px
• Imbottitura destra: 5px
• Imbottitura sinistra colonne 1, 2 e 3: 5px
• Colonna 1, 2 e 3 Imbottitura destra: 5px

Scatola ombra

Diamo anche un po' di profondità alla nostra riga aggiungendo un'ombra di riquadro con le seguenti impostazioni:

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -14px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi modulo immagine alla colonna 1

Carica immagine su modulo immagine

È ora di iniziare ad aggiungere moduli! Per ottenere l'effetto bio hover, avremo bisogno di due moduli in totale; un Modulo Immagine e un Modulo Blurb. Il modulo immagine conterrà l'immagine del membro del team che vuoi mostrare. Il modulo Blurb, d'altra parte, verrà utilizzato per aggiungere l'icona nell'angolo in basso a sinistra e la biografia al passaggio del mouse. Aggiungi un modulo immagine alla prima colonna utilizzando un'immagine di dimensioni quadrate.

Filtri

Il design che stiamo creando è interamente in scala di grigi. Per aggiungere questa scala di grigi alla nostra immagine, vai alle impostazioni dei filtri e rimuovi tutta la saturazione.

• Saturazione: 0%

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

Continua aggiungendo un nuovo Modulo Blurb proprio sotto il Modulo Immagine nella colonna 1. Aggiungi il nome del membro del team al campo del titolo e inserisci qualche informazione in più sul membro del team nella casella del contenuto.

Scegli icona

La prossima cosa che faremo è scegliere un'icona di scelta che mostrerà ai visitatori che c'è molto di più di una semplice immagine.

Colore di sfondo predefinito

Quindi, sceglieremo un intero colore di sfondo trasparente.

• Colore di sfondo: rgba (255,255,255,0)

Colore di sfondo al passaggio del mouse

E cambieremo quel colore al passaggio del mouse.

• Colore di sfondo: rgba (255,255,255,0.88)

Impostazioni predefinite dell'icona

Vogliamo un'icona visibile che aiuti i visitatori a capire che possono passarci sopra. Modifica le impostazioni dell'icona per ottenere un'icona del genere.

• Colore icona: #ffffff
• Icona del cerchio: Sì
• Colore del cerchio: #000000
• Posizionamento dell'icona: a sinistra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 50 px

Impostazioni dell'icona al passaggio del mouse

Tuttavia, non vogliamo che l'icona appaia al passaggio del mouse. Ecco perché useremo invece un colore completamente trasparente.

• Colore icona: rgba (255,255,255,0)
• Colore del cerchio: rgba (255,255,255,0)

Impostazioni predefinite del testo del titolo

Quindi, vai alle impostazioni del testo del titolo e apporta alcune modifiche.

• Carattere del titolo: Cinzel
• Peso del carattere del titolo: grassetto
• Stile carattere del titolo: Maiuscoletto
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 0px

Passa il mouse sulle impostazioni del testo del titolo

Modifica la dimensione del testo al passaggio del mouse.

• Dimensione del testo del titolo: 30px

Impostazioni predefinite del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Colore del corpo del testo: #000000
• Dimensione del testo del corpo: 0px
• Altezza della linea del corpo: 1,8 em

Impostazioni del testo del corpo al passaggio del mouse

E, ancora, cambia la dimensione del testo del corpo al passaggio del mouse.

• Dimensione del testo del corpo: 14px

Spaziatura predefinita

Ultimo ma non meno importante, dovremo creare una sovrapposizione tra il modulo Blurb e il modulo immagine utilizzando il margine superiore negativo.

• Margine superiore: -3.7vw (desktop), -9vw (tablet e telefono)
• Margine inferiore: 1.5vw (tablet), 2vw (telefono)

Spaziatura al passaggio del mouse

Modifica il margine personalizzato e i valori di riempimento al passaggio del mouse.

• Margine superiore: -11,38 vw
• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura destra: 50px

Clona entrambi i moduli due volte e posiziona i duplicati nelle colonne rimanenti

Abbiamo finito di creare il nostro primo effetto bio hover. Per risparmiare tempo, possiamo semplicemente clonare due volte entrambi i moduli nella colonna 1 e posizionare i duplicati nelle due colonne rimanenti.

Cambia immagine e contenuto del modulo Blurb

Ricorda di cambiare l'immagine nel modulo Immagine e la copia nel modulo Blurb per completare la sezione dei membri del team!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un effetto bio hover al passaggio del mouse per le foto dei membri del team utilizzando solo le opzioni integrate di Divi. Abbiamo accennato a quanto sia importante creare buone pagine, in quanto sono una delle pagine più visitate dei siti web. L'utilizzo di effetti di passaggio del mouse bio per le foto dei membri del team non solo ti consentirà di portare la tua pagina di informazioni al livello successivo, ma anche di creare un'interazione con i tuoi visitatori. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!