Come "raccogliere" il tuo Divi Sticky Header quando passi la sezione Hero della tua pagina

Da quando è stato rilasciato l'aggiornamento delle opzioni adesive Divi, abbiamo condiviso suggerimenti e trucchi su come utilizzarli durante le build del tuo sito Web con Divi e oggi ne aggiungiamo un altro da aggiungere ai segnalibri! Questo tutorial riguarderà l'interazione. Inseriremo automaticamente un'intestazione personalizzata sotto la sezione degli eroi di ogni pagina e renderemo quell'intestazione appiccicosa non appena i visitatori la scorrono oltre, il che si traduce in una bella esperienza di scorrimento. 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 il modello GRATIS

Per mettere le mani sul modello di pagina 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. Crea una nuova pagina utilizzando la pagina di destinazione del pacchetto di layout per tappezzeria di Divi

Per questo tutorial, utilizzeremo il Pacchetto di layout per tappezzeria e il suo modello gratuito di intestazione e piè di pagina che puoi scaricare sul blog. Sebbene stiamo utilizzando questo particolare pacchetto di layout, puoi applicare questo metodo a qualsiasi tipo di sito Web che stai costruendo. Per visualizzare in anteprima il risultato durante il tutorial di seguito, ti consigliamo di impostare una pagina che tieni aperta in una scheda separata. Per abbinare l'intestazione e il piè di pagina che utilizzeremo, stiamo impostando una nuova pagina utilizzando un layout a scelta fornito con Divi's Upholstery Layout Pack.

2. Scarica e installa l'intestazione e il piè di pagina gratuiti per Divi's Upholstery Layout Pack

Scarica l'intestazione e il piè di pagina gratuiti sul nostro blog

Successivamente, scaricheremo il modello gratuito di intestazione e piè di pagina per Divi's Upholstery Layout Pack. Scaricare e installare questo freebie ci aiuterà a concentrarci sulla parte importante di questo tutorial, ovvero ottenere la tecnica giusta. Una volta che sei andato al post del blog, vai al modulo di attivazione e-mail e inserisci il tuo indirizzo e-mail. Quindi, apparirà un pulsante di download. Questo pulsante di download ti consentirà di scaricare una cartella compressa. Dopo aver decompresso la cartella, puoi trovare un file JSON che contiene un modello di sito Web predefinito con un'intestazione e un piè di pagina globali.

Passa a Divi's Theme Builder

Per utilizzare il file JSON che hai appena scaricato, vai al tuo Divi Theme Builder.

Carica il modello di sito Web predefinito con design di intestazione e piè di pagina

Lì, fai clic sul pulsante di importazione ed esportazione nell'angolo in alto a destra e carica il file JSON che puoi trovare nella cartella di download.

Crea nuovo modello di pagina

Non appena avrai caricato il modello, vedrai apparire un'intestazione e un piè di pagina globali all'interno del modello di sito Web predefinito. Per evitare strani posizionamenti dell'intestazione, applicheremo solo l'effetto "raccogli l'intestazione adesiva" alle nostre pagine, ma se hai una sezione eroe creata da Divi anche su altri tipi di post personalizzati, sentiti libero di usare l'intestazione anche lì. Aggiungi un nuovo modello e utilizzalo su tutte le pagine.

• Utilizzare su: tutte le pagine

Rimuovi il modello di intestazione e piè di pagina dal modello di sito Web predefinito

Non appena aggiungi il modello di pagina, l'intestazione e il piè di pagina globali verranno aggiunti automaticamente a quel modello. Stiamo trasformando questa intestazione globale in un'intestazione personalizzata rimuovendo l'intestazione e il piè di pagina globali nel nostro modello di sito Web predefinito. In questo modo, le modifiche che apportiamo alla nostra intestazione si applicheranno solo alle pagine.

3. Posiziona la sezione dell'intestazione sotto la sezione degli eroi

Apri modello di intestazione globale

Ora che abbiamo impostato l'ambiente del generatore di temi per la nostra intestazione, è il momento di passare al nostro modello di intestazione facendo clic sull'icona a forma di matita.

Assegna un ID CSS personalizzato alla sezione all'interno dell'intestazione globale

Una volta all'interno dell'editor del modello, vedrai un design di intestazione che contiene una sezione, una riga e un paio di moduli. Per posizionare automaticamente l'intestazione sotto la prima sezione eroe di ogni pagina, dovremo assegnare un ID personalizzato alla nostra sezione. La tecnica che stiamo usando si basa su un tutorial precedente. La differenza tra questo post e quello menzionato nella frase precedente è che non appena un visitatore passa davanti all'intestazione, questa diventerà appiccicosa. Quando le persone tornano indietro, riprenderà il suo posto sotto la sezione degli eroi.

• ID CSS: intestazione personalizzata

Aggiungi modulo codice sotto il modulo menu nella colonna 1

Continua aggiungendo un nuovo modulo di codice alla prima colonna della riga.

Aggiungi codice JQuery per posizionare la sezione sotto la prima sezione di ogni pagina

Lì, inseriremo del codice JQuery che posizionerà automaticamente la sezione dell'intestazione sotto la prima sezione dell'eroe di ogni pagina.

jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});

Aggiungi codice CSS allo stesso modulo di codice

Includeremo anche una classe CSS tra i tag di stile per evitare che l'intestazione venga visualizzata nel builder durante la creazione delle pagine.

#et_pb_root #custom-header {
display: none;
}

4. Applica posizione e stili permanenti all'intestazione

Aggiungi posizionamento permanente alla sezione

Ora che la nostra sezione è posizionata sotto la prima sezione eroe di ogni pagina, è il momento di applicare anche l'effetto adesivo. Per farlo, utilizzeremo le impostazioni permanenti di Divi nella scheda Avanzate.

• Posizione appiccicosa: bastone in alto

Aggiungi l'ombra della scatola adesiva alla sezione

Ora che la posizione permanente è stata applicata, possiamo iniziare ad apportare modifiche permanenti alla nostra sezione e a tutti gli elementi figlio che contiene. Inizieremo aggiungendo un'ombra di scatola adesiva al nostro contenitore di sezioni.

• Forza sfocatura ombra scatola: 30 px
• Colore ombra
  • Predefinito: rgba(0,0,0,0)
  • Appiccicoso: rgba(0,0,0,0.13)

Modifica sfondo sfumato riga appiccicosa

Quindi, applicheremo uno sfondo sfumato appiccicoso alla nostra riga.

• Colore 1: #ffffff
• Colore 2: #e8e8e8

Modifica il colore del testo del modulo del menu appiccicoso

Quindi, apriremo il Modulo Menu e cambieremo il colore del testo del menu in uno stato permanente.

• Colore del testo del menu: #2d2e34

Modifica il colore dell'icona dell'hamburger del menu appiccicoso

Modificheremo anche il colore dell'icona dell'hamburger del menu appiccicoso.

• Colore icona menu hamburger: #2d2e34

Aggiungi filtro inverti logo appiccicoso

E completeremo il tutorial aggiungendo un filtro di inversione dell'immagine. Questo è tutto! Dopo aver applicato tutte queste modifiche all'intestazione, assicurati di salvare il modello e le modifiche di Divi Theme Builder prima di visualizzare il risultato sulla pagina che hai creato nella prima parte del tutorial.

• Inversione immagine: 80%

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, abbiamo condiviso un altro suggerimento e trucco che puoi applicare con le opzioni adesive integrate di Divi. Più specificamente, ti abbiamo mostrato come "raccogliere" l'intestazione una volta che la scorri. L'intestazione verrà automaticamente posizionata sotto la prima sezione di ogni pagina. 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.