Come progettare una pagina di un membro del team con le icone dei social media in bilico su Divi

Rifat Divi Tutorials Jul 5, 2021

A volte abbiamo bisogno di mostrare i membri del team sui nostri siti Web, questo è un modo eccellente per mostrare i nostri abili membri del team al mondo esterno. Possiamo visualizzare la loro immagine, nome e designazione in azienda. Per dare loro più visibilità, puoi aggiungere i loro collegamenti ai social media al design. Ora, di solito, le persone aggiungono questi collegamenti sotto il nome e la designazione, ma è il momento di fare una mossa intelligente e modificare il modo di progettare. Nel tutorial Divi di oggi, vedremo come creare una pagina di un membro del team con le icone dei social media sopra l'immagine. Non perdiamo altro tempo e diamoci da fare!

Sneak Peak

Questo sarà il nostro design di oggi.

Parte 1: Modulo di progettazione

Impostazioni: Sezione Uno

Colore di sfondo

Inizia cambiando il colore della sezione iniziale sulla pagina su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo.

  • Colore di sfondo: #0f0f0f

Spaziatura

Ora dalla scheda Progettazione e modifica le impostazioni di spaziatura.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora
  • Imbottitura superiore: desktop e tablet: 100 px e telefono: 50 px
  • Imbottitura inferiore: desktop e tablet: 100 px e telefono: 50 px

Aggiunta di una nuova riga

Struttura della colonna

Ora aggiungi una nuova riga con la seguente struttura a colonne.

Colonna: Modulo di testo 1

Aggiungi contenuto H1

Ora aggiungiamo un contesto a nostra scelta a questo modulo con contenuto H1.

Impostazioni testo H1

Ora apporta alcune modifiche al modulo dalla scheda di progettazione. Innanzitutto, modifica le impostazioni dell'intestazione.

  • Carattere dell'intestazione: Alata
  • Colore del testo dell'intestazione: #ffffff
  • Dimensione del testo dell'intestazione: desktop: 50 px, tablet: 45 px e telefono: 35 px
  • Altezza della linea di prua: 1.2em

Colonna: modulo divisore

Visibilità

Aggiungiamo un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

  • Mostra divisore: Sì

Linea

Dalla scheda Design, cambia il colore della linea.

  • Colore linea: #ffffff

Dimensionamento

Modificare il dimensionamento di questo modulo divisore.

  • Peso del divisore: 2px
  • Larghezza massima: 100 px
  • Altezza: 2px

Colonna: Modulo di testo 1

Aggiungi contesto descrittivo

Qui aggiungeremo un altro modulo di testo in cui inseriremo alcuni contenuti a nostra scelta.

Impostazioni testo

Dalla scheda Progettazione, modifica le impostazioni del testo di conseguenza.

  • Carattere del testo: Alata
  • Colore del testo: #7c7c7c
  • Dimensione del testo: 17px
  • Altezza riga di testo: 1,9 em

Spaziatura

Dalla sezione spaziatura, apportare la seguente modifica.

  • Margine inferiore: 0px

Aggiunta e impostazioni: sezione due

Ora aggiungi un'altra sezione normale sotto la precedente.

Sfondo sfumato

Ora usa uno sfondo sfumato per questa sezione.

  • Colore 1: #0f0f0f
  • Colore 2: #000000
  • Posizione di partenza: 10%
  • Posizione finale: 10%

Spaziatura

Quindi, modifica le impostazioni di spaziatura.

  • Imbottitura superiore: 0px
  • Imbottitura inferiore: 200 px

Aggiunta di una nuova riga

Struttura della colonna

Ora aggiungi una nuova riga in questa sezione con la seguente struttura a colonne.

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

  • Usa larghezza grondaia personalizzata: Sì
  • Larghezza grondaia: 2px

Colonna 1: Modulo Segui social media

Aggiungi social network

Ora, aggiungeremo un modulo di follow sui social media alla colonna 1 e inseriremo le connessioni di social media desiderate

Rimuovi il colore di sfondo dalle icone dei social media

Fai clic su Impostazioni per ciascuna icona, quindi vai a sfondo e seleziona trasparente. Inoltre puoi fare clic sul colore e rimuoverlo.

Aggiungi link a ogni social network

Aggiungi anche un collegamento corrispondente a ciascun social network.

Colore di sfondo predefinito

Dall'opzione delle impostazioni del modulo, aggiungi questo colore come sfondo.

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

Colore di sfondo al passaggio del mouse

Cambia il colore di sfondo per l'effetto al passaggio del mouse.

  • Colore di sfondo al passaggio del mouse: #494949

Immagine di sfondo

Quindi, carica l'immagine di un membro del team come sfondo.

  • Dimensione immagine di sfondo: copertina:
  • Miscela immagine di sfondo: Moltiplica

Allineamento

Dalla scheda di progettazione del modulo, modifica le impostazioni di allineamento.

  • Allineamento del modulo: Centro

Icona

Ora cambia il colore dell'icona.

  • Colore icona: rgba(0,0,0,0)

Spaziatura

Quindi, vai alle impostazioni di spaziatura e applica i seguenti valori:

  • Margine inferiore: 0px
  • Imbottitura superiore: desktop: 250 px, tablet: 450 px e telefono: 200 px
  • Imbottitura inferiore: 20px

Confine

Ora, cambia l'impostazione del bordo di conseguenza.

  • Tutti gli angoli: 100 px
  • Larghezza bordo: 2px
  • Colore del bordo: rgba (255,255,255,0)

Confine al passaggio del mouse

Ora, usa un bordo per il passaggio del mouse.

  • Colore bordo al passaggio del mouse: #ffffff

Classe CSS

Ora dalla scheda Avanzate, aggiungi una classe CSS personalizzata.

  • Classe CSS: team-socials

Passa il mouse prima dell'elemento

Ora, completa le impostazioni del modulo applicando il seguente codice CSS all'elemento before. Assicurati di metterlo al passaggio del mouse.

content: "Say Hello To Me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
padding-left: 30px;

Colonna 1: Modulo Persona

Aggiungi contenuto

Il modulo finale che useremo in questa colonna è un modulo persona. aggiungi il modulo e inserisci le informazioni al suo interno.

Impostazioni testo

Dalla scheda design del modulo persona e modifica le impostazioni del testo come segue:

  • Allineamento del testo: Centro
  • Colore del testo: chiaro

Impostazioni del testo del titolo

Ora modifica l'area di testo del titolo.

  • Carattere del titolo: Alata
  • Dimensione del testo del titolo: desktop: 27 px, tablet: 25 px e telefono: 22 px

Impostazioni testo posizione Position

Modificare le impostazioni per il testo di posizione.

  • Carattere posizione: Alata
  • Dimensioni del testo della posizione: desktop: 17 px e tablet e telefono: 15 px

Spaziatura

Applicare un'imbottitura personalizzata superiore e inferiore alle impostazioni di spaziatura.

  • Imbottitura superiore: 40px
  • Imbottitura inferiore: 40 px

Confine

Ora applica le seguenti impostazioni del bordo e finisci la colonna.

  • Larghezza bordo: 1px
  • Colore bordo: #ffffff

Rimuovi altre colonne

Ora elimina le colonne per la sezione.

Clona colonna due volte

Ora duplica la colonna una due volte.

Clona intera riga

Ora, duplica l'intera riga quanto più ne hai bisogno. Qui lo duplichiamo una volta.

Modifica i contenuti duplicati

Ora cambieremo le immagini, i collegamenti ai social media, le informazioni sulla persona per ogni individuo.

Parte 2: Modulo codice

Modulo codice nella sezione 1

Ora aggiungi un modulo di codice sotto il modulo di testo della sezione uno.

Aggiungi codice CSS

Ora copia le seguenti righe di codice CSS e incollalo nel modulo del codice e il gioco è fatto. Non dimenticare di inserirli all'interno del tag Style .


.team-socials:hover li a.icon:before {
  color: black !important;
}
 
.team-socials:hover li a.icon {
  background-color: white;
}

Risultato finale

Per quanto abbiamo completato con successo tutti i passaggi, ecco come appaiono i nostri risultati.

Conclusione

Nel tutorial di oggi, abbiamo cercato di mostrare come possiamo progettare in modo creativo la pagina di un membro del team. Utilizzando l'effetto hovering del tema Divi , le connessioni sociali dei membri del team possono essere mostrate in modo così estetico. Ci auguriamo che tu possa trovare utili i tutorial di oggi, una condivisione con l'ambiente circostante ci incoraggerà a creare altri tutorial Divi nuovi e sorprendenti.