Vorresti creare una sezione Hero Divi con il modulo Fullwidth Header o progettarne una tu stesso?
Costruisci una sezione eroe di sito web da zero o utilizzando il modulo Divi Fullwidth Header sono i due modi per creare un design accattivante per il tuo sito web.
In questo articolo, esamineremo i pro ei contro dell'utilizzo di un modulo di intestazione a larghezza intera rispetto alla creazione della propria sezione Eroe con Divi.
Andiamo!
L'importanza delle sezioni Hero del sito web
Una sezione Hero è la primissima sezione che il tuo Visitatori vedi quando arrivano sul tuo sito web. Questo è spesso un banner a larghezza intera e può anche essere chiamato Hero Header. È un posto di rilievo sul tuo sito web perché ha il potere di lasciare una prima impressione duratura.
Leggi anche: Divi: come visualizzare il modulo di intestazione a larghezza intera a schermo intero
È quindi importante che sia progettato in modo tale che sia facile da leggere pur rimanendo accattivante e avvincente. Le sezioni Website Hero sono importanti perché possono attirare l'attenzione di potenziali clienti, descrivere rapidamente una pagina e portare a ulteriore coinvolgimento e potenziali lead. Le sezioni Hero dovrebbero essere brandizzate, includere un titolo H1 e un CTA.
Crea una sezione Hero da zero
Progettare una sezione Eroe da zero ti consente di avere il controllo completo sul design e contenuto. A seconda della tua situazione e delle tue esigenze, questa potrebbe essere un’ottima soluzione per il tuo sito web.
Diamo un'occhiata ai pro e ai contro di questo approccio.
Vantaggi di questo approccio
Innanzitutto, diamo un'occhiata ai vantaggi della creazione di una sezione Hero del sito Web da zero utilizzando Divi.
- Controllo completo del design
- Usa qualsiasi modulo Divi
Svantaggi di questo approccio
Ora diamo un'occhiata agli svantaggi della creazione di una sezione eroi da zero.
- Devi costruire da zero
- Richiede più mod
Crea una sezione Hero con il modulo Divi Fullwidth Header
La creazione di una sezione hero utilizzando il modulo Divi Fullwidth Header semplifica la creazione di un design accattivante e reattivo per dispositivi mobili in pochi minuti.
Diamo un'occhiata ai pro e ai contro di questo approccio.
Vantaggi di questo approccio
Diamo un'occhiata ai vantaggi della creazione di una sezione Hero con il modulo Divi Fullwidth Header.
- Tutto tuo contenuto è in un unico modulo
- Design già ottimizzato
Svantaggi di questo approccio
Ora valutiamo gli svantaggi della progettazione di una sezione Hero con il modulo Divi Fullwidth Header.
- Meno flessibilità con il design
Il modulo Divi Fullwidth Header viene fornito con opzioni per contenuto predefiniti, mentre molti possono essere limitati se stai cercando di aggiungere un contenuto che non è disponibile nel modulo. Ciò significa che avrai meno flessibilità con il design complessivo.
Costruzione passo dopo passo delle due sezioni Hero
Ora che hai compreso i pro e i contro di entrambi gli approcci, costruiamo ogni sezione Hero in modo da poter vedere esattamente come funziona ogni approccio.
Crea una nuova pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
- Installa Divi sul tuo sito Web WordPress.
- Aggiungi una pagina e assegnale un titolo.
- Abilita visual builder
Crea la tua sezione Hero da zero
Ora che la nostra pagina è configurata, iniziamo a creare una sezione eroi da zero.
Scarica DIVI ora!!!
Attiva "Divi Builder"
Per utilizzare il builder drag and drop di Divi, dovremo attivare Visual Builder facendo clic sul pulsante “Usa DiviBuilder”. Questo ricaricherà la pagina utilizzando Divi Visual Builder.
Selezionare: Crea da zero
Ora che la tua pagina è stata ricaricata con il visual builder abilitato, fai clic sulle opzioni " COSTRUISCI DA ZERO in modo da avere una pagina vuota con cui lavorare durante la progettazione.
Aggiungi riga e configura colonne
Crea una riga con la seguente struttura di colonne.
Aggiungi mod
Ora aggiungiamo i moduli di contenuto di cui avremo bisogno.
- 2 moduli di testo, divisore, un pulsante nella colonna di sinistra
- 1 Modulo immagine nella colonna centrale
- 1 Modulo immagine nella colonna di destra
Sezione stile
Ora configuriamo le impostazioni della sezione.
Aggiungi una sezione, quindi configura le seguenti impostazioni:
- Sfondo: #1d1d25
Stile del testo dell'intestazione
Personalizza il testo dell'intestazione:
- Titolo 1:
- Peso del carattere: semigrassetto
- Colore del testo: #ffffff
- Dimensione del testo: 90px
- Altezza della linea: 1,1 em
separatore
Configura le impostazioni del divisore:
- Colore linea: rgba(255,255,255,0.3)
- Peso del divisore: 10px
- Larghezza massima: 260px
Corpo del testo
Personalizza il corpo del testo:
- Colore testo: rgba(255,255,255,0.7)
- Dimensione del testo: 13px
- Altezza della linea: 1,8 em
Pulsante
Ora personalizziamo il pulsante.
Nella scheda Pulsante:
- Usa stili personalizzati per pulsante: Sì
- Dimensione testo pulsante: 14px
- Colore del testo: #ffffff
- Sfondo del pulsante:
- Larghezza bordo: 0 pixel
- Raggio bordo: 0 pixel
Nella scheda Spaziatura:
- Superiore e inferiore: 40px
- Sinistra e destra: 20px
Aggiungere Immagini
Aggiungi le immagini ai moduli immagine.
Regola le impostazioni della linea
Parametri in linea:
- Margine (Sinistro): 15vw
Regola la seconda colonna
Nella seconda colonna, configura queste impostazioni:
CSS personalizzato
Incolla il seguente codice nella sezione del codice dell'elemento principale:
argin-right: -15vw!important;
z-index: 100!important;spaziatura
Aggiungi 100 pixel di riempimento superiore.
Ecco ! Ora hai una sezione Eroe personalizzata completamente progettata.
Scarica DIVI ora!!!
Crea la tua sezione Hero con il modulo Fullwidth Header di Divi
Ora vediamo come ricreare questa sezione Hero utilizzando il modulo Fullwidth Header di Divi.
Scarica DIVI ora!!!
Aggiungi una pagina e seleziona Crea da zero
Aggiungi una nuova pagina, assegnale un titolo, quindi fai clic su "Usa Divi Builder", quindi seleziona Crea da zero.
Inserisci una sezione a larghezza intera e un'intestazione a larghezza intera
Inserisci sezione Intera Larghezza, quindi seleziona Intestazione a larghezza intera nella libreria dei moduli.
Contenuto
Aggiungi il contenuto testuale al modulo nella scheda Testo.
Immagini
Aggiungi le immagini nella scheda immagine.
Cambia colore di sfondo
Nella scheda Sfondo, configurare la seguente impostazione:
- Sfondo: #1D1D25
Titolo
Configura le impostazioni del testo dell'intestazione:
- Peso del carattere del titolo: grassetto
- Dimensione del testo: 90px
Corpo del testo
Configura le impostazioni del corpo del testo:
- Colore del corpo del testo: rgba(255,255,255,0.55)
Testo dei sottotitoli
Configura le impostazioni del testo dei sottotitoli:
- Peso del carattere dei sottotitoli: grassetto
- Colore testo: #4C594C
- Spaziatura lettere: 3px
pulsanti
Ora personalizziamo i due pulsanti.
pulsante uno
Nella scheda Button One, configurare le seguenti impostazioni:
- Usa stili personalizzati per il pulsante uno: sì
- Pulsante uno
- Sfondo: #4c594c
- Larghezza bordo: 0 pixel
- Raggio di confine: 0px
- Mostra icona: SÌ
- Mostra solo icona al passaggio del mouse: No
- Imbottitura: 25 pixel (superiore e inferiore); 25px (sinistra), 50px (destra)
Pulsante due
Nella scheda Pulsante due, configurare le seguenti impostazioni:
- Usa stili personalizzati per il pulsante due: SÌ
- Larghezza bordo pulsante due: 0 pixel
- Raggio di confine: 0px
- Imbottitura: 25px (superiore, inferiore, sinistra e destra)
- Button Box Shadow: Scegli il 4°
- Posizione orizzontale dell'ombra del riquadro: 0px
- Posizione verticale dell'ombra del riquadro: 2px
- Colore ombra: #ffffff
Ecco ! Ora hai una sezione Eroe completamente progettata usando il modulo Divi Fullwidth Header.
Guarda anche: Divi: come creare transizioni di sfondo tra gli elementi
Scarica DIVI ora!!!
Conclusione
Costruire una sezione Hero con Divi è facile, sia che tu stia costruendo da zero o utilizzando il modulo Fullwidth Header. Entrambe le opzioni ti consentono di creare fantastici design di intestazione che catturano l'interesse del tuo Visitatori.
A seconda delle tue esigenze specifiche, entrambe le opzioni sono un'ottima opzione da considerare quando disegna la tua sezione Eroe.
Dopo aver letto i pro e i contro di entrambi, come progetteresti la tua sezione Hero?
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...