Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

Vuoi visualizzare le icone dei social network quando passi il 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

Aggiungi contenuti di dimensioni H1 (Titolo 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.

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62.

  • 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 prossimo e ultimo modulo di cui abbiamo bisogno in questa riga è un altro modulo "Testo" con un contenuto descrittivo 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

Vuoi vendere i tuoi prodotti su Internet?

Scarica WooCommerce gratis, i migliori plugin di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress e creare facilmente il tuo negozio online. Perfetto per i principianti.

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 Avanzate 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 prossimo e ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo "Persona". Aggiungi contenuto descrittivo 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

passando sopra le foto in Divi

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. Ciò si traduce in 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 intantocondividi questo articolo sui tuoi diversi social network.

0 azioni
quota
Tweet
Enregistrer