Le intestazioni e i piè di pagina di un sito Web sono elementi essenziali. Nella maggior parte dei casi, l'intestazione fornisce collegamenti di navigazione che semplificano la navigazione in diverse parti di un sito Web. D'altra parte, il piè di pagina contiene informazioni vitali che i visitatori del sito Web potrebbero richiedere, come l'indirizzo aziendale o le informazioni di contatto, per citare alcuni amp .
Intestazioni e piè di pagina sono forniti dal tema corrente dell'utente su WordPress. Questi sono generalmente ben progettati e adeguati per la maggior parte dei loro usi. Tuttavia, se desideri personalizzare i tuoi temi, dovrai modificare il codice; È qui che plugin di Page Builder tornano utili. Puoi usarli per creare e modificare componenti della pagina web senza conoscere alcun codice.
Questo tutorial ci insegnerà come creare un'intestazione e un piè di pagina per un sito web. Verrà utilizzato Elementor Pro (poiché la versione base di Elementor non include le funzionalità più importanti per la creazione di questi componenti). Quindi scarica Elementor Pro e assicurati che sia acceso.
- Perché dovresti scegliere Elementor come generatore di pagine?
- Elementor ti consente di scegliere il layout principale dell'intestazione e del piè di pagina personalizzati.
- Cos'è un'intestazione e cosa fa?
- Cos'è esattamente un piè di pagina?
- Come creare un'intestazione
- Sviluppo di un modello di intestazione
- Apportare modifiche al menu dell'intestazione
- Pubblicazione dell'intestazione
- Come creare un piè di pagina
- Sviluppo di un modello di piè di pagina
- Modifiche al piè di pagina
- Prodotto finito
- Esamina la reattività delle sezioni di intestazione e piè di pagina.
- Concludere le cose
Perché dovresti scegliere Elementor come generatore di pagine?
Elementor è il generatore di pagine più avanzato, che consente agli utenti di utilizzare elementi premium per creare splendidi design e layout. È molto utile per i principianti che non hanno alcuna conoscenza preliminare della programmazione. L'editor drag 'n' drop in Elementor consente agli utenti di spostare widget ed elementi.
Elementor è un generatore di pagine visive che consente agli utenti di vedere come appaiono le loro pagine senza cambiare modalità.
Un altro argomento convincente a favore dell’utilizzo di Elementor è che la maggior parte del lavoro può essere completata senza costi. La loro edizione gratuita è più che in grado di fornire adeguate funzionalità di modifica del sito. Tuttavia, esamineremo sia la versione gratuita che quella a pagamento in modo che tu possa scegliere quella più adatta alle tue esigenze.
Di seguito sono riportati alcuni degli aspetti importanti di Elementor che lo rendono utile:
- La funzionalità di trascinamento della selezione è supportata.
- Ha un gran numero di modelli.
- Ci sono oltre 90 widget in tutto.
- Non è richiesta alcuna codifica per il supporto reattivo.
- Sono disponibili opzioni di ripetizione e annullamento.
- È disponibile il salvataggio automatico.
Elementor ti consente di scegliere il layout principale dell'intestazione e del piè di pagina personalizzati.
Sarebbe utile se decidessi la disposizione generale delle sezioni di intestazione e piè di pagina desiderate prima di sviluppare un'intestazione univoca. Guardare il layout della sezione di intestazione predefinito potrebbe offrirti molte scelte.
Puoi scegliere tra varie sezioni di intestazione; l'intestazione più comune e dall'aspetto moderno presenta un logo del sito nell'angolo più a sinistra, una barra di navigazione al centro e una sezione della barra di ricerca a destra.
Ci sono infinite possibilità e puoi costruire qualsiasi layout desideri.
Ho scelto il n. 7 modelli di intestazione predefiniti; Questo è l'approccio più comune e semplice per utilizzare un'intestazione su un sito Web WordPress. Copia e incolla il nome del modello di intestazione in Modelli > Intestazione > modello di ricerca > incolla il nome dell'intestazione copiato .
Quando hai trovato il modello di intestazione che desideri, seleziona "Modifica con Elementor" e verrai indirizzato alla sezione del generatore di intestazioni di Elementor Pro.
Diamo inizio alla festa.
Cos'è un'intestazione e cosa fa?
La parte superiore della tua pagina web è chiamata “intestazione del sito web”. L'intestazione è solitamente la stessa in tutto il sito web. Tuttavia, alcuni siti Web utilizzano intestazioni diverse per parti diverse del sito.
Il design dell'intestazione darà ai tuoi utenti la prima impressione del tuo sito web, sia che siano arrivati alla tua home page, alla pagina Informazioni o ad altri contenuti individuali. E, se è ben progettato, attirerà l'attenzione dell'utente e lo invoglierà a continuare a scorrere e leggere.
L'intestazione può anche aiutare a promuovere l'identità del marchio della tua azienda.
Utilizzo funzionalità quali il logo, il carattere, i colori e il linguaggio generale del marchio dell'azienda.
La navigazione del sito, la ricerca nel sito, un carrello degli acquisti (per i siti di vendita), i pulsanti di invito all'azione (CTA) e altre funzionalità che migliorano l'esperienza dell'utente e aumentano i tassi di conversione si trovano tutti nelle intestazioni.
Cos'è esattamente un piè di pagina?
Un piè di pagina è una sezione di una pagina Web che appare nella parte inferiore della 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 compaiono su ogni pagina del sito. Sono ugualmente cruciali per le intestazioni.
Il design del tuo piè di pagina può visualizzare informazioni utili e vitali come la registrazione alla newsletter, informazioni sul copyright, termini di utilizzo e privacy, una mappa del sito, informazioni di contatto, mappe, navigazione nel sito Web e molto altro, a seconda delle impostazioni scelte.
Come creare un'intestazione
Creeremo un'intestazione personalizzata in questa sezione. Non preoccuparti se sembra intimidatorio; non inizieremo da zero. Utilizzeremo invece i modelli di Elementór Pro, progettati dal team di progettazione di Elementor.
Sviluppo di un modello di intestazione
Nel pannello di amministrazione di WordPress, passa con il mouse su Modelli e fai clic su Aggiungi nuovo per costruire la nostra intestazione.
Una volta che sarai stato instradato, apparirà una finestra modale. Seleziona Intestazione dal menu a discesa, assegna un nome all'intestazione e fai clic su " Crea modello ":
Questo avvierà l'editor di Elementor. Successivamente, ti verrà presentato un elenco di modelli tra cui scegliere. Quindi scegline uno che ti attira:
Dovrebbe essere visualizzato nella parte superiore della sezione di modifica di Elementor dopo aver scelto un modello:
Creazione di un logo: il primo passo è creare un logo. Imposta il logo nel Live Editor del sito per inserirlo nell'intestazione. Scegli un logo facendo clic su Identità sito.
Una volta deciso il logo, fai clic su Pubblica .
Il logo del tuo sito ora dovrebbe essere nell'intestazione se aggiorni l'interfaccia di Elementor:
Successivamente, puoi apportare tutte le modifiche che desideri.
Apportare modifiche al menu dell'intestazione
La prossima cosa che dovremmo fare è cambiare il menu. Se hai generato un menu, il modello lo incorporerà automaticamente:
Ecco la struttura del nostro menu, che puoi vedere riflessa nel modello di intestazione:
Se hai più di un menu, puoi aggiornare i contenuti se necessario.
Puoi modificare le sue proprietà proprio come qualsiasi altro widget.
Se dobbiamo aggiungere più elementi, possiamo aggiungere più sezioni alla nostra intestazione:
Iniziamo aggiungendo un'intestazione e alcune icone dei social media:
Successivamente, puoi apportare tutte le modifiche che desideri. Ecco come è venuta fuori la nostra modifica:
Pubblicazione dell'intestazione
Ora puoi pubblicare l'intestazione una volta che hai finito di modificarla. Utilizzeremo l'intestazione su tutto il nostro sito nell'esempio amp , quindi selezioneremo quella scelta dopo aver selezionato Aggiungi condizione:
Ed ecco un amp di una pagina dal nostro sito live:
Come creare un piè di pagina
Sviluppo di un modello di piè di pagina
Il processo di creazione di un piè di pagina è abbastanza simile a quello di costruzione di un'intestazione. Per crearne uno, crea un nuovo modello di piè di pagina come questo:
Quindi decidere un modello. I piè di pagina sono disponibili in una varietà di forme e dimensioni. Alcuni includono informazioni aziendali, mentre altri hanno moduli di contatto. Seleziona un modello adatto alle tue esigenze.
Il template che abbiamo scelto per il nostro sito web è il seguente:
Modifiche al piè di pagina
Vedrai l'intestazione non appena inizi a modificare (se imposti la condizione che appaia su tutte le pagine).
Cambia il piè di pagina secondo necessità; Ecco come appare la nostra revisione:
Pubblica il piè di pagina una volta terminato:
Prodotto finito
Ecco come appare il risultato finale. Sia l'intestazione che il piè di pagina sono ora utilizzati sul nostro sito web:
Esamina la reattività delle sezioni di intestazione e piè di pagina.
Questa è la fase più importante e devi assicurarti che le sezioni di intestazione e piè di pagina siano reattive. Poiché un menu a larghezza intera solitamente non è adatto alla visualizzazione mobile, devi sapere come apparirà il tuo design sullo schermo mobile. Gli interruttori reattivi nella parte inferiore della sezione della barra laterale di Elementor possono modificare le versioni mobile e a schede.
Puoi testare la reattività della tua intestazione e piè di pagina in vari modi. Ad amp , puoi utilizzare strumenti come Browserstack, CrossBrowser Testing e Google Resizer per garantire che le tue pagine web siano il più reattive possibile. Puoi anche farlo manualmente sperimentando diversi dispositivi.
Concludere le cose
Spero che questa guida ti abbia aiutato a sviluppare rapidamente le tue sezioni di intestazione e piè di pagina uniche utilizzando Elementor Pro. WordPress ha molte funzionalità, ma consente solo alcune modifiche nelle sezioni di intestazione e piè di pagina, finalmente risolte con il page builder Elementor Pro. Con un controllo molto migliore sugli elementi del tuo sito, ora puoi dimostrare meglio la visione del tuo sito. Inoltre, la funzionalità di Elementor è stata migliorata utilizzando componenti aggiuntivi gratuiti, consentendo agli utenti di personalizzare i propri siti Web con funzionalità più avanzate.
