Necessità di modificare l'intestazione sullo scorrimento della pagina con Elementor ?
Ci sono molti comportamenti dell'intestazione che puoi ottenere con Elementor Pro. Uno di questi è cambiare un'intestazione con un'altra durante lo scorrimento della pagina. Questo articolo ti mostrerà come.
Elementor Pro come sai viene fornito con una funzione Generatore di temi per consentirti di creare un'intestazione personalizzata sul tuo sito web WordPress. Grazie a questa funzionalità, non dovrai più fare affidamento su quanto offerto dal tuo tema WordPress quando si tratta di personalizzare le intestazioni, che di solito è limitato.
Puoi aggiungere qualsiasi elemento desideri, utilizzare qualsiasi impostazione tipografica che desideri e impostare qualsiasi comportamento che ti piace.
Elementor Pro ha un'opzione di regolazione integrata per aggiungere a intestazione appiccicosa. Useremo questa funzionalità per creare un'intestazione che cambia man mano che la pagina scorre. Sarà necessario anche un CSS personalizzato per questo tipo di comportamento dell'intestazione.
Leggi anche: Come creare un'intestazione personalizzata in WordPress con Elementor
Ecco un esempio di intestazione che cambia man mano che la pagina scorre.
Passaggio 1: crea l'intestazione personalizzata
Prima di iniziare, assicurati di aver aggiornato il tuo Elementor alla versione pro poiché Theme Builder è disponibile solo su Elementor Pro. Puoi ottenere la versione pro di Elementor Pro sul suo Sito ufficiale.
Quando sei pronto, vai su Modelli -> Generatore di temi sulla tua dashboard principale di WordPress. Nella dashboard del generatore di temi, passa il puntatore sulla scheda testata e fare clic sull'icona più per creare un nuovo modello di intestazione.
Nella libreria di modelli che appare, puoi selezionare un modello di intestazione predefinito che ti piace. Oppure, se vuoi creare l'intestazione da zero, puoi semplicemente chiudere la libreria dei modelli per aprire l'editor di Elementor.
Scopri anche: Come creare forme personalizzate in Elementor
In questo articolo, creeremo da zero il modello di intestazione.
Inizia a creare la tua intestazione aggiungendo una sezione, quindi aggiungi gli elementi necessari e crea gli stili di conseguenza.
Dopo aver aggiunto gli elementi necessari e creato gli stili, vai alla scheda Avanzate. Sotto il blocco Avanzate, imposta l'indice Z su 100 e aggiungi la classe CSS.header-1
Quindi duplica la sezione di intestazione appena creata sopra. La sezione duplicata sarà la tua seconda intestazione, che apparirà quando la pagina verrà fatta scorrere verso il basso.
Modifica l'intestazione duplicata. Puoi aggiungere più elementi o rimuovere elementi esistenti. Puoi anche cambiare lo sfondo. Tutto quello che vuoi. Una volta completata la modifica, vai alla scheda Avanzate. Sotto il blocco Impostazioni avanzate, rinomina la classe CSS in header-2.
Quindi apri il blocco Effetti di movimento. Nell'elenco a discesa Appiccicoso, impostato Top. Puoi definire l'offset degli effetti nel campo Compensazione degli effetti. Il valore che imposti qui determinerà la profondità di scorrimento prima che l'effetto (in questo caso appiccicoso) abbia luogo.
Una volta che hai finito di modificare entrambe le sezioni dell'intestazione, cambiane l'ordine.
Modifica la sezione inferiore e imposta il margine negativo sopra la sezione superiore. Per farlo, vai su la scheda Avanzate e imposta il margine superiore a circa -65.
Pubblica la tua intestazione facendo clic sul pulsante PUBBLICARE nella parte inferiore del pannello delle impostazioni di Elementor. Aggiungi una condizione di visualizzazione facendo clic sul pulsante AGGIUNGI UNA CONDIZIONE. Fare clic sul pulsante SALVA E CHIUDI una volta terminata l'impostazione delle condizioni di visualizzazione.
Passaggio 2: aggiungi CSS personalizzato
Il CSS di seguito viene utilizzato per controllare l'effetto di transizione. Puoi aggiungere il CSS sul Personalizzatore di temi. Vai a Aspetto -> Personalizza sulla tua dashboard principale di WordPress. Nella dashboard di Theme Customizer, apri il blocco ulteriore CSS e incolla il seguente CSS.
Il frammento CSS:
.header-2 {transform: translatey (-80px); -moz-transition: tutti i .3 easy!important; -webkit-transition: tutti i .3 easy!importante; transizione: tutti i .3 facilitano! } .elementor-sticky - effects.header-2 {altezza: auto!importante; trasforma: traduttore (0px); } .elementor-sticky - effects.header-1 {display: nessuno! importante; }
Fare clic sul pulsante PUBBLICARE per applicare la modifica.
In sintesi
Elementor Pro viene fornito con la funzione Theme Builder in cui puoi creare modelli personalizzati per le parti del tuo tema, come l'intestazione. Quando crei un'intestazione personalizzata utilizzando Elementor Theme Builder, puoi impostare qualsiasi comportamento desideri con la possibilità di aggiungere CSS personalizzati. Anche senza aggiungere CSS personalizzati, puoi impostare gli effetti come adesivi e trasparenti.
Leggi anche: Come creare una pagina 404 in WordPress con Elementor
La modifica dell'intestazione nella stessa pagina a scorrimento offre alcuni vantaggi.
Ad esempio, puoi utilizzare l'intestazione secondaria (l'intestazione che appare dopo che la pagina è stata fatta scorrere verso il basso) per aumentare le possibilità che la tua pagina venga condivisa mostrando solo i pulsanti di condivisione dei social media. .
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo tutorial che ti mostra come cambiare l'intestazione di scorrimento della pagina su Elementor. Se hai dubbi su come arrivarci, faccelo sapere nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
