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 un indirizzo commerciale o informazioni di contatto, per citare alcuni amp .
Intestazioni e piè di pagina sono forniti dal tema corrente di un 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; Questo è quando i plugin Page Builder tornano utili. Puoi usarli per creare e modificare i componenti della pagina web senza conoscere alcun codice.
Questo tutorial ci insegnerà come creare un'intestazione e un piè di pagina di 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.
- Che cos'è un'intestazione e cosa fa?
- Che 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 fare un piè di pagina
- Sviluppo di un modello di piè di pagina
- Modifiche al piè di pagina
- Prodotto finito
- Esamina le sezioni di intestazione e piè di pagina per verificarne la reattività.
- Chiudere 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 codifica. 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 per l'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 capacità 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:
- È supportata la funzionalità di trascinamento della selezione.
- 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 ripristino e annullamento.
- Il salvataggio automatico è disponibile.
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 dell'intestazione preimpostato potrebbe fornirti 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 tu voglia.
Ho scelto il modello di intestazione predefinito n. 7; Questo è l'approccio più comune e semplice all'utilizzo di 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.
Che 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 tuo 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, indipendentemente dal fatto che siano arrivati alla tua home page, alla pagina o ad altri contenuti individuali. E, se è ben progettato, attirerà l'attenzione dell'utente e lo indurrà a continuare a scorrere e leggere.
L'intestazione può anche aiutare nella promozione dell'identità del marchio della tua azienda.
Utilizzo funzionalità come il logo, il carattere, i colori e il linguaggio generale del marchio dell'azienda.
La navigazione nel 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 tutte nelle intestazioni.
Che cos'è esattamente un piè di pagina?
Un piè di pagina è 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 i post, simili alle intestazioni.
I piè di pagina sono spesso trascurati, il che è uno spreco di potenziale, dato che compaiono in ogni pagina del sito. Sono ugualmente cruciali per le intestazioni.
Il design del tuo piè di pagina può visualizzare informazioni utili e vitali come registrazione alla newsletter, informazioni sul copyright, termini di utilizzo e privacy, una mappa del sito, informazioni di contatto, mappe, navigazione sul sito Web e molto altro, a seconda delle impostazioni scelte.
Come creare un'intestazione
Creeremo un'intestazione personalizzata in questa sezione. Non preoccuparti se ti sembra intimidatorio; non partiamo da zero. Utilizzeremo invece i modelli di Elementor 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 creare la nostra intestazione.
Una finestra modale apparirà una volta che sei stato instradato. Seleziona Intestazione dal menu a discesa, assegna un nome all'Intestazione e fai clic su " Crea modello ":
Questo lancerà l'editor Elementor. Successivamente, ti verrà presentato un elenco di modelli tra cui scegliere. Quindi scegline uno che ti piace:
Dovrebbe apparire in cima alla sezione di modifica di Elementor dopo aver scelto un modello:
Creazione di un logo: il primo passo è creare un logo. Imposta il logo nell'editor live del sito per inserirlo nell'intestazione. Scegli un logo facendo clic su Identità del sito.
Dopo aver deciso un logo, fai clic su Pubblica .
Il logo del tuo sito dovrebbe ora essere nell'intestazione se aggiorni l'interfaccia di Elementor:
Successivamente, puoi apportare 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 nostra struttura del 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à come qualsiasi altro widget.
Se abbiamo bisogno di aggiungere più elementi, possiamo aggiungere più sezioni alla nostra intestazione:
Iniziamo aggiungendo un'intestazione e alcune icone dei social media:
Successivamente, puoi apportare le modifiche che desideri. Ecco come è risultata la nostra modifica:
Pubblicazione dell'intestazione
Ora puoi pubblicare l'intestazione una volta che hai finito di modificarla. Utilizzeremo l'intestazione sull'intero sito nell'esempio amp , quindi selezioneremo tale scelta dopo aver selezionato Aggiungi condizione:
Ed ecco un ex amp Le di una pagina del nostro sito in diretta:
Come fare 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 su 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).
Modificare il piè di pagina secondo necessità; Ecco come appare la nostra revisione:
Pubblica il piè di pagina al termine:
Prodotto finito
Ecco come appare il risultato finale. Sia l'intestazione che il piè di pagina sono ora utilizzati sul nostro sito Web:
Esamina le sezioni di intestazione e piè di pagina per verificarne la reattività.
Questa è la fase più importante e devi assicurarti che le sezioni dell'intestazione e del piè di pagina siano reattive. Poiché un menu a larghezza intera di solito non si adatta 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 mobili e delle schede.
Puoi testare la reattività dell'intestazione e del piè di pagina in vari modi. Per ex amp le, è possibile utilizzare strumenti come Browserstack, crossbrowser test, e Google Resizer per garantire che le pagine web siano così sensibile come possibile. Puoi anche farlo manualmente sperimentando diversi dispositivi.
Chiudere 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 generatore di pagine 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.
