Come creare una straordinaria intestazione del tema Astra?

Le intestazioni sono vitali per qualsiasi contenuto della tua pagina web in quanto servono non solo i lettori ma anche i motori di ricerca. Intestazioni straordinarie e ben scritte hanno il potenziale per attirare lettori al tuo post e aumentare i clic. Le intestazioni possono variare da H1 a H6, a seconda della gerarchia dei tuoi contenuti. Il titolo principale della tua pagina o articolo è H1, mentre H2 sono i sottotitoli che creano sezioni nei tuoi documenti. Le intestazioni da H3 a H6 forniscono ulteriori sottotitoli nel documento in H2. Prima di passare a come il tema Astra può aiutarti a creare intestazioni straordinarie nei tuoi contenuti, consideriamo l'importanza delle intestazioni

Tabella dei contenuti:

• Perché le intestazioni sono importanti per le tue pagine Web?
• 1. Identificazione dell'argomento
• 2. Accessibilità
• 3. Ottimizzazione per i motori di ricerca
• 4. Rende le pagine scansionabili
• 5. Usabilità dei dispositivi mobili
• Come creare una splendida intestazione con il tema Astra?
• Pro e contro dell'utilizzo del tema Astra per le intestazioni
• Parole finali

Perché le intestazioni sono importanti per le tue pagine Web?

Ecco perché devi assicurarti di includere le intestazioni nel tuo testo

1. Identificazione dell'argomento

Le intestazioni svolgono un ruolo essenziale affinché i motori di ricerca e i lettori scelgano le parole chiave che stanno cercando nell'articolo. L'intestazione principale nel testo aiuta a identificare l'argomento del materiale e i sottotitoli indirizzano il lettore verso la propria area di interesse.

2. Accessibilità

Le persone oggi usano principalmente gli screen reader per passare attraverso qualsiasi contenuto. Le intestazioni di qualsiasi contenuto sono facilmente rilevabili dagli screen reader e sono essenziali per un utilizzo efficace degli screen reader. Consentono inoltre ai lettori di saltare da un'intestazione all'altra per raggiungere l'argomento richiesto.

3. Ottimizzazione per i motori di ricerca

Quando le intestazioni rendono identificabile il tuo argomento, i motori di ricerca classificano la tua pagina per le query di ricerca. Più rendi le tue intestazioni ben disegnate e piene di parole chiave appropriate, più i motori di ricerca aumenteranno il tuo posizionamento.

Ecco una guida sull'utilizzo delle funzionalità gratuite del tema Astra per creare fantastiche intestazioni per le tue pagine. Segui la procedura per creare un'intestazione di tua scelta.

4. Rende le pagine scansionabili

Usando le intestazioni, rendi le pagine il più scansionabili possibile. È risaputo che nessuno legge l'intero articolo, specialmente riga per riga. Ecco perché è importante che le pagine abbiano intestazioni. Di tutte le intestazioni, l'intestazione più importante è la prima in quanto imposta il tono per l'intero post o pagina.

Segue il sottotitolo in quanto divide il contenuto in blocchi che sono migliori per il consumo. Non solo, la struttura dell'articolo è mostrata dalle intestazioni e dai sottotitoli. In breve, il giusto set di intestazioni significa che puoi attirare il pubblico con i tuoi contenuti accattivanti.

5. Usabilità dei dispositivi mobili

Con il tempo, il mobile sta diventando più dominante che mai. Non c'è dubbio che i siti riceveranno più traffico dai dispositivi mobili che mai. Quindi, se metti bene i tuoi contenuti, sei destinato a ottenere spettatori da dispositivi mobili e desktop.

In breve, le intestazioni ottimizzano la pagina web non solo per i lettori ma anche per i motori di ricerca.

Come creare una splendida intestazione con il tema Astra?

Per prima cosa, per accedere ad Astra Header Builder, accedi alla dashboard di WordPress e dalla barra laterale di sinistra, vai su Aspetto > Opzioni Astra > Header Builder come mostrato nell'immagine qui sotto:

Fai clic su di esso e ti porterà alla sezione Header Builder nel personalizzatore di WordPress. L'interfaccia dovrebbe essere simile a quella che abbiamo qui:

Come puoi vedere, il generatore di intestazioni è diviso in tre sezioni verticali, una impilata sull'altra. Hai l'"intestazione primaria" nel mezzo con un "sopra l'intestazione" in alto e "sotto l'intestazione" in basso.  

Ogni intestazione ha il proprio set di "impostazioni intestazione", a cui puoi accedere facendo clic sull'icona a forma di ingranaggio a sinistra dell'intestazione.

Da qui, puoi personalizzare l'altezza dell'intestazione, la dimensione del bordo, lo sfondo, il riempimento e il margine.

Inoltre, nota come ogni intestazione è divisa in tre sezioni. Puoi aggiungere e rimuovere elementi di intestazione da queste sezioni per renderle più funzionali. Al momento della stesura di questo tutorial, hai accesso a 12 elementi di intestazione:

• Titolo e logo del sito
• Menù primario
• Pulsante 1
• Pulsante 2 (pro)
• Ricerca
• Account
• HTML 1
• HTML 2
• Menù Secondario
• Sociale
• Dispositivo 1
• Dispositivo 2
• Dispositivo 3 (professionista)
• Dispositivo 4 (professionista)
• Carrello

Ora, per aggiungere un nuovo elemento di intestazione, passa il mouse su quella sezione e fai clic sul pulsante "+". Verrà visualizzato un elenco di elementi disponibili. Scegli quello che vuoi usare e verrà aggiunto alla sezione dell'intestazione.

Allo stesso modo, fai clic sul pulsante "x" accanto all'elemento di intestazione per rimuovere un elemento di intestazione.

Puoi anche spostarti tra gli elementi dell'intestazione tra le sezioni dell'intestazione semplicemente trascinandoli e rilasciandoli.

Tutti gli elementi dell'intestazione che hai utilizzato verranno visualizzati nel menu a sinistra, proprio sotto la scheda Generale. Qui sotto troverai anche l'opzione per cambiare il tipo di intestazione. Gli utenti gratuiti ottengono solo l'opzione per "Intestazioni trasparenti". Tuttavia, se stai utilizzando Astra Pro, puoi abilitare "Intestazioni adesive".

Da qui, puoi accedere alle impostazioni specifiche dell'elemento di intestazione.

Proprio accanto alla scheda Generale, abbiamo la scheda Design. Da qui, ottieni alcune opzioni di progettazione di base per modificare la larghezza e il margine dell'intestazione. Impostazioni più avanzate sono disponibili per gli utenti di Astra Pro.

Astra Header Builder ti consente anche di mettere a punto l'aspetto dell'intestazione del sito su schermi di diverse dimensioni come desktop, dispositivi mobili o tablet. Per scegliere una dimensione dello schermo diversa e personalizzarla, utilizza il selettore del dispositivo nell'angolo in basso a sinistra dello schermo.

Come puoi vedere, su uno schermo più piccolo, ottieni un'area aggiuntiva chiamata "Off Canvas". Ciò ti consente di risparmiare spazio sull'intestazione e spostare alcune delle cose fuori dallo schermo che i visitatori possono attivare se e quando necessario.

E questo conclude la nostra guida rapida su come creare un'intestazione utilizzando il tema Astra. Una volta che hai finito di aggiungere tutti gli elementi dell'intestazione e di apportare le modifiche necessarie al design, fai clic sul pulsante Pubblica e il gioco è fatto.  

L'intestazione Astra appena creata è ora attiva e funzionante sul tuo sito Web WordPress.

Astra Header Builder: una rapida panoramica delle opzioni disponibili

Nel tutorial sopra, abbiamo creato un'intestazione molto semplice utilizzando Astra Header Builder per darti un'idea di come funziona la funzione. Tuttavia, ci sono un sacco di strumenti e opzioni all'interno di Astra Header Builder per aiutarti a creare intestazioni più complesse e sorprendenti.

Ecco una rapida occhiata alle varie opzioni che hai a tua disposizione:

Intestazione primaria

L'intestazione predefinita in Astra è l'intestazione principale. Mostrerà un logo e anche un menu di navigazione che è personalizzabile con varie impostazioni di intestazione primaria in Astra.

Basta installare Astra e andare alla sezione Intestazione per scegliere l'opzione di intestazione principale e accedere alla personalizzazione. Intestazione > Intestazione primaria

È possibile utilizzare le seguenti impostazioni di personalizzazione

disposizione

Le impostazioni del layout gestiranno la posizione del logo per la tua pagina. Ci sono tre diverse posizioni disponibili in Astra per il logo

Logo sinistro

Il logo in questa impostazione si sposta sul lato sinistro del menu di navigazione. È uno stile tipico di posizionamento di un logo.

Logo destro

Il logo in questa impostazione si sposta sul lato destro del menu di navigazione.

Logo centrale

Il logo in questa impostazione si sposta al centro sopra il menu di navigazione. È una buona opzione nel caso di un menu lungo.

Larghezza

Le impostazioni di larghezza gestiscono la larghezza dell'intestazione del testo. È possibile personalizzare la larghezza dell'intestazione come

Intera larghezza

Nelle impostazioni a larghezza intera, l'intestazione verrà allungata da entrambe le estremità e adattata alle dimensioni della pagina del browser.

Larghezza del contenuto

Nelle impostazioni della larghezza del contenuto, l'intestazione si adatta in base alla larghezza del contenitore impostata e puoi impostarla selezionando quanto segue

Globale> Contenitore> Larghezza

Confine

Selezionando il bordo, puoi aggiungere un bordo sotto l'intestazione e personalizzarne il colore e la larghezza.

Intestazione mobile

Il menu di navigazione, su dispositivi reattivi, si trasforma in un hamburger. Pertanto, l'intestazione principale su questi dispositivi mostrerà solo il menu hamburger e il logo. Puoi personalizzare il layout del logo relativo al menu nei widget sensibili.

Pila

Nell'opzione pila, il logo si sposterà sopra il menu hamburger. Optare per lo stack può rivelarsi utile se hai un logo grande.

In linea

Nell'opzione in linea, il logo e il menu saranno in linea tra loro e possono essere una buona opzione nel caso di un logo piccolo.

Temi di colore

Le intestazioni principali possono essere presentate in vari colori utilizzando il tema Astra. I colori globali saranno disponibili gratuitamente, ma è necessario utilizzare il plugin aggiuntivo di Astra Pro per funzionalità più avanzate. Per utilizzare i colori globali in Astra, devi andare nella scheda Aspetto, selezionare Personalizza, quindi globale e infine scegliere l'opzione dei colori. Aspetto> Personalizza> Globale> Colori

Tipografia

Le impostazioni tipografiche per la pagina o il sito si applicano automaticamente all'intestazione principale con Astra Theme. Puoi selezionare e personalizzare le impostazioni tipografiche andando alla scheda Aspetto, in globale.  

Aspetto> Personalizza> Globale> Tipografia

Intestazione trasparente

Le intestazioni trasparenti sono un modo semplice per creare intestazioni belle e attraenti per la tua pagina. Lo sfondo dell'intestazione primaria sarà impostato su trasparente e tirerà il contenuto della pagina in alto. Il contenuto della pagina e l'intestazione primaria si uniranno, il che significa che la parte superiore del contenuto diventerà uno sfondo dell'intestazione trasparente. Ad esempio, se l'immagine si trova nella parte superiore della pagina, salirà per diventare uno sfondo per l'intestazione trasparente.

Come aggiungere un'intestazione trasparente?

L'intestazione trasparente formula in due rapidi passaggi per rendere attraente la tua pagina 

Passo 1

È possibile trovare l'opzione dell'intestazione trasparente sotto il personalizzatore e quindi modificarla

Aspetto> Personalizza> Intestazione> Intestazione trasparente

Passo 2

Sotto le opzioni di intestazione trasparente, puoi abilitarlo per l'intero sito Web, scegliere il bordo in basso, le combinazioni di colori e il layout del logo

Abilitazione sul sito Web completo

Se desideri le impostazioni di intestazione trasparente per l'intero sito Web, puoi abilitare questa opzione spuntando la casella. Se si spunta la casella di controllo, ci sono ancora alcune regole di esclusione che è possibile abilitare per post o pagine specifici. È possibile disabilitare l'opzione di intestazione trasparente per le pagine seguenti

Disabilita su archivi, ricerca e su 404

L'impostazione dell'intestazione trasparente può essere disabilitata su queste pagine speciali spuntando la casella.

Disabilita sulla pagina dell'indice del blog

La prima pagina del tuo blog diventa la pagina dell'indice del blog se modifichi le impostazioni dalla tua home page. Per creare una pagina dell'indice del blog, puoi andare alle impostazioni della home page e nella scheda "Visualizzazione della tua home page", scegli "I tuoi ultimi post".

La visualizzazione della tua home page> I tuoi ultimi messaggi

Se vuoi disabilitare le impostazioni dell'intestazione trasparente su questa pagina di indice del blog, puoi spuntare la casella per questo.

Disabilita su Pages

Se si desidera disabilitare l'opzione dell'intestazione trasparente su tutte le pagine, selezionare la casella di controllo.

Disabilita sui post

Se si desidera disabilitare l'opzione dell'intestazione trasparente su tutti i post, selezionare la casella di controllo.

Colori e sfondo

Puoi personalizzare le impostazioni di sfondo e colore dell'intestazione trasparente con le seguenti opzioni disponibili

• sfondo
• Titolo del sito
• Menù
• sottomenu
• Soddisfare

Pro e contro dell'utilizzo del tema Astra per le intestazioni

Professionisti

• È disponibile l'opportunità per l'intestazione trasparente
• Sono disponibili le intestazioni sia della larghezza completa che della larghezza del contenuto 
• È disponibile la personalizzazione del colore e della tipografia

Contro

• L'opzione dell'intestazione adesiva non è disponibile
• Le funzioni di colore avanzate non sono disponibili

Parole finali

Astra è uno dei migliori temi in circolazione. E, se lo stai usando, sei sulla strada giusta per mantenere il tuo sito.

Il tema gratuito di Astra ti consente di progettare intestazioni belle e attraenti per la tua pagina web. Sono inoltre disponibili l'opzione e la personalizzazione di un'intestazione trasparente, che può migliorare l'esperienza dello spettatore. Nel complesso, molte scelte di personalizzazione dell'intestazione nel tema Astra ti consentono di creare un'intestazione straordinaria.