L'intestazione è la prima sezione di un sito web che i visitatori vedono. Personalizzare il testo nel tag dell'intestazione è molto importante per gli sviluppatori di siti WordPress che desiderano design creativi e unici. Tuttavia, modificare e personalizzare le intestazioni in WordPress può essere complicato. Richiede la comprensione di come utilizzare correttamente il personalizzatore del tema WordPress, gli editor di codice e altri strumenti.
Un'intestazione personalizzata contribuisce a rafforzare il tuo brand, migliora la navigazione del sito con i menu e attrae più visitatori con elementi visivi come i loghi. Dalla progettazione di di loghi personalizzati alla programmazione di menu a discesa avanzati, padroneggiare la personalizzazione dell'intestazione di WordPress ti consente di avere il controllo totale sull'aspetto e sul funzionamento della pagina principale del tuo sito, in base alle tue esigenze specifiche. Ne parleremo più approfonditamente in questo articolo.
Una breve panoramica dell'intestazione di WordPress
L'intestazione di WordPress appare in alto ed è il primo elemento del sito web che cattura l'attenzione dei visitatori. È importante concentrarsi in particolare sulle intestazioni durante la manutenzione di WordPress, perché contengono elementi chiave come:
- Menu di navigazione : consente ai visitatori di cliccare facilmente sulle diverse pagine del tuo sito.
- Logo : il logo della tua azienda che aiuta le persone a riconoscere il tuo marchio.
- Altri elementi utili : icone dei social media, pulsanti per eseguire un'azione (come "Acquista ora"), barre di ricerca, informazioni di contatto, ecc.
L'intestazione deve fare una buona prima impressione e fornire tutto ciò a cui un visitatore potrebbe aver bisogno di accedere immediatamente.
Fortunatamente, con la nuova funzionalità di modifica completa del sito di WordPress, ora puoi progettare e personalizzare l'intestazione come preferisci. Esistono molti tipi diversi di intestazioni WordPress:
- Intestazione globale : un'intestazione coerente visualizzata su ogni pagina
- Intestazione fissa : l'intestazione rimane visibile in alto quando si scorre verso il basso
- Intestazione a schermo intero : occupa l'intero schermo con immagini/video di grandi dimensioni
- Menu a scorrimento : sui dispositivi mobili, il menu scorre lateralmente
- Intestazione a scorrimento verso il basso : scorre verso il basso mentre scorri per mostrare più opzioni
- Menu verticale : il menu è verticale sul lato anziché orizzontale
- Intestazione trasparente : intestazione trasparente sul contenuto della pagina
- Intestazione ruotata : l'intestazione è ruotata di 90 gradi per un aspetto unico
- Mega Menu – Categorie espandibili ideali per i siti di e-commerce
Il tipo di intestazione che scegli dipende dal design del tuo sito, dai contenuti e dall'esperienza utente ideale. Alcune sono più adatte ai portfolio creativi, altre ai siti di contenuti, ai negozi online, ecc. L'intestazione giusta può migliorare l'esperienza dei tuoi visitatori.
Come modificare l'aspetto dell'intestazione
Vuoi trasformare l'aspetto della tua intestazione senza sforzo, modificandone lo stile, la dimensione e il colore del carattere per adattarlo all'estetica del tuo sito web? Ti mostreremo tre metodi per farlo al meglio:
Metodo 1: utilizzando Theme Customizer
Il personalizzatore del tema è uno strumento integrato in WordPress che consente agli utenti di modificare vari aspetti del tema del proprio sito web in tempo reale. Offre un'interfaccia intuitiva in cui è possibile apportare modifiche a elementi come colori, font, layout, widget e altro ancora, senza dover conoscere alcun codice. Questa funzionalità intuitiva consente ai proprietari di siti web di personalizzare l'aspetto del proprio sito e di visualizzare immediatamente le modifiche prima di applicarle.
Segui i passaggi indicati di seguito per migliorare l'aspetto visivo del tuo sito web WordPress utilizzando lo strumento di personalizzazione del tema e perfezionando l'aspetto dell'intestazione.
Passaggio 1: accedi al sito Web WP
Accedi alla dashboard di WordPress utilizzando i tuoi dati di amministratore per iniziare. Puoi anche raggiungere la pagina di login aggiungendo wp-admin alla fine dell'indirizzo del tuo sito web. Se la pagina di login è diversa, ci sono diversi modi per trovare l' URL di accesso a WordPress .
Passaggio 2: vai a Theme Customizer
Per modificare l'aspetto del tuo sito web, vai sul lato sinistro della dashboard di amministrazione di WordPress e clicca su Aspetto . Quindi, scegli "Personalizza" tra le opzioni che appaiono. Si aprirà la finestra di personalizzazione del tema, dove potrai apportare qualsiasi tipo di modifica al design.
Leggi di più : Le modifiche di WordPress non vengono visualizzate? Risolvi facilmente!
Passaggio 3: individuare l'impostazione dell'intestazione
Trovare dove modificare l'intestazione può variare in base al tema. Di solito, le opzioni per l'intestazione sono disponibili nelle sezioni Intestazione , Intestazione e navigazione o Opzioni intestazione . Fai clic sulla sezione che menziona l'intestazione per aprirla e visualizzare le impostazioni che puoi modificare.
Passaggio 4: personalizzare gli elementi dell'intestazione
In base al tema e alle personalizzazioni disponibili, solitamente è possibile modificare queste parti dell'intestazione:
- Titolo/Logo del sito: puoi modificare il titolo del tuo sito o inserire un logo personalizzato.
- Slogan del sito: modifica o nascondi lo slogan del tuo sito.
- Immagine/sfumatura dell'intestazione: alcuni temi consentono di aggiungere un'immagine o un colore sfumato allo sfondo dell'intestazione.
- Menu di navigazione: puoi scegliere quale menu visualizzare nella parte superiore del sito web, dove indirizzarlo e come visualizzarlo.
- Layout dell'intestazione: modifica la larghezza, l'altezza e la posizione dell'intestazione.
- Testo e colori dell'intestazione: regola il colore del testo, dei link e di altri elementi di stile nell'intestazione.
Passaggio 5: visualizza l'anteprima delle modifiche
Quando modifichi qualcosa nel Personalizzatore di WordPress, vedrai un'anteprima in tempo reale di come apparirà l'intestazione. Prenditi il tempo necessario per verificare se le modifiche ti piacciono prima di decidere di pubblicarle. In questo modo, puoi assicurarti che tutto sia a posto prima di pubblicarle sul tuo sito.
Passaggio 6: salva le modifiche
Dopo aver modificato l'intestazione in base alle tue preferenze, clicca sul Pubblica o Salva e pubblica . Le modifiche verranno salvate e visualizzate immediatamente sul tuo sito web.
Per saperne di più : Risolvi il problema di WordPress "Pubblicazione non riuscita. La risposta non è una risposta JSON valida".
Passaggio 7: verifica sul sito web
Per vedere come appare l'intestazione con le modifiche, apri l'URL in una nuova scheda del browser. Ricorda, potresti dover tornare indietro più volte per ottenere il risultato desiderato. Mentre ci lavori, è consigliabile svuotare la cache del tuo sito WordPress. Questo ti aiuterà a visualizzare correttamente gli aggiornamenti più recenti.
Suggerimento : diversi temi offrono diverse possibilità per personalizzare l'intestazione. Se il tema attuale non offre abbastanza opzioni per l'intestazione, valuta la possibilità di passare a un nuovo tema.
In alternativa, puoi contattare i nostri servizi di progettazione personalizzata per ricevere ulteriore assistenza nella personalizzazione dell'intestazione in base alle tue preferenze.
Ti piacerebbe personalizzare le intestazioni di WordPress?
Adotta servizi di web design personalizzati a partire da un prezzo incredibilmente basso: 999 $ con pagamento una tantum!
Metodo 2: modifica l'intestazione utilizzando l'editor completo del sito
Se desideri metodi più avanzati e flessibili per personalizzare l'intestazione in WordPress, prova a utilizzare un editor completo del sito invece del personalizzatore predefinito. Puoi accedere all'editor completo del sito tramite le nuove funzionalità di WordPress o tramite il moderno editor a blocchi di WordPress, Gutenberg.
Ecco come modificare l'intestazione utilizzando l'editor del sito completo:
Passaggio 1: accedi al sito Web WordPress
Accedi alla dashboard di amministrazione di WordPress effettuando l'accesso.
Passaggio 2: vai all'editor del sito completo
Vai su "Aspetto" nel menu della dashboard di WordPress. Da lì, seleziona "Editor del sito" dal menu a discesa. Questa azione avvierà l'interfaccia dell'Editor completo del sito.
Passaggio 3: selezionare il blocco di intestazione
L'anteprima live del sito web è ora visualizzata e tutte le opzioni di modifica sono elencate sul lato sinistro. Cerca la sezione dell'intestazione, solitamente posizionata nella parte superiore del sito. Probabilmente è identificata come Intestazione o Intestazione del sito . Procedi cliccando sulla sezione dell'intestazione.
Passaggio 4: modifica l'intestazione
Una volta scelta la sezione dell'intestazione, vedrai diverse opzioni di modifica nella barra laterale. A seconda del tema e delle funzionalità dell'editor a blocchi, puoi personalizzare l'intestazione nei seguenti modi:
- Cambia logo: carica un logo personalizzato o sostituisci quello attuale.
- Aggiungi blocchi: utilizza questo strumento avanzato per incorporare e organizzare testo, immagini, pulsanti o altri contenuti all'interno dell'intestazione.
- Regola l'altezza dell'intestazione: controlla la visibilità del sito sulla pagina, rendendo l'intestazione più alta o più bassa in base alle tue esigenze di web design.
- Blocchi di intestazione: utilizza i blocchi per integrare diversi elementi di contenuto nell'intestazione. Blocchi di testo, blocchi di immagini, pulsanti, icone dei social media e barre di ricerca sono comunemente utilizzati.
- Allineamento degli elementi dell'intestazione: allinea ogni blocco a sinistra, al centro o a destra. Puoi anche gestire l'allineamento e il posizionamento degli elementi dell'intestazione come il logo, il titolo del sito e il menu di navigazione.
- Intestazione fissa: attiva o disattiva la funzione di intestazione fissa, che mantiene l'intestazione visibile nella parte superiore della pagina mentre gli utenti scorrono verso il basso.
Ottieni approfondimenti sul design : l'importanza del kerning nel web design
Passaggio 5: visualizza in anteprima e pubblica le modifiche
L'editor completo di WordPress ti consente di visualizzare un'anteprima in tempo reale dell'intestazione del tuo sito web. Controlla le modifiche per assicurarti che siano in linea con le tue preferenze di design e soddisfino i tuoi requisiti.
Passaggio 6: controlla il tuo sito web
Vai sul tuo sito ed esplora l'intestazione appena aggiornata.
Nel complesso, WP Full Site Editor offre un approccio più visivo e adattabile alla personalizzazione dell'header rispetto a Theme Customizer. Tuttavia, le funzionalità disponibili e le opzioni di personalizzazione potrebbero variare in base al tema e ai plugin installati.
Metodo 3: modifica l'intestazione utilizzando il plugin dell'intestazione
Per migliorare al meglio l'header del tuo sito WordPress, valuta l'utilizzo di un plugin. I plugin offrono una vasta gamma di possibilità di personalizzazione, consentendoti di personalizzare l'header alla perfezione.
Inoltre, ricevono spesso aggiornamenti regolari, garantendo la compatibilità con le ultime versioni di WordPress e offrendoti nuove funzionalità da esplorare. Quindi, perché non sfruttare questi strumenti dinamici per creare un'intestazione che si distingua davvero e si evolva con le esigenze del tuo sito?
Continua a leggere : I migliori creatori di siti Web WordPress a pagina singola per le aziende
Segui questi passaggi:
Passaggio 1: installa Elementor Header and Footer Builder
Per iniziare a migliorare il tuo sito WordPress, accedi alla dashboard di amministrazione di WordPress. Da lì, vai alla sezione Plugin. Quindi, clicca su " Aggiungi nuovo" e cerca il plugin Elementor Header & Footer Builder.
Una volta trovato, clicca sul Installa . Dopo l'installazione, clicca su Attiva per attivare il plugin. Seguendo questi passaggi, il Elementor Header & Footer Builder sarà attivo e pronto per essere utilizzato.
Passaggio 2: creare un modello di intestazione
Una volta arrivati alla Dashboard di WordPress , andate alla Modelli . Da lì, selezionate la Theme Builder . Per creare un nuovo modello di intestazione, cliccate semplicemente sul Aggiungi nuovo . Quindi, selezionate il di intestazione per iniziare.
Passaggio 3: scegliere una struttura dell'intestazione
Elementor offre design di intestazione già pronti. Tuttavia, se preferisci, puoi anche creare un'intestazione completamente personalizzata da zero. Una volta effettuata la selezione, si aprirà l'editor di Elementor, che ti consentirà di iniziare a perfezionare il design scelto.
Fase 4: Progetta l'intestazione
Utilizza l'editor di Elementor per creare il design perfetto per la tua intestazione. Grazie alla sua interfaccia intuitiva, puoi integrare e personalizzare facilmente elementi come loghi, menu di navigazione, testo, pulsanti, immagini e persino shortcode, semplicemente trascinandoli dalla selezione nel pannello laterale sinistro.
Inoltre, Elementor offre ampie opzioni di personalizzazione per stile, colori, tipografia e spaziatura, consentendoti di perfezionare ogni elemento per allinearlo alla tua visione di design. Non esitare a esplorare i widget e le funzionalità di Elementor per infondere dinamismo e interattività alla tua intestazione, rendendola davvero unica.
Continua a leggere: Come modificare il piè di pagina di WordPress in 5 semplici metodi (guida passo passo)
Passaggio 5: visualizza l'anteprima dell'intestazione
Utilizzando Elementor, puoi dare un'occhiata in anteprima all'intestazione che hai creato semplicemente cliccando sull'icona a forma di occhio accanto al "Pubblica" . Questo ti consente di rivedere il design e apportare le modifiche necessarie senza modificare le pagine web pubblicate.
Passaggio 6: Salva il modello di intestazione
Facendo clic sul pulsante Pubblica, verrà visualizzata una finestra di dialogo che chiederà di scegliere dove visualizzare l'intestazione creata. Se si dimentica di selezionare un'opzione da questo pop-up, è sufficiente procedere al passaggio successivo.
Passaggio 7: assegna l'intestazione al tuo sito web
Per mostrare la tua intestazione personalizzata sul tuo sito web, devi assegnarla a pagine o condizioni specifiche. Inizia andando alla dashboard di amministrazione di WordPress, quindi vai a Modelli. Troverai diverse opzioni sotto il nome che hai assegnato alla sezione Intestazione. Fai clic su Modifica all'interno di quel pannello. Scorri verso il basso e seleziona Condizioni di visualizzazione, dove puoi configurare le regole di visualizzazione per inserire l'intestazione.
Ulteriori letture: Guida all'accessibilità di WordPress: conformità agli standard WCAG
Passaggio 8: Pubblica il modello di intestazione
Dopo aver impostato le condizioni di visualizzazione, attiva l'intestazione personalizzata sul tuo sito web cliccando sul Pubblica .
La tua nuova intestazione è ora disponibile! Il plugin Header Footer di Elementor è versatile e visivamente accattivante per la progettazione e la personalizzazione dell'intestazione. Con questo plugin, puoi creare intestazioni statiche, fisse o persino trasparenti.
Per saperne di più : Elementor bloccato nella schermata di caricamento? Ecco oltre 25 metodi pratici per risolverlo!
Personalizzazione dell'intestazione di WordPress tramite la modifica dell'intero sito
La modifica completa del sito in WordPress offre un nuovo approccio alla personalizzazione, superando i limiti del vecchio strumento di personalizzazione del tema. Sebbene sia ancora possibile utilizzare lo strumento di personalizzazione, l'editor del sito rappresenta la nuova frontiera: una tela per la massima libertà creativa (anche se ancora in versione beta). Ad esempio, quando si lavora con il tema Twenty Twenty-Three , l'editor del sito si rivela prezioso per personalizzare font, colori, stili dei pulsanti e altro ancora.
Dai un'occhiata a questo : 25 migliori temi WordPress SaaS per Elementor
Accesso all'intestazione di WordPress nell'editor del sito
- Vai su Aspetto > Editor del sito nel pannello di amministrazione di WordPress
- Dopo aver caricato l'editor, verrai indirizzato alle impostazioni iniziali
- Per accedere alle impostazioni dell'intestazione, fai clic sul logo di WordPress (in alto a sinistra) o sulla freccia a discesa, quindi scegli Sfoglia tutti i modelli
- Quindi, seleziona Parti modello dal menu di WordPress
- Infine, fai clic su Intestazione per modificare l'intestazione del tuo sito
Stile dell'intestazione
Il tema Twenty Twenty-Three viene fornito con una struttura di intestazione di base. Tuttavia, è possibile aggiungere o rimuovere blocchi WordPress a piacere. Vediamo come modificare questa del modello per creare un'intestazione semplice e personalizzata:
- Fare clic Visualizzazione elenco per visualizzare la struttura dell'intestazione
- Troverai un blocco Gruppo contenente una Riga con due blocchi figlio: Titolo della pagina e Navigazione
- La riga è già centrata verticalmente e impostata sulla larghezza intera
Personalizzazione dell'intestazione
- Elimina il Titolo del sito espandendo il menu con i puntini di sospensione e selezionando Rimuovi titolo del sito
- Aggiungi il blocco Icone social cliccando sull'icona più accanto a Navigazione e cercando le icone social
- Aggiungi le icone della piattaforma social desiderata (Facebook, Instagram, ecc.) tramite la casella modale
- Definisci lo stile del blocco Icone social regolando il layout, la giustificazione, l'orientamento, il comportamento dei link, i colori e la spaziatura
- Aggiungi un colore di sfondo al blocco Riga tramite Impostazioni aggiuntive > Sfondo
- Inserisci un nuovo blocco Riga per elementi di intestazione aggiuntivi
- Spostare il blocco Navigazione sulla nuova Riga trascinandolo
- Aggiungi un blocco Pulsante alla prima riga e assegnagli uno stile (testo, colore, raggio del bordo)
- Aggiungi il blocco Logo del sito alla seconda riga, carica il tuo logo e configura le impostazioni
- Assicurati che la seconda riga sia impostata sulla larghezza intera e che la giustificazione sia "spazio tra gli elementi"
- Imposta l'allineamento della riga su Allinea al centro .
Organizzando attentamente i blocchi e modificandone gli stili, puoi avere un controllo granulare su ogni aspetto dell'intestazione del tuo WordPress e creare un'intestazione personalizzata che si allinei perfettamente al tuo marchio offrendo al contempo un'esperienza utente ottimale.
Hai bisogno di personalizzare l'intestazione del tuo WordPress?
Offriamo la progettazione completa di siti WordPress con uno stile impeccabile, a prezzi incredibilmente bassi! Approfitta di questa offerta a soli 999 $ in pagamento una tantum.
Conclusione
Ricorda, personalizzare gli header di WordPress ti consente di lasciare un'impressione duratura sui visitatori, riflettendo l'identità unica del tuo brand. Che tu sfrutti il Theme Customizer, l'Editor completo del sito o plugin specializzati, sfrutta i potenti strumenti a tua disposizione. Sperimenta diversi layout, colori ed elementi per creare un header visivamente accattivante e intuitivo che favorisca il coinvolgimento e le conversioni. Sfrutta la creatività, dai priorità alla funzionalità e perfeziona costantemente il tuo header per rimanere sempre al passo con i tempi.
