Ti piacerebbe visualizzare le icone dei social media al passaggio del mouse sopra le foto in Divi ?
Quando crei la tua pagina Informazioni, potresti considerare di aggiungere i vari membri del team della tua azienda a una vetrina.
Quando inizi questo processo di progettazione, noterai che tre cose non possono mancare dall'inizio: un'immagine, un nome e una posizione. Ma se vuoi mostrare ancora di più i membri del tuo team, puoi anche considerare di aggiungere i loro collegamenti ai social media al design.
Naturalmente, puoi andare alla vecchia maniera e aggiungere un modulo "Seguici sui social media" sotto il nome e la posizione della persona. Tuttavia, puoi anche scegliere di aggiungere un po' di interazione mostrando queste icone non appena qualcuno passa sopra una delle immagini della persona.
Nel tutorial di oggi, ti mostreremo esattamente come farlo usando Divi.
Andiamo.
Panoramica
Prima di immergerti nel tutorial, diamo una rapida occhiata al risultato su diverse dimensioni dello schermo.
Risultato sul portatile
Risultato su cellulare
Iniziamo la realizzazione con Divi!
Aggiungi la sezione # 1
Colore di sfondo
Aggiungi una nuova sezione alla pagina su cui stai lavorando.
Apri le impostazioni della sezione e cambia il colore di sfondo.
- Sfondo: #0f0f0f
spaziatura
Passa alla scheda Design opzione a discesa Spaziatura e quindi modificare le impostazioni di spaziatura.
- Imbottitura (superiore e inferiore): 100px
Aggiungi una nuova linea
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Aggiungi il modulo "Testo" n. 1 alla colonna
Aggiungi un titolo di dimensione H1
Aggiungi un primo modulo "Testo" alla colonna riga
Inserisci contenuto taglia H1 (Intestazione 1) a tua scelta.
Impostazioni di testo H1
Passa alla scheda Design, tirare verso il basso l'opzione Intestazione del testo e modificare di conseguenza le impostazioni del testo H1:
- Carattere dell'intestazione: Alata
- Colore testo intestazione: #ffffff
- Dimensione del testo:
- Desktop: 50px
- Tablet: 45px
- Telefono: 35px
- Altezza della linea di intestazione: 1,2 em
Aggiungi un modulo "Divisore" alla colonna
visibilità
Successivamente, aggiungeremo un modulo "Divisore". Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: SÌ
Linea
Passa alla scheda Design, tirare verso il basso l'opzione linea e cambia il colore della linea.
- Colore linea: #ffffff
dimensionamento
Opzione a discesa dimensionamento e modificare anche le impostazioni di dimensionamento.
- Peso del divisore: 2px
- Larghezza massima: 100 px
- Altezza: 2px
Aggiungi il modulo "Testo" n. 2 alla colonna
Aggiungi contenuto descrittivo
Il modulo successivo e finale di cui abbiamo bisogno in questa riga è un altro modulo "Testo" con a contenuto descrizione a tua scelta.
Impostazioni del testo
Passa alla scheda Design, tirare verso il basso l'opzione Testo e modificare le impostazioni del testo come segue:
- Carattere del testo: Alata
- Colore del testo: #7c7c7c
- Dimensioni: 17px
- Altezza della linea di testo: 1,9 em
spaziatura
Rimuovi anche il margine inferiore predefinito.
- Margine (inferiore): 0px
Aggiungi la sezione # 2
Sfondo sfumato
Aggiungi un'altra sezione appena sotto la precedente e usa uno sfondo sfumato per questa.
- Colore sinistro: #0f0f0f
- Colore giusto: #000000
- Posizione sinistra: 10%
- Posizione giusta: 90%
spaziatura
Passa alla scheda Design, tirare verso il basso l'opzione Spaziatura e quindi modificare le impostazioni di spaziatura.
- Imbottitura (superiore): 0px
- Imbottitura (inferiore): 200px
Aggiungi una nuova linea
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
dimensionamento
Aprire le impostazioni della linea e modificare le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 2px
Aggiungi il modulo "Segui social media" alla colonna 1
Aggiungi i social network di tua scelta
Il primo modulo di cui abbiamo bisogno nella nostra riga è il modulo "Social Media Follow" nella colonna 1. Aggiungi i social network di tua scelta.
Rimuovi il colore da ogni social network individualmente
Apri ogni social network individualmente
Rimuovi il colore di sfondo.
Aggiungi un collegamento a ciascun social network individualmente
Aggiungi anche un link corrispondente a ciascun social network.
Colore di sfondo predefinito
Quindi, torna alle impostazioni generali del modulo e applica il seguente colore di sfondo:
- Sfondo: rgba(0,0,0,0)
Colore di sfondo al passaggio del mouse
Cambia il colore di sfondo al passaggio del mouse.
- Sfondo (al passaggio del mouse): #494949
Immagine di sfondo
Quindi, carica un'immagine di sfondo.
- Dimensione immagine di sfondo: copertina
- Miscela di immagini di sfondo: Moltiplica
allineamento
Passa alla scheda Design e modificare l'allineamento.
- Modulo di allineamento: centro
icona
Cambia anche il colore dell'icona.
- Colore icona: rgba(0,0,0,0)
spaziatura
Quindi vai alle impostazioni di spaziatura (Spaziatura) e applicare i seguenti valori:
- Margine (inferiore): 0px
- Imbottitura (parte superiore):
- Desktop: 250px
- Tablet: 450px
- Telefono: 200px
- Imbottitura (inferiore): 20px
confine
Stiamo anche cambiando le impostazioni del confine.
- Angoli arrotondati: 100px
- Larghezza bordo: 2px
- Colore bordo: rgba(255,255,255,0)
Confine in bilico
Usa un altro colore del bordo al passaggio del mouse.
- Colore bordo (al passaggio del mouse): #ffffff
Classe CSS
Quindi vai alla scheda Tecnologia e applica una classe CSS personalizzata.
- Classe CSS: team-social
CSS personalizzato (prima)
E completa le impostazioni del modulo abilitando l'impostazione al passaggio del mouse sull'elemento "Prima" e copiando e incollando le seguenti righe di codice CSS:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Aggiungi un modulo "Persona" alla colonna 1
Aggiungi contenuto descrittivo
Il modulo successivo e finale di cui abbiamo bisogno nella colonna 1 è un modulo "Persona". Aggiungi un po contenuto descrizione a tua scelta.
Impostazioni del testo
Passa alla scheda Design e modificare le impostazioni del testo come segue:
- Allineamento del testo: centro
- Colore del testo: chiaro
Impostazioni del testo del titolo
Quindi personalizza il testo del titolo.
- Carattere del titolo: Alata
- Titolo Testo Dimensione del titolo:
- Desktop: 27px
- Tablet: 25px
- Telefono: 22px
Impostazioni del testo della descrizione del lavoro
Quindi modifica le impostazioni del testo della descrizione del lavoro.
- Carattere di posizione: Alata
- Posizione Dimensione testo:
- Desktop: 17px
- Tablet e telefono: 15px
spaziatura
Modificare le impostazioni di spaziatura come segue:
- Imbottitura (superiore e inferiore): 40px
confine
E completa le impostazioni del modulo applicando le seguenti impostazioni del bordo:
- Larghezza bordo: 1px
- Colore bordo: #ffffff
Rimuovi le colonne rimanenti dalla riga
Dopo aver completato i moduli Colonna 1, puoi rimuovere le restanti due colonne dalla riga.
Clona due volte la colonna
Riutilizza la colonna 1 clonandola due volte.
Clona l'intera riga
Quindi clona l'intera riga tutte le volte che è necessario.
Modifica tutti i contenuti duplicati
Aggiungi il modulo Codice sotto l'ultimo modulo di testo nella riga 1 della sezione 1
Ora, per assicurarci che ogni social network cambi il suo stile non appena l'intero modulo viene posizionato sopra, avremo bisogno di alcune righe di codice CSS. Metteremo questo codice in un nuovo modulo di codice che aggiungeremo alla prima sezione, appena sotto il testo della descrizione
Aggiungi codice CSS
Copia e incolla le seguenti righe di codice CSS e il gioco è fatto:
<style>
.team-socials:hover li a.icon:before {
color: black !important;
}
.team-socials:hover li a.icon {
background-color: white;
}
</style>
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
ufficio
Scarica DIVI ora!!!
Mobile
Scarica DIVI ora!!!
Conclusione
In questo articolo, ti abbiamo mostrato come diventare creativo presentando i membri del tuo team.
In particolare, ti abbiamo mostrato come visualizzare le icone dei social media quando passi il mouse sopra l'immagine di un membro del team. Il risultato è un'interazione sottile ma divertente che puoi utilizzare per qualsiasi tipo di sito web che crei.
Se hai bisogno di più elementi per completare i tuoi progetti di creazione di siti web, sfoglia anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Ma intanto, condividi questo articolo sui tuoi diversi social network.
