Come creare un bellissimo contorno animato per ogni contenitore con Divi

Le opzioni di animazione di Divi hanno contribuito a dare vita a tonnellate di siti Web senza la necessità di codice personalizzato. Le impostazioni di animazione integrate sono altamente regolabili e ti consentono di creare design davvero unici. Una delle cose che puoi fare, ad esempio, è creare un contorno animato del contenitore. Questo è esattamente ciò che ti mostreremo in questo post. Aggiungeremo un bordo a ciascun contenitore e aggiungeremo impostazioni di animazione che corrispondono al flusso di ciascun elemento. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su tutte le dimensioni dello schermo.

Desktop

Mobile

Scarica GRATUITAMENTE il layout della struttura animata

Per mettere le mani sul layout di contorno animato 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!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare

Aggiungi nuova sezione

Colore di sfondo

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando e usa un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Spaziatura

Passa alla scheda Design e aggiungi margini personalizzati e valori di riempimento.

• Margine superiore: 3vw
• Margine inferiore: 3vw
• Margine sinistro: 3vw
• Margine destro: 3vw
• Imbottitura superiore: 3vw
• Imbottitura inferiore: 3vw

Frontiera

Apri le impostazioni del bordo e aggiungi "2vw" a ciascuno degli angoli. Usa anche un bordo.

• Larghezza bordo: 1px
• Colore bordo: #000000

Animazione

Aggiungi anche un'animazione personalizzata.

• Stile di animazione: diapositiva
• Direzione animazione: Giù
• Opacità iniziale dell'animazione: 100%

Visibilità

Per assicurarci che nulla superi il contenitore della sezione, nasconderemo gli overflow nelle impostazioni di visibilità della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi nuova riga

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 della riga e modifica le impostazioni di dimensionamento di conseguenza:

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

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 3vw
• Imbottitura inferiore: 3vw
• Imbottitura sinistra: 3vw
• Imbottitura destra: 3vw

Frontiera

Passa alle impostazioni del bordo e aggiungi "2vw" a ciascuno degli angoli. Aggiungi anche un bordo.

• Larghezza bordo: 1px
• Colore bordo: #000000

Animazione

Stiamo anche aggiungendo un'animazione alla riga.

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Ritardo animazione: 500 ms
• Opacità iniziale dell'animazione: 100%

Visibilità

E per assicurarci che l'animazione della colonna (che aggiungeremo in seguito) funzioni, renderemo visibile l'overflow della riga.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Impostazioni colonna 1

Continua aprendo le impostazioni della prima colonna.

Frontiera

Vai alla scheda design, aggiungi "2vw" a ciascuno degli angoli e usa un bordo.

• Larghezza bordo: 1px
• Colore bordo: #000000

Animazione

Completa le impostazioni della colonna aggiungendo un'animazione personalizzata.

• Stile di animazione: diapositiva
• Direzione animazione: Giù
• Ritardo animazione: 1000 ms
• Opacità iniziale dell'animazione: 100%

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Il primo di cui abbiamo bisogno è un modulo Blurb. Inserisci alcuni contenuti a tua scelta.

Seleziona icona

Seleziona un'icona successiva.

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona di conseguenza:

• Colore icona: #000000
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 6vw (desktop), 8vw (tablet), 10vw (telefono)

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Carattere del titolo: Poppins
• Peso del carattere del titolo: Ultra grassetto
• Allineamento del testo del titolo: al centro
• Dimensione del testo del titolo: 1.2vw (desktop), 2.5vw (tablet), 3vw (telefono)

Impostazioni del corpo del testo

Insieme alle impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Allineamento del corpo del testo: Centro
• Dimensioni del corpo del testo: 0.8vw (desktop), 1.7vw (tablet), 2.3vw (telefono)

Spaziatura

Crea un po' di spazio attorno al modulo Blurb aggiungendo valori di spaziatura personalizzati su schermi di diverse dimensioni.

• Margine superiore: 3vw
• Margine inferiore: 3vw
• Margine sinistro: 3vw
• Margine destro: 3vw
• Imbottitura superiore: 10vw (desktop), 18vw (tablet e telefono)
• Imbottitura inferiore: 10vw (desktop), 18vw (tablet e telefono)
• Imbottitura sinistra: 2vw (desktop), 8vw (tablet e telefono)
• Imbottitura destra: 2vw (desktop), 8vw (tablet e telefono)

Frontiera

Passa alle impostazioni del bordo, aggiungi "2vw" a ciascuno degli angoli e usa un bordo.

• Larghezza bordo: 1px
• Colore bordo: #000000

Animazione

Completa il design del modulo Blurb aggiungendo un'animazione personalizzata.

• Stile di animazione: diapositiva
• Direzione animazione: Giù
• Durata dell'animazione: 1300 ms
• Ritardo animazione: 1200 ms
• Intensità animazione: 60%
• Opacità iniziale dell'animazione: 100%
• Animazione icona: nessuna animazione

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Passa al modulo successivo e ultimo, che è un modulo pulsante. Inserisci una copia a tua scelta.

Allineamento

Passa alla scheda Progettazione e modifica l'allineamento.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Modificare le impostazioni del pulsante successivamente.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.8vw (desktop), 1.5vw (tablet), 2.2vw (telefono)
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #FFFFFF
• Larghezza bordo pulsante: 1px
• Colore bordo pulsante: #000000
• Raggio del bordo del pulsante: 50vw
• Carattere pulsante: Open Sans
• Peso del carattere del pulsante: Ultra grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

E modella il modulo pulsanti utilizzando valori di spaziatura personalizzati su diverse dimensioni dello schermo.

• Margine superiore: -5vw (desktop), -6.5vw (tablet), -7vw (telefono)
• Margine inferiore: 2vw (desktop), 3vw (tablet e telefono)
• Imbottitura superiore: 1vw (desktop), 2vw (tablet e telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet e telefono)
• Imbottitura sinistra: 5vw (desktop), 8vw (tablet e telefono)
• Imbottitura destra: 5vw (desktop), 8vw (tablet e telefono)

Animazione

Completa il design del modulo pulsanti aggiungendo un'animazione personalizzata.

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Ritardo animazione: 1400 ms
• Intensità animazione: 200%
• Opacità iniziale dell'animazione: 100%

Rimuovi la colonna 2 e clona la colonna 1

Una volta completata la colonna 1 e i moduli in essa contenuti, puoi eliminare la seconda colonna (vuota) e clonare la prima. Modifica tutti i contenuti del modulo Blurb in modo che corrispondano al tuo sito web e il gioco è fatto!

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 utilizzare le impostazioni di animazione di Divi in ​​combinazione con i vari contenitori che Divi ti fornisce e le loro impostazioni dei bordi. Speriamo che questo tutorial ti ispiri a creare anche le tue varianti di questa tecnica! Se hai domande, assicurati di 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.