Come aggiungere una barra inferiore posizionata in modo assoluto alla tua sezione eroe con Divi

Il modo in cui strutturi gli elementi all'interno della tua sezione degli eroi a volte può diventare complicato. Vuoi avere un buon equilibrio, senza dover ridurre drasticamente la quantità di contenuti che vuoi condividere. Fortunatamente, alcuni approcci semplificati hanno dimostrato il loro valore sul Web. Uno di questi approcci è l'aggiunta di una barra inferiore posizionata in modo assoluto alla sezione degli eroi. Non solo ha un bell'aspetto, dal punto di vista del design, ma ti aiuta anche ad aggiungere più inviti all'azione senza sbilanciare il design.

In questo tutorial, ti mostreremo come aggiungere una barra inferiore posizionata in modo assoluto alla sezione dell'eroe all'interno di Divi. La barra in basso che aggiungeremo conterrà quattro parti; tre pulsanti e un modulo di contatto. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout della sezione Hero della barra inferiore con posizionamento assoluto

Per mettere le mani sul layout della sezione eroe gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare!

Aggiungi nuova sezione

Sfondo sfumato

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica uno sfondo sfumato.

• Colore 1: rgba(0,0,0,0.62)
• Colore 2: rgba(0,0,0,0.97)
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Immagine di sfondo

Carica successivamente un'immagine di sfondo a tua scelta.

Spaziatura

Passa alla scheda Progettazione della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.

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

straripamenti

Stiamo nascondendo anche gli overflow della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Spaziatura

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e applica un margine superiore e inferiore.

• Margine superiore: 20%
• Margine inferiore: 20%

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H1

È ora di aggiungere moduli, iniziando con un primo modulo di testo contenente alcuni contenuti H1 di tua scelta.

Impostazioni testo H1

Passa alla scheda di progettazione del modulo e modella il testo H1 come segue:

• Carattere dell'intestazione: Work Sans
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione:
  • Desktop: 80 pixel
  • Tablet: 50px
  • Telefono: 40px
• Spaziatura delle lettere dell'intestazione:
  • Desktop: -4px
  • Tablet e telefono: -2px

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

Aggiungi un altro modulo di testo proprio sotto il precedente e includi alcuni contenuti descrittivi a tua scelta.

Impostazioni testo

Modifica le impostazioni del testo del modulo di conseguenza:

• Carattere del testo: Open Sans
• Colore del testo: #a0a0a0

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Larghezza:
  • Desktop: 68%
  • Tablet e telefono: 100%

Aggiungi modulo pulsante alla colonna

Aggiungi copia

L'ultimo modulo di cui abbiamo bisogno in questa riga è un modulo pulsante. Includi una copia a tua scelta.

Aggiungi collegamento

Aggiungi un collegamento al pulsante.

• URL collegamento pulsante: #

Impostazioni dei pulsanti

Passa alla scheda di progettazione del modulo e modella il pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Colore del testo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px

• Carattere pulsante: Work Sans
• Mostra icona pulsante: Sì
• Posizionamento dell'icona del pulsante: a sinistra

Aggiungi riga #2

Struttura della colonna

È ora di creare la nostra barra della sezione degli eroi in basso! Per fare ciò, aggiungeremo una nuova riga utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza:
  • Scrivania: 100%
  • Tablet e telefono: 80%
• Larghezza massima: 2560 px

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Scatola ombra

Includi anche un'ombra di scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: 50 px
• Colore ombra: rgba (135,135,135,0,08)

Posizione

Quindi, passa alla scheda Avanzate e riposiziona l'intera riga sul desktop. Riportalo ai valori predefiniti su schermi di dimensioni più piccole. Le impostazioni di posizione di questa riga assicureranno che la riga aderisca al fondo del contenitore della sezione.

• Posizione:
  • Desktop: Assoluto
  • Tablet e telefono: impostazione predefinita
• Posizione: in basso al centro

Impostazioni colonna 1

Spaziatura

Continua aprendo le impostazioni della colonna 1 e applica alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 3%
• Imbottitura fondo: 3%
• Imbottitura sinistra: 3%
• Imbottitura destra: 3%

Frontiera

Stiamo utilizzando alcune impostazioni del bordo reattive anche per questa colonna.

• Bordo superiore:
  • Larghezza bordo superiore: 5px
  • Colore bordo superiore:
    • Predefinito: rgba(255,255,255,0)
    • Al passaggio del mouse: #ffffff
• Bordo inferiore:
  • Larghezza bordo inferiore:
    • Desktop e tablet: 0px
    • Telefono: 3px
  • Colore bordo inferiore: rgba (255,255,255,0.11)
• Bordo sinistro:
  • Larghezza bordo sinistro:
    • Desktop: 0px
    • Tablet: 3px
    • Telefono: 0px
  • Colore bordo sinistro: rgba (255,255,255,0.11)

Impostazioni colonna 2

Spaziatura

Passiamo alle impostazioni della seconda colonna. Aggiungi alcuni valori di riempimento alle impostazioni di spaziatura.

• Imbottitura superiore: 3%
• Imbottitura fondo: 3%
• Imbottitura sinistra: 3%
• Imbottitura destra: 3%

Frontiera

E includi i seguenti bordi reattivi:

• Bordo superiore:
  • Larghezza bordo superiore: 5px
  • Colore bordo superiore:
    • Predefinito: rgba(255,255,255,0)
    • Al passaggio del mouse: #ffffff
• Bordo inferiore:
  • Larghezza bordo inferiore:
    • Desktop e tablet: 0px
    • Telefono: 3px
  • Colore bordo inferiore: rgba (255,255,255,0.11)
• Bordo sinistro:
  • Larghezza bordo sinistro:
    • Desktop: 3px
    • Tablet: 3px
    • Telefono: 0px
  • Colore bordo sinistro: rgba (255,255,255,0.11)

Impostazioni colonna 3

Spaziatura

Anche la terza colonna richiede valori di riempimento personalizzati.

• Imbottitura superiore: 3%
• Imbottitura fondo: 3%
• Imbottitura sinistra: 3%
• Imbottitura destra: 3%

Frontiera

Insieme alle seguenti impostazioni dei bordi:

• Bordo superiore:
  • Larghezza bordo superiore: 5px
  • Colore bordo superiore:
    • Predefinito: rgba(255,255,255,0)
    • Al passaggio del mouse: #ffffff
• Bordo sinistro:
  • Larghezza bordo sinistro:
    • Desktop: 3px
    • Tablet: 3px
    • Telefono: 0px
  • Colore bordo sinistro: rgba (255,255,255,0.11)

Impostazioni colonna 4

Colore di sfondo

All'ultima colonna. Aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Spaziatura

Applica alcuni valori di riempimento reattivo personalizzati.

• Imbottitura superiore
  • Scrivania: 3%
  • Compressa: 3%
  • Telefono: 10%
• Imbottitura inferiore:
  • Scrivania: 3%
  • Compressa: 3%
  • Telefono: 10%
• Imbottitura sinistra:
  • Scrivania: 3%
  • Compressa: 5%
  • Telefono: 10%
• Imbottitura destra:
  • Scrivania: 3%
  • Compressa: 5%
  • Telefono: 10%

Posizione

E riposiziona l'intera colonna sul desktop. Ciò renderà assoluta la dimensione della colonna e la farà aderire alla parte inferiore della riga.

• Posizione:
  • Desktop: Assoluto
  • Tablet e telefono: impostazione predefinita
• Posizione: in basso a destra

Clona modulo pulsante nella riga precedente e posiziona il duplicato nella colonna 1 della nuova riga

Una volta completate le impostazioni di riga e colonna, è il momento di iniziare ad aggiungere moduli. Stiamo riutilizzando il modulo pulsante che fa parte della riga precedente. Clona il modulo e posiziona il suo duplicato nella prima colonna della nuova riga.

Modifica allineamento pulsanti

Apri il modulo Button duplicato e modifica l'allineamento.

• Allineamento dei pulsanti: centro

Cambia copia e collegamenti

Modifica la copia del modulo e il link successivo.

Pulsante Clona nella colonna 1 due volte e posiziona i duplicati nelle colonne 2 e 3

Dopo aver modificato le impostazioni del modulo pulsante nella colonna 1, puoi clonare l'intero modulo due volte e posizionare i duplicati nelle colonne 2 e 3.

Cambia copia e collegamenti

Modifica la copia e i collegamenti per ogni duplicato.

Aggiungi modulo di testo alla colonna 4

Aggiungi contenuto H2

All'ultima colonna della riga. Lì, il primo modulo di cui avremo bisogno è un modulo di testo con alcuni contenuti H2.

Impostazioni testo H2

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 di conseguenza:

• Carattere dell'intestazione 2: Work Sans
• Colore testo titolo 2: #000000
• Intestazione 2 Spaziatura lettere: -2px

Spaziatura

Aggiungi anche un margine inferiore.

• Margine inferiore: 10%

Aggiungi il modulo del modulo di contatto alla colonna 4

Rendi i campi a tutta larghezza

Quindi, aggiungi un modulo di contatto proprio sotto il modulo di testo. Apri singolarmente i campi del nome e dell'indirizzo e-mail e abilita l'opzione "Crea larghezza intera" per entrambi.

• Crea larghezza intera: Sì

Impostazioni dei campi

Passa alla scheda di progettazione del modulo e modifica le impostazioni dei campi come segue:

• Colore di sfondo dei campi: #ffffff
• Colore testo campi: #000000
• Imbottitura superiore dei campi: 4%
• Imbottitura fondo campi: 4%
• Font Fields: Work Sans
• Dimensioni del testo dei campi: 13 px

Impostazioni testo captcha

Quindi, apporta alcune modifiche alle impostazioni del testo captcha.

• Carattere Captcha: Work Sans
• Colore testo captcha: #000000

Impostazioni dei pulsanti

Stiamo anche disegnando il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 17 px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000
• Larghezza bordo pulsante: 0px

• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: -1px
• Carattere pulsante: Work Sans

Frontiera

E, ultimo ma non meno importante, includeremo una larghezza del bordo inferiore. Questo è tutto!

• Input Larghezza bordo inferiore: 1px
• Ingressi Colore bordo inferiore: #dddddd

Anteprima

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

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come essere creativo con la tua sezione eroe all'interno di Divi. Più specificamente, ti abbiamo mostrato come includere e progettare una barra inferiore posizionata in modo assoluto. L'uso di una barra in basso ti aiuterà a condividere più contenuti all'interno della tua sezione degli eroi, senza che diventi troppo opprimente. Usando questa tecnica, puoi creare qualsiasi tipo di design e avere più CTA in corso! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.