Il tuo sito web è abbastanza attraente per i visitatori? O è solo un normale sito web tra milioni di altri! Vuoi che il tuo sito si distingua dalla massa? Vuoi che ogni pagina del tuo sito abbia un aspetto distinto con una sensazione diversa? E se ti dicessi che la chiave per la soluzione di tutti questi problemi è nelle tue mani? E quella chiave è – Intestazione personalizzata! Sì, hai letto bene. Vediamo come…

L’intestazione è l’elemento visivo più importante del tuo sito che occupa la posizione più alta. È la prima cosa che un visitatore vede quando arriva sul tuo sito. L’intestazione del vostro sito è l’identità del vostro sito che rimane la stessa in tutte le pagine del sito. Potete usarla per creare un buon impatto duraturo nella mente del visitatore. Puoi distinguerti e conquistare la fiducia dell’utente creando notevoli intestazioni personalizzate auto-rappresentanti. Un’intestazione personalizzata in WordPress è una caratteristica che permette di personalizzare l’immagine dell’intestazione insieme all’aggiunta di testo, widget ecc. Puoi anche regolare questi elementi secondo il tuo bisogno per caratterizzare la migliore immagine del tuo sito web. Qui a Templatetoaster sito web builder software, controllare come creare intestazione personalizzata con WordPress tema costruttore.

WordPress Custom Header: Perché avete effettivamente bisogno di uno?

L’intestazione è uno degli elementi più importanti del tuo sito web. È un gesto che trasmette molto del tuo sito. Di solito, contiene un’immagine o un video per catturare l’attenzione del visitatore. Secondo il gruppo Nielsen Norman, un visitatore rimane solo per 10-20 secondi sul tuo sito web. Quindi, l’intestazione dovrebbe essere accattivante per interessarli.

Un’intestazione personalizzata in WordPress ti dà più controllo e flessibilità. È possibile ruotare, ridimensionare o ritagliare un’immagine di intestazione oltre al riposizionamento del logo, del testo o dei widget. Puoi progettarla per contrastare il look del tuo sito web. Dovete usarla come una proposta al pubblico di destinazione. Prova a citare la tua tagline nell’intestazione personalizzata in WordPress. Come si può non avere una seconda possibilità di fare la prima buona impressione. Un’intestazione ben strutturata dovrebbe rispondere al perché sei unico, che cosa è tutto ciò che il tuo sito offre ecc.

Quindi, un’intestazione personalizzata è importante in quanto funziona come un volto del tuo sito web. Dovrebbe essere in grado di comunicare il nocciolo e l’umore del tuo sito al pubblico. È possibile avere una diversa intestazione personalizzata WordPress per pagina. Ad esempio, è possibile aggiungere le caratteristiche del vostro prodotto nell’intestazione per la pagina Chi siamo e il resto delle pagine senza caratteristiche. Può fare miracoli!!!

Come aggiungere un’intestazione personalizzata a WordPress?

I temi predefiniti di WordPress consentono di utilizzare intestazioni personalizzate. Puoi mettere le tue immagini di intestazione personalizzate secondo le tue preferenze. L’impostazione di un’immagine di intestazione personalizzata di WordPress richiede alcuni sforzi. Fondamentalmente comporta due passaggi per aggiungere un’intestazione personalizzata ai temi predefiniti di WordPress come segue

1. Fonte e modifica della tua immagine

Prima di tutto, seleziona un’immagine attraente. Dovrebbe essere semplice e unica. È possibile ottenere molte immagini gratuite su Internet. Per maggiori dettagli, puoi leggere su 16 siti web per ottenere immagini gratis. Una volta ottenuta l’immagine dell’intestazione, non ti resta che modificarla.

Puoi usare alcuni utili strumenti di editing sul desktop o sul web gratuiti. Puoi ringiovanire l’immagine scelta con GIMP, paint.net ecc. GIMP è un software di editing delle immagini gratuito e open source. Fornisce molti strumenti sofisticati per dare un tocco speciale alla vostra immagine. Mentre paint.net facilita gli strumenti di editing per le immagini su Windows. Fai la tua immagine personalizzata dell’intestazione WordPress.

2. Carica l’intestazione personalizzata

Per caricare l’immagine dell’intestazione, accedi alla tua dashboard di WordPress. Dal pannello di sinistra, vai su Aspetto → Intestazione.

Si aprirà un riquadro Header Media sulla sinistra dello schermo. Vai su Header Image e clicca sul pulsante Add New Image.

Si aprirà la galleria delle immagini per scegliere l’immagine. Puoi anche sfogliare la tua immagine personalizzata qui. Seleziona l’immagine, ritagliala se necessario. Impostala come immagine dell’intestazione personalizzata. Hai finito.

Come personalizzare l’intestazione in WordPress?

Una volta caricata l’immagine dell’intestazione personalizzata del tema WordPress, è possibile modificarla per applicare video, testo, widget, icone sociali ecc. È possibile utilizzare qualsiasi tema predefinito di WordPress. Qui, si otterrà il codice di esempio per modificare l’intestazione personalizzata nel tema Twenty Seventeen.

1. Aggiungere un’area di testo all’intestazione

Con il tema predefinito, è possibile modificare solo il titolo del sito web. Ma per aggiungere un’area di testo, devi scrivere del codice nel file header-image.php. Aggiungerai il seguente codice per ottenere un’area di testo nell’intestazione

Dopo aver aggiunto questo codice, vedrai un’area di testo separata nell’intestazione come mostrato di seguito

2. Aggiungi icone sociali

Per aggiungere icone sociali all’intestazione, aggiungerai il seguente codice a site-branding.php dopo la classe wrap.

Devi anche dare il CSS se vuoi stilizzare le icone sociali nel tuo stile unico.

Ti darà i risultati richiesti come mostrato

3. Aggiungere un widget all’intestazione

Se vuoi alcuni widget per caratterizzare il tuo sito, definisci una funzione nel file function.php. Puoi aggiungere questo codice alla fine del file.

Una volta fatto, aggiungerai questo codice HTML al file header-image.php per mostrare il widget specifico nel frontend.

Ora, ti sposterai in Aspetto → Widget. Da qui, puoi aggiungere qualsiasi widget alla tua posizione personalizzata dell’intestazione. Per esempio, il widget Ricerca viene aggiunto semplicemente trascinandolo nella posizione dell’intestazione personalizzata.

L’intestazione risultante avrà un aspetto simile a questo

4. Riposizionare il logo

È possibile aggiungere un logo alle opzioni predefinite di WordPress. Vai su Aspetto → Intestazione → Media dell’intestazione → Sezione Logo. Qui, imposta un logo facendo clic sull’opzione Select Logo.

Ma per riposizionarlo, è necessario scrivere CSS aggiuntivi. Nel tema Twenty Seventeen, si otterrà un logo in basso a sinistra per impostazione predefinita come mostrato di seguito

Qui, vedrete un esempio CSS per aggiungere il logo in posizione centrale. Allo stesso modo, puoi impostarlo ovunque nell’intestazione.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Aggiungi un video all’intestazione

Infine, puoi anche aggiungere un video all’intestazione di WordPress. Fortunatamente, non c’è bisogno di aggiungere codice per questo. WordPress ti fornisce un’opzione predefinita per aggiungere un video o un’immagine di sfondo.

Per aggiungere un video all’intestazione, vai su Aspetto → Intestazione → Intestazione Media → Intestazione Video. Qui, farai clic sul pulsante Seleziona video come mostrato di seguito. Poi, puoi sfogliare il video che vuoi nell’intestazione dal tuo computer. In alternativa, puoi anche dare l’URL del video se è online. Basta pubblicarlo.

Il tuo video nell’intestazione avrà questo aspetto

Similmente, puoi aggiungere un’immagine di sfondo nell’intestazione selezionando qualsiasi immagine nell’intestazione dalla sezione Header Media.

Puoi avere diverse intestazioni personalizzate di WordPress per pagina, ad esempio alcune con un’immagine di sfondo, altre con video o widget ecc. Tutto dipende dalla vostra scelta e creatività.

Come creare un’intestazione personalizzata in WordPress da zero con TemplateToaster?

Si dovrebbe avere una buona conoscenza di PHP, HTML, CSS per lavorare con i file template. Se sei un principiante e non sai come scrivere codice, puoi contare su TemplateToaster WordPress Theme Builder. Non hai bisogno di codifica per creare template di intestazione personalizzata di WordPress. Solo pochi clic per trascinare & interfaccia goccia e sei pronto con la tua intestazione personalizzata. Vediamo come aggiungere l’intestazione personalizzata a WordPress con TemplateToaster

Prima di tutto, scaricare e installare TemplateToaster website builder. Dopo averlo installato con successo, si otterrà la schermata di selezione CMS come mostrato di seguito. Seleziona WordPress qui

Poi, otterrai la prossima schermata per creare un modello da zero o utilizzare un modello di esempio. Selezionate Start from Scratch e cliccate Modify.

Allora, sarete reindirizzati all’interfaccia principale del software da dove potrete iniziare a progettare la vostra intestazione personalizzata.

1. Intestazione personalizzata a tutta larghezza

Vedrai la schermata dell’interfaccia principale del software come mostrato di seguito. Da qui, è possibile impostare un’intestazione a tutta larghezza. Vai su Header → Width → Full Width.

2. Riposiziona il logo

Dalla scheda Header, clicca sull’opzione Logo. Si aprirà una galleria di icone del logo. Puoi selezionare un’immagine del logo dalla libreria dei campioni o puoi sfogliare la tua immagine personalizzata. Imposterà il logo.

Quando fai doppio clic sull’immagine del logo, si aprirà una scheda Formato come mostrato sotto. Da qui, puoi dare un link all’immagine del logo o impostare la sua posizione. Puoi riposizionare dando posizioni personalizzate a sinistra e in alto o selezionare una scorciatoia di posizione. Per esempio, qui è selezionata una posizione verticale-centrale per il logo.

3. Aggiungere un’immagine di sfondo

Selezionerete l’opzione Sfondo dalla scheda Intestazione per impostare un’immagine di sfondo dell’intestazione. Si aprirà una galleria di immagini. Puoi anche sfogliare la tua immagine di intestazione personalizzata dall’opzione Altre immagini.

Similmente, puoi aggiungere un’immagine di intestazione di primo piano cliccando sull’opzione Immagine dalla scheda Intestazione.

4. Aggiungere un’area di testo all’intestazione

Se vuoi visualizzare la tagline e le informazioni rilevanti sull’intestazione, puoi usare un’area di testo. Nell’area di testo, puoi aggiungere testo semplice, pulsante, lista ecc. Clicca sull’opzione Aree di testo.

Aggiungi contenuto e stilizzalo facendo doppio clic. Un doppio clic aprirà una scheda Editor per modificare il contenuto.

5. Aggiungere un widget all’intestazione

Puoi aggiungere un’area widget all’intestazione con un solo clic. Vai alla scheda Aree di widget e clicca su Aree di widget → Intestazione. Puoi anche impostare la tipografia per questo widget e puoi riposizionarlo ovunque nell’intestazione semplicemente trascinandolo. Puoi aggiungere contenuti dopo l’esportazione.

6. Aggiungi icone sociali all’intestazione

Aggiungere le icone dei social media all’intestazione è molto semplice. Dalla scheda Header, clicca sull’opzione Social Icons. Si aprirà una galleria di icone sociali per selezionare un’immagine secondo le tue esigenze. Puoi anche sfogliare la tua icona personalizzata qui.

Tutte le icone dei social media sono disponibili qui. Puoi tenere le icone secondo il tuo requisito. Puoi mettere le icone dei social media Facebook, Twitter e Google + qui.

7. Aggiungere un video all’intestazione

Per aggiungere un video, clicca sull’opzione Add Video. Da qui, puoi facilmente caricare un video di sfondo per l’intestazione.

Parole finali

Adesso, hai imparato come creare un’intestazione personalizzata in WordPress. Cambierà sicuramente l’aspetto del tuo sito web. La soluzione che optate è interamente una vostra scelta. Speriamo che il post ti sia piaciuto. Se avete domande, potete postare nella sezione dei commenti qui sotto.

Lettura correlata: WordPress 101 tutorial

I migliori fornitori di hosting WordPress

Come controllare la versione di WordPress

Come trovare l’url di login di WordPress

Come installare WordPress

Quale tema WordPress è che

Come cambiare la lingua di WordPress

Come creare WordPress pagina di login personalizzata

Come creare tema WordPress da zero

Come risolvere WordPress aggiornamento pagina non funziona