Non è un segreto che le pagine "Chi siamo" siano molto brave a indirizzare clic sul tuo sito web. È anche questo tipo di pagina che enfatizzerà la parte umana del business dietro il sito web. Sapendo questo, ci rendiamo conto che è importante prestare attenzione a come strutturiamo le pagine, che tipo di informazioni condividiamo e come creiamo le interazioni.

Una delle cose che puoi fare per migliorare l'esperienza della pagina è fornire una sezione dei membri del team che metta i tuoi dipendenti sotto i riflettori. Inoltre, puoi aggiungere un effetto hover biologico 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 il tuo 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.

Andiamo!

Panoramica

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

ufficio

divi-bio-hover-effetto-desktop-gif.gif

Mobile

divi-bio-hover-effetto-mobile-gif.gif

Iniziamo a ricreare

Aggiungi una nuova sezione

spaziatura

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

  • Migliore imbottitura: 100px
  • Imbottitura inferiore: 100px

effetto bio-hover

Aggiungi riga 1

Struttura a colonne

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

effetto bio-hover

Aggiungi un modulo di testo

Aggiungi contenuto H2

Aggiungi un titolo del modulo di testo alla colonna con una dimensione H2 a scelta.

effetto bio-hover

Impostazioni di testo H2

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

  • Intestazione carattere 2: Cinzel
  • Stile del titolo del font 2: maiuscoletto
  • Titolo 2 Allineamento del testo: centro
  • Titolo 2 Dimensioni testo: 70px

effetto bio-hover

Aggiungi un modulo di divisione

visibilità

Continua ad aggiungere un nuovo modulo di separazione appena sotto il titolo del modulo di testo.

  • Mostra divisore: sì

effetto bio-hover

Colore del separatore

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

  • Colore del separatore: # 333333

effetto bio-hover

dimensionamento

Quindi ridurremo le dimensioni del divisore e lo centreremo.

  • Larghezza: 26%
  • Allineamento del modulo: centro

effetto bio-hover

Aggiungi la linea 2

Struttura a colonne

Appena sotto la riga precedente che hai aggiunto, continua e aggiungi una nuova riga usando tre colonne di uguale dimensione.

effetto bio-hover

dimensionamento

Senza aggiungere altri moduli, apri i parametri di linea e apporta alcune modifiche ai parametri di dimensionamento.

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

effetto bio-hover

spaziatura

Quindi vai alle impostazioni di spaziatura e aggiungi i valori di margine e riempimento personalizzati.

  • Margine superiore: 50px
  • Margine inferiore: 50px
  • Riempimento superiore: 10px
  • Imbottitura inferiore: 10px
  • Riempimento a sinistra: 5px
  • Tappezzeria a destra: 5px
  • Colonna 1, 2 e 3 Imbottitura a sinistra: 5px
  • Colonna 1, 2 e 3 imbottitura a destra: 5px

effetto bio-hover

Scatola delle ombre

Diamo anche un po 'di profondità alla nostra linea aggiungendo un'ombra a forma di scatola con i seguenti parametri:

  • Box Shadow Blur Force: 80px
  • Forza di propagazione dell'ombra del riquadro: -14px
  • Colore dell'ombra: rgba (0,0,0,0,3)

effetto bio-hover

Aggiungi un modulo immagine alla colonna 1

Carica un'immagine in un modulo immagine

È ora di iniziare ad aggiungere moduli! Per ottenere l'effetto hover biologico, 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 desideri presentare.

La mod Blurb, nel frattempo, verrà utilizzata 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.

effetto bio-hover

filtri

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

  • Saturazione: 0%

effetto bio-hover

Aggiungi il modulo Blurb alla colonna 1

Aggiungi contenuto

Continua aggiungendo un nuovo modulo Blurb appena sotto il modulo immagine nella colonna 1. Aggiungi il nome del membro del team al campo del titolo e inserisci ulteriori informazioni sul membro del team nella casella. contenuto.

effetto bio-hover

Scegli un'icona

La prossima cosa che faremo è scegliere un'icona di scelta che verrà mostrata Visitatori che c'è più di una semplice foto.

effetto bio-hover

Colore di sfondo predefinito

Successivamente, sceglieremo un colore di sfondo completamente trasparente.

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

effetto bio-hover

Colore di sfondo sul cavalcavia

E cambieremo questo colore in bilico.

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

effetto bio-hover

Impostazioni predefinite dell'icona

Vogliamo un'icona visibile che aiuti Visitatori per capire che possono sorvolarlo. Modificare le impostazioni dell'icona per ottenere tale icona.

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

effetto bio-hover

Impostazione dell'icona al passaggio del mouse

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

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

effetto bio-hover

Impostazioni predefinite del titolo

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

  • Titolo Polizia: Cinzel
  • Carattere del titolo: grassetto
  • Stile del carattere del titolo: maiuscoletto
  • Titolo del testo a colori: # 000000
  • Dimensioni del titolo del testo: 0px

effetto bio-hover

Passa il mouse sopra le impostazioni di testo del titolo

Cambia la dimensione del testo passando il mouse.

  • Dimensioni del titolo del testo: 30px

effetto bio-hover

Impostazioni di testo del corpo predefinite

Modifica anche le impostazioni del testo del corpo.

  • Body Police: Open Sans
  • Testo colorato a corpo: # 000000
  • Dimensione del testo del corpo: 0px
  • Altezza del corpo: 1.8em

effetto bio-hover

Parametro del corpo in sorvolo

E, di nuovo, cambia la dimensione del corpo del testo in bilico.

  • Dimensione del testo del corpo: 14px

effetto bio-hover

Spaziatura predefinita

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

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

effetto bio-hover

Spaziatura stazionaria

Modifica il margine personalizzato e inserisci i valori nel rollover.

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

effetto bio-hover

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

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

effetto bio-hover

Modifica l'immagine e il contenuto del modulo Blurb

Non dimenticare di cambiare l'immagine nel modulo Immagine e copiarla nel modulo Blurb per completare la sezione dei membri del team!

effetto bio-hover

Panoramica

Ora che abbiamo completato tutti i passaggi, diamo un'ultima occhiata a come abbiamo esaminato le diverse dimensioni dello schermo.

ufficio

effetto bio-hover

Mobile

effetto bio-hover

Considerazioni finali

In questo articolo, ti abbiamo mostrato come creare un effetto al passaggio del mouse biologico per le foto dei membri del team utilizzando solo le opzioni integrate di Divi. Abbiamo sottolineato quanto sia importante creare buone pagine perché sono uno dei siti web più visitati.

L'utilizzo di effetti al passaggio del mouse per le foto dei membri del team non solo migliorerà la qualità della tua pagina, ma creerà anche l'interazione con i tuoi visitatori. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!