Quando crei la tua pagina Informazioni, probabilmente vorrai anche presentare lì i membri del tuo team. In questo modo, consenti al Visitatori interagire con le persone dietro la tua attività. Se stai cercando un modo per animare la sezione dei membri del tuo team sullo scorrimento, potresti trovare utile questo tutorial. Creeremo un carosello di membri del team a scorrimento automatico che si muove quando il tuo Visitatori scorrere la pagina.
Dimostrazione
Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.
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)
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
Aggiungi riga n. 1
Struttura a colonne
Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:
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
spaziatura
Aggiungiamo anche un'imbottitura superiore e inferiore personalizzata.
- Imbottitura superiore: 100px
- Imbottitura inferiore: 100px
Aggiungi un modulo di testo alla colonna
Aggiungi contenuto H2
È ora di aggiungere moduli, iniziando con un primo modulo di testo. Inseriscilo contenuto H2 a tua scelta.
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)
Aggiungi un modulo di separazione alla colonna
visibilità
Quindi aggiungi un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.
- Mostra separatore: Sì
Linea
Quindi apportare alcune modifiche alle impostazioni della linea.
- Colore linea: # edf000
- Stile della linea: solido
- Posizione linea: in alto
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
Aggiungi una riga # 2
Struttura a colonne
Alla riga successiva! Utilizza la seguente struttura di colonne:
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%
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)
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.
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ì
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
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;
Aggiungi un modulo persona alla colonna
Aggiungi contenuto
Per condividere informazioni sui membri del team, utilizzeremo un modulo Persona. Aggiungi il primo modulo Persona alla colonna 1 e utilizza il file contenuto de votre choix.
Elimina immagine
Quindi elimina l'immagine. Usiamo invece l'immagine di sfondo della colonna.
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
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%
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
Posiziona le impostazioni del testo
Quindi apportare alcune modifiche alle impostazioni del testo di posizione.
- Posizione carattere: Apri Sans
- Posiziona colore testo: # edf000
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%
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 cambiare anche il file 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)
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
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
ufficio
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 di membri del team a scorrimento automatico. Quando il Visitatori scorri la pagina, appare un'altra parte del carosello.
