Dans ce tutoriel WordPress, nous allons voir comment personnaliser un ou plusieurs bloc paragraphe dans WordPress. Nous apprendrons comment ajouter une bordure, comment ajouter des marges, etc… Tout cela avec quelques lignes de CSS et l’aide de l’éditeur par défaut Gutenberg. En effet, par défaut les possibilités de personnalisation d’un bloc de texte sont restreintes.
Il s’agit d’une solution facile à mettre en place qui peut vous permettre du contenu en avant sur votre blog et le rendre plus professionnel.
Pourquoi ne faut-il pas installer un plugin pour personnaliser un bloc de texte ?
Comme toujours, le réflèxe est de chercher un plugin pour vous permettre de personnaliser les blocs de textes avec des bordures ou du CSS en quelques clics. Cependant, c’est inutile et nous évite un nième plugin qui sera peut-être un jour vulnérable, ce qui pourrait nuire à la sécurité de votre site, et affecter le temps de chargement.
Maintenant que nous savons pourquoi il est préférable de ne pas utiliser de plugin, apprenons à créer des modèles pour les blocs de textes WordPress avec un peu de CSS :
Comment créer des styles personnalisés pour les blocs de texte
Par défaut WordPress vous permet de modifier :
- La couleur de fond
- La couleur du texte
- La taille du texte
Si vous souhaitez ajouter d’autres éléments de personnalisation, il va falloir ajouter une classe CSS personnalisée et lui ajouter le style correspondant.
Comment définir une classe CSS pour un bloc de texte
Pour pouvoir créer des blocs de textes personnalisés :
Vous pouvez créer un ou plusieurs modèle de bloc selon vos envies ( un vert, un rouge, un bleu, etc… ). Pour cela, il suffit d’ajouter une classe au.x bloc.s auxquels vous souhaitez appliquer votre modèle.
Dans les paramètres de votre bloc, commencez par dérouler le sous menu “avancé”. Deux nouvelles options s’afficheront et la seconde vous permettra de définir une classe CSS additionnelle.
Dans notre exemple, nous prendrons la classe : “texte-bleu“.
Comment créer notre nouvelle classe et définir les valeurs personnalisées ?
Pour ceux qui préfèrent ajouter le CSS directement dans leur thème enfant, je vous laisse ouvrir votre feuille de Style. Pour les autres ou ceux qui n’ont rien compris a ce que j’ai mis ci-dessus, lisez la suite !
Rendez-vous dans le menu “Apparence” > “Personnaliser” > “Css additionnel” pour ajouter votre code CSS.
Votre classe additionnelle sera a indiquer sous la forme de
.texte-bleu {
/* mon-style-css */
}Comment ajouter une bordure à mon bloc de texte ?
Pour ajouter une bordure à un bloc de texte gutenberg, il suffit d’ajouter à votre classe fraichement définie la valeur CSS suivante ( a personnaliser selon vos besoins )
border:1px solid blue;Comment arrondir les angles de mes bordures ?
Pour ajouter des arrondis à ma bordure, il suffit d’ajouter à votre classe fraichement définie la valeur CSS suivante ( a personnaliser selon vos besoins )
border-radius:15px;Comment ajouter des marges à un bloc de texte ?
padding:15px;Voici un exemple de bloc paragraphe personnalisé :
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Et ainsi de suite. Toutes les personnalisations possibles avec CSS peuvent être ajoutées à votre classe. Vous pouvez également créer autant de classe que vous avez besoin de blocs différents.
