Comment utiliser le bloc de couverture WordPress

Le bloc de couverture WordPress est intéressant. Il vous permet de placer une image, une vidéo ou une couleur unie en arrière-plan et d'ajouter des blocs de contenu au premier plan. Cela signifie que vous pouvez placer des blocs sur d'autres blocs. Il a plus d'options que la plupart des blocs. Savoir comment utiliser le Cover Block peut grandement améliorer la conception de votre site Web.

Dans cet article, nous examinerons ce que fait le bloc de couverture et verrons ses paramètres et ses options. Nous verrons également quelques bonnes pratiques sur la façon de l'utiliser et voir les questions fréquemment posées.

Comment ajouter le bloc de couverture à votre publication ou page

Pour ajouter le bloc de couverture à vos pages et publications, sélectionnez l'icône de bloc dans votre contenu ou dans le coin supérieur gauche de la page, entrez le nom du bloc et sélectionnez-le.

Vous pouvez également taper /cover et appuyer sur Entrée ou sélectionner le bloc.

Vous aurez alors un bloc de couverture dans votre contenu où vous pourrez ajouter des médias tels que des images ou des vidéos, ou utiliser de la couleur pour l'arrière-plan et placer du texte au premier plan. Une fois que vous avez sélectionné le contenu de votre dossier multimédia ou de votre couleur, l'option de texte apparaît au premier plan.

J'ai ajouté une image de ma bibliothèque multimédia et ajouté une légende sur l'image. La légende est un bloc de paragraphe. Vous pouvez le remplacer par d'autres types de blocs, incorporer une vidéo, etc.

Vous pouvez également ajouter plusieurs blocs en appuyant sur la touche Entrée. Choisissez parmi vos blocs comme d'habitude.

Vous pouvez également choisir parmi l'une des couleurs présélectionnées pour votre arrière-plan.

La couleur peut être utilisée comme une superposition sur vos images.

Paramètres et options du bloc de couverture

Le bloc de couverture a deux zones avec des paramètres et des options. Le premier est la barre d'outils de couverture. La seconde est les options Cover Block dans la barre latérale droite.

Barre d'outils du bloc de couverture

Cliquer n'importe où dans le bloc de couverture ouvre sa barre d'outils.

Modifier le type ou le style de bloc de couverture

Le premier paramètre modifie le nombre de colonnes, vous permet de grouper, de modifier une image et de sélectionner le style par défaut ou les bordures. Le survol révèle un aperçu. Je survole Image. Image supprime les blocs de contenu que vous avez dans la superposition.

Glisser ou déplacer

Saisissez l'outil glisser (6 points) pour faire glisser le bloc où vous le souhaitez. L'outil Déplacer permet de cliquer sur les flèches pour déplacer le bloc vers le haut ou le texte dans le contenu.

Alignement

Les options d'alignement incluent gauche, centre, droite, grande largeur et pleine largeur. Gauche et droite enveloppent le bloc avec le paragraphe en dessous.

Voici l'image en pleine largeur. Cela peut être utilisé pour créer des titres, diviser des sections, etc.

Modifier la position du contenu

Cela sélectionne l'emplacement du contenu. Il ouvre une grille 3×3 avec des points. La sélection d'un point déplace le contenu vers cet emplacement dans l'image.

Basculer sur toute la hauteur

Cela définit l'image sur toute sa hauteur plutôt que de la redimensionner.

Appliquer un filtre bicolore

Choisissez un duotone parmi vos options présélectionnées. L'un s'applique aux ombres et l'autre s'applique aux hautes lumières.

Sélectionnez une couleur sur le curseur pour l'ajuster.

Sélectionnez une couleur sous le curseur pour choisir une couleur présélectionnée.

Remplacer

Cela ouvre les options multimédias afin que vous puissiez télécharger ou choisir une autre image dans la bibliothèque.

Options

Les options de bloc de couverture comprennent :

Masquer plus de paramètres – masque la barre latérale droite.

Copier - copie le bloc de couverture afin que vous puissiez le coller n'importe où dans votre page ou votre publication.

Dupliquer – crée un duplicata du bloc de couverture et le place sous l'original.

Insérer avant – ajoute de l'espace au-dessus du bloc de couverture pour un autre bloc.

Insérer après – ajoute de l'espace sous le bloc de couverture pour un autre bloc.

Déplacer vers - vous permet de déplacer le bloc en déplaçant une ligne bleue vers le haut ou vers le bas avec les touches fléchées. Appuyez sur Entrée et votre bloc est déplacé à l'emplacement de la ligne bleue.

Ajouter aux blocs réutilisables - ajoute le bloc à vos blocs réutilisables afin que vous puissiez l'utiliser sur n'importe quelle page ou publication.

Groupe - ajoutez le bloc à un groupe afin que vous puissiez les ajuster comme une seule unité.

Supprimer le bloc – supprime le bloc.

Contenu du bloc de couverture

La sélection du contenu ouvre un autre ensemble d'outils uniquement pour le contenu. La valeur par défaut est un bloc de paragraphe et inclut toutes les options standard pour les paramètres de la barre d'outils et de la barre latérale. Vous pouvez le transformer ou ajouter n'importe quel bloc. Cela vous donne beaucoup d'options pour le contenu.

Sélectionnez la couverture

Cela ferme la barre d'outils de contenu et ouvre la barre d'outils Cover Block.

Redimensionner le bloc de couverture

Redimensionnez l'image en faisant glisser le cercle en bas de l'image.

Paramètres du bloc de couverture

Les paramètres du bloc de couverture sont placés dans la barre latérale droite. Cliquez sur le bloc ou l'engrenage pour afficher la barre latérale. Si vous sélectionnez le bloc dans le contenu du bloc, ses paramètres de barre latérale s'afficheront.

modes

Affichez le bloc avec ou sans bordure. Vous pouvez également définir la valeur par défaut pour afficher la bordure. Il comprend un aperçu afin que vous puissiez voir à quoi il ressemblerait avant de le sélectionner.

Espacement

Ajoutez de l'espace sur tous les côtés ou sur des côtés spécifiques. Sélectionnez chaque côté individuellement ou reliez-les ensemble pour les ajuster tous en même temps.

Paramètres multimédias

Choisissez la partie de l'image qui s'affiche dans le bloc. Vous pouvez sélectionner un arrière-plan fixe (parallaxe), pour répéter l'arrière-plan s'il est trop petit pour la zone, et spécifier le point focal en déplaçant un cercle ou en spécifiant les positions gauche et supérieure. Vous pouvez également effacer les médias à partir d'ici. Seul le sélecteur de point focal est disponible pour les vidéos.

Cet exemple montre un arrière-plan fixe. L'image reste en place pendant que le texte défile, créant un effet de parallaxe.

Il s'agit d'un arrière-plan répété. C'est bon pour créer des motifs intéressants avec de petites images.

Dimensions

Spécifiez la hauteur en pixels en la saisissant dans le champ. Cela fonctionne de la même manière que l'outil glisser au bas de l'image.

Recouvrir

Le Cover Block a beaucoup d'options pour la superposition. Sélectionnez une couleur prédéfinie et choisissez son opacité. Choisissez parmi une couleur unie ou un dégradé. Vous verrez les changements en temps réel. Si vous avez choisi d'afficher une couleur plutôt qu'une image, vous pouvez modifier la couleur ici. Cet exemple montre une couleur unie.

Vous pouvez également choisir une couleur personnalisée. Cela ouvre un sélecteur de couleurs dans lequel vous pouvez appliquer la couleur dans la fenêtre, sélectionner l'échelle de couleurs avec un curseur ou entrer les codes hexadécimaux, RVB ou HSL.

L'option dégradé vous permet de sélectionner les deux couleurs qui s'afficheront. Choisissez entre linéaire ou radial. Vous pouvez également définir l'opacité des couleurs. J'ai sélectionné radial dans cet exemple.

Avancée

Avancé comprend deux champs. Le premier est une option pour une ancre HTML. Cela fournit une adresse Web spéciale uniquement pour le bloc de couverture. Le second est un champ pour ajouter des classes CSS supplémentaires. Cela vous permet de créer un CSS personnalisé pour styliser votre bloc. Le style que vous avez sélectionné apparaît également dans ce champ.

Conseils et bonnes pratiques pour une utilisation efficace du bloc de couverture

Pour les images, utilisez les paramètres multimédias dans la barre latérale pour afficher la partie de l'image que vous souhaitez afficher.

Utilisez de grandes images avec l'option pleine largeur pour créer des titres de section.

Passez à plusieurs colonnes pour le premier plan et ajoutez des images, du texte et des boutons pour créer des incitations à l'action.

Utilisez des couleurs de superposition et de texte faciles à lire sur l'image ou la couleur d'arrière-plan.

Transformez le bloc en groupe si vous souhaitez contrôler la couleur de la bordure.

Utilisez les options d'alignement pour insérer le bloc de couverture dans votre contenu ou le distinguer.

Définissez les paramètres de positionnement du contenu pour créer des visuels intéressants et attirer l'attention du lecteur.

Utilisez Arrière-plan fixe pour créer un effet de parallaxe.

Utilisez de petites images avec un arrière-plan répété pour créer des motifs d'arrière-plan intéressants.

Foire aux questions sur le bloc de couverture

Qu'est-ce que le bloc de couverture?

Il s'agit d'un bloc qui vous permet d'ajouter des médias ou de la couleur à l'arrière-plan et d'autres blocs au premier plan.

Qu'est-ce qui le différencie des autres blocs ?

Il peut contenir d'autres blocs. Vous pouvez ajouter d'autres blocs au premier plan. Il crée des parallaxes, des motifs, etc.

Peut-il être transformé en d'autres blocs ?

Oui. Il peut être transformé en bloc image. Il supprime tous les autres blocs que vous avez ajoutés à sa zone de contenu.

A quoi peut-il servir ?

Vous pouvez utiliser le bloc de couverture pour créer un arrière-plan avec un appel à l'action, l'utiliser pour créer un titre au-dessus d'une section, créer des affiches, des sections de héros ou tout ce que vous souhaitez avoir une image ou une vidéo en arrière-plan.

Conclusion

C'est notre regard sur le Cover Block. Ce bloc possède certaines des fonctionnalités les plus intéressantes et constitue un excellent choix pour créer des en-têtes, des titres, des CTA, des arrière-plans de parallaxe, etc. Il est facile à utiliser et peut faire ressortir votre site Web plus que la plupart des blocs. Sa capacité à créer des visuels intéressants en fait l'un de mes blocs WordPress préférés.

Nous voulons de vos nouvelles. Utilisez-vous le Cover Block ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via fourSage / shutterstock.com