Come creare sovrapposizioni di bordi animati per evidenziare il contenuto con Divi

Cerchi un modo unico per mettere sotto i riflettori una parte specifica della tua pagina? Continua a leggere! Oggi ti mostreremo come creare sovrapposizioni di bordi animati per evidenziare il contenuto della tua pagina. Creeremo tre diverse sovrapposizioni di bordi animati sulla pagina di destinazione dell'App Developer Layout Pack, ma puoi utilizzare questa tecnica per qualsiasi tipo di sito web che stai costruendo. Ti aiuterà sicuramente ad aggiungere una dimensione extra alla tua pagina. Speriamo che questo tutorial ti ispiri a creare anche le tue sovrapposizioni di bordi animate alternative.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato di tutti e tre gli esempi. Puoi aspettarti un risultato simile anche su schermi di dimensioni più piccole.

Esempio 1

Esempio #2

Esempio #3

Iscriviti al nostro canale Youtube

Crea una nuova pagina utilizzando la pagina di destinazione del pacchetto di layout per sviluppatori di app

La prima cosa che devi fare è creare una nuova pagina utilizzando la pagina di destinazione dell'App Developer Layout Pack.

Clona sezione Eroe

I nostri primi due esempi vengono creati nella sezione degli eroi. Se vuoi ricreare entrambi gli esempi, ti consigliamo di clonare la sezione dell'eroe in modo da poter passare al duplicato per ricreare il secondo esempio.

Ricrea l'esempio n. 1

Aggiungi una nuova riga alla sezione Eroe

Struttura della colonna

Iniziamo a ricreare il primo esempio! Aggiungi una nuova riga nella sezione specialità utilizzando la seguente struttura di colonne:

Modulo Aggiungi testo

Lascia la casella del contenuto vuota

Aggiungi un nuovo modulo di testo alla riga e assicurati di lasciare vuota la casella del contenuto. Utilizziamo il modulo per le sue opzioni di progettazione integrate, non per visualizzare contenuti scritti.

Spaziatura

Vai alle impostazioni di spaziatura del modulo di testo e dai una forma al modulo aggiungendo un'imbottitura superiore e inferiore personalizzata. Crea la sovrapposizione tra questo modulo e i moduli precedenti aggiungendo anche un margine superiore negativo.

• Margine superiore: -480 px
• Imbottitura superiore: 223 px
• Imbottitura inferiore: 223 px

Frontiera

Quindi, vai alle impostazioni del bordo del modulo e aggiungi un bordo a tua scelta.

• Larghezza bordo: 9px
• Colore bordo: #0ae2ff
• Stile del bordo: fin dall'inizio

Scatola ombra

Aggiungi anche un'ombra di scatola.

• Forza sfocatura ombra scatola: 1px
• Forza di diffusione dell'ombra della scatola: 15 px
• Colore ombra: rgba (10,226,255,0,59)

Animazione

E gioca con le impostazioni dell'animazione per far risaltare il contenuto.

• Stile di animazione: Flip
• Ripetizione animazione: una volta
• Direzione dell'animazione: destra
• Durata dell'animazione: 1500 ms
• Ritardo animazione: 1500 ms
• Intensità animazione: 500%

Ricrea l'esempio n. 2

Aggiungi una nuova riga alla sezione dell'eroe duplicato

Al secondo esempio! Aggiungi una nuova riga alla sezione dell'eroe duplicato utilizzando la seguente struttura di colonne:

Aggiungi testo Modulo n. 1

Lascia la casella del contenuto vuota

Stiamo, ancora una volta, utilizzando un modulo di testo vuoto.

Spaziatura

Vai alle impostazioni di spaziatura e dai una forma al modulo utilizzando il riempimento superiore e inferiore personalizzato. Fai in modo che si sovrapponga ai moduli precedenti aggiungendo anche un margine superiore negativo.

• Margine superiore: -480 px
• Imbottitura superiore: 223 px
• Imbottitura inferiore: 223 px

Frontiera

Continua aggiungendo un bordo al modulo di testo.

• Larghezza bordo: 9px
• Colore bordo: #0ae2ff
• Stile bordo: doppio

Animazione

E gioca con le impostazioni dell'animazione per creare un effetto rotolante.

• Stile di animazione: Roll
• Ripetizione animazione: una volta
• Direzione dell'animazione: Centro
• Durata dell'animazione: 4500 ms
• Ritardo animazione: 1500 ms
• Intensità animazione: 100%
• Opacità iniziale dell'animazione: 100%

Clona modulo testo

Una volta che hai finito di modificare il primo modulo di testo, vai avanti e clonalo.

Cambia spaziatura

Apri le impostazioni del duplicato e modifica il valore del margine superiore nelle impostazioni di spaziatura.

• Margine superiore: -495 px

Cambia bordo

Modifica anche il colore del bordo.

• Colore bordo: #ededed

Cambia animazione

E modifica le impostazioni dell'animazione per ottenere il risultato che hai visto nell'anteprima di questo post.

• Ripetizione animazione: loop
• Durata dell'animazione: 5000 ms
• Ritardo animazione: 2000 ms

Ricrea l'esempio n. 3

Modifica la spaziatura del modulo immagine nella colonna 2

Al prossimo e ultimo esempio! Passare alla sezione del processo sulla pagina e aggiungere un'imbottitura superiore al modulo immagine contenente la grande illustrazione al centro.

• Margine superiore: 70 px (desktop), 0 px (tablet e telefono)

Aggiungi colore di sfondo ai moduli di testo esistenti

Continua aggiungendo un colore di sfondo bianco a ciascuno dei moduli di testo nella prima e nella terza colonna.

• Colore di sfondo: #ffffff

Aggiungi modulo di testo alla colonna 1

Lascia la casella del contenuto vuota

Ora possiamo iniziare ad aggiungere la prima sovrapposizione animata del bordo! Aggiungi un nuovo modulo di testo alla prima colonna (vedi schermata di stampa) e assicurati di lasciare vuota la casella del contenuto.

Spaziatura

Vai alle impostazioni di spaziatura del modulo di testo e crea la forma e sovrapponi utilizzando margini personalizzati e valori di riempimento.

• Margine superiore: -230 px
• Margine sinistro: 80px
• Margine destro: 100 px
• Imbottitura superiore: 120 px
• Imbottitura inferiore: 120 px

Frontiera

Aggiungi un bordo successivo.

• Larghezza bordo: 13 px
• Colore bordo: #bcf5f3
• Stile bordo: doppio

Animazione

Continua aggiungendo un'animazione a tua scelta che ti aiuterà a evidenziare il contenuto che stai condividendo.

• Stile di animazione: piega
• Ripetizione animazione: una volta
• Direzione dell'animazione: destra
• Intensità animazione: 100%

Indice Z

Per assicurarci che i bordi appaiano sotto il contenuto, utilizzeremo un valore negativo per l'indice Z del modulo di testo contenente le impostazioni dei bordi.

• Indice Z: -1

Clona modulo testo e posiziona alla fine della colonna 1

Una volta che hai finito di creare e modificare il modulo di testo, vai avanti e clonalo. Posiziona il duplicato alla fine della prima colonna.

Cambia bordo

Cambia il colore del bordo.

• Colore bordo: #ffc0ec

Cambia animazione

E aggiungi anche un ritardo di animazione.

• Ritardo animazione: 1000 ms

Aggiungi modulo di testo alla colonna 3

Lascia la casella del contenuto vuota

Continua aggiungendo un modulo di testo alla terza colonna (vedi schermata di stampa) e assicurati di lasciare vuota la casella del contenuto.

Spaziatura

Passa alle impostazioni di spaziatura e crea la forma e la sovrapposizione utilizzando margini personalizzati e valori di riempimento.

• Margine superiore: -230 px
• Margine sinistro: 100 px
• Margine destro: -80 px
• Imbottitura superiore: 120 px
• Imbottitura inferiore: 120 px

Frontiera

Aggiungi un bordo a tua scelta dopo.

• Larghezza bordo: 13 px
• Colore bordo: #7479ff
• Stile bordo: doppio

Animazione

Insieme a un'animazione che include un ritardo dell'animazione superiore a quelli dati ai due precedenti moduli di testo.

• Stile di animazione: piega
• Ripetizione animazione: una volta
• Direzione animazione: Sinistra
• Ritardo animazione: 2000 ms
• Intensità animazione: 100%

Indice Z

Assicurati che il modulo appaia sotto il contenuto utilizzando un indice Z negativo.

• Indice Z: -1

Clona modulo testo e posiziona alla fine della colonna 3

Una volta che hai finito di aggiungere e modificare il modulo di testo, clonalo e posiziona il duplicato alla fine della terza riga.

Cambia bordo

Cambia il colore del bordo del duplicato.

• Colore bordo: #b3d1ff

Cambia animazione

Aggiungi un po' di ritardo all'animazione e il gioco è fatto!

• Ritardo animazione: 3000 ms

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato di tutti e tre gli esempi che abbiamo ricreato in questo tutorial.

Esempio 1

Esempio #2

Esempio #3

Pensieri finali

In questo post, ti abbiamo mostrato come mettere i tuoi contenuti sotto i riflettori usando sovrapposizioni di bordi animati. Questa è un'ottima tecnica per attirare l'attenzione su una parte specifica della tua pagina e farlo anche in modo elegante. Puoi usare questa tecnica per qualsiasi tipo di sito web che stai costruendo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!