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 per i membri del team che metta i tuoi dipendenti sotto i riflettori. In aggiunta a ciò, puoi aggiungere un effetto al passaggio del mouse bio alle foto dei membri del team utilizzando le opzioni integrate di Divi soltanto.

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

Mobile

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

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.

Aggiungi un modulo di testo

Aggiungi contenuto H2

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

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

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ì

Colore del separatore

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

• Colore del separatore: # 333333

dimensionamento

Quindi ridurremo le dimensioni del divisore e lo centreremo.

• Larghezza: 26%
• Allineamento del modulo: centro

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.

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ì

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

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)

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.

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%

Aggiungi il modulo Blurb alla colonna 1

Aggiungi contenuto

Continua aggiungendo una nuova mod Blurb appena sotto la mod dell'immagine nella colonna 1. Aggiungi il nome del membro del team al campo del titolo e inserisci ulteriori informazioni sul membro del team nell'area dei contenuti.

Scegli un'icona

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

Colore di sfondo predefinito

Successivamente, sceglieremo un colore di sfondo completamente trasparente.

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

Colore di sfondo sul cavalcavia

E cambieremo questo colore in bilico.

• 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. 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

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)

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

Passa il mouse sopra le impostazioni di testo del titolo

Cambia la dimensione del testo passando il mouse.

• Dimensioni del titolo del testo: 30px

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

Parametro del corpo in sorvolo

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

• 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 usando un margine superiore negativo.

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

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

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.

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!

Panoramica

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

ufficio

Mobile

Considerazioni finali

In questo articolo, ti abbiamo mostrato come creare un effetto di passaggio del mouse bio per le foto dei membri del team utilizzando le opzioni integrate di Divi in modo univoco. Abbiamo evidenziato quanto sia importante creare buone pagine, in quanto 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!