Vai al contenuto principale

Come creare un carosello di scorrimento dei membri del team con Divi

Divi: il tema WordPress più semplice da usare

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. [Consigliato]

Quando crei la tua pagina Informazioni, probabilmente vorrai presentare anche i membri del tuo team. In tal modo, consenti ai visitatori di interagire con le persone dietro la tua attività. Se stai cercando un modo per ravvivare la sezione dei membri del tuo team sullo scorrimento, questo tutorial potrebbe essere per te. Creeremo un carosello di membri del team a scorrimento automatico che si sposta mentre i tuoi visitatori scorrono la pagina. 

Dimostrazione

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

Scroll divi membro del team

Inizio del concepimento

Aggiungi una nuova sezione

spaziatura

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando. Apri le impostazioni della sezione e aggiungi un riempimento personalizzato su schermi di dimensioni diverse.

  • Imbottitura superiore: 200 px (scrivania), 100 px (tablet e telefono)
  • Imbottitura inferiore: 200 px (scrivania), 100 px (tablet e telefono)
Configurazione dei parametri

overflow

Per assicurarci che non compaia alcuna barra di scorrimento orizzontale nel nostro design, nasconderemo le sezioni in eccesso nella scheda avanzata.

  • Straripamento orizzontale: nascosto
  • Straripamento verticale: nascosto
Configurazione overflow

Aggiungi riga n. 1

Struttura a colonne

Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Scegli layout divi

dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga, passa alla scheda di progettazione e modifica la larghezza e la larghezza massima nelle impostazioni di dimensionamento.

  • Larghezza: 90%
  • Larghezza massima: 1580 px
Parametro della linea Divi

spaziatura

Aggiungiamo anche un'imbottitura superiore e inferiore personalizzata.

  • Imbottitura superiore: 100px
  • Imbottitura inferiore: 100px
Configurazione divisione interlinea

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un primo modulo di testo. Inserisci il contenuto H2 di tua scelta.

Incontrare la squadra

Impostazioni di testo H2

Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 come segue:

  • Titolo carattere 2: Sabbie mobili
  • Titolo carattere 2: semi-grassetto
  • Colore del testo dell'articolo 2: # 000000
  • Intestazione 2 Dimensioni testo: 70 px (desktop), 50 px (tablet), 40 px (telefono)
Divi spaziatura del testo

Aggiungi un modulo di separazione alla colonna

visibilità

Quindi aggiungi un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

  • Mostra separatore: Sì
Mostra separatore divi

Linea

Quindi apportare alcune modifiche alle impostazioni della linea.

  • Colore linea: # edf000
  • Stile della linea: solido
  • Posizione linea: in alto
Stile di spaziatura Divi

dimensionamento

E completare i parametri del modulo modificando i parametri di quotatura di conseguenza:

  • Peso del divisore: 20px
  • Larghezza: 11%
  • Allineamento del modulo: a sinistra
  • Altezza: 20px
Dimensionamento modulo linea divi

Aggiungi una riga # 2

Struttura a colonne

Alla riga successiva! Utilizza la seguente struttura di colonne:

Configurazione della colonna Divi

dimensionamento

Senza aggiungere più moduli, aprire i parametri di linea e modificare i parametri di dimensionamento come segue:

  • Usa una larghezza della grondaia personalizzata: Sì
  • Larghezza della grondaia: 2
  • Larghezza: 100%
  • Larghezza massima: 100%
Configurazione della larghezza della grondaia

spaziatura

Quindi aggiungi l'imbottitura sinistra e destra solo sugli schermi più piccoli.

  • Imbottitura sinistra: 5% (solo tablet e telefono)
  • Imbottitura destra: 5% (solo tablet e telefono)
Configurazione dello stile di interlinea

Parametri di colonna (5x)

Ora, nei prossimi tre passaggi di questo tutorial, apporteremo alcune modifiche alle colonne. Applica i tre passaggi a ciascuna delle colonne della riga.

Configurazione della linea dei parametri Divi

Sfondo sfumato

Innanzitutto, aggiungi uno sfondo sfumato a ciascuna colonna.

  • Colore 1: rgba (255,255,255,0)
  • Colore 2: rgba (0,0,0,0,84)
  • Tipo di gradiente: lineare
  • Posizione iniziale: 25%
  • Posizione finale: 86%
  • Posiziona il gradiente sopra l'immagine di sfondo: sì
Configurazione colonna posteriore Divi

Immagine di sfondo

Quindi carica un'immagine di sfondo a tua scelta. Questa immagine di sfondo rappresenta ogni membro del team, quindi utilizza un'immagine diversa per ogni colonna.

  • Dimensione dell'immagine di sfondo: copertina
  • Posizione dell'immagine di sfondo: al centro
Aggiungi l'immagine di sfondo della colonna divi

Elemento principale

Completa le impostazioni della colonna aggiungendo CSS personalizzato all'elemento principale del tablet di ogni colonna. Queste righe di codice CSS ci aiuteranno a posizionare le colonne una sotto l'altra sul tablet, invece di averne due affiancate.

larghezza: 100%! importante; margine: 50px 0px 50px 0px! importante;
Colonna codice css divi

Aggiungi un modulo persona alla colonna

Aggiungi contenuto

Per condividere le informazioni sui membri del team, utilizzeremo un modulo Persona. Aggiungi il primo modulo Persona alla colonna 1 e usa il contenuto che desideri.

Nome persona divi

Elimina immagine

Quindi elimina l'immagine. Usiamo invece l'immagine di sfondo della colonna.

Rimuovi immagine divi

Immagine di sfondo

Aggiungeremo quindi un'immagine in sovrimpressione come immagine di sfondo del modulo. Puoi trovare quello che stiamo utilizzando scaricando la cartella all'inizio di questo tutorial.

  • Dimensione dell'immagine di sfondo: copertina
  • Posizione dell'immagine di sfondo: al centro
Configurazione in background del modulo Persona

Impostazioni del testo del titolo

Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo del titolo come segue:

  • Livello del titolo: H3
  • Carattere del titolo: Quicksand
  • Peso carattere titolo: grassetto
  • Colore del testo del titolo: #ffffff
  • Dimensione del testo del titolo: 230%
Personalizzazione del titolo del modulo Divi

Impostazioni del testo del corpo

Modifica anche le impostazioni del testo del corpo.

  • Carattere del corpo: Apri Sans
  • Colore del testo del corpo: #ffffff
  • Altezza della linea del corpo: 2,2 em
Personalizzazione carrozzeria Divi

Posiziona le impostazioni del testo

Quindi apportare alcune modifiche alle impostazioni del testo di posizione.

  • Posizione carattere: Apri Sans
  • Posiziona colore testo: # edf000
Posizione Divi

spaziatura

E completa le impostazioni del modulo aggiungendo valori di riempimento personalizzati alle impostazioni di spaziatura.

  • Imbottitura superiore: 70%
  • Imbottitura inferiore: 10%
  • Imbottitura sinistra: 10%
  • Imbottitura destra: 10%
Spaziatura modulo Divi persona

Duplica il modulo Persona 4 volte

Una volta completato il modulo Persona, è possibile clonare l'intero modulo quattro volte.

Posiziona i duplicati nelle colonne rimanenti

Posiziona i moduli duplicati nelle restanti quattro colonne della riga. Assicurati di modificare anche il contenuto.

Trasforma la riga in un carosello a scorrimento automatico

Cambia la dimensione della linea # 2

Ora, per trasformare questa riga in un carosello di membri del team a scorrimento automatico, dobbiamo riaprire le impostazioni della riga e modificare la larghezza e la larghezza massima nelle impostazioni di dimensionamento.

  • Larghezza: 180%
  • Larghezza massima: 220% (scrivania), 100% (tablet e telefono)
Spaziatura modifica line divi

Aggiungi il movimento orizzontale della linea # 2

Completa le impostazioni della linea aggiungendo il movimento orizzontale alle impostazioni dell'effetto di scorrimento nella scheda avanzata e il gioco è fatto!

  • Attiva movimento orizzontale: Sì
  • Inizia offset:
    • Ufficio: 2,5
    • Tablet e telefono: 0
  • Offset medio: 0 (al 40%)
  • Fine offset:
    • Ufficio: -25 (al 62%)
    • Tablet e telefono: 0
  • Attivare l'effetto di movimento: metà dell'elemento
Configurazione dell'animazione di scorrimento Divi

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

ufficio

Scroll divi membro del team

Considerazioni finali

In questo tutorial, ti abbiamo mostrato come diventare creativo con gli effetti di scorrimento integrati di Divi. Nello specifico, abbiamo ricreato un bellissimo carosello a scorrimento automatico dei membri del team. Mentre i visitatori scorrono la pagina verso il basso, viene visualizzata un'altra parte del carosello.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer