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.
-
-