Come creare un'intestazione adesiva con le opzioni adesive di Divi

Il modo in cui utilizziamo Divi Theme Builder durante la configurazione di un sito Web ha accelerato il nostro flusso di lavoro e reso tutto più semplice. Sebbene siamo stati in grado di creare intestazioni personalizzate fin dal primo giorno da quando è uscito il Divi Theme Builder, una cosa è stata richiesta continuamente, ovvero essere in grado di creare un'intestazione permanente senza utilizzare codice aggiuntivo. Con le nuove opzioni adesive di Divi, creare un'intestazione adesiva è diventato più facile che mai. Le impostazioni permanenti fornite da Divi ti aiuteranno senza sforzo a trasformare qualsiasi elemento di design appiccicoso e ad assegnare stili personalizzati a uno stato permanente, il che si traduce in infinite possibilità di design e esperienza utente.

In questo tutorial, ti mostreremo come creare un'intestazione adesiva che contenga quanto segue:

• L'intestazione che stiamo creando ha una barra dell'intestazione superiore + una barra dei menu
• Stiamo rendendo appiccicosa la sezione contenente la barra dei menu quando ci passi accanto, non appena torni in alto, la barra dell'intestazione appare di nuovo
• Stiamo cambiando gli stili di design della sezione adesiva (e dei suoi elementi) una volta che la sezione diventa appiccicosa

Arriviamo ad esso!

Anteprima

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

Desktop

Mobile

Scarica il modello di intestazione globale GRATUITAMENTE

Per mettere le mani sul modello di intestazione globale 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!

1. Costruire la struttura dell'elemento dell'intestazione all'interno di un nuovo modello di intestazione

Crea un nuovo modello di intestazione globale

Vai al Divi Theme Builder e inizia a creare una nuova intestazione globale o personalizzata.

Sezione #1 Impostazioni

Sfondo sfumato

Una volta all'interno dell'editor del modello, inizieremo costruendo la struttura degli elementi della nostra intestazione. Nella seconda parte di questo tutorial, ci concentreremo sull'applicazione delle diverse impostazioni adesive per completare il design dell'intestazione adesiva. All'interno dell'editor del modello, noterai una sezione. Apri quella sezione e applica uno sfondo sfumato.

• Colore 1: #ffba60
• Colore 2: #ffd6a0
• Direzione gradiente: 90 gradi
• Posizione di partenza: 50%
• Posizione finale: 50%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Aggiungi nuova riga

Struttura della colonna

Per creare la nostra barra di intestazione superiore, aggiungeremo una nuova riga alla nostra sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 95%
• Larghezza massima: 2580 px

Spaziatura

Aggiungi anche un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px

Elemento principale CSS

E per assicurarci che le colonne rimangano l'una accanto all'altra su schermi di dimensioni più piccole, aggiungeremo una riga di codice CSS all'elemento principale della riga nella scheda Avanzate.

display: flex;

Aggiungi il modulo Segui social media alla colonna 1

Aggiungi social network di scelta

È ora di aggiungere moduli, iniziando con un modulo Segui social media nella colonna 1. Aggiungi i social network di tua scelta insieme ai loro collegamenti corrispondenti.

Rimuovi il colore di sfondo di ogni social network

Continua rimuovendo singolarmente i colori di sfondo del social network.

Impostazioni icona

Quindi, torna alle impostazioni generali del modulo e cambia il colore dell'icona nella scheda Design.

• Colore icona: #26333a

Spaziatura

Aggiungi anche un margine superiore.

• Margine superiore: 5px

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo pulsante. Aggiungi una copia a tua scelta.

Aggiungi collegamento

Aggiungi un collegamento successivo.

Allineamento dei pulsanti

Quindi, passa alla scheda Design e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: a destra

Impostazioni dei pulsanti

Stiamo anche disegnando il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 14px
• Colore del testo del pulsante: #26333a
• Larghezza bordo pulsante: 2px
• Colore bordo pulsante: #26333a
• Raggio bordo pulsante: 0px

• Spaziatura lettere pulsanti: 4px
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo
• Mostra pulsante: Sì

Spaziatura

E completeremo le impostazioni del modulo aggiungendo un po' di riempimento superiore e inferiore alle impostazioni di spaziatura.

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Aggiungi sezione #2

Sfondo sfumato

Aggiungi un'altra sezione regolare proprio sotto la precedente. Questa sezione sarà dedicata al nostro menu e diventerà appiccicosa nella seconda parte di questo tutorial. Dopo aver aggiunto la sezione, applica uno sfondo sfumato.

• Colore 1: #ffffff
• Colore 2: #f7f7f7
• Tipo di gradiente: lineare
• Direzione gradiente: 90 gradi
• Posizione di partenza: 25%
• Posizione finale: 25%

Spaziatura

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

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

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Passa alla scheda Design della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza massima: 2580 px

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Aggiungi modulo menu alla colonna

Seleziona Menu

Quindi, aggiungi un modulo menu alla colonna della riga e seleziona un menu dinamico a tua scelta.

Carica logo

Carica un logo successivo.

Rimuovi colore di sfondo

Quindi, rimuovi il colore di sfondo bianco predefinito del modulo.

Menu Impostazioni testo

Passa alla scheda Design e modella anche le impostazioni del testo del menu.

• Peso del carattere del menu: grassetto
• Colore testo menu: #002d4c
• Dimensione del testo del menu: 15px
• Spaziatura delle lettere del menu: 4px
• Allineamento del testo: a destra

Menu a discesa Impostazioni testo

Quindi, apporta alcune modifiche alle impostazioni del menu a discesa.

• Colore di sfondo del menu a discesa: #ffffff
• Colore linea menu a discesa: #002d4c

Impostazioni icone

Insieme alle impostazioni delle icone.

• Colore icona carrello: #002d4c
• Colore icona di ricerca: #002d4c
• Colore icona menu hamburger: #002d4c

Dimensionamento

E completa le impostazioni del modulo aggiungendo un'altezza massima del logo alle impostazioni di dimensionamento.

• Altezza massima logo: 60 px

2. Applica effetti adesivi personalizzati

Ruota la sezione n. 2 appiccicosa

Ora che abbiamo creato la struttura degli elementi della nostra intestazione, è il momento di rendere la nostra seconda sezione appiccicosa e cambiare lo stile di progettazione di essa e dei suoi elementi in uno stato permanente. Apri le impostazioni della seconda sezione e passa alla scheda Avanzate. Lì, vai alle impostazioni degli effetti di scorrimento e applica le seguenti opzioni permanenti:

• Posizione appiccicosa: bastone in alto
• Offset superiore appiccicoso: 0px
• Limite appiccicoso inferiore: nessuno
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

Cambia lo sfondo sfumato della sezione in stato appiccicoso

Ora che la nostra sezione è diventata appiccicosa, apparirà un'opzione aggiuntiva all'interno delle nostre impostazioni di sezione, riga e modulo; l'opzione appiccicosa. Quando fai clic su questa icona, sarai in grado di creare uno stile alternativo per l'elemento che hai selezionato mentre è in uno stato permanente. Combineremo un paio di queste impostazioni di design adesive per personalizzare l'aspetto della nostra intestazione adesiva sullo scorrimento. Inizia andando alle impostazioni di sfondo della seconda sezione e applica il seguente sfondo sfumato appiccicoso:

• Colore 1: #26333a
• Colore 2: #1e272f

Allungare la riga in stato appiccicoso

Successivamente, apriremo la riga contenente il Modulo Menu e modificheremo la larghezza in uno stato appiccicoso.

• Larghezza: 95%

Rimuovi l'imbottitura delle righe in stato appiccicoso

Stiamo rimuovendo anche l'imbottitura adesiva superiore e inferiore della nostra fila.

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

Cambia il colore del testo del menu in stato appiccicoso

Successivamente, cambieremo il colore del testo del menu in uno stato permanente.

• Colore del testo del menu: #ffbd68

Cambia i colori dell'icona del menu in stato appiccicoso

Insieme ai colori delle icone.

• Colore icona carrello: #ffffff
• Colore icona di ricerca: #ffffff
• Colore icona menu hamburger: #ffffff

Rimuovi l'altezza del logo in stato appiccicoso

E, ultimo ma non meno importante, cambieremo l'altezza massima del logo a zero in uno stato appiccicoso. Questo rimuoverà completamente il logo dalla nostra intestazione una volta abilitate le impostazioni permanenti della sezione. Questo è tutto! Assicurati di salvare tutte le modifiche di Divi Theme Builder dopo aver completato il design dell'intestazione e di visualizzarne l'anteprima sul tuo sito web.

• Altezza massima logo: 0px

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 creare un'intestazione appiccicosa usando Divi's Theme Builder e le opzioni adesive. Non appena la sezione contenente il nostro menu diventa appiccicosa, applichiamo anche stili personalizzati. Queste opzioni sono rese possibili dalle nuove opzioni adesive Divi che ti offrono innumerevoli possibilità per migliorare l'esperienza dell'utente e il design che crei. Sei stato anche in grado di scaricare gratuitamente il modello di intestazione globale! 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.