Come utilizzare il blocco di copertina di WordPress

Il Cover Block di WordPress è interessante. Ti consente di posizionare un'immagine, un video o un colore solido sullo sfondo e aggiungere blocchi di contenuto in primo piano. Ciò significa che puoi posizionare blocchi su altri blocchi. Ha più opzioni rispetto alla maggior parte dei blocchi. Sapere come utilizzare il Cover Block può migliorare notevolmente il design del tuo sito web.

In questo articolo, esamineremo cosa fa il Blocco copertina e ne vedremo le impostazioni e le opzioni. Vedremo anche alcune best practice su come usarlo e vedremo le domande frequenti.

Come aggiungere il blocco di copertina al tuo post o pagina

Per aggiungere il Blocco copertina alle tue pagine e ai tuoi post, seleziona l'icona del blocco all'interno dei tuoi contenuti o nell'angolo in alto a sinistra della pagina, inserisci il nome del blocco e selezionalo.

Puoi anche digitare /cover e premere Invio o selezionare il blocco.

Avrai quindi un Blocco copertina nel tuo contenuto in cui puoi aggiungere contenuti multimediali come immagini o video o utilizzare il colore per lo sfondo e posizionare il testo in primo piano. Dopo aver selezionato il contenuto dalla cartella multimediale o dal colore, l'opzione di testo appare in primo piano.

Ho aggiunto un'immagine dalla mia libreria multimediale e ho aggiunto una didascalia sull'immagine. La didascalia è un blocco di paragrafo. Puoi cambiarlo in altri tipi di blocchi, incorporare video e altro.

Puoi anche aggiungere più blocchi premendo il tasto Invio. Seleziona dai tuoi blocchi normalmente.

Puoi anche scegliere uno dei colori preselezionati per il tuo sfondo.

Il colore può essere utilizzato come sovrapposizione sulle immagini.

Impostazioni e opzioni del blocco di copertina

Il Blocco copertina ha due aree con impostazioni e opzioni. Il primo è la barra degli strumenti Cover. Il secondo sono le opzioni Blocco copertina nella barra laterale destra.

Barra degli strumenti Blocco copertina

Facendo clic in un punto qualsiasi del Blocco copertina si apre la sua barra degli strumenti.

Cambia il tipo o lo stile del blocco di copertina

La prima impostazione modifica il numero di colonne, consente di raggruppare, modificare un'immagine e selezionare lo stile predefinito oi bordi. Il passaggio del mouse rivela un'anteprima. Sto passando il mouse sopra l'immagine. L'immagine elimina i blocchi di contenuto presenti nell'overlay.

Trascina o sposta

Afferra lo strumento di trascinamento (6 punti) per trascinare il blocco dove vuoi. Lo strumento Sposta consente di fare clic sulle frecce per spostare il blocco o il testo all'interno del contenuto.

Allineamento

Le opzioni di allineamento includono sinistra, centro, destra, larghezza ampia e larghezza completa. Sinistra e destra avvolgono il blocco con il paragrafo sotto di esso.

Ecco l'immagine a tutta larghezza. Questo può essere usato per creare titoli, dividere sezioni, ecc.

Modifica posizione contenuto

Questo seleziona la posizione del contenuto. Apre una griglia 3×3 con punti. La selezione di un punto sposta il contenuto in quella posizione all'interno dell'immagine.

Attiva/disattiva altezza completa

Questo imposta l'immagine alla sua massima altezza invece di ridimensionarla.

Applica filtro a due tonalità

Scegli una bicromia dalle opzioni preselezionate. Uno si applica alle ombre e l'altro si applica alle alte luci.

Seleziona un colore sul cursore per regolarlo.

Seleziona un colore sotto il cursore per scegliere un colore preselezionato.

Sostituire

Questo apre le opzioni multimediali in modo da poter caricare o scegliere un'altra immagine dalla libreria.

Opzioni

Le opzioni Blocco copertina includono:

Nascondi altre impostazioni: nasconde la barra laterale destra.

Copia : copia il Blocco copertina in modo da poterlo incollare ovunque all'interno della pagina o del post.

Duplica : crea un duplicato del Blocco copertina e lo posiziona sotto l'originale.

Inserisci prima : aggiunge spazio sopra il Blocco copertina per un altro blocco.

Inserisci dopo : aggiunge spazio sotto il Blocco copertina per un altro blocco.

Sposta in : consente di spostare il blocco spostando una linea blu in alto o in basso con i tasti freccia. Premi invio e il tuo blocco viene spostato nella posizione della linea blu.

Aggiungi a blocchi riutilizzabili : aggiunge il blocco ai blocchi riutilizzabili in modo da poterlo utilizzare su qualsiasi pagina o post.

Gruppo : aggiungi il blocco a un gruppo in modo da poterli regolare come una singola unità.

Rimuovi blocco : elimina il blocco.

Contenuto del blocco di copertina

Selezionando il contenuto si apre un altro set di strumenti solo per il contenuto. L'impostazione predefinita è un Blocco paragrafo e include tutte le opzioni standard sia per la barra degli strumenti che per le impostazioni della barra laterale. Puoi trasformarlo o aggiungere qualsiasi blocco. Questo ti dà molte opzioni per il contenuto.

Seleziona copertina

Questo chiude la barra degli strumenti del contenuto e apre la barra degli strumenti del Blocco copertina.

Ridimensiona blocco copertina

Ridimensiona l'immagine trascinando il cerchio nella parte inferiore dell'immagine.

Impostazioni blocco copertina

Le impostazioni del Blocco copertina si trovano nella barra laterale destra. Fare clic sul blocco o sull'ingranaggio per visualizzare la barra laterale. Se selezioni il blocco all'interno del contenuto del blocco, verranno visualizzate le impostazioni della barra laterale.

Stili

Visualizza il blocco con o senza bordo. Puoi anche impostare l'impostazione predefinita per mostrare il bordo. Include un'anteprima in modo da poter vedere come sarebbe prima di selezionarlo.

Spaziatura

Aggiungi spazio a tutti i lati o lati specifici. Seleziona ciascun lato singolarmente o collegali insieme per regolarli tutti in una volta.

Impostazioni multimediali

Scegli la parte dell'immagine che viene visualizzata all'interno del blocco. È possibile selezionare uno sfondo fisso (parallasse), per ripetere lo sfondo se è troppo piccolo per l'area e specificare il punto focale spostando un cerchio o specificando le posizioni sinistra e superiore. Puoi anche cancellare i media da qui. Solo il selettore del punto focale è disponibile per i video.

Questo esempio mostra Sfondo fisso. L'immagine rimane in posizione mentre il testo scorre, creando un effetto di parallasse.

Questo è lo sfondo ripetuto. È utile per creare modelli interessanti con piccole immagini.

Dimensioni

Specificare l'altezza in pixel inserendola nel campo. Funziona allo stesso modo dello strumento di trascinamento nella parte inferiore dell'immagine.

Sovrapposizione

Il Cover Block ha molte opzioni per la sovrapposizione. Seleziona un colore predefinito e scegli la sua opacità. Scegli tra un colore solido o un gradiente. Vedrai i cambiamenti in tempo reale. Se hai scelto di mostrare un colore anziché un'immagine, puoi modificare il colore qui. Questo esempio mostra un colore a tinta unita.

Puoi anche scegliere un colore personalizzato. Si apre un selettore di colori in cui è possibile inserire il colore all'interno della finestra, selezionare la scala dei colori con un dispositivo di scorrimento o inserire i codici esadecimali, RGB o HSL.

L'opzione gradiente consente di selezionare i due colori che verranno visualizzati. Scegli tra lineare o radiale. Puoi anche impostare l'opacità dei colori. Ho selezionato radiale in questo esempio.

Avanzate

Avanzato include due campi. La prima è un'opzione per un ancoraggio HTML. Questo fornisce un indirizzo web speciale solo per il Cover Block. Il secondo è un campo per aggiungere classi CSS aggiuntive. Ciò ti consente di creare CSS personalizzati per lo stile del tuo blocco. Lo stile che hai selezionato appare anche in questo campo.

Suggerimenti e best practice per un utilizzo efficace del blocco di copertura

Per le immagini, utilizza le impostazioni multimediali nella barra laterale per mostrare la parte dell'immagine che desideri visualizzare.

Usa immagini grandi con l'opzione a larghezza intera per creare titoli di sezione.

Passa a più colonne per il primo piano e aggiungi immagini, testo e pulsanti per creare inviti all'azione.

Usa colori di sovrapposizione e testo facili da leggere sull'immagine o sul colore di sfondo.

Trasforma il blocco in un gruppo se vuoi controllare il colore del bordo.

Usa le opzioni di allineamento per impostare il Blocco copertina nel tuo contenuto o metterlo da parte.

Imposta le impostazioni di posizionamento del contenuto per creare immagini interessanti e attirare l'attenzione del lettore.

Usa Sfondo fisso per creare un effetto di parallasse.

Usa piccole immagini con Sfondo ripetuto per creare motivi di sfondo interessanti.

Domande frequenti sul blocco di copertura

Che cos'è il blocco di copertura?

Questo è un blocco che ti consente di aggiungere elementi multimediali o colore allo sfondo e altri blocchi in primo piano.

Cosa lo rende diverso dagli altri blocchi?

Può contenere altri blocchi. Puoi aggiungere altri blocchi in primo piano. Crea parallasse, modelli, ecc.

Può essere trasformato in altri blocchi?

Sì. Può essere trasformato in un blocco immagine. Elimina tutti gli altri blocchi che hai aggiunto alla sua area di contenuto.

Per cosa può essere utilizzato?

Puoi utilizzare il Blocco copertina per creare uno sfondo con un invito all'azione, usarlo per creare un titolo sopra una sezione, creare poster, sezioni degli eroi o qualsiasi cosa tu voglia avere un'immagine o un video in background.

Conclusione

Questo è il nostro sguardo al Cover Block. Questo blocco ha alcune delle caratteristiche più interessanti ed è un'ottima scelta per creare intestazioni, titoli, CTA, sfondi di parallasse e altro ancora. È facile da usare e può far risaltare il tuo sito web più della maggior parte dei blocchi. La sua capacità di creare immagini interessanti lo rende uno dei miei blocchi WordPress preferiti.

Vogliamo sentire da voi. Usi il Cover Block? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite fourSage / shutterstock.com