L'intestazione classica di WordPress, come sai, viene utilizzata in tutte le diverse pagine. Di solito \u00e8 un'ampia scatola rettangolare da un lato all'altro. All'interno c'\u00e8 un logo o il nome di un sito web, slogan e voci di menu. Puoi anche inserire l\u00ec un'immagine di sfondo chiamata immagine di intestazione. L'immagine di intestazione \u00e8 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\u00e0 l'attenzione dei visitatori sulla navigazione del sito web.<\/p>\n\n\n
![\"Immagine](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-simple.jpg\")
<\/a><\/span><\/a>Come modificare l'intestazione in WordPress Customizer<\/span><\/h3>\n\n\n\nPer impostazione predefinita, l'immagine dell'intestazione pu\u00f2 essere modificata tramite WordPress Customizer. Puoi accedervi sia dall'amministratore di WordPress che dal tuo sito web:<\/p>\n\n\n\n
- Direttamente dall'amministratore di WP, vai a Aspetto <\/i>-> Personalizza<\/li>
- Sul frontend, se sei loggato, clicca su \u201cPersonalizza\u201d nella barra in alto<\/li><\/ul>\n\n\n\n
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 <\/i>\u2013> Aspetto <\/i>\u2013> Sfondo dell'intestazione<\/i>.<\/p>\n\n\n\n![\"Aggiungi](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-customizer.gif\")
<\/a>Aggiunta di intestazione tramite Customizer<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Impostazioni dell'immagine di intestazione<\/span><\/h4>\n\n\n\nIndipendentemente dall'immagine di intestazione che scegli, puoi configurarla in base alle tue esigenze. \u00c8 possibile ottenere un effetto interessante utilizzando "Header Image Repeat". \u00c8 possibile configurare le seguenti opzioni:<\/p>\n\n\n\n
- Piastrella<\/li>
- Affianca orizzontalmente<\/li>
- Affianca verticalmente<\/li>
- Nessuna ripetizione (se non si desidera ripetere l'immagine)<\/li><\/ul>\n\n\n\n
![\"Funzionalit\u00e0](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-repeat.jpg\")
<\/a>Effetto piastrella dell'immagine dell'intestazione<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Altre impostazioni in WordPress \u2013 Dimensione dell'immagine dell'intestazione<\/span><\/h4>\n\n\n\nUn'altra opzione su come modificare l'intestazione e regolare l'immagine \u00e8 impostare la dimensione adatta. La dimensione dell'immagine di intestazione ha le seguenti tre opzioni:<\/p>\n\n\n\n
- Originale<\/b> \u2013 manterr\u00e0 le dimensioni originali dell'immagine<\/li>
- Copertina<\/b> - l'immagine caricata verr\u00e0 ridimensionata per adattarsi da un lato all'altro, l'immagine pu\u00f2 anche essere tagliata per adattarla<\/li>
- Contenere<\/b> - la dimensione dell'immagine dell'intestazione verr\u00e0 regolata in modo che l'intera immagine sia visibile<\/li><\/ul>\n\n\n\n
![\"3](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-sizes.jpg\")
<\/a>Guarda come potrebbe apparire diversa l'intestazione in base alle sue dimensioni: originale, copertina e dimensioni contenute<\/figcaption><\/figure>\n<\/div>\n\n\n\u00c8 inoltre possibile impostare la posizione dell'immagine all'interno dell'intestazione e impostare la fissazione dello sfondo.<\/p>\n\n\n\n
<\/span><\/a>Blocco di copertura che funge da testata<\/span><\/h3>\n\n\n\nCome abbiamo gi\u00e0 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 \u00e8 la differenza?<\/p>\n\n\n\n
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\u00f9 volte su una pagina o pubblicare con impostazioni diverse.<\/p>\n\n\n\n
<\/span><\/a>Dove usare Blocco di copertura<\/span><\/h4>\n\n\n\nIl blocco di copertura ha un'applicazione pi\u00f9 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\u00e0 la propria immagine di intestazione che pu\u00f2 essere collegata al seguente contenuto. La grande caratteristica \u00e8 che puoi scrivere il testo direttamente all'interno del blocco Cover. Questo testo verr\u00e0 visualizzato sopra l'immagine.<\/p>\n\n\n
\n![\"Immagine](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/post-cover-blocks.jpg\")
<\/a>Post del blog con immagine di intestazione aggiunta tramite il blocco Copertina<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Intestazione della home page<\/span><\/h4>\n\n\n\nIl blocco di copertura pu\u00f2 essere utilizzato anche al posto dell'intestazione del sito Web se si desidera ottenere un aspetto originale. Poich\u00e9 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\u00f2 essere utilizzata anche come immagine di sfondo di grandi dimensioni. Ma non dimenticare di disattivare il titolo della pagina nel tema Citadela. Questo passaggio \u00e8 necessario se desideri utilizzare il blocco Cover come intestazione del sito web.<\/p>\n\n\n
\n![\"Intestazione](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-cover.jpg\")
<\/a>Intestazione a tutta larghezza sulla home page<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span><\/a>Come creare un'intestazione utilizzando il blocco Cover<\/span><\/h3>\n\n\n\nCome prima cosa devi aggiungere il blocco Cover. Puoi aggiungerlo a qualsiasi pagina o pubblicare nel modo seguente:<\/p>\n\n\n\n
Fai clic sul segno "+" nella barra in alto o sul segno "+" in qualsiasi punto del contenuto. Dopodich\u00e9 cerca semplicemente Cover block.<\/p>\n\n\n
\n![\"Aggiungi](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-button-add.png\")
<\/a>Aggiunta di un blocco di copertura utilizzando "+"<\/figcaption><\/figure>\n<\/div>\n\n\nUn altro modo rapido \u00e8 aggiungere un blocco usando "\/" dopo il nome del blocco.<\/p>\n\n\n
\n![\"Usando](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-shortcut.gif\")
<\/a>Aggiungi barra e digita Blocco copertura per aggiungere questo blocco nell'area contenuto<\/figcaption><\/figure>\n<\/div>\n\n\nDopo aver aggiunto il blocco Cover avrai uno spazio per caricare immagini o video. \u00c8 inoltre possibile selezionare l'immagine dalla libreria multimediale. L'immagine o il video selezionato verr\u00e0 utilizzato come intestazione.<\/p>\n\n\n\n
<\/span>Titolo dell'intestazione<\/span><\/h4>\n\n\n\nLa cosa interessante con l'intestazione aggiunta usando il blocco Cover \u00e8 che puoi scrivere il titolo del testo sopra l'immagine. Questo titolo pu\u00f2 essere utilizzato anche come intestazione per la sezione, ad esempio nei post del blog. \u00c8 anche possibile aggiungere l\u00ec qualsiasi URL.<\/p>\n\n\n
\n![\"Titolo](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-text.png\")
<\/a>Titolo nell'immagine di intestazione<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Allineamento del blocco di copertura<\/span><\/h4>\n\n\n\nIl blocco di copertura pu\u00f2 essere allineato utilizzando la barra degli strumenti del blocco. Pu\u00f2 essere allineato all'interno dell'area del contenuto a sinistra, a destra o al centro. Pu\u00f2 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.<\/p>\n\n\n
\n![\"Allineamento](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-align.gif\")
<\/a>Puoi allineare il tuo blocco Cover in molti modi per ottenere l'aspetto perfetto della tua intestazione<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Impostazioni dell'immagine di copertina<\/span><\/h4>\n\n\n\nL'aspetto dell'immagine di copertina pu\u00f2 essere modificato in Inspector. Se lo imposti come sfondo fisso, l'immagine non scorrer\u00e0 con il resto del contenuto della tua pagina ma rimarr\u00e0 sempre al suo posto.<\/p>\n\n\n\n
Utilizzando Focal Point Picker puoi scegliere quale parte dell'immagine verr\u00e0 visualizzata nell'intestazione. Puoi lavorare ulteriormente con l'immagine. Ad esempio, puoi impostare il colore di sovrapposizione e l'opacit\u00e0 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\u00e9 il testo del titolo deve essere chiaramente visibile.<\/p>\n\n\n
\n![\"Imposta](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-colors.gif\")
<\/a>Scegliendo la giusta sovrapposizione di colori puoi creare un'intestazione accattivante<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span><\/a>Creazione di un'intestazione video<\/span><\/h4>\n\n\n\nIl blocco copertina pu\u00f2 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<\/a>, il pi\u00f9 comune che puoi usare \u00e8 .mp4.<\/p>\n\n\n\nLa cosa fantastica \u00e8 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.<\/p>\n\n\n\n
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 <\/i>\u2013> Aspetto <\/i>\u2013> Sfondo dell'intestazione<\/i>.<\/p>\n\n\n Indipendentemente dall'immagine di intestazione che scegli, puoi configurarla in base alle tue esigenze. \u00c8 possibile ottenere un effetto interessante utilizzando "Header Image Repeat". \u00c8 possibile configurare le seguenti opzioni:<\/p>\n\n\n\n Un'altra opzione su come modificare l'intestazione e regolare l'immagine \u00e8 impostare la dimensione adatta. La dimensione dell'immagine di intestazione ha le seguenti tre opzioni:<\/p>\n\n\n\n \u00c8 inoltre possibile impostare la posizione dell'immagine all'interno dell'intestazione e impostare la fissazione dello sfondo.<\/p>\n\n\n\n Come abbiamo gi\u00e0 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 \u00e8 la differenza?<\/p>\n\n\n\n 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\u00f9 volte su una pagina o pubblicare con impostazioni diverse.<\/p>\n\n\n\n Il blocco di copertura ha un'applicazione pi\u00f9 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\u00e0 la propria immagine di intestazione che pu\u00f2 essere collegata al seguente contenuto. La grande caratteristica \u00e8 che puoi scrivere il testo direttamente all'interno del blocco Cover. Questo testo verr\u00e0 visualizzato sopra l'immagine.<\/p>\n\n\n Il blocco di copertura pu\u00f2 essere utilizzato anche al posto dell'intestazione del sito Web se si desidera ottenere un aspetto originale. Poich\u00e9 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\u00f2 essere utilizzata anche come immagine di sfondo di grandi dimensioni. Ma non dimenticare di disattivare il titolo della pagina nel tema Citadela. Questo passaggio \u00e8 necessario se desideri utilizzare il blocco Cover come intestazione del sito web.<\/p>\n\n\n Come prima cosa devi aggiungere il blocco Cover. Puoi aggiungerlo a qualsiasi pagina o pubblicare nel modo seguente:<\/p>\n\n\n\n Fai clic sul segno "+" nella barra in alto o sul segno "+" in qualsiasi punto del contenuto. Dopodich\u00e9 cerca semplicemente Cover block.<\/p>\n\n\n Un altro modo rapido \u00e8 aggiungere un blocco usando "\/" dopo il nome del blocco.<\/p>\n\n\n Dopo aver aggiunto il blocco Cover avrai uno spazio per caricare immagini o video. \u00c8 inoltre possibile selezionare l'immagine dalla libreria multimediale. L'immagine o il video selezionato verr\u00e0 utilizzato come intestazione.<\/p>\n\n\n\n La cosa interessante con l'intestazione aggiunta usando il blocco Cover \u00e8 che puoi scrivere il titolo del testo sopra l'immagine. Questo titolo pu\u00f2 essere utilizzato anche come intestazione per la sezione, ad esempio nei post del blog. \u00c8 anche possibile aggiungere l\u00ec qualsiasi URL.<\/p>\n\n\n Il blocco di copertura pu\u00f2 essere allineato utilizzando la barra degli strumenti del blocco. Pu\u00f2 essere allineato all'interno dell'area del contenuto a sinistra, a destra o al centro. Pu\u00f2 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.<\/p>\n\n\n L'aspetto dell'immagine di copertina pu\u00f2 essere modificato in Inspector. Se lo imposti come sfondo fisso, l'immagine non scorrer\u00e0 con il resto del contenuto della tua pagina ma rimarr\u00e0 sempre al suo posto.<\/p>\n\n\n\n Utilizzando Focal Point Picker puoi scegliere quale parte dell'immagine verr\u00e0 visualizzata nell'intestazione. Puoi lavorare ulteriormente con l'immagine. Ad esempio, puoi impostare il colore di sovrapposizione e l'opacit\u00e0 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\u00e9 il testo del titolo deve essere chiaramente visibile.<\/p>\n\n\n Il blocco copertina pu\u00f2 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<\/a>, il pi\u00f9 comune che puoi usare \u00e8 .mp4.<\/p>\n\n\n\n La cosa fantastica \u00e8 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.<\/p>\n\n\n\n<\/a><\/span>Impostazioni dell'immagine di intestazione<\/span><\/h4>\n\n\n\n
<\/a><\/span>Altre impostazioni in WordPress \u2013 Dimensione dell'immagine dell'intestazione<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Blocco di copertura che funge da testata<\/span><\/h3>\n\n\n\n
<\/span><\/a>Dove usare Blocco di copertura<\/span><\/h4>\n\n\n\n
<\/a><\/span>Intestazione della home page<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Come creare un'intestazione utilizzando il blocco Cover<\/span><\/h3>\n\n\n\n
<\/a><\/a><\/span>Titolo dell'intestazione<\/span><\/h4>\n\n\n\n
<\/a><\/span>Allineamento del blocco di copertura<\/span><\/h4>\n\n\n\n
<\/a><\/span>Impostazioni dell'immagine di copertina<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Creazione di un'intestazione video<\/span><\/h4>\n\n\n\n