Come nascondere l'intestazione prima di scorrere con le opzioni adesive di Divi

Una sezione eroe è l'attrazione del tuo sito web. Di solito dà il tono al resto del sito Web e mostra ai visitatori cosa possono aspettarsi. Ecco perché può essere utile assicurarsi che tutta l'attenzione sia sui pochi elementi che condividi nella sezione degli eroi, come la copia e l'invito all'azione. Ma solo perché vuoi evidenziare la sezione degli eroi, non significa che non hai bisogno anche di una barra di navigazione. Se stai cercando un modo intuitivo per rivelare la tua intestazione una volta che le persone iniziano a scorrere, adorerai questo post. Oggi ti mostriamo come nascondere l'intestazione prima di scorrere utilizzando le opzioni permanenti integrate di Divi. L'effetto che stiamo ottenendo è completamente reattivo e ha un bell'aspetto su tutte le dimensioni dello schermo. Potrai anche scaricare gratuitamente il file JSON del modello!

Andiamo 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 GRATUITAMENTE

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

Quando carichi il modello sul tuo Divi Theme Builder e inserisci il modello, noterai che la sezione non è visibile. Questo perché l'effetto è già applicato su di esso. Per modificare i diversi elementi, puoi passare alla modalità wireframe e accedere agli elementi lì, oppure rimuovere temporaneamente le impostazioni di trasformazione della sezione e dell'elemento principale e reinserirle quando hai finito di modificare il design dell'intestazione.

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

Crea un nuovo modello di intestazione globale

Inizia andando al Divi Theme Builder. Lì, inizia a creare una nuova intestazione globale o personalizzata.

Impostazioni della sezione

Colore di sfondo

Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #001b34

Spaziatura

Passa alla scheda Design 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 utilizzando la seguente struttura di colonne:

Colore di sfondo

Senza aggiungere ancora moduli, apri le impostazioni della riga e applica un colore di sfondo a tua scelta.

• Colore di sfondo: #001b34

Dimensionamento

Passa alla scheda di progettazione della riga e modifica le impostazioni di dimensionamento di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Continua modificando di conseguenza i valori di riempimento:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0
• Imbottitura sinistra:
  • Scrivania: /
  • Tablet e telefono: 5%
• Imbottitura destra:
  • Scrivania: /
  • Tablet e telefono: 5%

Impostazioni colonna 1

Colore di sfondo

Una volta terminate le impostazioni generali della riga, apri le impostazioni della colonna 1 e applica un colore di sfondo.

• Colore di sfondo: #f4d5b8

Aggiungi modulo menu alla colonna 1

Seleziona Menu

È ora di aggiungere moduli, iniziando con un Modulo Menu nella colonna 1. Seleziona un menu a tua scelta.

Carica logo

Carica un logo successivo.

Colore di sfondo

Quindi, cambia il colore di sfondo.

• Colore di sfondo: #063765

Immagine di sfondo

E carica un'immagine di sfondo illustrativo a tua scelta. Puoi trovare e utilizzare quello qui sotto scaricando l'omaggio all'inizio di questo post.

• Dimensione immagine di sfondo: adatta
• Posizione immagine di sfondo: Centro

Menu Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica la dimensione del testo del menu.

• Dimensione del testo del menu: 18px

Impostazioni del menu a discesa

Quindi, modifica le impostazioni del menu a discesa di conseguenza:

• Colore linea menu a discesa: rgba(0,0,0,0)
• Colore di sfondo del menu mobile: #ddc1a7
• Colore testo menu mobile: #063765

Impostazioni icone

Cambia anche i colori delle icone nelle impostazioni delle icone in bianco.

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

Dimensionamento

Quindi, modifica la larghezza massima del logo nelle impostazioni di dimensionamento.

• Larghezza massima logo: 70px

Spaziatura

Successivamente, applica alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 1%
• Imbottitura inferiore: 1%
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Scatola ombra

Insieme a qualche ombra scatola personalizzata.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.3)

Trasforma Traduci

E completa le impostazioni del modulo modificando le impostazioni di conversione della trasformazione come segue:

• Destra:
  • Desktop: 20px
  • Tablet e telefono: 0px

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.

Allineamento dei pulsanti

Passa alla scheda Design e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: a destra

Impostazioni dei pulsanti

Quindi, modella il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 16 px
• Colore del testo del pulsante: #2a2a2a
• Colore di sfondo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px
• Colore bordo pulsante: rgba (0,0,0,0)

• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

Dai un po' di forma al tuo bottone usando anche il riempimento personalizzato.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 40px
• Imbottitura destra: 40px

Scatola ombra

Quindi, applica un'ombra di scatola.

• Forza sfocatura ombra scatola: 30 px
• Colore ombra: rgba(0,0,0,0.18)

Trasforma Traduci

E completa le impostazioni del modulo modificando i valori di traduzione della trasformazione di conseguenza:

• Destra:
  • Desktop: 50 pixel
  • Tablet e telefono: 0px

2. Applica effetti permanenti personalizzati per ottenere l'effetto Nascondi prima dello scorrimento

Rendi la riga posizionata in modo assoluto

Ora che abbiamo impostato le basi della nostra intestazione, possiamo applicare l'intestazione Nascondi prima dell'effetto di scorrimento. Puoi applicare questo effetto a qualsiasi intestazione che crei, purché tu segua i passaggi seguenti. Il primo passo è aprire le impostazioni della riga e trasformare la riga in assoluto. Questo ci aiuterà a evitare che lo spazio venga occupato dall'intestazione nella parte superiore della nostra pagina.

• Posizione: Assoluta
• Posizione: in alto a sinistra

Rendi la sezione appiccicosa

Successivamente, apriremo le impostazioni della sezione e consentiremo di attenersi alla parte superiore.

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

Animazione della sezione

Aggiungeremo anche un'animazione alla nostra sezione. Questa animazione impedisce la visualizzazione dell'intestazione durante il caricamento della pagina.

• Stile di animazione: dissolvenza

Durata transizione sezione

Puoi decidere tu stesso quanto lentamente o velocemente l'intestazione scorre verso il basso una volta che inizi a scorrere modificando la durata della transizione nella scheda Avanzate della sezione. Maggiore è la durata, più lentamente l'intestazione scorre verso il basso.

• Durata della transizione: 800 ms

Sezione Trasforma Traduci

Ora, in uno stato predefinito, non vogliamo che l'intestazione sia visibile. Il primo passo per ottenere ciò è passare alle impostazioni di trasformazione della sezione e utilizzare un valore negativo per l'asse Y.

• A destra: -300 px

Riporteremo questo valore a zero in uno stato appiccicoso. Ciò significa che non appena inizi a scorrere, l'intestazione diventa di nuovo visibile.

• Sticky Right: 0px

Proprietà CSS di visibilità della sezione

Il prossimo e ultimo passaggio di questo tutorial non è teoricamente necessario per ottenere l'effetto, ma è una buona pratica nascondere gli elementi che non sono in uso. Ecco perché andremo alla scheda avanzata della sezione e aggiungeremo la seguente riga di codice CSS nella casella dell'elemento principale:

• Elemento principale:

  visibility: hidden

Restituiremo il nostro contenuto a visibile in uno stato permanente. Questo è tutto!

• Elemento principale appiccicoso:

  visibility: visible;

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 assicurarti che la tua sezione eroe sia al centro della tua pagina non appena le persone accedono alla tua pagina. Più specificamente, ti abbiamo mostrato come nascondere l'intestazione prima di scorrere. Ciò consente ai tuoi visitatori di elaborare le informazioni sulla sezione degli eroi prima che venga loro presentata la possibilità di navigare. Sei stato anche in grado di scaricare il file JSON gratuitamente! 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.