La differenza tra immagini coperte e immagini in primo piano in WordPress

Quando WordPress 5.0 ha introdotto l'editor Gutenberg, ha anche apportato alcune nuove funzionalità a WordPress. Molte di queste caratteristiche sono visualizzate sotto forma di blocchi. Uno di questi blocchi si chiama Cover, che posiziona un'immagine coperta con diverse funzionalità personalizzabili all'interno del tuo post o del contenuto della pagina.

Naturalmente, WordPress include ancora l'opzione per specificare un'immagine in primo piano per pagine e post. Ciò solleva diverse domande. Le immagini coperte e le immagini in primo piano sono le stesse? In caso negativo, cosa sono e come vengono utilizzati? Qual è la differenza? In questo articolo, discuteremo l'immagine coperta rispetto all'immagine in primo piano in WordPress e risponderemo a ciascuna di queste domande.

Immagini coperte

Un'immagine di copertina è una foto grande che di solito viene posizionata nella parte superiore di una pagina o di un post. Sono state anche chiamate immagini di intestazione. Rappresentano il contenuto. È la prima cosa che il lettore vede quando visualizza il contenuto. Aiuta a creare l'atmosfera o a descrivere visivamente l'articolo in modo che il lettore abbia un'idea di cosa aspettarsi. Possono anche essere usati in tutta la pagina o nel post per aiutare a introdurre la sezione successiva.

Le immagini di copertina sono facili da aggiungere ai tuoi contenuti in Gutenberg e includono alcune funzionalità di stile che non sono disponibili in modo nativo per l'immagine in primo piano.

Gutenberg include un nuovo blocco chiamato Cover che ti consente di creare un'immagine di copertina per i tuoi post o pagine. Troverai il blocco nella scheda Blocchi comuni nell'elenco dei blocchi.

Il blocco Copertina ti consente di aggiungere un'immagine con una sovrapposizione e del testo. Carica la tua immagine o seleziona la tua immagine dalla libreria multimediale. Se lo desideri, puoi anche utilizzare un video, che verrà riprodotto dietro il testo e la sovrapposizione. Questo è ottimo per creare intestazioni accattivanti. Questo è qualcosa che non può essere fatto con un'immagine in primo piano senza utilizzare un plug-in di terze parti.

Dopo aver aggiunto l'immagine o il video, vedrai le funzionalità per il testo, le impostazioni fisse dello sfondo e la sovrapposizione. Ha alcune impostazioni di allineamento sopra l'immagine.

Per aggiungere il titolo, posiziona semplicemente il cursore dove dice "Scrivi titolo..." e inizia a digitare. Ha anche opzioni per usare grassetto, corsivo, aggiungere un collegamento o barrare il testo. Nelle impostazioni sopra l'immagine, puoi allineare il testo.

Sfondo fisso aggiunge una funzione di parallasse per le immagini. L'immagine rimane al suo posto mentre il testo scorre. Questa funzione non è disponibile per i video, ma tutte le altre impostazioni lo sono.

Aggiungi un colore di sovrapposizione selezionando il colore desiderato dalle scelte oppure seleziona il cerchio multicolore per selezionare un colore personalizzato.

Il colore personalizzato include un selettore di colori con un dispositivo di scorrimento e mostra il valore del colore in esadecimale o in RGB.

L'opacità dello sfondo modifica la quantità di opacità della sovrapposizione, consentendoti di scegliere di mostrare più immagine e meno colore della sovrapposizione, o più sovrapposizione e meno immagine. In questo esempio, ho impostato l'opacità su 80. Puoi dire che c'è un'immagine lì, ma non puoi vedere molti dettagli.

In questo esempio, ho impostato l'opacità su 20. Si può vedere molto di più dell'immagine ma ha ancora un tocco del colore della sovrapposizione.

L'immagine ha anche un'opzione a larghezza intera nelle impostazioni nella parte superiore dell'immagine. Questo è ottimo per creare intestazioni di immagini o video o creare bellissime introduzioni di sezioni.

I blocchi di copertina aprono molte possibilità di design dandoti la possibilità di aggiungere immagini con testo, sovrapposizioni e parallasse. L'immagine/video, il testo, i colori e il parallasse aiutano a creare l'atmosfera dell'articolo e ad attrarre il pubblico di destinazione. Puoi utilizzare più blocchi di copertina in tutto il contenuto per introdurre nuove sezioni (che in genere sono identificate con il testo dell'intestazione) o semplicemente aggiungere un tocco visivo ai collegamenti alle pagine o ai prodotti.

Immagini in evidenza

L'immagine in primo piano fornisce la miniatura del post. Queste miniature vengono visualizzate ovunque che mostri un'immagine in primo piano come le home page che mostrano i post del blog, le pagine dell'archivio del blog e sui singoli post. L'immagine in evidenza rappresenta l'articolo stesso. Sono utilizzati per stimolare l'interesse e informare il lettore sul tipo o sullo scopo dell'articolo.

Hanno anche usato come immagine predefinita che viene mostrata quando il contenuto è condiviso sui social media, a meno che quell'immagine non venga sovrascritta manualmente utilizzando un plug-in come Yoast, come mostrato nell'esempio sopra.

L'immagine in primo piano viene aggiunta nelle impostazioni del post o della pagina. Fai clic su Imposta immagine in primo piano e scegli o carica la tua immagine nella libreria multimediale.

Temi come Twenty Nineteen includono una sovrapposizione per l'immagine in primo piano. Puoi scegliere i colori nel personalizzatore del tema in Colori. Il blu è il colore predefinito, ma puoi utilizzare il cursore per selezionare qualsiasi colore quasi.

Puoi anche regolare le sovrapposizioni di immagini in primo piano quando usi i page builder come Divi ed Extra. In questo esempio, sto regolando l'icona della sovrapposizione dell'immagine in primo piano e il colore della sovrapposizione al passaggio del mouse per il modulo blog.

Utilizzo di immagini di copertina e immagini in primo piano insieme

Puoi utilizzare l'immagine di copertina e l'immagine in primo piano insieme sulla stessa pagina o post. In questo esempio, ho entrambi mostrati all'interno dell'articolo. Idealmente, non si siederebbero uno accanto all'altro in questo modo, ma questo è solo per mostrare che possono apparire all'interno del post. Ci sono momenti in cui vorrai usare l'immagine di copertina come immagine in primo piano.

Se utilizzi la stessa immagine in primo piano dell'immagine di copertina, le immagini verranno visualizzate due volte all'interno dei tuoi contenuti. In realtà mostra due cose diverse: un'immagine in primo piano e un'immagine di copertina, ma hai selezionato la stessa immagine per entrambe.

Fortunatamente, ci sono diverse cose che puoi fare per usare la stessa immagine per entrambi senza che l'immagine appaia due volte. Alcuni temi, come Divi e molti altri, consentono di escludere l'immagine in primo piano dal contenuto.

Se stai utilizzando Divi o Extra, nel menu del pannello di controllo vai su Divi (o Extra ) > Opzioni del tema > Layout e disabilita Posiziona i pollici sul post nella scheda Layout del post singolo . Questa opzione è disponibile anche nella scheda Layout pagina singola , quindi puoi personalizzare le impostazioni in base alle tue esigenze.

In questo esempio, l'immagine in primo piano è la stessa dell'immagine di copertina. Ho aggiunto un overlay al passaggio del mouse, che sto dimostrando passando il mouse sopra il post a destra.

Il post stesso mostra solo l'immagine di copertina. L'immagine in primo piano non viene visualizzata all'interno del contenuto del post.

Extra include un'opzione per nascondere l'immagine in primo piano sul post individualmente. Questo ti dà un maggiore controllo su come WordPress gestisce le immagini in primo piano su articoli e pagine. Nelle impostazioni del post, fai clic su Nascondi immagine in primo piano sul post .

Puoi anche nascondere l'immagine in primo piano sul post con un plug-in come Hide Featured Image, un plug-in gratuito nel repository di WordPress. Scegli di nascondere tutte le immagini in primo piano su post o pagine o nascondile singolarmente sulle pagine e sui post stessi. Al momento ho testato il plugin, non era compatibile con Twenty Nineteen, ma funzionava benissimo con Twenty Seventeen e altri.

Aggiunge un'opzione a pagine e post per nascondere l'immagine in primo piano. Questo è ottimo se vuoi mostrare l'immagine in primo piano per impostazione predefinita, ma poi nasconderla su pagine o post che utilizzano un'immagine di copertina. Questo ti dà un maggiore controllo del design per la visualizzazione delle immagini in primo piano.

Pensieri finali

Questo è il nostro sguardo all'immagine coperta rispetto all'immagine in primo piano in WordPress. All'inizio sembrano uguali o simili, ma in pratica sono molto diversi.

Le immagini in primo piano attirano il lettore verso l'articolo. Un articolo avrà solo un'immagine in primo piano sul sito, che verrà mostrata ovunque che mostri le miniature dei post, ma può essere sostituita con un'altra immagine da mostrare sui social media utilizzando plugin come Yoast. Alcuni temi come Twenty Nineteen e builder come Divi includono personalizzazioni per le immagini in primo piano.

Le immagini di copertina sono in realtà parte dell'articolo e possono aiutare a migliorare il coinvolgimento con i post. L'articolo può avere più immagini di copertina o video in tutto il suo contenuto. Sono ottimi per fornire un design visivo e per separare sezioni dell'articolo se si desidera utilizzare immagini anziché solo testo di intestazione. Le immagini di copertina sono particolarmente interessanti grazie alle opzioni di larghezza intera, testo, parallasse e sovrapposizione integrate in WordPress. Mi piace che possa visualizzare video. Fino a Gutenberg, avere queste funzionalità richiedeva un plug-in o un generatore di pagine.

Le immagini coperte e le immagini in primo piano sono ottime per aggiungere un design visivo ai tuoi contenuti. Hanno diverse opzioni e scopi e puoi usarli separatamente o insieme.

Vogliamo sentire da voi. Come si utilizzano le immagini coperte e le immagini in primo piano in WordPress? Fateci sapere nei commenti.

Immagine in primo piano tramite karnoff / shutterstock.com