Come creare una sezione animata per eroi con contenuti suddivisi per dispositivi mobili con Divi

Creare una sezione degli eroi che si distingua è davvero importante. E non solo dovrebbe distinguersi, ma dovrebbe anche essere suddiviso in più elementi che potenziano la chiamata all'azione che è lì. La struttura di facile comprensione delle sezioni degli eroi a contenuto diviso li rende molto popolari e utilizzati frequentemente tra diversi tipi di siti Web.

E mentre creare sezioni di eroi a contenuto diviso per desktop è semplice, renderle per schermi di dimensioni più piccole potrebbe non esserlo. Ecco dove questo tutorial tornerà utile. Ricreeremo una sezione degli eroi divisa per dispositivi mobili altamente interattiva che non solo avrà un bell'aspetto sui dispositivi mobili, ma su tutte le diverse dimensioni dello schermo. Stiamo anche combinando alcune fantastiche animazioni per far sì che lo stile di design corrisponda perfettamente al 2019. Ci auguriamo che questo tutorial ti ispiri a creare le tue sezioni di eroi a contenuto diviso per dispositivi mobili.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di diverse dimensioni.

Mobile

Desktop

Iniziamo a ricreare!

Aggiungi nuova sezione

Spaziatura

Inizia creando una nuova pagina o aprendone una esistente. Aggiungi una nuova sezione normale, vai alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo completamente nero.

• Colore di sfondo: #000000

Colore di sfondo della colonna 1

Aggiungi anche un colore di sfondo nero alla prima colonna.

• Colore di sfondo della colonna 1: #000000

Colore di sfondo della colonna 2

Stessa cosa per la seconda colonna.

• Colore di sfondo della colonna 2: #000000

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e consenti alla riga e alle sue colonne di occupare l'intera larghezza dello schermo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Stiamo anche rimuovendo tutto il riempimento superiore e inferiore predefinito della riga.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura destra: 1vw

Schermo

Ultimo ma non meno importante, faremo in modo che entrambe le colonne appaiano una accanto all'altra anche su schermi di dimensioni più piccole. Per fare ciò, dovremo aggiungere una singola riga di codice CSS alla scheda avanzata della riga.

display: flex;

Aggiungi modulo immagine alla colonna 1

Lascia la casella immagine vuota

È ora di aggiungere tutti i diversi moduli di cui abbiamo bisogno! Inizia con il modulo immagine nella prima colonna. Invece di caricare un'immagine nella casella dell'immagine, nei prossimi passaggi caricheremo l'immagine nelle impostazioni dello sfondo. Questo ci permetterà di giocare con come è posizionata l'immagine e quanto spazio occupa nella nostra riga.

Aggiungi colore di sfondo

Vai alle impostazioni dello sfondo del modulo immagine e aggiungi un colore di sfondo. Nel passaggio successivo, combineremo questo colore di sfondo e un'immagine di sfondo utilizzando un effetto di fusione per scurire l'immagine.

• Colore di sfondo: #686868

Aggiungi immagine di sfondo

Aggiungi un'immagine di sfondo a tua scelta e modifica le impostazioni di sfondo di conseguenza:

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione
• Miscela immagine di sfondo: Moltiplica

Dimensionamento

Abbiamo usato due colonne di uguali dimensioni per la riga su cui stiamo lavorando, ma il risultato non sembra tale. Cambieremo manualmente la dimensione di ogni modulo che aggiungiamo per far sembrare che stiamo usando una struttura di colonne diversa. Il motivo per cui lo stiamo facendo (invece di scegliere semplicemente un'altra struttura a colonne) è rendere tutto bello e reattivo anche su schermi di dimensioni più piccole. Vai alle impostazioni di dimensionamento del modulo immagine e modifica la larghezza.

• Larghezza: 88%
• Allineamento del modulo: a sinistra

Spaziatura

Ora possiamo decidere la dimensione della nostra immagine nelle impostazioni di spaziatura. Utilizziamo anche un'unità di visualizzazione per questi valori per assicurarci che il nostro design rimanga completamente reattivo su tutte le dimensioni dello schermo.

• Imbottitura superiore: 26.3vw (desktop), 48vw (tablet), 72vw (telefono)
• Imbottitura inferiore: 26.3vw (desktop), 48vw (tablet), 72vw (telefono)

Animazione

Ultimo ma non meno importante, aggiungeremo un'animazione di diapositive al nostro modulo immagine. Una volta applicata l'animazione, noterai che l'immagine inizierà a essere visualizzata solo dal momento in cui entrerà nella prima colonna. Il colore di sfondo della seconda colonna rimane in cima al modulo immagine mentre scorre verso sinistra.

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione animazione: Sinistra
• Durata dell'animazione: 1450 ms
• Intensità animazione: 60%
• Opacità iniziale dell'animazione: 100%

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Il modulo successivo di cui abbiamo bisogno nella colonna 1 è un modulo pulsante. Inserisci una copia a tua scelta.

Impostazioni dei pulsanti

Quindi, vai alla scheda Design e modifica le impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 1.5vw (desktop), 2.5vw (tablet), 4vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #e02b20
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 1px
• Carattere pulsante: Poppins
• Peso del carattere: pesante

Spaziatura

Modifica anche i valori di spaziatura.

• Margine superiore: -3.3vw (desktop), -6vw (tablet), -9.1vw (telefono)
• Imbottitura sinistra: 8vw
• Imbottitura destra: 8vw

Scatola ombra

E aggiungi un'ombra sottile per creare un po' di profondità sulla pagina.

• Forza sfocatura ombra scatola: 20 px
• Colore ombra: rgba(0,0,0,0.27)

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto H1

Alla seconda colonna! Il primo modulo di cui avremo bisogno è un modulo di testo. Aggiungi alcuni contenuti H1 a tua scelta.

Impostazioni testo H1

Quindi, vai alla scheda Design e modifica le impostazioni del testo H1.

• Carattere dell'intestazione: Poppins
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione: 4vw (desktop), 5vw (tablet), 6vw (telefono)

Spaziatura

Cambia anche i valori di spaziatura.

• Margine superiore: 12vw
• Margine sinistro: -20vw
• Margine destro: 17vw (desktop), 15vw (tablet), 1vw (telefono)

Animazione

E aggiungi un'animazione sottile.

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione animazione: Giù
• Durata dell'animazione: 1450 ms
• Intensità animazione: 10%
• Opacità iniziale dell'animazione: 100%

Aggiungi modulo divisore alla colonna 2

Visibilità

Il modulo successivo di cui abbiamo bisogno nella seconda colonna è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Colore

Quindi, vai alla scheda Design e cambia il colore del divisore.

• Colore: #e02b20

Animazione

Aggiungi un'animazione al modulo divisore successivo.

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione dell'animazione: destra
• Durata dell'animazione: 1450 ms
• Intensità animazione: 83%
• Opacità iniziale dell'animazione: 100%

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Al prossimo e ultimo modulo di cui abbiamo bisogno nella seconda colonna! Aggiungi una descrizione a tua scelta.

Impostazioni testo

Quindi, vai alle impostazioni del testo nella scheda Progettazione e apporta alcune modifiche di conseguenza:

• Carattere del testo: Poppins
• Peso del carattere del testo: leggero
• Colore del testo: #919191
• Dimensione del testo: 0.7vw (desktop), 1.8vw (tablet), 2.2vw (telefono)
• Spaziatura delle lettere del testo: 0.1vw
• Altezza riga di testo: 2,2 em

Spaziatura

Modifica anche i valori di spaziatura.

• Margine superiore: 9vw (desktop), 19vw (tablet), 23vw (telefono)
• Margine inferiore: 12vw (desktop), 19vw (tablet), 23vw (telefono)
• Margine sinistro: -3vw
• Margine destro: 20vw (desktop), 6vw (tablet), 3vw (telefono)

Animazione

Ultimo ma non meno importante, aggiungi un'animazione di dissolvenza al modulo e il gioco è fatto!

• Stile di animazione: dissolvenza
• Ripetizione animazione: una volta
• Durata dell'animazione: 1450 ms
• Ritardo animazione: 1000 ms
• Opacità iniziale dell'animazione: 0%

Anteprima

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

Mobile

Desktop

Pensieri finali

In questo post, ti abbiamo mostrato come creare straordinarie sezioni di eroi a contenuto diviso utilizzando Divi. Le sezioni degli eroi a contenuto diviso sono molto popolari e utilizzate frequentemente sul Web, ma è importante assicurarsi che siano anche altamente reattive. Speriamo che questo tutorial ti aiuti a creare sezioni di eroi a contenuto diviso per dispositivi mobili per i prossimi siti Web che creerai! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!