Costruisci i bei siti Web WordPress utilizzando Divi e Divi Builder

Come nascondere l'intestazione durante lo scorrimento verso il basso su Divi

Rifat Tutorial Divi May 12, 2021

Un'intestazione cattura l'essenza di un sito Web perché gli utenti possono capire cosa oseranno da questo sito Web dall'intestazione. Non sarebbe sbagliato chiamarlo una sorta di invito che aiuta ad attirare i visitatori. Se vogliamo evidenziare la sezione eroe del nostro sito Web, dove la barra di navigazione superiore crea una distrazione, dovremmo omettere la barra di navigazione? mai!

Con l'opzione Sticky di Divi, possiamo progettare dove verrà visualizzata la sezione Eroe del nostro sito Web senza la barra di navigazione dopo il caricamento del sito Web e lo scorrimento scatenerà la barra di intestazione. È una situazione vantaggiosa per tutti. Ma come progettare tale? Questo è ciò che vedremo oggi.

Picco nascosto

Daremo un'occhiata al nostro risultato di progettazione prima di saltare nella sezione principale.

Compilazione: struttura intestazione

Creare un'intestazione globale dal dashboard

Vai all'opzione "Generatore di temi" in Divi dal dashboard e scegli "Costruisci intestazione globale" dall'opzione mostrata nell'immagine.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Impostazioni: Sezione intestazione globale

Colore sfondo

Dopo aver selezionato il modello di intestazione, vai con la "build from scratch". Quindi aprite l'opzione livello e vedrete una sezione pre-creata. Aprire le impostazioni per la sezione e modificare lo sfondo.

  • Colore sfondo: #002854

Spaziatura

Nella scheda Progettazione modificare alcuni valori di spaziatura.

  • Spaziatura interna superiore: 0px
  • Spaziatura interna inferiore: 0px

Aggiunta di nuove righe

Struttura colonna

Aggiungere alla sezione la riga seguente contrassegnata come struttura di colonna.

Colore sfondo

Prima di aggiungere qualsiasi modulo a questa riga, apportare alcune regolazioni. Inizia con il colore di sfondo.

  • Colore sfondo: #002854

Dimensionamento

Nella scheda Progettazione modificare i valori di ridimensionamento della riga.

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

Spaziatura

Ora, cambia anche i valori di spaziatura interna.

  • Spaziatura interna superiore: 0px
  • Spaziatura interna inferiore: 0px

Impostazioni: Colonna 1

Colore sfondo

Dopo aver progettato l'intera riga, inizieremo a progettare la colonna 1. Per prima cosa aggiungeremo un colore di sfondo.

  • Colore sfondo: #85A8B2

Aggiungi: modulo di menu alla colonna 1

Selezione menu

Ora aggiungeremo un modulo di menu alla colonna 1. Scegli un menu in base alla tua scelta.

Logo

Ora aggiungi un logo all'intestazione.

Colore sfondo

Ora aggiungi un colore di sfondo.

  • Colore sfondo: #063765

Immagine di sfondo

Ora aggiungi un'immagine a tua scelta e fai le seguenti regolazioni.

  • Dimensioni immagine di sfondo: Adatta
  • Posizione immagine di sfondo: Centro

Impostazioni: Testo menu

Passare alla scheda progettazione del modulo e modificare le dimensioni del testo del menu.

  • Colore testo: #ffffff
  • Dimensioni testo menu: 18px

Impostazioni: Menu a discesa

A questo ora, modificare le impostazioni del menu a discesa come segue:

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

Impostazioni: Icona

Ora, trasforma tutte le icone in bianco.

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

Dimensionamento

Quindi, modificare le impostazioni di ridimensionamento del logo.

  • Larghezza massima logo: 70px

Spaziatura

Apportare alcune modifiche alla spaziatura interna.

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

Ombra scatola

Aggiungere alcune modifiche all'ombreggiatura delle casella personalizzata.

  • Forza sfocatura ombreggiatura scatola: 50px
  • Colore ombreggiatura: rgba(0,0,0,0,3)

Trasforma traduci

A questo ora, completare le impostazioni del modulo modificando le impostazioni di traslamento della trasformazione come segue:

Aggiungi: modulo pulsante alla colonna 2

Impostazione modulo pulsante

Aggiungere il modulo pulsante alla colonna 2 e aggiungere del testo a scelta.

Allineamento pulsanti

Nella scheda Progettazione modificare l'allineamento dei pulsanti.

  • Allineamento pulsanti: destra

Impostazioni pulsante

Quindi, cambia lo stile del pulsante di conseguenza.

  • Usa stili personalizzati per il pulsante: Sì
  • Dimensioni testo pulsante: 16px
  • Colore testo pulsante: #2a2a2a
  • Colore sfondo pulsante: #ffffff
  • Larghezza bordo pulsante: 0px
  • Colore bordo pulsante: rgba(0,0,0,0)
  • Spessore carattere pulsante: Grassetto
  • Stile carattere pulsante: maiuscolo

Spaziatura

Aggiungere una spaziatura interna personalizzata per creare forma al pulsante.

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

Ombra scatola

Ora aggiungeremo un'ombreggiatura casella (contrassegnata come una).

  • Forza sfocatura ombreggiatura scatola: 30px
  • Colore ombreggiatura: rgba(0,0,0,0,18)

Trasforma traduci

Abbiamo quasi finito con il modulo. Completatelo con alcune regolazioni sulla sezione di trasformazione.

Aggiungi: Effetti appiccicosi all'intestazione

Impostazioni riga

Abbiamo completato la costruzione della nostra struttura di sezione di intestazione. Ora aggiungeremo un effetto appiccicoso ad esso. Per questo, dobbiamo modificare alcuni valori dalle impostazioni delle righe.

Posizione

In primo luogo, apportare le regolazioni della posizione.

  • Posizione: Assoluto
  • Posizione: In alto a sinistra

Impostazioni adesive - Effetti di scorrimento

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

  • Posizione appiccicosa: attienti all'alto
  • Limite adesivo inferiore: Nessuno
  • Offset dagli elementi appiccicosi circostanti: Sì
  • Stili predefiniti e appiccicosi di transizione: Sì

Animazione

Ora aggiungeremo un'animazione in modo che i visitatori non vedranno l'intestazione durante il caricamento della pagina.

  • Stile animazione: Dissolvenza

Durata transizione

Modificando il valore dell'intervallo di transizione, selezioneremo la velocità o la lentezza dell'intestazione durante lo scorrimento.

  • Durata transizione: 800ms

Trasforma traduci

Poiché inizialmente non vogliamo mostrare le intestazioni, aggiungeremo un valore negativo all'asse Y dalle impostazioni di trasformazione.

  • A destra: -300px

Ora dalle impostazioni appiccicoso, fai di nuovo il valore 0. Significa che ci mostrerà il menu non appena inizieremo a scorrere.

  • A destra appiccicosa: 0px

 Proprietà CSS per la visibilità

In questa sezione aggiungeremo una proprietà CSS per nascondere gli elementi che non vengono utilizzati. Va notato che questo non è un compito obbligatorio, ma è una buona idea farlo.

visibility: hidden;

Ora renderemo di nuovo visibile il nostro menu in uno stato appiccicoso.

visibility: visible;

Risultato finale

Dal momento che abbiamo fatto tutti i passaggi con successo , ecco il nostro risultato finale.

Parole finali

Nel tutorial di oggi, abbiamo visto come rendere i visitatori concentrati sulla sezione eroe e lavorare sulla barra di navigazione per quanto riguarda la visibilità. Divi è un ottimo tema con funzionalità integrate che ci permettono di progettare qualcosa di unico e divertente. Speriamo che ti piacerà il post di oggi e se hai domande e domande, per favore, sentiti libero di chiedere nella sezione commenti.