Sommario
Puoi essere d'accordo con noi sul fatto che nessun sito web è completo senza intestazione. Sapevi che hai due diverse opzioni per creare un'intestazione in WordPress? In questo tutorial spiegheremo le differenze individuali.
Immagine di intestazione originale
L'intestazione classica di WordPress, come sai, viene utilizzata in tutte le diverse pagine. Di solito è un'ampia scatola rettangolare da un lato all'altro. All'interno c'è un logo o il nome di un sito web, slogan e voci di menu. Puoi anche inserire lì un'immagine di sfondo chiamata immagine di intestazione. L'immagine di intestazione è ottima per attirare l'attenzione dei visitatori e per creare l'aspetto generale del sito web. Sta a te decidere se utilizzare un'immagine di intestazione discreta o un'immagine dominante che focalizzerà l'attenzione dei visitatori sulla navigazione del sito web.
Come modificare l'intestazione in WordPress Customizer
Per impostazione predefinita, l'immagine dell'intestazione può essere modificata tramite WordPress Customizer. Puoi accedervi sia dall'amministratore di WordPress che dal tuo sito web:
- Direttamente dall'amministratore di WP, vai a Aspetto -> Personalizza
- Sul frontend, se sei loggato, clicca su “Personalizza” nella barra in alto
Customizer include tutte le impostazioni di base dell'aspetto del tuo tema attualmente attivo. Pertanto dove trovare le impostazioni dell'immagine di intestazione dipende dal tema attivo. Nel tema Citadela puoi aggiungere e modificare l'immagine dell'intestazione Personalizzazione –> Aspetto –> Sfondo dell'intestazione.
Impostazioni dell'immagine di intestazione
Indipendentemente dall'immagine di intestazione che scegli, puoi configurarla in base alle tue esigenze. È possibile ottenere un effetto interessante utilizzando "Header Image Repeat". È possibile configurare le seguenti opzioni:
- Piastrella
- Affianca orizzontalmente
- Affianca verticalmente
- Nessuna ripetizione (se non si desidera ripetere l'immagine)
Altre impostazioni in WordPress – Dimensione dell'immagine dell'intestazione
Un'altra opzione su come modificare l'intestazione e regolare l'immagine è impostare la dimensione adatta. La dimensione dell'immagine di intestazione ha le seguenti tre opzioni:
- Originale – manterrà le dimensioni originali dell'immagine
- Copertina - l'immagine caricata verrà ridimensionata per adattarsi da un lato all'altro, l'immagine può anche essere tagliata per adattarla
- Contenere - la dimensione dell'immagine dell'intestazione verrà regolata in modo che l'intera immagine sia visibile
È inoltre possibile impostare la posizione dell'immagine all'interno dell'intestazione e impostare la fissazione dello sfondo.
Blocco di copertura che funge da testata
Come abbiamo già accennato all'inizio di questo articolo, ci sono diversi modi per modificare l'intestazione nell'editor di WordPress. Oltre a utilizzare Customizer puoi anche utilizzare uno dei blocchi principali di WordPress chiamato Cover block. Quindi qual è la differenza?
L'intestazione classica creata con Customizer si riferisce all'intero sito Web, mentre il blocco Cover ti consente di aggiungere un'immagine di copertina che fondamentalmente funziona come immagine di intestazione a qualsiasi pagina o post. Puoi persino usarlo più volte su una pagina o pubblicare con impostazioni diverse.
Dove usare Blocco di copertura
Il blocco di copertura ha un'applicazione più ampia su tutto il sito Web rispetto alla classica intestazione del sito Web. Il blocco di copertina aggiunge un'immagine del titolo ampia ea tutta larghezza nel contenuto. Puoi usarlo per separare visivamente i contenuti nei post del blog. Ogni sezione del post avrà la propria immagine di intestazione che può essere collegata al seguente contenuto. La grande caratteristica è che puoi scrivere il testo direttamente all'interno del blocco Cover. Questo testo verrà visualizzato sopra l'immagine.
Intestazione della home page
Il blocco di copertura può essere utilizzato anche al posto dell'intestazione del sito Web se si desidera ottenere un aspetto originale. Poiché il blocco copertina offre varie opzioni di allineamento, puoi impostarlo sulla larghezza del contenuto o renderlo a larghezza intera. L'intestazione a larghezza intera può essere utilizzata anche come immagine di sfondo di grandi dimensioni. Ma non dimenticare di disattivare il titolo della pagina nel tema Citadela. Questo passaggio è necessario se desideri utilizzare il blocco Cover come intestazione del sito web.
Come creare un'intestazione utilizzando il blocco Cover
Come prima cosa devi aggiungere il blocco Cover. Puoi aggiungerlo a qualsiasi pagina o pubblicare nel modo seguente:
Fai clic sul segno "+" nella barra in alto o sul segno "+" in qualsiasi punto del contenuto. Dopodiché cerca semplicemente Cover block.
Un altro modo rapido è aggiungere un blocco usando "/" dopo il nome del blocco.
Dopo aver aggiunto il blocco Cover avrai uno spazio per caricare immagini o video. È inoltre possibile selezionare l'immagine dalla libreria multimediale. L'immagine o il video selezionato verrà utilizzato come intestazione.
Titolo dell'intestazione
La cosa interessante con l'intestazione aggiunta usando il blocco Cover è che puoi scrivere il titolo del testo sopra l'immagine. Questo titolo può essere utilizzato anche come intestazione per la sezione, ad esempio nei post del blog. È anche possibile aggiungere lì qualsiasi URL.
Allineamento del blocco di copertura
Il blocco di copertura può essere allineato utilizzando la barra degli strumenti del blocco. Può essere allineato all'interno dell'area del contenuto a sinistra, a destra o al centro. Può anche essere impostato come largo o a tutta larghezza. Queste opzioni devono essere supportate dal tema attivo che utilizzi per creare il tuo sito web.
Impostazioni dell'immagine di copertina
L'aspetto dell'immagine di copertina può essere modificato in Inspector. Se lo imposti come sfondo fisso, l'immagine non scorrerà con il resto del contenuto della tua pagina ma rimarrà sempre al suo posto.
Utilizzando Focal Point Picker puoi scegliere quale parte dell'immagine verrà visualizzata nell'intestazione. Puoi lavorare ulteriormente con l'immagine. Ad esempio, puoi impostare il colore di sovrapposizione e l'opacità dello sfondo. Entrambe le impostazioni ti aiuteranno a dare gli ultimi ritocchi al tuo colpo di testa. Se utilizzi il blocco copertina all'interno del post del blog, utilizzando la combinazione di colori e la trasparenza corrette puoi aggiungere l'atmosfera desiderata al tuo post. Fai attenzione a queste impostazioni poiché il testo del titolo deve essere chiaramente visibile.
Creazione di un'intestazione video
Il blocco copertina può essere utilizzato anche per riprodurre video all'interno dell'intestazione del tuo sito web. Puoi attirare l'attenzione dei visitatori o promuovere prodotti o servizi. Ci sono diversi formati video supportati, il più comune che puoi usare è .mp4.
La cosa fantastica è che puoi anche scrivere il titolo sul video, allinearlo, renderlo a tutta larghezza o impostare la sovrapposizione del colore. Le impostazioni per Blocco copertina sono le stesse per tutti i tipi di supporto.
Qual è la tua esperienza con le intestazioni? Hai già provato il blocco Cover per creare l'intestazione? Preferisci la classica intestazione del sito Web utilizzando il personalizzatore di WordPress? Fateci sapere nei commenti qui sotto.