Come creare un piè di pagina del sito Web completamente personalizzato con Elementor

Come creare un piè di pagina del sito Web completamente personalizzato con Elementor

Ti sei mai chiesto come puoi creare e personalizzare il footer del tuo sito web senza toccare una singola riga di codice? 

Sembra una favola, vero? Bene… La storia questa volta diventa realtà! ✨

Con il generatore di pagine più popolare Elementor, otterrai la massima flessibilità per creare un piè di pagina prominente. 

COME 66% di visitatori web effettivamente vagano sotto la piega, la sezione del piè di pagina deve essere interattiva per l'utente. Altrimenti perderai gran parte dei tuoi clienti in un batter d’occhio.

Ma non diventare ancora paranoico! In questo articolo, ti mostreremo il modo efficace per creare un footer del sito web completamente personalizzato con Elementor per il tuo sito web! 🙌

Quindi, entriamo nel merito! 

Perché il piè di pagina è importante?

Lo sai, puoi aumentare le entrate del tuo affari di circa 16% semplicemente aggiungendo un piè di pagina facilmente navigabile?

Oltre all'enorme coinvolgimento degli utenti, è molto efficace anche per la SEO. Migliora la struttura dei collegamenti interni e rende la navigazione più fluida che mai.

Fortunatamente, puoi usufruire di tutte queste funzionalità semplicemente aggiungendo un piè di pagina accattivante contenente i collegamenti interni come collegamenti a livello di sito o collegamenti standard.

Ma un piè di pagina contiene solo collegamenti? 🤔

No…❗

Puoi aggiungere il tuo demo di prodotti, pulsanti di iscrizione o moduli di contatto pure! Pertanto, i tuoi clienti non solo potranno navigare facilmente sul tuo sito web, ma anche avere un'idea chiara dei tuoi prodotti.

Abbastanza impressionante, eh?

Aspettare! Ecco un altro fatto bonus appositamente per te!

Oltre ad aggiungere tutte queste funzioni sotto la piega, non dimenticare di aggiungere un file pulsante CTA accattivante! Così gli utenti rimarranno impressionati e si trasformeranno nei tuoi veri clienti.

È una situazione vantaggiosa per entrambi, giusto?

Scopri come creare la sezione footer e come può avvantaggiare il tuo marchio migliorando l'esperienza dei tuoi visitatori utilizzando Elementor.

Cose che devi aggiungere ai piè di pagina del tuo sito web

Ecco gli elementi principali di un buon design del footer del sito web. Cercherò di coprire tutte le sezioni che puoi creare e personalizzare da te. 

  1. Logo
  2. Informazioni sull'azienda 
  3. Dettagli del contatto
  4. Navigazione
  5. Supporto
  6. Copyright, termini di servizio, politica sulla privacy
  7. Icone dei social media
  8. Chiamare all'azione
Nota: non esagerare mai con il design del footer del tuo sito web, cerca di mantenerlo il più semplice possibile.

Cosa ti serve per creare piè di pagina personalizzati con Elementor

Per seguire questo blog tutorial, avrai bisogno di due cose–>

E fatto!

Perché Elementor ed ElementsKit? 

Se hai problemi a progettare la tua pagina web con molto codice e tutto il resto. Nessun problema! Il tuo generatore di pagine più potente Elementor è qui! 

Goditi il pieno controllo drag-and-drop sul footer del tuo sito web. Elementor è la scelta migliore se non ti piace l'aspetto del tuo piè di pagina attuale. 

Elementor include utili componenti aggiuntivi per personalizzare facilmente il tuo sito web. ElementsKit è il più popolare tra loro con un potente generatore di piè di pagina, oltre 85 widget e layout di piè di pagina già pronti per migliorare il tuo design. 

Qui in questo tutorial imparerai come creare un bellissimo piè di pagina Elementor personalizzato con ElementsKit! 

Quindi iniziamo.

Come creare un piè di pagina del sito Web completamente personalizzato con Elementor

In questa sezione mostreremo come personalizzare o creare un footer interattivo per l'utente per il tuo sito web in pochi passaggi!

Passaggio->1: aggiungi piè di pagina

Innanzitutto, per creare un piè di pagina del sito Web completamente personalizzato con Elementor, accedi al pannello della dashboard di amministrazione del tuo sito Web. 

  • Navigare verso ElementsKit I miei modelli 
  • Clic Aggiungere nuova

Si aprirà una finestra popup con le opzioni.

Passaggio->1: aggiungi piè di pagina

Passaggio->2: seleziona Opzioni piè di pagina

  • Quindi nella casella popup digitare a Titolo. Ad esempio: piè di pagina personalizzato
  • Seleziona il Tipo → Piè di pagina
  • Seleziona le Condizioni → Intero sito
  • Attiva/disattiva il Opzione di attivazione 
  • Clic “Modifica con Elementor”

Si aprirà una pagina dell'editor, qui potrai creare l'aspetto della tua sezione footer

Passaggio->2: seleziona Opzioni piè di pagina

Passaggio->3: scegli un design per piè di pagina web

Puoi iniziare a costruire il piè di pagina del tuo sito web da zero oppure puoi scegliere uno dei nostri piè di pagina precedentemente creati come punto di partenza.

  • Per progettare il footer di un sito web, devi fare clic su Icona selezionata-> Vai a Scheda piè di pagina
  • Basta fare clic su Inserisci pulsante aggiungere e il gioco è fatto! 
Passaggio->3: scegli un design per il piè di pagina

Passaggio->4: imposta il layout generale

In questa impostazione, scegli il tipo di disposizione vuoi creare un piè di pagina personalizzato.

  • Fare clic sul pulsante di personalizzazione principale: Per modificare la sezione Layout nella barra laterale della parte del piè di pagina.
  • Abilita la sezione Allunga: Allunga la sezione per l'intera larghezza della pagina utilizzando JS.
  • Imposta larghezza contenuto: Seleziona la larghezza del contenuto in riquadro o la larghezza intera dal menu a discesa. Inoltre, controllalo semplicemente trascinandolo. 
  • Scegli Spazio colonne: Selezionare Stretto, Esteso, Ampio, Più ampio
  • Regola l'altezza: Scegli Adatta allo schermo o altezza minima
  • Scegli Allineamento verticale: Selezionare Alto, Centro, Basso, Spazio in mezzo, Spazio intorno, Spazio uniforme
  • Traboccamento: Mantienilo predefinito o nascosto 
  • Seleziona tag HTML: Seleziona dal menu a discesa
Passaggio->4: imposta il layout generale

Dovresti collegare la tua azienda nel footer del sito web del prodotto per migliorare la visibilità sui motori di ricerca. In tal caso, il logo della tua azienda riporterà gli utenti alla home page quando fai clic su di esso. Inoltre, puoi aggiungere un logo molto facilmente con un semplice passaggio. 

  • Clicca sul Immagine del logo→ Carica facilmente un'immagine o scegli dal tuo file multimediale.
  • Seleziona facilmente il Dimensione dell'immagine dal menu a discesa
  • Scegli il Allineamento sinistra, centro o destra
  • Puoi aggiungere qualsiasi tipo di Didascalia immagine come una didascalia di allegato o una didascalia personalizzata
  • Scegli il Tipo di collegamento File multimediale o URL personalizzato. Puoi fornire qualsiasi URL di reindirizzamento. 
Passaggio -> 5: aggiungi un logo

Passaggio->6: aggiungi o modifica la descrizione dell'azienda

Ora, il piè di pagina del tuo sito web è un luogo in cui visualizzare informazioni importanti. Puoi facilmente aggiungere un breve brief sulla tua azienda 

  • In questa impostazione puoi Aggiungi o modifica qualsiasi tipo di testo 
  • Abilita capolettera per mostrare una lettera grande all'inizio del contenuto che appaia più accattivante. 
Passaggio->6: aggiungi o modifica la descrizione dell'azienda

Passaggio->7: aggiungi le icone di condivisione social

Lo sapevate, 72% dei siti Web utilizza le icone dei social media creare un piè di pagina del sito web completamente personalizzato con Elementor?

Bene, aggiungere un widget che mostri i tuoi post più recenti come Twitter, Facebook o Instagram aiuterà gli utenti a rimanere in contatto. 

Per personalizzare le icone dei social media e aggiungere i collegamenti di condivisione social alle icone in basso. Devi→

  • Fare clic sul widget social per modificare le icone social. 
  • Scegli il tuo stile: Icona, Testo o Entrambi
  • Seleziona Posizione di allineamento Sinistra, Centro o Destra
  • Clicca sul Contenuti di Facebook espandere
  • Aggiungi icona: Carica icona dalla libreria
  • Aggiungi/modifica Etichetta
  • Fornire Collegamento sociale
  • Personalizza l'icona sia per il normale che per il passaggio del mouse
  • Aggiungere Colore di sfondo
  • Aggiungere Tipo di bordo: Solido, Doppio, Punteggiato, Tratteggiato, Scanalato
  • Selezionare Ombra del testo: Sfocatura, Orizzontale, Verticale
  • Selezionare Ombra della scatola: Orizzontale, Verticale, Sfocatura, Diffusione
  • Selezionare Posizione: Contorno o riquadro
Passaggio->7: aggiungi le icone di condivisione social

Passaggio->8: Includi copyright

Le informazioni sul copyright sono un elemento indispensabile di qualsiasi piè di pagina. Poiché è il modo migliore per proteggere il tuo sito web dal plagio. 

  • Aggiungi o modifica facilmente il contenuto
  • Scegli Tag HTML dal menu a discesa 
Passaggio->8: Includi copyright

Passaggio->8: personalizza l'intestazione delle informazioni di contatto

Secondo gli standard del web design, informazioni sui contatti dovrebbe essere trovato a destra o al centro del piè di pagina. Tuttavia, puoi personalizzarlo facilmente con pochi passaggi.

  • Aggiungi/Modifica il testo dell'intestazione del contatto qui
  • Fornire Collegamento di reindirizzamento
  • Scegliere Dimensioni, tag HTML dal menu a discesa
  • Scegli il Allineamento sinistra, centro, destra o giustificato
Passaggio->8: personalizza l'intestazione delle informazioni di contatto

Passaggio->9: aggiungi la sede dell'azienda 

L'ubicazione della tua azienda aiuta moltissimo SEO locale. Ecco la procedura per aggiungere l'indirizzo della tua azienda→

  • Scegli il layout: predefinito o in linea
  • Aggiungi o modifica la sede dell'azienda 
  • Carica qualsiasi icona dalla libreria di icone con il collegamento di reindirizzamento
Passaggio->9: aggiungi la sede dell'azienda 

Saperne di più - Come aggiungere Google Maps nel sito WordPress (il modo più semplice) 🎉

Passaggio->10: pulsante di posizione CTA

UN lo studio lo dimostra l'opzione migliore per inserire il tuo invito all'azione sotto la piega in ogni pagina di marketing. Segui la procedura per aggiungere un pulsante CTA per mostrare la posizione dell'azienda→

  • Etichetta: aggiungi o modifica il testo del pulsante
  • URL: Fornire il collegamento URL di reindirizzamento
  • Abilitare IL Aggiungi icona per fornire a Icona del pulsante
  • Carica l'icona del pulsante da la libreria di icone oppure puoi caricarlo da la tua libreria
  • Seleziona la posizione dell'icona: Prima del testo o dopo il testo
  • Fornire Nome della classe O ID
Passaggio->10: pulsante di posizione CTA

Passaggio->11: personalizza il numero di telefono e l'e-mail

Aggiungere il numero di contatto al tuo sito aiuta a migliorare il SEO. Lascia che il tuo numero di contatto sia cliccabile in modo che i visitatori possano semplicemente toccare per chiamare. Ora modificheremo il telefono e l'e-mail.

  • Scegli il layout: Predefinito o In linea
  • Aggiungi o modifica il numero di telefono e l'e-mail dell'azienda
  • Carica qualsiasi icona con collegamento di reindirizzamento
Passaggio->11: personalizza il numero di telefono e l'e-mail

Come far crescere la tua lista e-mail per le aziende: metodi comprovati 🚀

Passaggio->12: Mostra elenco pagine con collegamento di reindirizzamento

Un altro componente comune del piè di pagina è un collegamento a una pagina. Aggiungi qualsiasi elenco di pagine come informativa sulla privacy, Termini e condizioni o altro. Mostra semplicemente i dettagli della pagina della politica, delle informazioni, delle norme e dei regolamenti del sito Web, ecc. Vediamo come farlo→

  • Seleziona Disposizione
  • Aggiungi o modifica testo
  • Aggiungi o modifica sottotitoli
  • Abilita Attiva/disattiva per mostrare l'icona
  • Carica icona
  • Seleziona Colore icona
  • Seleziona Posizione icona
  • Cerca la pagina in cui desideri visualizzare l'elenco delle pagine
  • Abilita per mostrare l'etichetta
  • Aggiungi o modifica etichetta
  • Personalizza colore di sfondo, tipografia, imbottitura, allineamento, raggio
Passo->12: Mostra elenco pagine con collegamento di reindirizzamento

Se desideri creare un'intestazione personalizzata per il tuo sito Web WordPress, consulta questo blog – Come progettare un'intestazione personalizzata con Elementor

Passaggio -> 13: feed Instagram personalizzato sul piè di pagina

Il piè di pagina del sito Web può essere una sezione perfetta per inserire feed di social media pertinenti, come ad esempio Feed di Instagram. Vediamo quali funzionalità potrai personalizzare→

  • Dalle Impostazioni layout => Seleziona Elenco stile griglia, Griglia o Massoneria
  • Seleziona la tua griglia di colonne 1,2,3 o 4 indica quante colonne vuoi scegliere per visualizzare le immagini.
  • Abilita Stile feed per fornire l'effetto feed Instagram
  • Fornisci il valore del conteggio di quanti post desideri visualizzare
  • Abilita la casella dei commenti per mostrare il commento e la reazione dell'utente al tuo post
  • Abilita Mostra didascalia per visualizzare la didascalia attraente dell'immagine
  • Abilita il pulsante Segui per aggiungere un pulsante Seguici e fornire un collegamento Instagram della pagina seguente
  • Segui il testo del pulsante: personalizza il testo del pulsante
  • Segui collegamento: fornire il collegamento Segui
  • Allineamento: seleziona la posizione del pulsante in cui desideri visualizzare il pulsante: a sinistra, a destra o al centro
Suggerimenti professionali: Non dovresti utilizzare la funzionalità di riproduzione automatica, poiché ciò potrebbe disorientare i tuoi visitatori. 
Passaggio->14: pubblica il tuo piè di pagina

Passaggio->14: pubblica il tuo piè di pagina

  • Ecco la parte più importante. Dopo aver progettato il tuo piè di pagina, fai semplicemente clic sul "Pulsante Aggiorna" 

  • La cosa fondamentale di questa sezione è fare clic "Anteprima". E questo è tutto! Finalmente, la parte del piè di pagina è pronta. 

Sìeeee!!! 🥳

Avvolgendo

Questo è tutto per il piè di pagina! 

Crediamo che in questo blog tutorial di Elementor tu abbia imparato come creare in modo efficace piè di pagina da visualizzare utilizzando Elementor e l'importanza dei piè di pagina sul tuo sito. 

Spero che tu possa ora farlo facilmente crea un piè di pagina del sito web completamente personalizzato con il componente aggiuntivo ElementsKit Elementor.

Tuttavia, se hai domande da porre, non esitare a lasciare un commento qui sotto. Ci piacerebbe aiutarti.


Commenti

Lascia un commento

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