Le sezioni degli eroi sono sempre considerate un ottimo strumento per catturare l'attenzione dei visitatori. Inoltre, ha inconsciamente dato un tono al sito web nella loro mente. Quindi avere una sezione di eroi creativi è una benedizione per il business. Divi è un meraviglioso generatore di temi e pagine per WordPress e offre molte opportunità per rendere bella la sezione degli eroi del tuo sito web. In precedenza abbiamo visto come progettare una sezione eroe appiccicosa su scorrimento e oggi vedremo come progettare una sezione eroe in cui ci sarà una griglia di immagini segreta che verrà svelata attraverso lo scorrimento. Sembra eccitante, vero?
Passiamo subito al tutorial.
Sneak Peak
Questo sarà il design che creeremo oggi e questo sarà completamente responsive.
Vista desktop
Visualizzazione mobile
Progettare la sezione Eroe
Apri una nuova pagina dalla dashboard di WordPress. Nominalo come preferisci e aprilo con Divi builder.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti ora
Aggiunta: Nuova Sezione
Colore di sfondo
Aggiungeremo un colore di sfondo alla nostra sezione iniziale. Apri le impostazioni per la sezione e aggiungi il Colore di sfondo.
- Colore di sfondo: #111111
Spaziatura
Ora passa alla scheda Design della sezione e apporta alcune modifiche al riempimento inferiore perché ci darà più spazio per avere un'esperienza di scorrimento migliore.
- Imbottitura inferiore: 120vh
Aggiunta: riga uno
Struttura della colonna
Ora aggiungeremo una nuova riga alla sezione preparata. Segui la struttura delle colonne mostrata.
Dimensionamento
Ora, prima di aggiungere altri moduli, apri l'impostazione della riga e modifica i seguenti valori dalla scheda di progettazione.
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 2
- Larghezza: 100%
- Larghezza massima: 2580 px
Spaziatura
Ora aggiungi un margine in alto.
- Margine superiore: desktop: 10 vh, tablet e telefono: 5 vh
Indice Z
Per mantenere la nostra sequenza di progettazione, dobbiamo mantenere questa riga sotto la seconda riga. Ecco perché aggiungeremo alcuni valori dell'indice Z.
- Indice Z: 10
Tutte le impostazioni della colonna
Come abbiamo finito con le impostazioni della riga uno, ora apri le impostazioni per ogni colonna e apporta le modifiche spiegate di seguito.
Elemento principale CSS
Questo codice CSS è solo per dispositivi mobili. Assicurati di aggiungerli singolarmente a ciascuna colonna.
width: 50% !important;
margin: 0 !important;
Impostazioni colonna 2
Indice Z
Quindi, apri le impostazioni della colonna 2 e aggiungi il valore dell'indice Z. Questo porterà la colonna su quella successiva.
- Indice Z: 12
Aggiunta: modulo immagine alla colonna 1
Carica immagine
Ora aggiungeremo un modulo immagine alla colonna 1 e caricheremo un'immagine a nostra scelta.
Spaziatura
Dalla scheda Progettazione del modulo e modificare le impostazioni di spaziatura.
- Margine inferiore: tablet e telefono: 10 pixel
- Margine destro: tablet e telefono: 2%
Clona modulo immagine e riempi le colonne rimanenti
Poiché abbiamo appena terminato le impostazioni del modulo, duplichiamo l'intero modulo tre volte e lo posizioniamo sulle colonne rimanenti.
Ora cambia le immagini dal resto delle colonne.
Modifica le impostazioni di spaziatura per l'immagine 2 e 4
Quindi, apri le impostazioni dei moduli immagine nelle colonne 2 e 4 e applica loro i seguenti valori di spaziatura:
- Margine inferiore: tablet e telefono: 10 pixel
- Margine sinistro: tablet e telefono: 2%
- Margine destro: /
Aggiunta: riga due
Struttura della colonna
Ora aggiungi una nuova riga alla nostra sezione principale.
Sfondo sfumato
Ora applicheremo uno sfondo sfumato a questa riga appena creata. Quindi, apri l'impostazione e applica lo sfondo
- Colore 1: #111111
- Colore 2: RGB (255,255,255,0)
Dimensionamento
Modificare le impostazioni di dimensionamento successivamente.
- Larghezza: 100%
- Larghezza massima: 2580 px
Spaziatura
Quindi, aggiungi un po 'di imbottitura nella parte superiore e inferiore.
- Imbottitura superiore: 20vh
- Imbottitura inferiore: 20vh
Posizione
Ora, poiché vogliamo posizionare la seconda riga sulla prima, dobbiamo impostare le impostazioni di posizione di conseguenza.
- Posizione: Assoluta
- Posizione: in alto al centro
- Indice Z: 12
Aggiunta: modulo di testo a colonna
Aggiungi contenuto H1
Ora aggiungi un modulo di testo e alcuni contenuti a tua scelta alla colonna.
Impostazioni testo H1
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 di conseguenza:
- Carattere dell'intestazione: Kumbh Sans
- Peso del carattere dell'intestazione: grassetto
- Stile carattere intestazione: maiuscolo
- Allineamento del testo dell'intestazione: al centro
- Colore del testo dell'intestazione: #ffdbaa
- Dimensione del testo dell'intestazione: desktop: 120 px, tablet: 60 px e telefono: 40 px
- Spaziatura delle lettere dell'intestazione: Desktop: -3px, Tablet e telefono: 0px
- Ombra del testo dell'intestazione: Seleziona: Terza opzione e Colore dell'ombra del testo dell'intestazione: rgba(0,0,0,0.4)
Dimensionamento
Ora regola l'allineamento del modulo e la larghezza massima dalle impostazioni di dimensionamento.
- Larghezza massima: 1070 px
- Allineamento del modulo: Centro
Aggiunta:; Modulo pulsante
Aggiungi copia
Il modulo finale che aggiungeremo in questa riga è un modulo utton. Scrivi qualcosa in base alle tue necessità.
Allineamento dei pulsanti
Dalla scheda Design e modifica l'allineamento del pulsante.
- Allineamento dei pulsanti: centro
Impostazioni dei pulsanti
Quindi, modella il pulsante.
- Usa stili personalizzati per pulsante: Sì
- Dimensioni del testo del pulsante: desktop: 20 pixel, tablet: 16 pixel e telefono: 14 pixel
- Dimensione del testo del pulsante: #111111
- Colore di sfondo del pulsante: #ffffff
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 100 px
- Carattere pulsante: Kumbh Sans
- Peso del carattere del pulsante: grassetto
Spaziatura
Aggiungi i valori di riempimento dalle impostazioni di spaziatura.
- Imbottitura superiore: desktop e tablet: 20 pixel, telefono: 15 pixel.
- Imbottitura inferiore: desktop e tablet: 20 pixel, telefono: 15 pixel.
- Imbottitura sinistra: desktop e tablet: 50 pixel, telefono: 40 pixel.
- Imbottitura destra: desktop e tablet: 50 pixel, telefono: 40 pixel.
Impostazioni permanenti nella sezione Eroe
Impostazioni permanenti della prima riga
Ora il nostro design è terminato ed è il momento di concentrarci sulle impostazioni permanenti. Le seguenti impostazioni permanenti verranno applicate alla prima riga, quindi apri le impostazioni della prima riga.
- Posizione appiccicosa: bastone in alto
- Limite appiccicoso inferiore: sezione
- Offset da elementi appiccicosi circostanti: Sì
- Stili di transizione predefiniti e permanenti: Sì
Opacità appiccicosa
Quindi, modifica l'opacità nelle impostazioni dei filtri.
- Predefinito: 20%
- Appiccicoso: 100%
Modulo immagine Un'impostazione permanente
Spaziatura
Dalle impostazioni del modulo immagine, vai alla scheda Progettazione e aggiungi una spaziatura adesiva.
- Margine superiore permanente: -20%
- Margine destro fisso: -20%
Transizione
Aumenta anche la durata della transizione.
- Durata della transizione: 700 ms
Modulo immagine Due impostazioni permanenti
Spaziatura
Dalle impostazioni del modulo immagine 2, apporta anche alcune regolazioni sulla spaziatura.
- Margine superiore permanente: 20%
- Margine sinistro permanente: -30%
Transizione
Aumenta anche qui la durata della transizione.
- Durata della transizione: 1000 ms
Modulo immagine Tre spaziatura adesiva
Spaziatura
Ora per il terzo modulo immagine, usa i seguenti valori di spaziatura adesiva:
- Margine superiore permanente: -10%
- Margine sinistro permanente: -25%
- Margine destro fisso: -25%
Transizione
Regola la durata della transizione di conseguenza:
- Durata della transizione: 700 ms
Modulo immagine Quattro spaziatura adesiva
Spaziatura
Ora apri l'ultimo modulo immagine e apporta le modifiche.
- Margine superiore permanente: -20%
- Margine sinistro permanente: -30%
Transizione
Ora termina il lavoro di oggi aumentando la durata della transizione per il quarto modulo immagine.
- Durata della transizione: 1000 ms
E abbiamo finito! Salva ed esci dalla pagina per vedere il risultato del nostro design di oggi.
Sguardo finale
Quindi ecco il nostro design di oggi. Lo sfondo sfumato della seconda riga si sposta verso l'alto scorrendo e le immagini della prima riga vengono visualizzate mentre impostiamo i valori. In questo modo sembra più interattivo.
Vista desktop
Visualizzazione mobile
Conclusione
Nel tutorial di oggi, abbiamo cercato di mostrarti come puoi innovare in modo creativo nella sezione degli eroi di un sito Web utilizzando le opzioni permanenti di Divi . Ci auguriamo che tu possa trovare utile il tutorial. Puoi condividere il post in modo che anche altri possano trarne vantaggio. Grazie per aver letto questo messaggio.
