Desideri personalizzare il modulo Fullwidth Header di Divi bilanciando i pulsanti primari e secondari?
Il modulo Divi L'intestazione a larghezza intera semplifica l'aggiunta di bellissime sezioni Hero al tuo sito web. Il modulo viene fornito con due pulsanti, testo del titolo, testo del sottotitolo, testo del corpo, logo e immagine che rendono infinite le opzioni di personalizzazione.
Nell'articolo di oggi, ti mostreremo come ricreare le sezioni dell'eroe usando il Intestazione a larghezza intera Divi. Inizieremo il nostro design utilizzando 3 pacchetti di layout predefiniti e progetteremo le nostre sezioni concentrandoci sul bilanciamento dei pulsanti primari e secondari.
Vogliamo che il pulsante principale si distingua perché è il nostro invito all'azione principale mantenendo il pulsante secondario visibile e accessibile senza superare il pulsante principale.
Principi di progettazione dei pulsanti primari e secondari
Guida ai pulsanti primari e ai pulsanti secondari Visitatori vostre sito web a determinati titoli. I pulsanti primari sono in genere l'azione più comune o desiderata e i pulsanti secondari sono un'azione meno comune. Questo aiuta a guidare il Visitatori dove vogliono andare.
Per fare ciò, i pulsanti primari dovrebbero risaltare visivamente e i pulsanti secondari non dovrebbero risaltare così tanto. Ciò significa che i pulsanti principali dovrebbero essere più distintivi e avere più peso visivo per attirare più attenzione.
Ora che abbiamo capito come funzionano i pulsanti primari e secondari, passiamo al tutorial!
Panoramica
Ecco uno sguardo alle tre intestazioni a larghezza intera che progetteremo oggi.
Iniziamo creando una nuova pagina con Divi Builder
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Leggi anche: Divi: come utilizzare maschere e motivi di sfondo per una sezione eroe
Progettazione del primo esempio
Ora che la nostra pagina è configurata, iniziamo con l'intestazione a larghezza intera di una pagina di destinazione UX.
Configurazione della nostra pagina
Prima di poter iniziare la personalizzazione, dovremo caricare il pacchetto di layout predefinito UX dalla libreria Divi. Quando attivi Visual Builder vedrai apparire tre opzioni, seleziona Sfoglia i layout.
Carica pacchetto layout
Per caricare il pacchetto di layout UX sulla tua pagina:
- Nella scheda "Layout predefiniti", utilizza la funzione di ricerca per trovare il pacchetto di layout UX.
- Una volta trovato, fai clic su di esso. Questo farà apparire i dettagli del layout e le pagine disponibili.
- Fare clic atterraggioe fare clic su "Usa questo layout".
Ricreeremo la sezione superiore del layout come modulo Intestazione a larghezza intera.
Elimina la prima sezione
Poiché ricreeremo la prima sezione utilizzando invece il modulo Fullwidth Header, dovremo eliminare questa sezione. Passa il mouse sopra la sezione e fai clic sull'icona del cestino.
Aggiungi una sezione a larghezza intera
Prima di poter aggiungere l'intestazione a larghezza intera, è necessario aggiungere una sezione a larghezza intera.
Clicca sulla freccia "+" per visualizzare le sezioni Divi quindi fare clic su "Intera larghezza". Questo farà apparire automaticamente la libreria Divi Fullwidth Module.
Aggiungi un'intestazione a larghezza intera
Nella libreria del modulo Divi Fullwidth, fare clic su " Intestazione a larghezza intera".
Aggiungi contenuto
Prima di iniziare a personalizzare il modulo, aggiungiamolo contenuto richiesto per questo modulo.
Aggiungi contenuto testuale
Nella scheda Testo, aggiungi il file contenuto seguente :
- Titolo: Migliora la tua conoscenza della progettazione UX
- Sottotitolo: Corso di UX Design
- Pulsante n. 1: panoramica del corso
- Pulsante n. 2: Ulteriori informazioni
- Corpo: predefinito
Aggiungere Immagini
Ora che abbiamo il nostro contenuto testo al suo posto, dobbiamo aggiungere due immagini al nostro design.
- Nella scheda Immagini, aggiungi l'immagine del logo (le stelle) e l'immagine dell'intestazione (la foto della persona con in mano un telefono).
Cambia colore di sfondo
Nella scheda sfondo, configurare questo parametro:
- Colore di sfondo: #131517
Personalizza l'intestazione a larghezza intera
Ora che il nostro contenuto è impostato, aggiungiamo un po' di stile tramite il Design.
Scorri l'icona verso il basso
Aggiungiamo l'icona di scorrimento verso il basso, la freccia verso il basso.
- Mostra il pulsante di scorrimento verso il basso: SÌ.
- Seleziona l'icona della freccia giù.
- Scorri verso il basso Colore icona: #000
Immagine
Aggiungiamo curve alle nostre immagini arrotondando gli angoli.
Nella scheda Immagine, configurare le seguenti impostazioni:
- Immagine Angoli arrotondati : fai clic sul pulsante del collegamento a catena per scollegare gli angoli, quindi digita 1000px nelle caselle di input in basso a sinistra e in basso a destra. Questo arrotonda gli angoli in basso a sinistra e in basso a destra delle nostre immagini.
Titolo del testo
Qui, personalizziamo il testo del titolo di questo modulo. Nella scheda Titolo del testo, configura queste impostazioni:
- Titolo:
- Carattere: PT Sans
- Peso del carattere: grassetto
- Dimensione del testo: 5 rem
- Altezza della linea: 1,2 em
Il corpo del testo
Qui è dove personalizziamo il corpo del testo per questo modulo. Nella scheda Corpo del testo, configura queste impostazioni:
- Carattere del corpo: Mukta
- Dimensione del corpo del testo: 18px
Testo dei sottotitoli
Qui è dove personalizziamo il testo della didascalia per questo modulo. Nella scheda Testo dei sottotitoli, configura queste impostazioni:
- Sottotitolo:
- Carattere: Mukta
- Peso del carattere: grassetto
- Stile: maiuscolo
- Colore del testo: #13d678
- Spaziatura lettere: 3px
pulsante uno
Qui è dove possiamo definire stili personalizzati per il pulsante uno: il pulsante principale. Nella scheda ButtonOne, configura queste impostazioni:
- Usa stile personalizzato per il pulsante uno: SÌ
- Pulsante uno:
- Colore del testo: #ffffff
- Colore di sfondo: #13d678
- Larghezza bordo: 0 pixel
- Raggio del bordo: 100px
- Carattere: Mukta
- Peso del carattere: grassetto
- Mostra icona pulsante uno: SÌ
- Icona: freccia destra
- Mostra icona solo al passaggio del mouse per il pulsante uno: No
Pulsante due
Ora personalizziamo il secondo: il pulsante secondario. Nella scheda Pulsante due, configura queste impostazioni:
- Usa lo stile personalizzato per il pulsante: SÌ
- Pulsante due
- Colore del testo: #ffffff
- Colore di sfondo: #303030
- Larghezza bordo: 0 pixel
- Raggio del bordo: 100 pixel
- Carattere: Mukta
- Peso del carattere: grassetto
- Mostra icona pulsante due: Sì
- Icona pulsante due: freccia destra
- Mostra solo l'icona sul pulsante due al passaggio del mouse: SÌ
Aggiungi collegamenti a pulsanti
Non dimenticare di aggiungere link ai tuoi pulsanti! Nella scheda Link, configurare le seguenti impostazioni:
- URL del collegamento del pulsante n. 1: incolla qui l'URL del pulsante 1.
- URL del collegamento del pulsante n. 1: incolla qui l'URL del pulsante 2.
Salva vostro laboro
Ora che abbiamo la nostra intestazione a larghezza intera completamente progettata, assicurati di salvare il tuo progetto!
- Fare clic sulla freccia verde in basso a destra della finestra del modulo.
- Risparmi
- Esci da VisualBuilder.
Leggi anche: Divi: come creare una sezione Fluid Hero
Divertiti a sperimentare
I modi per personalizzare il modulo Divi Fullwidth Header sono infiniti. Sfruttare il pulsante principale e il pulsante secondario può aiutarti a dirigere il tuo Visitatori alla pagina che desideri che visualizzino o che eseguano l'azione (come inviare una richiesta) che desideri che eseguano.
Diamo un'occhiata ad altri due esempi di intestazioni a larghezza intera che hanno un pulsante principale che spicca.
Intestazione a tutta larghezza dal pacchetto "Centro pensioni".
Stili dei pulsanti
Diamo un'occhiata agli stili unici dei pulsanti primari e secondari.
pulsante uno
Nella scheda Button One, configurare le seguenti impostazioni:
- Usa stili personalizzati per il pulsante uno: SÌ
- Pulsante uno:
- Dimensione del testo: 14px
- Colore del testo: #ffffff
- Colore di sfondo: #0a0a0a
- Larghezza bordo: 0 pixel
- Raggio di confine: 10px
- Spaziatura lettere: 3px
- Peso del carattere: grassetto
- Stile carattere: TT
- Mostra icona solo al passaggio del mouse per Buttpn One: SÌ
- Imbottitura Button One: 15px (superiore e inferiore), 25px (sinistra e destra)
Pulsante due
Nella scheda Pulsante due, configurare le seguenti impostazioni:
- Usa lo stile personalizzato per il pulsante: SÌ
- Pulsante due:
- Dimensione del testo: 14px
- Colore del testo: #ffffff
- Colore di sfondo: #0a0a0a
- Larghezza bordo: 0 pixel
- Raggio di confine: 10px
- Peso del carattere: grassetto
- Stile carattere: TT
- Pulsante due imbottitura: 10px (in basso), 10px (sinistra e destra)
Ed ecco qua! Due pulsanti unici, uno che spicca e uno che occupa il secondo posto.
Intestazione a tutta larghezza del pacchetto "Pianificazione finanziaria".
Stili dei pulsanti
Diamo un'occhiata agli stili unici dei pulsanti primari e secondari.
pulsante uno
Nella scheda Pulsante uno, configurare le seguenti impostazioni:
- Usa stile personalizzato per il pulsante uno: SÌ
- Pulsante uno:
- Dimensione del testo: 18px
- Colore del testo: #ffffff
- Colore di sfondo: #1b4ffe
- Imbottitura: 15px() in alto e in basso); 25px (sinistra e destra)
Pulsante due
Nella scheda Pulsante due, configurare le seguenti impostazioni:
- Usa stile personalizzato per il pulsante due: SÌ
- Pulsante due:
- Colore del testo: #1b4ffe
- Colore di sfondo: trasparente
- Colore icona: #1b4ffe
Scarica DIVI ora!!!
Conclusione
Il modulo Fullwidth Header di Divi semplifica la creazione di straordinarie sezioni Hero sul tuo sito web.
L'uso strategico dei pulsanti primari e secondari migliorerà la tua esperienza utente e aiuterà i visitatori del sito web a compiere le azioni che desiderano.
Le opzioni di personalizzazione sono infinite con l'intestazione a larghezza intera, quindi divertiti a sperimentare!
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.
...
