Vorresti che i membri del tuo team fossero presentati sotto forma di un carosello con Divi ?
Quando imposti la tua pagina Informazioni, probabilmente vorrai includere anche i membri del tuo team. Così facendo, permetti Visitatori per entrare in contatto con le persone dietro la tua attività.
Se stai cercando un modo per animare la sezione dei membri del tuo team sullo scroll, adorerai questo tutorial.
Ricreeremo un bellissimo carosello di membri del team a scorrimento automatico che si muove come il tuo Visitatori scorrere la pagina.
Andiamo.
Panoramica
Prima di immergerti nel tutorial, diamo una rapida occhiata al risultato su diverse dimensioni dello schermo.
Computer desktop
Versione mobile
Iniziamo a progettare con Divi
Leggi anche: Divi: come rivelare il contenuto al passaggio del mouse sopra il divisore di sezione
Aggiungi una nuova sezione
Maghi interni
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.
- Padding (superiore e inferiore): 200px (desktop), 100px (tablet e telefono)
visibilità
Per assicurarci che non vengano visualizzate barre di scorrimento orizzontali nel nostro design, nasconderemo gli overflow di sezione nella scheda Avanzate.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Aggiungi la riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Larghezza
Senza ancora aggiungere moduli, apri le impostazioni della linea, passa alla scheda Design e modificare la larghezza e la larghezza massima nelle impostazioni di dimensionamento.
- Larghezza: 90%
- Larghezza massima: 1 px
spaziatura
Aggiungiamo anche un'imbottitura superiore e inferiore personalizzata.
- Imbottitura (superiore e inferiore): 100px
Aggiungi un modulo di testo alla colonna
Aggiungi contenuto in formato H2
È ora di aggiungere moduli, iniziando con un primo modulo di testo. Entrare in un contenuto Misura H2 a scelta.
Impostazioni di testo H2
Passa alla scheda Design del modulo e modificare i parametri di testo H2 come segue:
- Carattere: sabbie mobili
- Peso del carattere: semigrassetto
- Colore del testo: #000000
- Dimensioni del testo: 70px (desktop), 50px (tablet), 40px (telefono)
Aggiungi un modulo "Divisore" alla colonna
visibilità
Quindi aggiungi un modulo Divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: SÌ
Linea
Quindi apportare alcune modifiche alle impostazioni della linea.
- Colore linea: #edf000
- Stile: solido
- Posizione della linea: in alto
dimensionamento
E completare i parametri del modulo modificando i parametri di dimensionamento di conseguenza:
- Peso del divisore: 20px
- Larghezza: 11%
- Modulo di allineamento: a sinistra
- Altezza: 20px
Aggiungi la riga 2
Struttura della colonna
Riga successiva! Utilizzare la seguente struttura a colonne:
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 2
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura (solo tablet e telefono)
Quindi, aggiungi il riempimento sinistro e destro solo su schermi di piccole dimensioni.
- Imbottitura (sinistra e 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 nella tua riga.
Gradiente di sfondo
Innanzitutto, aggiungi uno sfondo sfumato a ciascuna colonna.
- Interruzioni gradiente (25%): rgba(255,255,255,0)
- Interruzioni gradiente (86%): rgba(0,0,0,0.84)
- Tipo: lineare
- Gradiente quadrato 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 immagine di sfondo: copertina
- Posizione immagine di sfondo: centro
Aggiunto CSS personalizzato (solo tablet)
Completa le impostazioni della colonna aggiungendo CSS personalizzato all'elemento principale (For view Tavoletta solo) di ciascuna colonna.
Queste righe di codice CSS ci aiuteranno a posizionare le colonne una sotto l'altra sul tablet, invece di averne due affiancate.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
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 utilizza il file contenuto de votre choix.
Elimina immagine
Quindi eliminare l'immagine. Invece, utilizziamo l'immagine di sfondo della colonna.
Immagine di sfondo
Successivamente, aggiungeremo una sovrapposizione di immagini come immagine di sfondo per il modulo.
- Dimensione immagine di sfondo: copertina
- Posizione dell'immagine di sfondo: centro
Impostazioni del testo del titolo
Passa alla scheda Design modulo e modificare le impostazioni del testo del titolo come segue:
- Titolo Titolo Livello: H3
- Carattere del titolo: Sabbie mobili
- Peso del carattere: 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: Open Sans
- Colore del testo: #ffffff
- Altezza della linea: 2,2 em
Impostazioni del testo del post dei membri del team
Successivamente, apporta alcune modifiche alle impostazioni di testo della posizione ricoperta dal membro del team.
- Carattere posizione: aperto senza
- Colore testo posizione: #edf000
spaziatura
E completa le impostazioni del modulo aggiungendo valori di riempimento personalizzati alle impostazioni di spaziatura.
- Imbottitura: 70% (in alto), 10% (in basso, sinistra e destra)
Clona quattro volte il modulo "Persona".
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 anche di cambiare il file contenuto.
Trasforma una riga in un carosello a scorrimento automatico
Vedi anche: Divi: come creare una griglia di colonne fluide al passaggio del mouse
Cambia la dimensione della riga n. 2
Ora, per trasformare questa linea in un carosello a scorrimento automatico, dovremo riaprire le impostazioni della linea e modificare la larghezza e la larghezza massima nelle impostazioni di ridimensionamento.
- Larghezza: 180%
- Larghezza massima: 220% (desktop), 100% (tablet e telefono)
Aggiungi il movimento orizzontale alla riga 2
Completa le impostazioni della linea aggiungendo il movimento orizzontale per scorrere le impostazioni dell'effetto nella scheda Tecnologia sotto opzione Effetti di scorrimento e hai finito!
- Abilita movimento orizzontale: Sì
- Offset iniziale:
- Desktop: 2,5
- Tablet e telefono: 0
- Offset centrale: 0 (al 40%)
- Scostamento finale:
- Desktop: -25 (al 62%)
- Tablet e telefono: 0
- Attivazione effetto movimento: metà dell'elemento
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Computer desktop
Scarica DIVI ora!!!
Visualizzazione mobile
Scarica DIVI ora!!!
Conclusione
In questo articolo, ti abbiamo mostrato come diventare creativo con gli effetti di scorrimento integrati di Divi.
Nello specifico, abbiamo ricreato un bellissimo carosello con i membri del team a scorrimento automatico. Quando il Visitatori scorri la pagina, appare un'altra parte del carosello.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti. Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
