Crea un menu del piede come un'app mobile con Elementor (incl. Template GRATUITO)
Indice 📑
- Introduzione
- Cosa è Elementor?
- Creare un footer menu con Elementor
- Requisiti
- Download del template gratuito
- Installare Elementor Pro
- Aggiungere il template al footer con Elementor Pro
- Aggiungere il template a una pagina con Elementor
- Personalizzare il menu
- Aggiungere link telefonico
- Aggiungere link email
- Aggiungere link a Google Maps
- Aggiungere link ad una sezione specifica della pagina
- Cambiare gli iconi del menu
- Personalizzare i colori del footer
- Conclusioni
📑 Introduzione
Ciao a tutti gli appassionati di Elementor! In questo articolo ti mostrerò come creare un footer menu con icone per il tuo sito web utilizzando Elementor. Questo menu permetterà ai visitatori di contattarti facilmente tramite telefono o email, e fornirà un link a una sezione specifica della pagina. Continua a leggere per scoprire come realizzare questo design accattivante in modo semplice e veloce.
🏗️ Cosa è Elementor?
Elementor è uno dei plugin di progettazione di pagine più popolari per WordPress. Con Elementor, puoi creare pagine web personalizzate utilizzando un'interfaccia drag-and-drop intuitiva, senza dover scrivere codice. È uno strumento molto potente e flessibile che ti consente di sviluppare siti web di alta qualità in modo semplice ed efficiente.
🛠️ Creare un footer menu con Elementor
Per iniziare ad aggiungere un footer menu al tuo sito web con Elementor, avrai bisogno di alcuni requisiti e del template gratuito che metterò a disposizione. Successivamente, spiegherò come installare Elementor Pro e come aggiungere il template al footer del tuo sito utilizzando Elementor Pro. Se non disponi di Elementor Pro, non preoccuparti! Ti mostrerò anche come aggiungere il template a una pagina utilizzando Elementor.
📥 Requisiti
Prima di iniziare, assicurati di soddisfare i seguenti requisiti:
- Un sito web basato su WordPress.
- Il plugin Elementor installato e attivato sul tuo sito.
- (Opzionale) Elementor Pro per utilizzare il template nel footer di tutte le pagine.
📥 Download del template gratuito
Per facilitare il processo di creazione del tuo footer menu, ho creato un template gratuito che puoi scaricare e utilizzare. Puoi trovare il link per il download nel mio articolo sul mio sito web. Clicca sul link per scaricare il file zip contenente il template.
🔌 Installare Elementor Pro
Se hai Elementor Pro installato sul tuo sito web, puoi saltare questo passaggio. Tuttavia, se non hai ancora Elementor Pro, è consigliabile aggiungerlo per sfruttare al meglio tutte le funzionalità offerte da Elementor. Puoi acquistare e installare Elementor Pro tramite il loro sito web ufficiale.
➕ Aggiungere il template al footer con Elementor Pro
Se hai Elementor Pro installato, puoi seguire questi passaggi per aggiungere il template al footer del tuo sito web:
- Accedi al tuo pannello di amministrazione di WordPress.
- Vai su "Templates" e seleziona "Theme Builder".
- Fai clic su "Add New" e scegli "Footer" come tipo di template.
- Seleziona l'opzione per farlo visualizzare su tutte le pagine del tuo sito.
- Carica il file JSON del template che hai scaricato in precedenza.
- Fai clic su "Save" per salvare le modifiche.
Una volta completati questi passaggi, il tuo footer menu con icone dovrebbe essere visibile su tutte le pagine del tuo sito web.
➕ Aggiungere il template a una pagina con Elementor
Se non hai Elementor Pro, puoi ancora aggiungere il template a una pagina specifica utilizzando Elementor. Segui questi passaggi:
- Accedi al tuo pannello di amministrazione di WordPress.
- Vai alla pagina su cui desideri aggiungere il footer menu.
- Scorri verso il basso fino a trovare l'opzione "Add Template" e fai clic su di essa.
- Carica il file JSON del template che hai scaricato in precedenza.
- Fai clic su "Save" per salvare le modifiche.
🎨 Personalizzare il menu
Una volta aggiunto il template al tuo sito web, puoi iniziare a personalizzarlo. Puoi modificare gli URL dei collegamenti telefonici ed email, aggiungere link a Google Maps o altre pagine del tuo sito, e cambiare gli iconi del menu come preferisci.
☎️ Aggiungere link telefonico
Per aggiungere un link telefonico, segui questi passaggi:
- Seleziona l'icona del telefono nel tuo footer menu.
- Aggiungi il prefisso "Tel:" seguito dal numero di telefono nel campo appropriato.
- Salva le modifiche e il link telefonico sarà attivo quando si clicca sull'icona del telefono.
📧 Aggiungere link email
Per aggiungere un link email, segui questi passaggi:
- Seleziona l'icona dell'email nel tuo footer menu.
- Aggiungi il prefisso "mailto:" seguito dall'indirizzo email nel campo appropriato.
- Salva le modifiche e il link email sarà attivo quando si clicca sull'icona dell'email.
🗺️ Aggiungere link a Google Maps
Se desideri aggiungere un link a Google Maps nel tuo footer menu, segui questi passaggi:
- Seleziona l'icona di Google Maps nel tuo footer menu.
- Aggiungi l'URL di Google Maps nel campo appropriato.
- Salva le modifiche e il link a Google Maps sarà attivo quando si clicca sull'icona di Google Maps.
🔗 Aggiungere link ad una sezione specifica della pagina
Se vuoi fornire un link ad una sezione specifica della pagina nel tuo footer menu, puoi utilizzare gli anchor links. Segui questi passaggi:
- Scegli la sezione della pagina alla quale desideri collegarti.
- Aggiungi un ID univoco a quella sezione utilizzando l'opzione CSS ID nel menu Advanced di Elementor.
- Nel tuo footer menu, crea un collegamento con il prefisso "#" seguito dall'ID della sezione che hai creato.
- Salva le modifiche e il link diretto alla sezione specifica della pagina sarà attivo quando si clicca sull'icona corrispondente nel footer menu.
🎨 Cambiare gli iconi del menu
Se desideri cambiare gli iconi del tuo footer menu, segui questi passaggi:
- Seleziona l'icona che desideri modificare nel tuo footer menu.
- Fai clic sull'icona all'interno del menu di Elementor per aprire l'editor degli iconi.
- Seleziona l'icona desiderata tra le opzioni disponibili.
- Salva le modifiche e l'icona nel tuo footer menu sarà cambiata.
🎨 Personalizzare i colori del footer
Per personalizzare i colori del tuo footer menu, segui questi passaggi:
- Seleziona il tuo footer menu con Elementor.
- Vai nella sezione di stile del menu.
- Modifica il colore di sfondo del menu e delle icone secondo le tue preferenze.
- Salva le modifiche e i nuovi colori saranno visibili nel tuo footer menu.
🏁 Conclusioni
Congratulazioni! Ora hai un footer menu con icone perfetto per il tuo sito web realizzato con Elementor. Ricorda che puoi personalizzare ulteriormente il menu, aggiungere nuovi link e modificare gli stili in base alle tue preferenze. Utilizza questa funzionalità per offrire ai visitatori del tuo sito un modo semplice e veloce per contattarti e navigare tra le sezioni della pagina. Continua a sperimentare con Elementor e rendi il tuo sito web ancora più accattivante!
🌐 Risorse: