Si vous souhaitez créer un site web WordPress visuellement agréable, la modification des couleurs d'arrière-plan peut vous aider à mettre en évidence le contenu important, à créer une hiérarchie visuelle claire et à rendre votre site plus attrayant. Cependant, avec le grand nombre de blocs disponibles dans l'éditeur de blocs de WordPress, il peut être difficile de savoir comment changer la couleur d'arrière-plan pour chacun d'entre eux.
Alors que certains blocs sont dotés de paramètres de couleur d'arrière-plan intégrés, d'autres nécessitent une approche légèrement différente. La bonne nouvelle est que la plupart des blocs de WordPress supportent la personnalisation native de la couleur d'arrière-plan, et pour ceux qui ne le font pas, il y a des solutions de contournement simples comme le bloc Groupe et le bloc Couverture.
Dans ce guide, nous allons vous présenter trois méthodes simples pour que vous puissiez styliser en toute confiance n'importe quel bloc de votre site. Nous aborderons les blocs qui permettent de modifier directement les couleurs, nous montrerons comment utiliser le bloc Groupe et nous explorerons le bloc Couverture pour les conceptions avancées telles que les sections de héros et les bannières. Commençons par le commencement.
Méthode 1 : Couleur d'arrière-plan directe (support natif)
De nombreux blocs de base de WordPress sont dotés d'un support natif pour les changements de couleur d'arrière-plan. Cela signifie que vous pouvez directement appliquer des couleurs sans ajouter de blocs supplémentaires ou de code personnalisé.
Étape 1 : Sélection du bloc
Commencez par cliquer sur le bloc que vous souhaitez personnaliser dans l'éditeur. Cela activera le bloc et ses paramètres apparaîtront dans la fenêtre de l'éditeur. Réglages des blocs à droite.
Étape 2 : Ouvrir la barre latérale des paramètres de blocage
Si le panneau de configuration n'est pas encore visible, cliquez sur le bouton Paramètres situé dans le coin supérieur droit de l'éditeur. Sous le bouton Réglages des blocs localisez le panneau Styles section.
Étape 3 : Ajuster la couleur d'arrière-plan
Dans le panneau de configuration des styles, vous trouverez les options suivantes Couleur section. Sous Paramètres de couleur, trouver Contexte. Il suffit maintenant de choisir une couleur dans la palette, d'utiliser le sélecteur de couleurs ou de saisir un code HEX/RGB/HSL personnalisé.
S'applique à
- Blocs de texte et de contenu: Paragraphe, Titre, Liste, Citation, Pullquote, Code, Préformaté, Verset
- Blocs de présentation: Groupe, colonnes, couverture, médias et texte
- Blocs interactifs/Widget: Boutons, Calendrier, Derniers articles, Catégories, Tag Cloud, Icônes sociales, Navigation, Fichier, Audio, Vidéo, RSS, Recherche, Connexion/Sortie, Liste de pages
- Blocs de sites/postes: Titre du site, Titre du site, Titre du message, Contenu du message, Extrait du message, Date du message, Auteur du message, Catégories du message, Tags du message, Commentaires, Message suivant/précédent, Lire la suite
- Blocs utilitaires: Entretoise (limitée), Séparateur (limité), Table (table entière uniquement).
Notes
- Bloc de couverture : Au lieu d'un arrière-plan, vous trouverez l'option Superposition. Vous pouvez ajuster la couleur de l'incrustation ainsi que les paramètres d'opacité pour les effets de superposition.
- Bloc de boutons : La couleur d'arrière-plan s'applique au bouton lui-même, tandis que l'option de couleur de texte modifie le texte du bouton.
- Icônes sociales : La couleur d'arrière-plan n'affecte que le conteneur d'icônes.
- Bloc de table:
- Pour modifier la couleur d'arrière-plan de l'ensemble du tableauSélectionnez le bloc Table et appliquez la couleur dans le panneau de configuration.
- Il est possible d'avoir des couleurs différentes pour les lignes, mais cela est limité à l'option par défaut. Accédez à l'option Styles et choisissez l'option Rayures mais la couleur de la bande est prédéfinie et ne peut pas être personnalisée.
Méthode 2 : Envelopper dans un bloc de groupe
Pour les blocs qui n'ont pas d'options natives de couleur d'arrière-plan, tels que les blocs médias, les blocs hérités ou les blocs utilitaires, vous pouvez utiliser un attribut Bloc de groupe pour servir de conteneur flexible. En enveloppant le contenu à l'intérieur du bloc Groupe, vous pouvez appliquer des couleurs d'arrière-plan à l'ensemble de la section.
Étape 1 : Identifier et cibler le bloc spécifique
Cliquez sur le bloc qui ne supporte pas directement la couleur d'arrière-plan. Une fois que vous avez fait cela, la barre d'outils du bloc apparaîtra au-dessus de ce bloc particulier.
Étape 2 : Regrouper le bloc
Cliquez maintenant sur le bouton Menu des options (trois points) à l'extrême droite de la barre d'outils du bloc, et sélectionnez Groupe dans le menu déroulant. Le bloc sélectionné est alors placé à l'intérieur d'un bloc de groupe.
Étape 3 : Sélectionner le bloc de groupe
Cliquez sur le bord extérieur du bloc Groupe et, lorsque la barre d'outils apparaît, sélectionnez le bloc de groupe parent à l'extrême gauche. L'ensemble de la section est ainsi mis en évidence.
Étape 4 : Appliquer la couleur d'arrière-plan
Tout de suite, naviguez jusqu'à la page Panneau Paramètres du bloc, faites défiler jusqu'à la Couleur et choisissez une couleur d'arrière-plan ou utilisez le sélecteur de couleurs pour obtenir des nuances personnalisées.
Étape 5 : Ajuster l'espacement (facultatif)
Si le contenu de votre bloc de groupe occupe toute la largeur du bloc, il se peut que vous deviez ajuster la largeur du contenu pour que la couleur d'arrière-plan soit visible. Sélectionnez l'option Groupe (comme nous l'avons fait à l'étape 3), passez au bloc Réglages des blocs, faire défiler vers le bas jusqu'à Largeur du contenuet définissez une largeur personnalisée pour créer de l'espace entre le contenu et l'arrière-plan coloré.
S'applique à
- Blocs de médias sans soutien direct : Image (si elle n'est pas convertie en couverture), vidéo, audio
- Blocs d'héritage et d'utilité : Shortcode, Classic, More, Custom HTML, Legacy Widget, Template Part, Page Break, Archives, Embed (YouTube, Twitter, etc.), Avatar, Comments Query Loop, Spacer (pour un contrôle avancé), Separator (pour une flexibilité accrue).
Notes
- Le bloc Groupe est idéal pour créer des sections avec des couleurs d'arrière-plan uniformes.
- Vous pouvez imbriquer plusieurs blocs à l'intérieur d'un bloc Groupe pour les présenter comme une section cohérente.
- Ajustez les paramètres de mise en page (tels que l'alignement et le remplissage) pour mieux contrôler l'espacement et le flux de contenu.
Méthode 3 : Utiliser un bloc de couverture
Lorsque vous avez besoin d'options de conception avancées, telles que des effets de superposition ou des arrière-plans superposés, l'application Bloc de couverture est la solution idéale. Il vous permet d'ajouter des couleurs ou des images d'arrière-plan avec une opacité personnalisable, ce qui est parfait pour les sections de héros, les bannières ou les zones de contenu en vedette.
Étape 1 : Ajouter un bloc de couverture
Commencez simplement par cliquer sur le bouton + dans l'éditeur, rechercher Couvertureet l'insérer dans votre contenu.
Étape 2 : Choisir une couleur d'arrière-plan
Dans la configuration initiale, sélectionnez une couleur d'arrière-plan ou ajoutez une image. Que vous utilisiez une image ou une couleur, vous pouvez modifier la couleur d'incrustation et ajuster l'opacité de l'incrustation. Pour ce faire, accédez à l'onglet Couleur dans le cadre de la Styles dans l'onglet Réglages des blocs.
Étape 3 : Insérer du contenu dans le bloc de couverture
Pour insérer le contenu à l'intérieur du bloc de couverture, il suffit d'utiliser la fonction barre d'outils du bloc pour faire glisser le(s) bloc(s) que vous souhaitez styliser (comme les paragraphes, les titres ou les images) dans le bloc Couverture ou ajouter de nouveaux blocs directement à l'intérieur de celui-ci à l'aide de la fonction inséreur de blocs (bouton +).
S'applique à
- Pour les besoins de conception avancés : Tout bloc nécessitant des effets d'arrière-plan en couches, comme les paragraphes, les titres, les images, les boutons ou même plusieurs blocs combinés.
Notes
- Le bloc de couverture est parfait pour sections du héros, zones d'appel à l'actionet bannières.
- Vous pouvez superposer du texte à des couleurs ou des images d'arrière-plan pour obtenir des effets visuels saisissants.
- Ajustez l'opacité pour des superpositions subtiles ou des blocs de couleurs vives.
Tableau récapitulatif : Blocs et méthodes
Catégorie de bloc |
Méthode |
|---|---|
Blocs de texte/contenu (par exemple, paragraphe, titre, liste) |
Méthode 1 |
Media Blocks (e.g., Image, Video, Audio) |
Method 2 or 3 |
Layout Blocks (e.g., Columns, Group, Cover) |
Method 1, 2, or 3 |
Interactive Blocks (e.g., Buttons, Social Icons) |
Méthode 1 |
Widget Blocks (e.g., Search, Calendar) |
Méthode 1 |
Legacy/Utility Blocks (e.g., Shortcode, Classic) |
Méthode 2 |
Conclusion
The easiest way to have a big impact on your website’s overall look and feel is probably by changing the background color of the WordPress core blocks you use. Your choice of delivering content using the right background color will definitely attract your website viewers. It’s a simple yet powerful hack to improve user experience and make your site stand out. Whether you choose the native background color settings, use the Group block method, or choose the Cover block approach, at the end of the day, it’s not just about adding color; it’s about creating an environment where your content speaks louder. So go ahead, experiment with colors, and see how small changes can transform your website into a more effective platform.
