Comment modifier le style CSS d’un modèle WordPress | Changer d’apparence

Pour de nombreux créateurs de blogs et de sites Web, WordPress est un outil essentiel pour mettre à jour le contenu du site rapidement et facilement. Cependant, à de nombreuses occasions, nous souhaitons donner à notre site Web une touche personnelle avec des motifs de différentes couleurs, tailles de police et styles.

Pour cela, nous pouvons modifier le style CSS du modèle WordPress . Mais qu’est-ce que CSS? Comment pouvez-vous utiliser CSS pour changer l’apparence de votre blog? Ici, nous vous apprenons.

Pour commencer, commençons par comprendre ce qu’est le CSS. En bref, c’est une feuille avec des lignes de code , qui donnent le style aux différents éléments HTML qui composent une page Web.

En changeant les valeurs dans les différentes propriétés et sélecteurs, vous pouvez modifier l’apparence de la page. Nous expliquons brièvement comment créer un en-tête CSS élégant pour votre page Web  et pouvoir modifier le style CSS de votre modèle dans WordPress.

Comment modifier le CSS dans un template WordPress?

Il existe plusieurs façons d’éditer le code CSS dans WordPress, mais ici nous allons vous expliquer l’une des plus simples: via l’éditeur dynamique de l’application elle-même. Cette fonctionnalité est disponible depuis la version 4.7 de WordPress. En cliquant simplement sur le menu «Apparence» → «Personnaliser» → «CSS supplémentaire», vous pouvez avoir accès à une zone d’édition CSS avec de bonnes fonctionnalités.

Mais maintenant, comment savoir quels éléments vous souhaitez personnaliser sur votre page? Pour cela, nous utiliserons l’ inspecteur d’éléments de votre navigateur. Par exemple, Firefox vous permet de modifier ou de changer facilement et facilement le texte ou l’élément de votre page Web .

Pour ce faire, nous ouvrons la page web ou le blog WordPress dont nous voulons changer l’apparence et nous nous plaçons sur l’élément que nous voulons éditer, en faisant un clic droit dessus, nous sélectionnons «Inspecter» dans le menu déroulant. Un panneau s’ouvrira où le code HTML de cet élément est affiché d’un côté et les codes CSS qui lui donnent du style de l’autre.

Même dans le même panneau, lorsque vous trouvez les éléments, les étiquettes et les sélecteurs que vous souhaitez personnaliser, vous pouvez essayer de modifier les valeurs des propriétés que vous souhaitez afin que vous puissiez voir leur apparence immédiatement sur le côté gauche de l’écran. Il ne vous reste plus qu’à réécrire le CSS dans WordPress.

Comment écraser le code CSS dans WordPress?

Maintenant que vous connaissez les éléments que vous souhaitez modifier dans le CSS WordPress, revenez à l’article et ouvrez l’éditeur dynamique. Tapez ensuite la balise ou l’élément que vous souhaitez modifier en fonction de ce que vous avez fait précédemment dans l’inspecteur d’éléments du navigateur. Enfin, placez les propriétés que vous souhaitez modifier et placez de nouvelles valeurs personnalisées. Donnez à votre site Web l’apparence que vous aimez le plus!

N’oubliez pas que vous devez suivre la structure du code CSS telle qu’elle apparaît dans l’inspecteur d’éléments du navigateur. Un avantage de l’éditeur CSS dynamique WordPress est qu’il facilite l’édition avec diverses fonctions, telles que la mise en évidence du code qui aide à identifier les classes, les balises et les valeurs. En outre, il dispose d’une saisie automatique de texte intégrée et d’un détecteur d’erreur de frappe.

Il existe de nombreuses propriétés que vous pouvez modifier pour donner un changement de style à votre page , Par exemple: vous pouvez changer l’apparence des titres et sous-titres représentés par les balises H1, H2, … Avec les propriétés: font-size, text -famille, couleur, arrière-plan, entre autres.

En outre, vous pouvez facilement mettre ou modifier un FAVICON , l’arrière-plan des champs du formulaire, la couleur des boutons et le texte qu’ils contiennent . Modifiez même l’apparence de certains éléments avant une action, comme: la couleur des éléments de menu lors du survol ou en cliquant dessus.

Cependant, vous devez faire attention à ne pas modifier certaines des propriétés appartenant à certains éléments du code CSS. Étant donné que ceux-ci peuvent modifier et ruiner complètement la structure de votre site Web. Certaines de ces propriétés sont: largeur, hauteur, remplissage, marge, position, affichage, entre autres. Si vous ne parvenez pas à identifier à quel aspect une propriété fait référence, ne la modifiez pas.

Désormais, personnaliser votre blog ou site Web est un jeu d’enfant! Concevez votre site Web à votre guise et modifiez l’en-tête et le pied de page dans WordPress pour le rendre plus attrayant pour les visiteurs.