Come combinare le sovrapposizioni con le opzioni adesive di Divi per creare transizioni senza sforzo

Mentre la tecnologia continua ad evolversi, anche il design si evolve. Più che mai, puoi imbatterti in siti web che ti lasciano stupito e ti chiedi come sono stati creati. Sebbene i siti Web con interazioni di scorrimento in corso non siano adatti a tutti i tipi di attività, sapere come fare il possibile è particolarmente utile per lasciare una buona impressione. Con Divi, molte cose sono già possibili senza dover toccare una sola riga di codice. Il tutorial di oggi ti aiuta a capire Divi da un'altra prospettiva. Ti mostreremo come combinare le opzioni permanenti di Divi con altre impostazioni integrate per creare transizioni senza sforzo. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, dovrai prima scaricarlo 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!

1. Ricrea la struttura del progetto

Aggiungi nuova sezione

Spaziatura

Nella prima parte di questo tutorial, ci concentreremo sulla ricreazione della struttura del design all'interno di Divi. Quindi, nella seconda parte, passeremo del tempo a esaminare tutte le opzioni adesive per ottenere l'effetto che puoi notare nell'anteprima di questo post. Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione, vai alla scheda Design e aggiungi un po' di imbottitura in basso.

• Imbottitura inferiore: 100vh

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni della riga, vai alla scheda design e modifica le impostazioni di dimensionamento di conseguenza:

• Larghezza: 90%
• Larghezza massima: 100%

Indice Z

Assegna anche un indice az a questa riga.

• Indice Z: 1

Aggiungi modulo immagine alla colonna

Lascia la casella immagine vuota

È ora di aggiungere moduli, a partire da un modulo immagine. Lascia vuota la casella del contenuto.

Usa invece l'immagine di sfondo

E usa invece un'immagine di sfondo a tua scelta.

• Dimensione immagine di sfondo: copertina

Dimensionamento

Modificare successivamente la larghezza del modulo.

• Larghezza: 100%

Spaziatura

Quindi, applica un'imbottitura personalizzata superiore e inferiore alle impostazioni di spaziatura.

• Imbottitura superiore: 40vh
• Imbottitura inferiore: 40vh

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

Passa al modulo successivo, che è un modulo di testo contenente alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

Modificare di conseguenza le impostazioni del testo H2 del modulo:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #ffffff
• Intestazione 2 Dimensione del testo:
  • Desktop: 10vw
  • Tablet: 14vw
  • Telefono: 15vw
• Spaziatura delle lettere dell'intestazione 2: -0,5 vw

Dimensionamento

Assicurati che anche il modulo sia "100%".

• Larghezza: 100%

Posizione

E riposiziona il modulo nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: Centro

Aggiungi riga #2

Struttura della colonna

Alla prossima riga. Utilizzare la seguente struttura a colonne:

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni della riga, vai alla scheda design e modifica le impostazioni di dimensionamento come segue:

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

Indice Z

Assegna un indice az anche a questa riga.

• Indice Z: 2

Spaziatura colonna 1

Completa le impostazioni della riga aprendo le impostazioni della prima colonna e assegnando del padding sinistro e destro.

• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto H3

Ora che le impostazioni della riga sono a posto, è il momento di aggiungere i moduli. Aggiungi un modulo di testo alla colonna 1 con alcuni contenuti H3 a tua scelta.

Impostazioni testo H3

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 di conseguenza:

• Intestazione 3 Carattere: Montserrat
• Intestazione 3 Stile carattere: sottolineato
• Colore sottolineatura titolo 3: #ffffff
• Intestazione 3 Stile sottolineato: solido
• Colore testo titolo 3: #ffffff
• Intestazione 3 Dimensione del testo:
  • Desktop: 4vw
  • Tablet e telefono: 10vw
• Intestazione 3 spaziatura lettere: -3px

Spaziatura

Aggiungi un po' di imbottitura corretta su schermi di dimensioni più piccole.

• Imbottitura destra: 20% (solo tablet e telefono)

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo di testo alla colonna 2 con un contenuto descrittivo a tua scelta.

Colore di sfondo

Cambia il colore di sfondo successivo.

• Colore di sfondo: #ffffff

Impostazioni testo

Quindi, modifica le impostazioni del testo come segue:

• Carattere di testo: display Playfair
• Stile del carattere del testo: corsivo
• Dimensione del testo:
  • Desktop: 1.6vw
  • Tablet: 3vw
  • Telefono: 4vw
• Altezza riga di testo: 1,5 em

Spaziatura

Applica anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 10vh
• Imbottitura inferiore: 10vh
• Imbottitura sinistra: 10%
• Imbottitura destra: 10%

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Il prossimo e ultimo modulo che aggiungeremo è un modulo pulsante alla colonna 2. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

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

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante:
  • Desktop: 1.2vw
  • Tablet: 2.5vw
  • Telefono: 3.5vw
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Carattere pulsante: Montserrat

• Stile carattere pulsante: sottolineato
• Colore sottolineatura pulsante: #000000
• Stile di sottolineatura del pulsante: solido

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Posizione

E riposiziona il modulo nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: in basso a destra

2. Applica effetti appiccicosi

Modulo immagine nella riga n. 1

Impostazioni permanenti

Ora che abbiamo gettato le basi del nostro design, è il momento di iniziare ad applicare gli effetti adesivi personalizzati. Apri il modulo immagine nella riga n. 1 e trasforma il modulo appiccicoso come segue:

• Posizione appiccicosa: bastone in alto
• Limite appiccicoso inferiore: sezione
• Offset dagli elementi appiccicosi circostanti: No

Dimensionamento appiccicoso

Una volta applicate le impostazioni permanenti, possiamo anche modificare gli stili permanenti del nostro modulo. La prima cosa che faremo è cambiare la larghezza in uno stato appiccicoso.

• Larghezza adesiva: 80%

Spaziatura appiccicosa

Successivamente, modificheremo l'imbottitura superiore e inferiore adesiva.

• Imbottitura superiore adesiva: 50vh
• Imbottitura inferiore adesiva: 50vh

Sfondo sfumato appiccicoso

Applicheremo anche uno sfondo sfumato appiccicoso al nostro modulo.

• Colore 1: #00336b
• Colore 2: RGB (41,196,169,0)
• Tipo di gradiente: lineare
• Direzione gradiente: 90 gradi
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Transizione

E per garantire una transizione graduale, aumenteremo la durata della transizione del modulo.

• Durata della transizione: 1500 ms

Colonna 2 nella riga #2

Colonna 2 Impostazioni permanenti

Successivamente, renderemo appiccicosa anche la seconda colonna della nostra seconda riga.

• Posizione appiccicosa: bastone in alto
• Offset superiore appiccicoso: 150 px
• Limite appiccicoso inferiore: sezione
• Offset dagli elementi appiccicosi circostanti: No
• Stili di transizione predefiniti e permanenti: No

Modulo di testo in colonna adesiva

Colore di sfondo appiccicoso

Ora che la colonna 2 della riga n. 2 è diventata appiccicosa, possiamo applicare alcuni stili appiccicosi al modulo di testo all'interno di questa colonna. Inizia cambiando il colore di sfondo in uno stato appiccicoso.

• Colore di sfondo appiccicoso: #333333

Colore del testo appiccicoso

Quindi, modifica il colore del testo in uno stato permanente.

• Colore del testo adesivo: #ffffff

Transizione

E completa le impostazioni del modulo aumentando la durata della transizione nella scheda Avanzate. Questo è tutto!

• Durata della transizione: 1000 ms

Anteprima

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

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come essere creativo con le opzioni adesive di Divi. Più specificamente, ti abbiamo mostrato come combinare le sovrapposizioni con le opzioni adesive di Divi per creare transizioni senza sforzo. Una volta ottenuto l'approccio utilizzato in questo tutorial, sarai in grado di creare infinite varianti diverse. 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 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.