Alla ricerca di un modo semplice per personalizzare l’intestazione WordPress?
Poiché la tua intestazione si trova nella parte superiore di ogni pagina, svolge un ruolo essenziale nel branding del tuo sito web, aiutando i tuoi visitatori a navigare e promuovendo i tuoi contenuti più importanti.
Tuttavia, per ottenere il massimo beneficio dall’intestazione del tuo sito, hai bisogno di un modo per modificarlo, che molti temi non offrono.
In questo post, condivideremo alcune tattiche diverse che è possibile utilizzare per personalizzare l’intestazione in WordPress utilizzando sia semplici interfacce drag-and-drop e il proprio codice.
L’opzione più semplice è quella di utilizzare il tema Astra e il suo generatore di intestazione drag-and-drop, ma condivideremo anche alcune altre tattiche che funzioneranno con qualsiasi tema WordPress.
- Qual è l’intestazione di WordPress?
- Come personalizzare l’intestazione WordPress con Astra
- 1. Apri Astra Header Builder
- 2. Aggiungi e organizza il contenuto dell’intestazione
- 3. Personalizza il layout dell’intestazione
- 4. Sperimenta con diversi tipi di intestazioni
- Tre Altri Modi per Personalizzare l’Intestazione di WordPress
- 1. Usa le impostazioni del Customizer del tuo tema
- 2. Usa Elementor e un plugin di intestazione personalizzato gratuito
- 3. Usa Codice personalizzato (Avanzato)
- Personalizza il tuo Header WordPress oggi
Qual è l’intestazione di WordPress?
L’intestazione di WordPress è la parte del tuo sito che appare nella parte superiore di ogni pagina. In genere, include almeno due elementi al minimo indispensabile:
- Logo/identità del sito
- Menu di navigazione)
Ad esempio, ecco come appare l’intestazione sul blog Astra. Puoi vedere che include il logo Astra e due menu di navigazione separati:
A seconda delle tue esigenze, puoi anche includere altri elementi come le icone dei social media, una casella di ricerca, promozioni, il tuo numero di telefono e altre informazioni.
Se hai bisogno di vedere come funziona, l’intestazione di WordPress è contenuta nell’intestazione.file php nel tuo tema WordPress.
Come personalizzare l’intestazione WordPress con Astra
Se si desidera il pieno controllo sulla vostra intestazione WordPress, il tema gratuito Astra ti dà un drag-and-drop, no-codice modo per personalizzare completamente la vostra intestazione WordPress.
Sarete in grado di vedere le modifiche subito su un’anteprima dal vivo del tuo sito web e si può facilmente aggiungere diversi tipi di contenuti, come pulsanti, icone sociali, una casella di ricerca, e altro ancora.
Per iniziare, ti consigliamo di installare e attivare il tema Astra. È inoltre possibile importare una delle centinaia di siti demo pre-costruiti per ottenere rapidamente installato e funzionante. Se hai bisogno di una mano con qualsiasi di questi passi, abbiamo un sacco di guide per aiutarvi:
- Come installare Astra
- Come importare starter siti
una Volta che avete il vostro sito di base pronto ad andare, ecco come personalizzare l’intestazione utilizzando Astra.
Ciao! Mi chiamo Sujay e sono amministratore delegato di Astra.
Siamo in missione per aiutare le piccole imprese a crescere online con prodotti software a prezzi accessibili e l’istruzione di cui hai bisogno per avere successo.
Lascia un commento qui sotto se si desidera partecipare alla conversazione, o clicca qui se si desidera un aiuto personale o di impegnarsi con il nostro team in privato.
1. Apri Astra Header Builder
Per iniziare, vai su Aspetto → Personalizza nella dashboard di WordPress per avviare il Customizer nativo di WordPress. Quindi, selezionare l’Intestazione option Builder:
una Volta che si avvia l’intestazione del generatore, vedrete una nuova serie di opzioni in cui è possibile controllare il layout di intestazione:
2. Aggiungi e organizza il contenuto dell’intestazione
Ora per la parte divertente – aggiunta di contenuti. Puoi vedere che hai tre righe nel generatore di intestazione. Ogni riga controlla il contenuto per una parte diversa dell’intestazione:
- Sopra header
- Primary header-questo è dove metterai il tuo contenuto “principale”.
- Sotto intestazione
Ti consigliamo assolutamente di includere il contenuto nell’intestazione primaria e quindi hai la possibilità di aggiungere contenuti sopra o sotto in base alle tue esigenze.
Per aggiungere contenuti, è possibile fare clic sul punto in cui si desidera aggiungere contenuti. Questo aprirà una serie di opzioni:
- menu Principale
- menu Secondario
- Logo
- Ricerca
- Sociale
- HTML 1
- HTML 2
si noti che, come si aggiunge contenuto, vedrete un minor numero di opzioni. Ad esempio, puoi aggiungere il tuo logo solo una volta, in modo che l’opzione scompaia una volta che hai già aggiunto un logo all’intestazione:
Dopo aver aggiunto alcuni contenuti, è possibile fare clic su tale contenuto per aprire le impostazioni. Ad esempio, se aggiungi un pulsante, sarai in grado di controllare il testo e il collegamento del pulsante.
È anche possibile aprire le impostazioni di Design per personalizzare ulteriormente le cose:
Se si desidera riorganizzare il contenuto o spostare una riga diversa, tutto quello che dovete fare è trascinare e rilasciare:
3. Personalizza il layout dell’intestazione
Sopra, ti abbiamo mostrato come personalizzare i singoli elementi all’interno dell’intestazione. Hai anche diverse opzioni per personalizzare l’intestazione nel suo complesso.
Prima di tutto, puoi andare alla scheda Progettazione del generatore di intestazione principale per controllare la larghezza e la spaziatura dell’intestazione. È inoltre possibile fare clic sull’icona dell’ingranaggio per ogni riga di intestazione per personalizzare la sua altezza e il design:
4. Sperimenta con diversi tipi di intestazioni
A seconda che tu stia utilizzando la versione gratuita di Astra o Astra Pro, avrai anche accesso a tipi aggiuntivi di intestazioni, come intestazioni trasparenti (gratuite) e intestazioni appiccicose (Pro).
È possibile utilizzare lo stesso generatore di intestazione e piè di pagina sopra per progettare l’intestazione trasparente o appiccicosa. Vedrai queste opzioni nella sezione Tipi di intestazione. È possibile fare clic su di essi per espandere le impostazioni e progettare i diversi tipi di intestazione:
Tre Altri Modi per Personalizzare l’Intestazione di WordPress
Mentre Astra drag-and-drop di intestazione builder offre il modo più semplice per personalizzare l’intestazione di WordPress, ci sono anche altre tattiche che è possibile utilizzare, a prescindere dal tema che stai usando.
Ecco alcune delle migliori strategie
1. Usa le impostazioni del Customizer del tuo tema
La maggior parte dei temi WordPress ti dà un certo controllo sull’intestazione del tuo sito nel Customizer nativo di WordPress. È improbabile che tu possa ottenere il livello di dettaglio che Astra ti offre, ma otterrai alcune opzioni per controllare come appare e funziona la tua intestazione.
Queste opzioni variano in base al tema, ma di solito puoi aprirle facendo clic sull’icona della matita blu accanto agli elementi nell’intestazione. Ad esempio, nel nuovo tema predefinito Twenty Twenty-One, puoi vedere che sei in grado di personalizzare il tuo:
- Logo
- Titolo del sito
- Menu
Se hai bisogno di aiuto extra, puoi consultare la documentazione dello sviluppatore del tema.
2. Usa Elementor e un plugin di intestazione personalizzato gratuito
Se non hai familiarità con Elementor, è uno strumento di progettazione visivo e drag-and-drop che puoi utilizzare per creare contenuti sul tuo sito. Con il libero Elementor-Header, Piè di pagina & Blocchi Template header personalizzato WordPress plugin, è possibile utilizzare la versione gratuita di Elementor per progettare il proprio header personalizzato WordPress.
Questo plugin funziona perfettamente con il tema gratuito Astra, così come qualsiasi altro tema WordPress si potrebbe utilizzare.
Per iniziare, installa e attiva il plugin gratuito da WordPress.org. Avrai anche bisogno di installare la versione gratuita di Elementor se non l’hai già fatto.
Una volta fatto ciò, vai su Aspetto → Intestazione Piè di pagina & Blocchi e fai clic su Aggiungi nuovo:
Dai un nome al tuo modello e scegli l’intestazione in Tipo di modello. È inoltre possibile utilizzare le opzioni Display On o Ruoli utente per indirizzare l’intestazione a contenuti/utenti specifici.
Quindi, pubblica l’intestazione e fai clic su Modifica con Elementor per aprire visual builder:
Ora, è possibile personalizzare completamente l’intestazione utilizzando l’interfaccia visiva drag-and-drop di Elementor. Il plugin offre anche la nuova Intestazione, Piè di pagina & Blocchi widget che è possibile utilizzare per aggiungere importanti elementi del sito, come il logo del sito o di un menu di navigazione:
Per saperne di più sull’utilizzo di Elementor, check out il nostro pieno Elementor tutorial o Elementor recensione.
3. Usa Codice personalizzato (Avanzato)
Infine, se sei un utente avanzato, puoi anche personalizzare l’intestazione di WordPress usando il tuo codice. Per fare ciò, avrai bisogno di almeno una conoscenza operativa di HTML, PHP e CSS, quindi questa non è un’opzione per utenti non tecnici.
Se non conosci quei linguaggi di codifica, ti consigliamo di attenersi a uno dei metodi precedenti in questo elenco.
Ci sono due parti per utilizzare il codice per personalizzare l’intestazione:
- HTML / PHP-questo controlla il contenuto effettivo nella tua intestazione.
- CSS-questo controlla lo stile della tua intestazione.
Come accennato in precedenza, il contenuto dell’intestazione del tuo sito risiede nell’intestazione.file php. Quindi, per personalizzare il contenuto della tua intestazione, dovrai lavorare direttamente con questo file. Oppure, alcuni temi, come Astra, offrono anche ganci che è possibile utilizzare per aggiungere contenuti all’intestazione.
Nella guida Astra visual hooks, puoi vedere che hai una serie di opzioni per personalizzare l’intestazione:
Se si desidera modificare l’intestazione del tema.file php direttamente, è necessario utilizzare un tema figlio per assicurarsi di non sovrascrivere le modifiche quando si aggiorna il tema.
D’altra parte, se stai usando ganci, non è necessario utilizzare un tema figlio finché si utilizza un plugin come ganci Astra o frammenti di codice. Se aggiungi i tuoi ganci direttamente alle funzioni del tuo tema.file php, si dovrebbe comunque utilizzare un tema figlio, però.
Con Astra Pro, hai anche la possibilità di aggiungere ganci utilizzando la funzione di layout personalizzato di Astra Pro.
La cosa bella dei layout personalizzati di Astra Pro è che è possibile utilizzare le regole di visualizzazione per controllare esattamente quando vengono visualizzate le modifiche. Ad esempio, è possibile aggiungere contenuto personalizzato all’intestazione che appare solo agli utenti connessi.
Ecco come personalizzare il contenuto della tua intestazione – ma per quanto riguarda lo stile?
Per personalizzare lo stile dell’intestazione, è possibile modificare lo stile.file css direttamente se si sta utilizzando un tema figlio. Oppure, puoi utilizzare l’area CSS aggiuntiva nel Customizer di WordPress per aggiungere i tuoi stili personalizzati all’intestazione.
Personalizza il tuo Header WordPress oggi
Il tuo header WordPress gioca un ruolo essenziale nel successo del tuo sito. Aiuta marca il tuo sito web, guidare i visitatori a contenuti chiave, promuovere informazioni importanti o profili sociali, e molto altro ancora.
Il modo più semplice per ottenere il pieno controllo sull’intestazione del tuo sito è utilizzare il tema Astra gratuito. Con Astra, si ottiene l’accesso a un visual, drag-and-drop generatore di intestazione. Non hai bisogno di alcun codice o plugin esterni: avrai il controllo 100% della tua intestazione direttamente all’interno del Customizer di WordPress.
In altre situazioni, puoi anche utilizzare le impostazioni del Customizer di un tema diverso, l’Elementor – Header, il piè di pagina & Blocca il plugin del modello o il tuo codice se hai le conoscenze tecniche.
