Come contrassegnare una nuova sezione Divi con forme di movimento sottili

Ci sono molti modi in cui puoi rendere il tuo visitatore consapevole del fatto che sta passando a un'altra sezione della tua pagina. All'interno di Divi, c'è una vasta gamma di divisori di sezione che puoi usare subito. Ma se stai cercando un modo più animato per chiarire, adorerai questo tutorial. Ti mostreremo come contrassegnare una nuova sezione Divi usando forme di movimento sottili. Creeremo queste forme con le opzioni integrate di Divi e aggiungeremo loro movimento con gli effetti di scorrimento di Divi. Le possibilità sono infinite, ma condivideremo tre esempi di design che puoi utilizzare subito. Potrai anche scaricare i file JSON gratuitamente!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Esempio #3

Desktop

Mobile

Scarica GRATUITAMENTE i layout delle forme di movimento sottile

Per mettere le mani sui layout di forme di movimento sottili gratuiti, dovrai prima scaricarli utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Passaggi generali

Carica il layout della pagina di destinazione della galleria d'arte

Per questo tutorial, utilizzeremo l'Art Gallery Layout Pack, ma puoi applicare la tecnica a qualsiasi tipo di sito web che stai costruendo. Aggiungi una nuova pagina e carica la pagina di destinazione del pacchetto di layout.

Aggiungi una nuova riga in fondo alla sezione n. 1

Struttura della colonna

Ora, esamineremo alcuni passaggi di base che si applicano a tutti e tre gli esempi mostrati all'inizio di questo tutorial. Innanzitutto, aggiungi una nuova riga nella parte inferiore della prima sezione della pagina utilizzando la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Modifica anche i valori di margine e padding.

• Margine superiore: 10vw
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Rimuovi l'imbottitura inferiore della sezione n. 1

Per assicurarci che la riga e le forme di movimento appaiano nella parte inferiore della sezione, dovremo rimuovere l'imbottitura inferiore della sezione.

• Imbottitura inferiore: 0vw

Ricrea l'esempio n. 1

Aggiungi modulo divisore n. 1

Visibilità

Una volta completati i passaggi generali, è il momento di iniziare a ricreare i diversi esempi, iniziando dal primo. Aggiungi un primo modulo divisore e assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Passa alla scheda di progettazione del modulo e cambia il colore della linea.

• Colore linea: #ffa100

Dimensionamento

Modifica anche le impostazioni di dimensionamento del modulo.

• Peso del divisore: 50 px
• Altezza: 50 px

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine sinistro: -200 px (solo tablet e telefono)
• Margine destro: -200 px (solo tablet e telefono)
• Imbottitura sinistra: 15vw
• Imbottitura destra: 15vw

Trasforma inclinazione

Trasformeremo leggermente anche il modulo aggiungendo un valore di inclinazione inferiore nelle impostazioni di trasformazione.

• In basso: 60 gradi

Effetto scorrimento movimento orizzontale

È ora di aggiungere i diversi effetti di scorrimento al nostro modulo! Per prima cosa, aggiungeremo un po' di movimento orizzontale.

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: 0
• Compensazione media: 0 (all'80%)
• Scostamento finale:
  • Desktop: 20 (all'85%)
  • Tablet e telefono: 5 (all'85%)

Effetto di scorrimento in dissolvenza in entrata e in uscita

Aggiungeremo anche un effetto di dissolvenza in entrata e in uscita.

• Abilita dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 0%
• Opacità media: 0% (al 36%)
• Opacità finale: 100% (al 40%)

Ridimensionamento dell'effetto di scorrimento verso l'alto e verso il basso

E completeremo le impostazioni del modulo aggiungendo un effetto di ridimensionamento su e giù.

• Abilita ridimensionamento su e giù: Sì
• Scala iniziale: 20%
• Scala media: 50% (al 69%)
• Scala finale: 100% (al 73%)

Modulo divisore clone n. 1

Una volta completato il modulo divisore, puoi clonarlo.

Modifica colore linea

Apri le impostazioni del modulo duplicato e cambia il colore della linea.

• Colore linea: #24252d

Modifica spaziatura

Modifica anche i valori di spaziatura del modulo.

• Margine sinistro: -200 px (solo tablet e telefono)
• Margine destro: -200 px (solo tablet e telefono)
• Imbottitura sinistra: 25vw
• Imbottitura destra: 25vw

Modifica effetto scorrimento movimento orizzontale

Quindi, vai agli effetti di scorrimento nella scheda Avanzate e modifica l'offset finale dell'effetto di scorrimento del movimento orizzontale.

• Scostamento finale:
  • Scrivania: -20
  • Tablet e telefono: -5

Ricrea l'esempio n. 2

Aggiungi modulo divisore n. 1

Visibilità

Se preferisci ricreare il secondo esempio, vai avanti e aggiungi un primo modulo divisore all'ultima riga della tua sezione. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Modifica successivamente il colore della linea del modulo.

• Colore linea: #ffa100

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 200 px
• Larghezza: 200 px
• Allineamento del modulo: Centro
• Altezza: 200 px

Frontiera

Successivamente, trasformeremo il modulo in un cerchio aggiungendo un raggio di bordo.

• Tutti gli angoli: 200 px

Effetto scorrimento movimento orizzontale

È ora di aggiungere gli effetti di scorrimento! Il primo effetto che stiamo usando è il movimento orizzontale.

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: -2
• Compensazione media: 0
• Scostamento finale:
  • Scrivania: 20
  • Tablet e telefono: 5

Ridimensionamento dell'effetto di scorrimento verso l'alto e verso il basso

Successivamente, abiliteremo anche un effetto di ridimensionamento su e giù.

• Abilita ridimensionamento su e giù: Sì
• Scala iniziale: 20%
• Scala media: 100%
• Scala finale: 100%

Modulo divisore clone

Vai avanti e clona l'intero modulo divisore.

Cambia colore linea

Apri il duplicato e cambia il colore della linea.

• Colore linea: #24252d

Modifica spaziatura

Aggiungi anche un margine superiore.

• Margine superiore: -200 px

Modifica effetto scorrimento movimento orizzontale

Quindi, vai alle impostazioni dell'effetto di scorrimento del movimento orizzontale e modifica l'offset finale.

• Scostamento finale:
  • Scrivania: -20
  • Tablet e telefono: -5

Ricrea l'esempio n. 3

Aggiungi imbottitura riga

Al prossimo e ultimo esempio! Inizia aprendo la riga che hai creato nei passaggi generali di questo tutorial e modifica i valori di riempimento nelle impostazioni di spaziatura.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px

Aggiungi modulo divisore n. 1

Visibilità

Aggiungi un nuovo modulo divisore all'ultima riga della tua sezione e nascondi il divisore.

• Mostra divisore: No

Sfondo sfumato

Aggiungi uno sfondo sfumato successivamente.

• Colore 1: #ffa100
• Colore 2: #f77f00
• Tipo di gradiente: lineare
• Direzione del gradiente: 121°

Dimensionamento

Passa alla scheda di progettazione del modulo e modifica le impostazioni di dimensionamento come segue:

• Larghezza: 200 px
• Allineamento del modulo: Centro
• Altezza: 0px

Spaziatura

Successivamente, aggiungeremo un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px

Effetto scorrimento movimento orizzontale

Ora è il momento di aggiungere gli effetti di scorrimento, iniziando con un movimento orizzontale su diverse dimensioni dello schermo.

• Abilita movimento orizzontale: Sì
• Scostamento iniziale: -1 (al 30%)
• Compensazione media: 0
• Scostamento finale:
  • Scrivania: 20
  • Tablet e telefono: 5

Effetto di scorrimento rotante

Completeremo le impostazioni del modulo aggiungendo un effetto di scorrimento rotante.

• Abilita rotazione: Sì
• Rotazione iniziale: 0° (al 46%)
• Rotazione media: 50° (al 75%)
• Rotazione finale: 90°

Modulo divisore clone

Vai avanti e clona l'intero modulo.

Cambia sfumatura di sfondo

Apri le impostazioni del duplicato e modifica i colori dello sfondo sfumato.

• Colore 1: #24252d
• Colore 2: #16161c

Cambia spaziatura

Aggiungi un margine superiore negativo.

• Margine superiore: -100 px

Cambia effetto scorrimento orizzontale

E modifica l'offset finale del movimento orizzontale nelle impostazioni degli effetti di scorrimento.

• Scostamento finale:
  • Scrivania: -20
  • Tablet e telefono: -5

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Esempio #3

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare forme di movimento e usarle per contrassegnare una nuova sezione nella tua pagina Divi. L'utilizzo di questa tecnica aiuterà i visitatori a diventare ancora più consapevoli del fatto che stanno passando a un'altra parte della tua pagina. Gli effetti di movimento che abbiamo ricreato sono sottili e aggiungono interazione al tuo sito web in modo semplice. Sei stato anche in grado di scaricare i file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.