[Ad_1]
Andiamo.
Panoramica
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
ufficio
Mobile
Scarica il layout GRATUITAMENTE
Per mettere le mani sul layout gratuito, dovrai prima scaricarli utilizzando il pulsante in basso. Per accedere al download, dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il forma qui di seguito. Come nuovo abbonato, riceverai ancora più vantaggi Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci il tuo indirizzo email qui sotto e fai clic su download. Non verrai "riiscritto" né riceverai email aggiuntive.
Iniziamo a ricreare!
Aggiungi 2x sezioni segnaposto
Aggiungi una nuova sezione
Inizia aggiungendo una sezione segnaposto alla pagina su cui stai lavorando.
dimensionamento
Apri le impostazioni della sezione e modifica l'altezza nelle impostazioni di dimensionamento.
Sezione clone
Clona la sezione una volta. Questo ti lascia con due sezioni segnaposto sulla tua pagina. Queste sezioni segnaposto ti aiuteranno a vedere l'effetto finale dopo aver seguito il tutorial. Su un sito web live, le sezioni segnaposto verranno sostituite con sezioni normali che utilizzi in tutta la pagina.
Aggiungi una nuova sezione tra le sezioni segnaposto
Una volta posizionate le sezioni segnaposto, aggiungi una nuova sezione tra le sezioni segnaposto.
Colore di sfondo
Apri le impostazioni della sezione e usa un colore di sfondo bianco.
- Colore di sfondo: #ffffff
spaziatura
Passa alla scheda di progettazione della sezione e modifica i valori di riempimento superiore e inferiore di conseguenza:
- Imbottitura superiore: 10vh
- Imbottitura fondo: 10vh
Aggiungi la riga # 1
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni di riga, vai alle impostazioni di dimensionamento e modifica i valori di larghezza e larghezza massimi.
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi un modulo di testo alla colonna
Aggiungi una copia
L'unico modulo di cui abbiamo bisogno per questa riga è un modulo di testo. Aggiungi una copia a tua scelta.
Impostazioni del testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Montserrat
- Peso del carattere del testo: Ultra grassetto
- Stile del carattere del testo: maiuscolo
- Colore del testo: # fff2ea
- Dimensione del testo: 11vw
- Altezza riga di testo: 1 em
- Allineamento del testo: Centro
Aggiungi la riga # 2
Struttura della colonna
Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di 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: 90%
- Allineamento della linea: Centro
Aggiungi modulo immagine alla colonna
Carica un'immagine
Aggiungi un modulo immagine alla colonna della riga. Carica un'immagine a tua scelta.
allineamento
Passa alla scheda di progettazione del modulo e modifica l'allineamento dell'immagine di conseguenza:
dimensionamento
Quindi vai alle impostazioni di dimensionamento e forza l'intera larghezza sul modulo.
Aggiungi un modulo pulsanti alla colonna
Aggiungi una copia
Il prossimo e ultimo modulo che aggiungeremo alla colonna è un modulo pulsante. Usa una copia a tua scelta.
Allineamento dei pulsanti
Vai alla scheda Design e modifica l'allineamento del pulsante.
Impostazioni dei pulsanti
Quindi modella il pulsante come segue:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 16 px
- Colore del testo del pulsante: # 000000
- Colore di sfondo del pulsante: #ffffff
- Larghezza bordo pulsante: 0px
- Spaziatura tra le lettere dei pulsanti: 2px
- Carattere del pulsante: Montserrat
- Peso del carattere del pulsante: grassetto
- Stile del carattere del pulsante: maiuscolo
spaziatura
Utilizza anche valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Aggiungi il posizionamento assoluto alla riga 1
Una volta completata la seconda riga, torna alla riga n. 1. Apri le impostazioni della riga, vai alla scheda avanzate e rendi assoluta la sezione. In questo modo, la riga e il modulo di testo all'interno verranno posizionati sotto la riga contenente il modulo immagine.
- Posizione: Assoluta
- Posizione: Centro
Clona la riga n° 1 e posiziona il duplicato sotto la riga n° 2
Per consentire al modulo di testo di apparire sopra l'immagine, avremo bisogno di un'altra riga con un valore z-index più alto. Clona la prima riga e posiziona il duplicato sotto la seconda riga.
Applica effetti alla riga 3
Aumenta indice Z
Apri la riga duplicata e modifica l'indice z nella scheda Avanzate.
Cambia il colore del testo
Apri il modulo di testo nella riga e cambia il colore del testo.
Applica la modalità di fusione alla linea
Quindi apri le impostazioni della riga e modifica la modalità di fusione nelle impostazioni dei filtri.
Usa l'effetto di scorrimento sul modulo di testo nella riga n. 3
Aggiungi un effetto dissolvenza in entrata e in uscita
Completa il tutorial riaprendo il contenitore di testo, andando agli effetti di scorrimento e attivando l'effetto di dissolvenza in entrata e in uscita. Questo è tutto!
- Abilita dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0%
- Opacità media: 0% (al 26%)
- Opacità finale: 100% (al 28%)
- Attivazione dell'effetto di movimento: mezzo dell'elemento
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
ufficio
Mobile
Considerazioni finali
In questo articolo, ti abbiamo mostrato come essere creativo con gli effetti di scorrimento incorporati di Divi. In particolare, ti abbiamo mostrato come mescolare la copia a scorrimento. All'inizio, la copia sembra essere sotto l'immagine. Dopo lo scorrimento, la copia viene rivelata sopra l'immagine e si fonde con l'immagine. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se vuoi saperne di più su Divi e ottenere altri omaggi Divi, assicurati di iscriverti al nostro newsletter tramite email e al ns Canale YouTube in modo che tu sia sempre una delle prime persone a conoscere e sfruttare questi contenuti gratuiti.
[Ad_2]
