Come creare una splendida intestazione del tema Astra?

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

Sommario:

• 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 un'intestazione straordinaria 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 del testo aiuta a identificare l'argomento del materiale, mentre i sottotitoli indirizzano il lettore verso l'area di interesse.

2. Accessibilità

Le persone oggi utilizzano principalmente gli screen reader per sfogliare qualsiasi contenuto. Le intestazioni di qualsiasi contenuto vengono facilmente rilevate dagli screen reader e sono essenziali per utilizzare in modo efficace gli screen reader. Permettono inoltre ai lettori di saltare da un titolo all'altro per arrivare all'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 redatte e riempite con 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 straordinarie intestazioni per le tue pagine. Segui la procedura per creare un'intestazione a tua scelta.

4. Rende le pagine scansionabili

Utilizzando le intestazioni, rendi le pagine il più scansionabili possibile. È risaputo che nessuno legge l’intero articolo, soprattutto riga per riga. Ecco perché è importante che le pagine abbiano intestazioni. Tra tutte le intestazioni, quella più importante è la prima in quanto dà il tono all'intero post o pagina.

Poi c'è il sottotitolo che divide il contenuto in parti più adatte al 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 inserisci i tuoi contenuti nel modo giusto, otterrai sicuramente spettatori sia da dispositivi mobili che da desktop.

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

Come creare un'intestazione straordinaria 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 seguente:

Fai clic su di esso e ti porterà alla sezione Header Builder nel personalizzatore 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" al centro con un "sopra l'intestazione" in alto e "sotto l'intestazione" in basso. 

Ogni intestazione ha il proprio set di "impostazioni dell'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 ciascuna intestazione è divisa in tre sezioni. Puoi aggiungere e rimuovere elementi di intestazione da queste sezioni per renderle più funzionalità. Al momento della stesura di questo tutorial, hai accesso a 12 elementi di intestazione:

• Titolo e logo del sito
• Menù principale
• Pulsante 1
• Pulsante 2 (professionista)
• Ricerca
• Account
• HTML1
• HTML2
• Menù secondario
• Sociale
• Dispositivo 1
• Dispositivo 2
• Widget 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 desideri utilizzare e verrà aggiunto alla sezione dell'intestazione.

Allo stesso modo, basta fare clic sul pulsante “x” accanto all’elemento di intestazione per rimuovere un elemento di intestazione.

Puoi anche spostare gli elementi dell'intestazione tra le sezioni dell'intestazione semplicemente trascinandoli.

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 modificare il tipo di intestazione. Gli utenti gratuiti hanno solo l'opzione per "Intestazioni trasparenti". Tuttavia, se utilizzi Astra Pro, puoi abilitare "Intestazioni permanenti".

Da qui è possibile accedere alle impostazioni specifiche dell'elemento di intestazione.

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

Astra Header Builder ti consente inoltre di ottimizzare l'aspetto dell'intestazione del sito su schermi di diverse dimensioni come desktop, dispositivo mobile 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 cose fuori dallo schermo che i visitatori possono attivare se e quando necessario.

E con questo si 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 apportare le modifiche di progettazione necessarie, fai clic sul pulsante Pubblica e il gioco è fatto. 

La tua 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 funzionalità. Tuttavia, ci sono tantissimi strumenti e opzioni all'interno di Astra Header Builder che ti aiutano a creare intestazioni più complesse e sorprendenti.

Ecco una rapida occhiata alle varie opzioni a tua disposizione:

Intestazione primaria

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

Basta installare Astra e andare alla sezione Intestazione per scegliere l'opzione dell'intestazione primaria 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. In Astra sono disponibili tre diverse posizioni 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 del Centro

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. Puoi personalizzare la larghezza dell'intestazione come

Larghezza intera

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

Larghezza contenuto

Nelle impostazioni della larghezza del contenuto, l'intestazione si regola 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, sui dispositivi responsive, si trasforma in un hamburger. Pertanto, l'intestazione principale di questi dispositivi visualizzerà solo il menu hamburger e il logo. Puoi personalizzare il layout del logo relativo al menu nei widget reattivi.

Pila

Nell'opzione Stack, il logo si sposterà sopra il menu dell'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 primarie 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 Colori. Aspetto > Personalizza > Globale > Colori

Tipografia

Le impostazioni tipografiche della pagina o del sito si applicano automaticamente all'intestazione principale con Astra Theme. Puoi selezionare e personalizzare le impostazioni tipografiche accedendo alla scheda Aspetto, in Globale. 

Aspetto > Personalizza > Globale > Tipografia

Intestazione trasparente

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

Come aggiungere un'intestazione trasparente?

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

Passaggio 1

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

Aspetto > Personalizza > Intestazione > Intestazione trasparente

Passaggio 2

Sotto le opzioni dell'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 impostazioni di intestazione trasparenti per l'intero sito web, puoi abilitare questa opzione selezionando la casella di controllo. Se spunti la casella, ci sono ancora alcune regole di esclusione che puoi abilitare per post o pagine specifiche. Puoi 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 selezionando la casella di controllo.

Disabilita nella pagina Indice del blog

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

Visualizzazione della tua home page > I tuoi ultimi post

Se desideri disabilitare le impostazioni dell'intestazione trasparente nella pagina dell'indice del blog, puoi selezionare la relativa casella.

Disabilita sulle pagine

Se vuoi disabilitare l'opzione dell'intestazione trasparente su tutte le pagine, seleziona la casella di controllo.

Disabilita sui post

Se vuoi disabilitare l'opzione dell'intestazione trasparente su tutti i post, seleziona la casella di controllo.

Colori e sfondo

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

• Sfondo
• Titolo del sito
• Menu
• Sottomenu
• Contenuto

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

Pro

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

Contro

• L'opzione di intestazione fissa non è disponibile
• Le funzionalità colore avanzate non sono disponibili

Parole finali

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

Il tema gratuito di Astra ti consente di progettare intestazioni belle e accattivanti 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.