Quando progetti la tua pagina dei servizi, vuoi assicurarti che il tuo Visitatori nota tutti i diversi servizi che fornisci. In molti casi sarà solo un servizio specifico che stanno cercando, ma se fornisci un modo semplificato nella tua struttura di servizio è più probabile che il tuo Visitatori affrontarli tutti.
In questo tutorial, ti mostreremo come diventare creativo con gli effetti di scorrimento di Divi e creare una transizione di servizio senza interruzioni. Potrai anche scaricare gratuitamente il file JSON!
Andiamo.
Possibile risultato
Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.
1, ricrea la struttura degli elementi
Aggiungi la sezione # 1
spaziatura
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e modifica i valori di riempimento su schermi di dimensioni diverse.
- Imbottitura superiore: 80 px (desktop e tablet), 0 px (telefono)
- Imbottitura inferiore: 80px
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere più moduli, aprire i parametri di linea e applicare le seguenti modifiche ai parametri di quotatura:
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Larghezza: 90%
- Larghezza massima: 1580 px
spaziatura
Quindi aggiungere un margine superiore e inferiore personalizzato.
- Margine superiore: 200px
- Margine inferiore: 200px
Aggiungi un modulo di testo alla colonna 1
Aggiungi contenuto H2
È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Inserisci il file 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 2 Polizia: trimestrale
- Intestazione 2 Dimensioni testo: 80 px (desktop), 50 px (tablet), 40 px (telefono)
- Altezza della linea 2 della testa: 1.2em
spaziatura
Quindi aggiungi un margine inferiore sul tablet e sul telefono.
- Margine inferiore: 50 pixel (solo tablet e telefono)
Aggiungi un modulo di testo alla colonna 2
Aggiungi contenuto
Passiamo alla seconda colonna. Lì il primo modulo di cui abbiamo bisogno è un modulo di testo con un certo file contenuto descrizione.
Impostazioni del testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere testo: cabina
- Stile del carattere del testo: maiuscolo
- Colore del testo: # 000000
- Dimensioni del testo: 18 px (desktop), 15 px (tablet), 13 px (telefono)
- Spaziatura lettere di testo: 3px (desktop), 1px (tablet e telefono)
- Altezza della riga di testo: 3em
Aggiungi un modulo di separazione alla colonna 2
visibilità
Il modulo successivo e finale di cui abbiamo bisogno in questa colonna è un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.
- Mostra separatore: Sì
Linea
Quindi modificare il colore della linea del modulo.
- Colore della linea: # 000000
dimensionamento
Quindi apportare alcune modifiche ai parametri di dimensionamento.
- Peso del divisore: 3px
- Larghezza: 28%
spaziatura
Aggiungiamo anche un margine superiore.
- Margine superiore: 10px
Aggiungi la sezione # 2
spaziatura
Passiamo alla sezione successiva regolare. Rimuovere il riempimento superiore predefinito dalla sezione.
- Imbottitura superiore: 0px
overflow
Nascondi anche gli overflow.
- Straripamento orizzontale: nascosto
- Straripamento verticale: nascosto
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una prima riga usando la seguente struttura di colonne:
dimensionamento
Senza aggiungere più moduli, aprire i parametri di linea, accedere ai parametri di quotatura e apportare le seguenti modifiche:
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 90%
- Larghezza massima: 1580 px
spaziatura
Quindi rimuovere tutte le imbottiture superiore e inferiore predefinite.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Impostazioni della colonna 1
Colore di sfondo
Quindi apri le impostazioni per la colonna 1 e cambia il colore di sfondo.
- Colore di sfondo: # f7f7f7
spaziatura
Completa le impostazioni della colonna aggiungendo valori di riempimento personalizzati 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)
- Imbottitura sinistra: 8%
- Imbottitura destra: 8%
Impostazioni della colonna 2
spaziatura
Continua aprendo le impostazioni nella colonna 2. Vai alla scheda Avanzate e aggiungi valori di riempimento personalizzati su schermi di dimensioni diverse.
- Imbottitura superiore: 100 px (desktop), 50 px (tablet e telefono)
- Imbottitura inferiore: 200px
- Imbottitura sinistra: 150 px (scrivania), 0 px (tablet e telefono)
Aggiungi un modulo di separazione alla colonna 1
visibilità
Nella prima colonna, il primo modulo di cui abbiamo bisogno è un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.
- Mostra separatore: Sì
Linea
Quindi modificare il colore della linea del modulo.
- Colore della linea: # 000000
dimensionamento
Apportare anche modifiche ai parametri di dimensionamento.
- Peso del divisore: 3px
- Larghezza: 50%
Aggiungi un modulo di testo alla colonna 1
Aggiungi contenuto H3
Il modulo successivo di cui abbiamo bisogno nella colonna 1 è un modulo di testo con contenuto H3.
Impostazioni di testo H3
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3:
- Titolo 3 Polizia: trimestrale
- Colore del testo dell'articolo 3: # 000000
- Voce 3 Dimensioni del testo: 50 px (desktop), 40 px (tablet), 35 px (telefono)
- Altezza della linea 3 della testa: 1.1em
Aggiungi un modulo di testo alla colonna 2
Aggiungi contenuto
Nella seconda colonna, il primo modulo di cui abbiamo bisogno è un modulo di testo con alcuni contenuti descrittivi.
Impostazioni del testo
Modificare le impostazioni di testo del modulo come segue:
- Carattere testo: cabina
- Stile del carattere del testo: maiuscolo
- Dimensioni del testo: 18 px (desktop), 15 px (tablet), 13 px (telefono)
- Spaziatura lettere di testo: 3px (desktop), 1px (tablet e telefono)
- Altezza della riga di testo: 3em
Aggiungi un modulo pulsanti alla colonna 2
Aggiungi una copia
Il prossimo e ultimo modulo di cui abbiamo bisogno è un modulo pulsanti. Inserisci una copia a tua scelta.
Impostazioni dei pulsanti
Quindi stile il pulsante.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 20 pixel
- Colore testo pulsante: #ffffff
- Colore sfondo pulsante: # 000000
- Larghezza bordo pulsante: 0px
- Carattere pulsante: trimestrale
- Peso carattere pulsante: grassetto
spaziatura
Aggiungi anche un'imbottitura personalizzata.
- Imbottitura superiore: 50px
- Imbottitura inferiore: 50px
- Padding sinistro: 100px
- Imbottitura destra: 100px
Posizione
E riposiziona il pulsante di conseguenza:
- Posizione: assoluta
- Posizione: in basso a sinistra
Clona la linea tutte le volte che è necessario
Dopo aver completato l'intera linea e tutti i suoi moduli, è possibile clonare l'intera linea tre volte.
Cambia tutto il contenuto
Assicurati di modificare tutto il contenuto in righe duplicate.
2. Applicare effetti di scorrimento
Effetti di scorrimento della prima riga
Movimento orizzontale
Dopo aver completato tutte le righe nella sezione, è il momento di aggiungere gli effetti di scorrimento. Apri la prima riga della sezione e aggiungi il movimento orizzontale.
- Attiva movimento orizzontale: Sì
- Avvia offset: -5
- Offset medio: 0 (al 26%)
- Scostamento finale: 0
- Attivare l'effetto di movimento: metà dell'elemento
Dissolvenza in entrata e in uscita
Usa anche un effetto di dissolvenza in entrata e in uscita.
- Attiva dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 100%
- Opacità media: 100% (al 50%)
- Opacità finale: 0% (al 53%)
- Attivare l'effetto di movimento: metà dell'elemento
Effetti di scorrimento della riga centrale
Movimento verticale
Successivamente, aggiungeremo effetti di scorrimento a tutte le righe tra la prima e l'ultima riga della sezione. Per prima cosa usa un movimento verticale:
- Attiva movimento verticale: Sì
- Avvia offset: -4
- Offset medio: 0 (al 26%)
- Scostamento finale: 0
- Effetto di attivazione del movimento: metà dell'elemento
Dissolvenza in entrata e in uscita
Attiva anche un effetto di dissolvenza in entrata e in uscita.
- Attiva dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0%
- Opacità media: 100% (dal 27% al 50%)
- Fine offset: 0 (al 53%)
- Attivare l'effetto di movimento: metà dell'elemento
Effetti di scorrimento dell'ultima riga
Movimento verticale
Quindi aprire l'ultima riga della sezione e aggiungere il seguente movimento verticale:
- Attiva movimento verticale: Sì
- Avvia offset: -4
- Offset medio: 0 (al 26%)
- Scostamento finale: 0
- Attivare l'effetto di movimento: metà dell'elemento
Dissolvenza in entrata e in uscita
Con un effetto di dissolvenza in entrata e in uscita e il gioco è fatto!
- Attiva dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0%
- Opacità media: 100% (dal 27% al 50%)
- Opacità finale: 100% (al 53%)
- Attivare l'effetto di movimento: metà dell'elemento
Risultato finale
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Considerazioni finali
In questo articolo, ti abbiamo mostrato come creare una bellissima transizione di servizio con gli effetti di scorrimento di Divi. Anche prima che un servizio scompaia, l'altro inizia ad apparire, dando un bel passaggio che è facile alla vista. Questo approccio ti aiuterà a evidenziare ogni servizio a livello individuale. Sei stato anche in grado di scaricare gratuitamente il file JSON! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
