Conseils CSS simples pour les propriétaires de sites Web de bricolage

L'un des plus grands avantages de WordPress est la possibilité de créer un site Web magnifique et convaincant avec peu ou pas de connaissances en codage. Avec des centaines de thèmes professionnels et l'éditeur de blocs flexible par glisser-déposer, c'est une excellente solution pour les propriétaires de sites Web de bricolage.

Mais que se passe-t-il si vous souhaitez aller plus loin et effectuer des personnalisations visuelles plus approfondies ? Le CSS est l'un des moyens les plus rapides de modifier l'apparence de votre site Web.

Qu'est-ce que CSS ?

CSS (Cascading Style Sheets) dicte la mise en page et les visuels de votre site Web - couleurs, polices, marges, tailles, etc. Avec quelques bases CSS, vous pouvez modifier l'apparence de toutes vos pages et publications, ou vous concentrer sur des éléments individuels et apporter des modifications ponctuelles.

La syntaxe CSS de base ressemble à ceci :

Le sélecteur est l'élément que vous souhaitez styliser : un titre, un paragraphe, une page, une image, un lien, etc.

La propriété est la catégorie que vous souhaitez modifier : par exemple, la couleur, la taille, la bordure ou l'arrière-plan de la police. Vous pouvez appliquer plusieurs propriétés à chaque sélecteur.

La valeur définit la propriété : la couleur spécifique, la taille de police particulière, la taille exacte de la largeur de la bordure, etc.

Notez le format : la propriété et la valeur sont séparées par deux points et contenues entre accolades. Chaque valeur est suivie d'un point-virgule.

En pratique, pour changer la couleur du titre ci-dessus, qui est une balise <h1>, du noir à l'orange, vous utiliseriez :

• Sélecteur : h1
• Propriété : couleur
• Valeur : orange

Comment appliquer le CSS à votre site

Si vous n'avez pas beaucoup (ou pas du tout) d'expérience CSS, c'est bien ! Vous pouvez accomplir beaucoup de choses avec une compréhension de base des principes fondamentaux. Et avec la fonctionnalité CSS personnalisée de Jetpack, vous n'aurez pas à vous soucier de modifier les fichiers de thème ou de casser votre site Web.

Pour activer le CSS personnalisé, accédez à Jetpack → Paramètres → Écriture dans le tableau de bord de votre site. Faites défiler jusqu'à la section Améliorations du thème et activez l'option Améliorer le panneau de personnalisation CSS .

Pour ajouter du CSS, accédez à Apparence → Personnaliser → CSS supplémentaire . C'est ici que vous taperez le CSS que vous souhaitez ajouter. Pour vous aider, l'éditeur CSS de Jetpack utilise la couleur pour faciliter la différenciation des sélecteurs, des propriétés et des valeurs.

Lors de l'ajout ou de la modification de CSS, vous pouvez prévisualiser les modifications avant de les enregistrer, afin de savoir exactement à quoi elles ressembleront avant de les appliquer à votre site Web en ligne. Et Jetpack stocke les 25 dernières révisions CSS, vous pouvez donc revenir à une conception antérieure si vous n'aimez pas votre nouveau look. En savoir plus sur l'utilisation du CSS personnalisé.

Cinq façons de personnaliser votre site avec CSS

Chaque élément de votre site Web a un sélecteur, vous pouvez donc utiliser CSS pour modifier à peu près n'importe quoi. Si vous voulez apprendre à trouver des sélecteurs, c'est un excellent tutoriel - mais voici cinq modifications que vous pouvez apporter dès maintenant, avec le CSS déjà fourni.

Typographie

L'une des utilisations CSS les plus courantes consiste à styliser la typographie ou les polices de votre site. Pour modifier à la fois la couleur et la taille des titres (Titre 1, Titre 2, etc.) sur votre site, utilisez ce code et modifiez les valeurs comme vous le souhaitez :

L'exemple ci-dessus modifie simplement le titre 1. Si vous souhaitez modifier la couleur et la taille de la police d'un titre différent, comme le titre 3, remplacez le sélecteur h1 par h3 et effectuez les ajustements appropriés à la taille et à la couleur :

Pour modifier la couleur de plusieurs titres, séparez les sélecteurs par des virgules :

Et pour mettre tous vos titres en majuscules, pour plus d'impact, utilisez ceci :

Liens

Les hyperliens doivent se démarquer du texte normal afin que les visiteurs du site sachent immédiatement quel texte est cliquable. Faites ressortir vos liens en modifiant leur couleur et en ajoutant un soulignement :

(Vous ne voulez pas souligner vos liens ? Supprimez simplement "décoration de texte : soulignement ;" ci-dessous.)

Si vous voulez que votre lien change de couleur lorsque quelqu'un le survole, ajoutez « :hover » au sélecteur :

Listes

Si vous utilisez beaucoup de listes à puces dans vos articles et pages de blog, essayez un peu de CSS pour les faire ressortir encore plus du reste de votre contenu.

Pour transformer la puce en cercle et modifier l'épaisseur, la couleur et la taille de la police, utilisez ce code :

Si vous souhaitez uniquement modifier l'une de ces propriétés, n'incluez que la ligne qui se rapporte à ce que vous souhaitez modifier.

Vous voulez encore plus d'options ? CSS-Tricks.com décrit tous les choix de style pour les listes (comme l'utilisation de carrés ou d'images pour les puces) ainsi que des astuces et des raccourcis supplémentaires.

Éléments de menu

De nombreux thèmes proposent plusieurs options de menu principal, ce qui vous permet de choisir celui qui convient le mieux à votre site. Mais que se passe-t-il si vous souhaitez personnaliser encore plus le style de votre menu ?

Dans l'exemple ci-dessus, nous avons utilisé CSS pour ajouter un arrière-plan vert personnalisé aux éléments de menu et modifier la couleur du texte lorsqu'un utilisateur survole chacun :

Widgets de la barre latérale

Les widgets de la barre latérale sont un excellent moyen de présenter du contenu utile, vous voudrez peut-être qu'ils se démarquent du reste de votre site. Utilisez le code suivant pour ajouter un arrière-plan derrière les widgets de la barre latérale et un rembourrage (espace supplémentaire) autour du texte :

Appliquez le CSS à des pages spécifiques au lieu de l'ensemble de votre site :

Tous les extraits CSS ci-dessus s'appliquent à l'ensemble du site - ils modifieront ces éléments sur chaque page et à chaque endroit où ils apparaissent. Que faire si vous ne souhaitez appliquer le CSS qu'à une page ou à un article spécifique ?

WordPress attribue à chaque page et publie un identifiant unique, que vous pouvez trouver dans votre tableau de bord WordPress :

1. Accédez à la page ou à la publication que vous souhaitez personnaliser et cliquez sur Modifier la page dans la barre noire en haut du tableau de bord.
2. Dans la barre d'URL, recherchez quelque chose qui ressemble à « ?post=74 ». Le nombre
   "74", cependant, changera car il est spécifique à votre article ou à votre ID de page.

Pour appliquer le CSS à la page ou à la publication spécifique, ajoutez le numéro à votre CSS avec ".page-id-". Pour modifier la couleur de police de l'en-tête 1 uniquement sur cette page, vous devez utiliser ce qui suit :

N'oubliez pas : l'aperçu est votre ami !

Si vous n'avez pas beaucoup d'expérience avec CSS, vous pouvez être nerveux à l'idée d'apporter des modifications qui pourraient gâcher votre site. Ne vous inquiétez pas! Un aperçu des modifications apparaîtra en temps réel, au fur et à mesure que vous modifiez.

Jouez avec le code et apportez les modifications que vous souhaitez. Cliquez sur Enregistrer et publier lorsque vous êtes satisfait de l'apparence de votre CSS mis à jour !

Il existe également une fonctionnalité d'historique CSS qui enregistre chaque fois que vous enregistrez des modifications. Cela signifie que si vous changez d'avis, vous pouvez rapidement revenir en arrière. Pour ce faire, cliquez sur Voir l'historique complet en bas de l'outil de personnalisation. Choisissez la date et l'heure auxquelles vous souhaitez revenir et cliquez sur le bouton Restaurer cette révision .

Ressources CSS supplémentaires

• Un code hexadécimal spécifie la couleur que vous souhaitez utiliser lors de la modification des polices ou des arrière-plans. Si vous ne savez pas lequel utiliser, les codes de couleur HTML offrent une excellente solution. Explorez leur sélecteur de couleurs pour trouver la teinte parfaite, puis copiez et collez le code hexadécimal qu'il génère.
• CSS-Tricks.com propose des extraits de code CSS dont la difficulté va du débutant à l'expert. Vous pouvez également trouver des didacticiels, des vidéos et des guides pour en savoir encore plus.
• W3Schools est une ressource pratique pour les exemples CSS et les procédures pas à pas.
• WordPress.com fournit des informations sur les bases du CSS et sur l'utilisation des requêtes multimédias pour définir le CSS en fonction d'appareils spécifiques.
• Upwork.com est un partenaire WordPress, offrant des spécialistes indépendants qui peuvent aider avec des projets CSS.

Commencez à personnaliser votre site WordPress

La meilleure façon d'apprendre le CSS de base est de commencer à expérimenter. Tout le code répertorié ci-dessus peut être personnalisé ou modifié pour répondre à vos besoins - utilisez-le comme base, puis commencez à changer de couleur, à changer la taille des polices ou à apporter toute autre modification que vous souhaitez !

Avec l'éditeur CSS personnalisé de Jetpack, vous pouvez plonger tête première dans la personnalisation sans vous soucier de casser votre site, grâce aux outils de prévisualisation et aux fonctionnalités de restauration. Pour une protection supplémentaire, activez Jetpack Backup, qui sauvegarde automatiquement votre travail en temps réel et inclut des restaurations en un clic.

En savoir plus sur les autres fonctionnalités de conception de Jetpack et démarrer avec Jetpack Custom CSS.