Come creare e personalizzare il piè di pagina dell'intestazione (Elementor Page Builder)

Elementor_Header_Footer_Wpmet

Ti sei mai reso conto di non avere il controllo sull'intestazione di Elementor e sul piè di pagina di Elementor come vorresti quando utilizzi un tema WordPress o un generatore di pagine? 

Desideri modificare il piè di pagina dell'intestazione principale del tuo tema WordPress attuale? 

Perché non farlo da solo con Elementor? 😃

Qui te lo mostreremo come creare intestazioni e piè di pagina Elementor personalizzati con Elementor passo dopo passo. Senza alcuna conoscenza di codifica richiesta, tutto insieme ElementsKit.

Presentazione di ElementsKit

Con il componente aggiuntivo tutto in uno ElementsKit per Elementor include tonnellate di widget, moduli e funzionalità di Elementor sono sufficienti per offrirti l'esperienza di creazione di siti più avanzata e allo stesso tempo intuitiva che tu abbia mai avuto.

🤷🏻‍♀️ Perché ho bisogno di un footer di intestazione sul mio sito web?
L'intestazione e il piè di pagina sono componenti essenziali della progettazione di ogni sito web. Non è un’esagerazione affermarlo svolgere un ruolo significativo nello stabilire un'esperienza utente positiva facilitando la navigazione del sito. Non solo, ma sono anche utili per promuovere il marchio del sito Web e visualizzare CTA.

Cos'è un'intestazione Elementor?

Fondamentalmente, il parte superiore della tua pagina web è chiamato intestazione del sito web. L'intestazione è solitamente la stessa in tutto il tuo sito web. Alcuni siti Web utilizzano intestazioni distinte per diverse parti del sito, con un adeguato supporto dei temi.

Il design del modello di intestazione di Elementor fornirà ai tuoi utenti la prima impressione del tuo sito Web, indipendentemente dal fatto che siano arrivati alla tua home page, alla pagina Informazioni o a qualsiasi altro contenuto individuale. E, se il modello di intestazione di Elementor è ben progettato, attirerà l'attenzione dell'utente e lo invoglierà a continuare a scorrere e leggere.

L'intestazione Elementor aiuta anche a promuovere l'identità del marchio della tua azienda. Attraverso le sue funzionalità utili come il logo dell'azienda, il carattere, i colori e il linguaggio generale del marchio.

La navigazione del sito, la ricerca nel sito, un carrello degli acquisti (per i siti di e-commerce), i pulsanti di invito all'azione (CTA) e altre funzionalità che migliorano l'esperienza dell'utente e aumentano i tassi di conversione sono tutto trovato nelle intestazioni.

🔔 Sai?
Per qualsiasi tipo di sito web, un mega menu è un must. Rende la navigazione più semplice e aiuta le persone a trovare le informazioni di cui hanno bisogno in pochi clic.

Voglio sapere di più? Non dimenticare di consultare il nostro ultimo blog su Come aggiungere voci di menu Elementor Mega in WordPress

Cos'è un piè di pagina Elementor?

Un footer di Elementor è una sezione di una pagina web che appare in fondo alla pagina. Di solito vengono visualizzati costantemente in tutto il sito Web, su tutte le pagine e in tutti i post, simili alle intestazioni.

I piè di pagina vengono spesso trascurati, il che rappresenta uno spreco di potenziale dato che appare su ogni pagina del sito. Sono ugualmente cruciali per le intestazioni.

Il design del layout del piè di pagina può visualizzare informazioni utili e vitali come registrazione alla newsletter, informazioni sul copyright, termini di utilizzo e privacy, mappa del sito, informazioni di contatto, mappe, navigazione nel sito Web e molto altro, a seconda delle impostazioni scelte.

Di cosa hai bisogno per creare il piè di pagina dell'intestazione di Elementor

Ora, di cosa hai bisogno esattamente per creare un footer di intestazione Elementor? Bene, devi solo farlo due cose

1. Installa Elementor:

  • Vai semplicemente al tuo Pannello di amministrazione di WordPress → Plugin → Aggiungi nuovoe digita "Elementor"nella casella di ricerca.
  • Installa e attiva.

Un rapido promemoria: i moduli footer e header builder di Elementor vengono forniti con Elementor Pro. Quindi, se desideri modificare e personalizzare la tua intestazione Elementor (insieme al piè di pagina Elementor), dovresti scegliere il file versione professionale (che è $49/anno per un sito) oppure scegli l'opzione 2.

2. Installa ElementsKit, un generatore di footer di intestazione Elementor: 

Per installare il ElementsKit, un componente aggiuntivo tutto in uno per Elementor, devi seguire la stessa procedura menzionata sopra. 

  • Vai semplicemente al tuo Pannello di amministrazione di WordPress → Plugin → Aggiungi nuovoe digita "ElementsKit"nella casella di ricerca.
  • Installa e attiva.

Perchè ElementsKit?
Modulo per la creazione del piè di pagina dell'intestazione ElementsKit viene fornito con un pacchetto di sorprese che puoi modificare e personalizzare l'intestazione di Elementor (e modificare il piè di pagina di Elementor) nel modo che preferisci. Inoltre viene fornito con più modelli di piè di pagina di intestazione Elementor, che ti aiuteranno a creare intestazione e piè di pagina in pochi clic. Inoltre, ti consente di farlo creare siti web multilingue in WordPress. Ecco perché è riconosciuto e utilizzato attivamente da più di 1 milione di utenti attivi.

Cosa rende speciale il modulo Header Footer di ElementsKit

Componente aggiuntivo ElementsKit tutto in uno per Elementor ha aumentato la sua popolarità da quando è entrato nel mercato WordPress. Abbiamo sempre esaminato e continueremo a esaminare le richieste dei nostri utenti e lavoreremo costantemente per rendere le cose più facili e migliori!

I moduli footer dell'intestazione ElementsKit sono disponibili sia in versione gratuita che a pagamento. Insieme al piè di pagina dell'intestazione Elementor, abbiamo tantissimi altri moduli, funzionalità e widget.

Scarica il tuo componente aggiuntivo tutto in uno per Elementor

In altre parole, ElementsKit ha uno dei migliori Costruttore di menu mega così come Elementor Generatore di piè di pagina di intestazione moduli in WordPress.

Un'altra parte lodevole di ElementsKit sono i suoi modelli predefiniti. È uno dei componenti aggiuntivi più popolari e completamente personalizzabili per Elementor.

Oltre ai modelli, ha anche un'enorme quantità di funzionalità gratuite e premium:

  • 8+ moduli unici 
  • Oltre 70 elementi gratuiti e premium 
  • Oltre 30 pagine pronte
  • Oltre 500 sezioni pronte

ElementsKit è un luogo in cui puoi ottenere più strumenti per la creazione di siti Web in un unico posto. Ti offre anche la possibilità di personalizzare facilmente tutte le funzionalità.

Uno dei motivi principali per cui ElementsKit ha così tanto successo è le sue funzionalità vengono aggiornate regolarmente nel tempo. Con ElementsKit otterrai un pacchetto completo di risorse per la creazione di siti Web. 

Include anche Effetti del filtro parallasse che ti darà un'esperienza professionale per i tuoi visitatori web. 

ElementsKit rappresenta il maggior numero di moduli e funzionalità che chiunque potrebbe applicare per creare un sito web migliore in pochissimo tempo.

Come creare l'intestazione Elementor (o il piè di pagina Elementor) con ElementsKit

Creare e modificare l'intestazione e il piè di pagina su WordPress con ElementsKit può essere eseguito in pochi semplici passaggi. Ma prima di creare intestazioni, devi prima creare un Mega Menu. Quindi, tramite il nostro widget del menu di navigazione, puoi inserire i dettagli del menu nell'intestazione di Elementor. 

Crea intestazione (o piè di pagina) WordPress:

Per iniziare a costruire devi prima andare al tuo Pannello di controllo di WordPress E fare clic su > ElementsKit. Dopo di che fare clic su > Intestazione Piè di pagina.

Come aggiungere intestazione e piè di pagina in Elementor con ElementsKit - Modello di intestazione Elementor
Piè di pagina dell'intestazione, ElementsKit

Ti porterà alla pagina del builder del footer dell'intestazione. Quindi fare clic Aggiungere nuova per impostare il nome del modello di intestazione Elementor e altri dettagli. 

Fai clic su Aggiungi nuovo modello, ElementsKit - Modello di intestazione Elementor
Fare clic su Aggiungi nuovo modello, ElementsKit

Per creare e modificare un'intestazione o un piè di pagina devi seguire le stesse istruzioni. Dopo aver cliccato su Aggiungere nuova pulsante a Impostazioni del modello la scheda sarà aperta.

Impostazioni modello, ElementsKit - Modello di intestazione Elementor
Impostazioni del modello, ElementsKit

In cui devi inserire: Titolo, Tipo (Intestazione o piè di pagina) e Condizioni. Puoi selezionarne uno intestazione o piè di pagina che desideri venga inserito nell'intero sito, in una singola pagina o archiviarlo. Successivamente, è necessario fare clic su Attivazione pulsante. 

Hai creato con successo la tua intestazione (o piè di pagina), ora è il momento di personalizzarla!

Personalizza l'intestazione (o il piè di pagina) di WordPress:

Ora per modificare il tuo Elementor intestazione (o piè di pagina), è necessario fare clic sul file Modifica con Elementor pulsante. Dopo potrai finalmente integrare la tua intestazione (o piè di pagina) nel tuo sito web. 

Pulsante di modifica Elementor, ElementsKit - Modello di intestazione Elementor
Pulsante di modifica di Elementor, ElementsKit

Dopo aver fatto clic su Modifica con il pulsante Elementor, ti porterà al file Pannello di controllo di Elementor. Quindi vedrai tre icone come questa: 

Pulsante widget ElementsKit - - Modello di intestazione Elementor
Pulsante widget ElementsKit

Basta fare clic sull'icona ElementsKit e verrà visualizzata una libreria di modelli Elementor di ElementsKit in cui ne avrai tre opzioni: Modello, Pagine, E Sezioni

Per l'intestazione:

Quindi fare clic su Sezioni per ottenere il modello di intestazione Elementor perfetto. Per una migliore comprensione, fai clic su "Categoria" nell'angolo a sinistra per trovare la sezione desiderata. Nel Seleziona Intestazione sezione, vedrai tutti i tipi di modelli di intestazione predefiniti. Ora seleziona il modello che preferisci e sperimenta la magia.

Tieni presente che puoi personalizzare qualsiasi layout di footer di intestazione di Elementor di ElementsKit come preferisci.

Attivazione del menu di navigazione, generatore di piè di pagina dell'intestazione ElementsKit
Attivazione del menu di navigazione, ElementsKit

Ora che hai scelto il modello desiderato, vedrai apparire l'icona del menu di navigazione sul modello di intestazione.

Successivamente, vedrai il tuo Elementor Intestazione il titolo che hai aggiunto dalla dashboard di WordPress apparirà sul file selezionare la sezione del menu. E semplicemente facendo clic sul titolo dell'intestazione, vedrai che tutte le voci del tuo mega menu sono visibili.

Facendo clic sull'icona a forma di occhio su Elementor puoi visualizzare l'anteprima della tua intestazione. 

Intestazione Elementor, ElementsKit
Intestazione Elementor, ElementsKit

Per piè di pagina:

Sia l'integrazione dell'intestazione che quella del piè di pagina sono le stesse, tranne una. Per creare un piè di pagina devi selezionare il modello di piè di pagina dalla categoria di ricerca di ElementsKits, inserire i tuoi dati e sei a posto, facile facile! 

Piè di pagina Elementor, ElementsKit
Piè di pagina Elementor, ElementsKit

Congratulazioni, sei finalmente riuscito ad aggiungere un'intestazione e un piè di pagina al tuo sito web. 👏

Vuoi esplorare le altre alternative di personalizzazione del footer? Dai un'occhiata 👉👉: Come modificare il piè di pagina in WordPress.

Risorse addizionali

3 esempi di modelli di intestazione di siti Web

ElementsKit ti dà la possibilità di accedere ai suoi molteplici layout di intestazione, ecco le 3 migliori intestazioni che possono creare molto sul tuo sito web. 

1. L'intestazione più desiderabile per la navigazione:

Esempio di intestazione 1, ElementsKit - Modello di intestazione Elementor
Esempio di intestazione 1, ElementsKit

Questa intestazione di pagina è più adatta per i siti con una navigazione più complicata. C'è una barra di ricerca e un menu di navigazione centrale. Sono inoltre presenti elementi di ricerca per una navigazione più semplice. 

A sinistra puoi vedere il logo dell'azienda e i colori dell'azienda come bonus. Questa intestazione dall'aspetto professionale ha un aspetto classico e professionale.

2. Intestazione del ristorante ottimizzato per dispositivi mobili:

Esempio di intestazione 2, ElementsKit - Modello di intestazione Elementor
Esempio di intestazione 2, ElementsKit

Il ristorante presentava un'area di navigazione dell'intestazione e l'opzione Acquista ora e la visualizzazione del carrello sono evidenziate con enormi icone sull'altro lato. Puoi anche aggiungere una barra superiore con i pulsanti dei social media.

3. L'intestazione senza pretese: 

Esempio di intestazione 3, ElementsKit - - Modello di intestazione Elementor
Esempio di intestazione 3, ElementsKit

Nel design viene utilizzata la lavanda brillante, che si trova su uno sfondo bianco chiaro. Trasmette un senso di pulizia e ordine. Se desideri modificare i colori o utilizzare invece le sfumature, basteranno pochi secondi per raggiungere il tuo obiettivo.

3 esempi di modelli di piè di pagina di siti Web

Con ElementsKit otterrai diversi piè di pagina, ecco i migliori 3 piè di pagina che possono creare un'ottima impressione sul tuo sito web. 

1. L'elegante piè di pagina dell'agenzia:

Elementor Footer Esempio 1, ElementsKit
Piè di pagina Esempio 1, ElementsKit

Questo design del piè di pagina ha una sua personalità. Una visione chiara dei contenuti, con uno sfondo astratto, questo footer è pensato esclusivamente per le agenzie. Con una navigazione semplice, questo layout a piè di pagina enfatizza il design.

2. Piè di pagina del ristorante ottimizzato per dispositivi mobili:

Piè di pagina Esempio 2, ElementsKit
Piè di pagina Esempio 2, ElementsKit

L'ampia sezione del piè di pagina è ricca di un tema scuro, che lo rende accattivante. Grazie al sottile sfondo scuro, il cibo può essere rappresentato in modo migliore. I dettagli di contatto e la posizione vengono mostrati ancora una volta in un punto ben visibile.

3. Il piè di pagina extra lungo – SaaS:

Piè di pagina Esempio 3, ElementsKit
Piè di pagina Esempio 3, ElementsKit

Questo piè di pagina ha un aspetto meravigliosamente dettagliato, con uno sfondo blu reale. Ha un logo e colonne di dettaglio al centro e un navigatore, contatti, newsletter e collegamenti social sulla destra. Un'opzione perfetta per le società SaaS o di software. 

📃 Nota veloce
Non dimenticare di considerare i dispositivi mobili quando sviluppi un'intestazione o un piè di pagina con il supporto di un tema di fallback predefinito e di comprendere come il design potrebbe differire per loro.

FAQ

Consulta alcune domande frequenti:

Come modificare la dimensione dell'intestazione in WordPress?

Puoi modificare la dimensione dell'intestazione dalla scheda "Stili" del Blocco. Per questo, seleziona prima l'intestazione. Quindi, vai alla scheda "Stili" e lì troverai un'opzione denominata "Tipografia". Da Tipografia, puoi selezionare la dimensione dell'intestazione.

Come modellare un'intestazione in WordPress?

Per modellare la tua intestazione, devi prima selezionarla. Quindi, dal lato destro vai su “Blocca” e fai clic sulla scheda “Stili”. Qui troverai la personalizzazione del colore, la tipografia e altre opzioni di stile per la tua intestazione.

Conclusione

ElementsKit, un generatore di footer di intestazione di Elementor, ha reso facile per ogni proprietario di un sito Web WordPress, come l'aggiunta di un'intestazione e un piè di pagina rende un sito Web più organizzato e sottile. Inoltre, non solo aumenta l'esperienza degli utenti, ma migliora anche il traffico web. 

Non dovrai mai più aspettare che uno sviluppatore modifichi il tuo file header.php, passi a un tema diverso solo per spostare il logo dell'intestazione o passi ore a personalizzare gli elementi dell'intestazione e del piè di pagina CSS del tuo sito. ElementsKit rende la creazione di intestazioni e piè di pagina un gioco da ragazzi. 

Ottieni ElementsKit Pro oggi e ottieni il massimo dal tuo sito web in varie possibilità.

Si prega di lasciare un commento qui sotto se avete domande riguardanti il piè di pagina dell'intestazione ElementsKit o le sue funzionalità.

Se ti è piaciuto questo articolo, troverai sicuramente alcuni suggerimenti e blog più utili iscrivendoti al nostro Comunità WPmet Seguici su Facebook/Twitter. Infine, non dimenticare di iscriverti al nostro canale su Youtube per tutorial utili.

Commenti

  1. Alpe Avatar

    Ciao,

    Ho usato elementskits per creare un'intestazione per il mio sito.

    Purtroppo l'intestazione appare in tutte le pagine, tranne quella più importante: la homepage!

    Non ho idea del perché potrebbe essere, potresti forse aiutarmi?
    Grazie,

    1. Avatar Sanjida
      Sanjida

      Ciao Alp,
      Innanzitutto mi scuso per aver risposto in ritardo 😔

      La home page che hai scelto, per caso, è costruita su una tela Elementor? Se sì… Allora devi cambiarlo in 'predefinito' O 'Elementor a tutta larghezza

      Segui l'URL qui sotto 👇 per istruzioni migliori:
      https://elementor.com/help/using-elementors-canvas-page-template/

      Inoltre, assicurati di impostare l'intestazione in "Intero insieme condizionale

      Grazie molto,
      Sanjida

  2. Avatar Clayton
    Clayton

    Per favore aiuto. Ho appena acquistato questo plug-in professionale e non riesco a impostare intestazioni specifiche per determinate pagine. Vado a impostare per pagine singolari e mostra solo quella predefinita. Le intestazioni personalizzate non vengono visualizzate per le singole pagine su cui le ho impostate,

  3. Avatar Stefan
    Stefano

    Ho un problema con la visualizzazione di intestazione e piè di pagina in wp-admin. Sono nascosti in qualche modo. Vedo che esistono in qualche modo nel database, perché in cima alla pagina Footer dell'intestazione di ElementsKit vedo "Tutti (2)"

  4. Avatar Stefan
    Stefano

    Era WPML. Disabilitare la traduzione su elementorskit_template risolve il problema

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *