Mis à jour le 29 juillet 2024

Les listes à puces jouent un rôle essentiel dans la présentation du contenu de votre site Web WordPress. Ils vous permettent de structurer les informations de manière claire et concise, facilitant ainsi la lecture et la compréhension de vos visiteurs. Cependant, les listes à puces par défaut peuvent être basiques et ne pas correspondre à l’esthétique globale de votre site. La personnalisation de ces listes peut donc non seulement améliorer l’apparence de votre contenu, mais également renforcer la cohérence visuelle de votre site.

Dans ce didacticiel, nous allons vous montrer comment créer et personnaliser des listes à puces dans WordPress. Que vous soyez débutant ou utilisateur avancé, vous découvrirez différentes méthodes de personnalisation de vos annonces à l’aide de CSS, de plugins et d’options natives de WordPress.

1. Utiliser des listes à puces dans WordPress

Les listes à puces sont un outil puissant pour organiser et structurer votre contenu. Ils vous permettent de présenter les informations de manière claire et concise, facilitant ainsi la lecture et la compréhension de vos visiteurs.

Voici comment utiliser les listes à puces dans WordPress.

Création de listes à puces de base

WordPress facilite la création de listes à puces avec son éditeur de blocs. Voici les étapes pour créer une liste à puces :

  1. Entrez dans l’éditeur de blocs :
Entrez dans l'éditeur de blocs

Ouvrez l’article ou la page à laquelle vous souhaitez ajouter une liste. Cliquez sur le bouton « + » pour ajouter un nouveau bloc.

  1. Ajouter un bloc de liste :
Ajouter un bloc de listeAjouter un bloc de liste

Recherchez et sélectionnez ” la liste “. Par défaut, le bloc de liste est configuré pour les puces. Vous pouvez commencer à saisir les éléments de votre liste.

  1. Ajouter des éléments à la liste :
Ajouter des éléments à la listeAjouter des éléments à la liste

Tapez le premier élément de votre liste et cliquez sur Introduction pour ajouter un nouvel élément. Répétez cette étape pour chaque élément de votre liste.

Personnalisation avec l’éditeur de blocs WordPress

Après avoir ajouté votre liste à puces, vous pouvez utiliser les options de personnalisation disponibles dans l’éditeur de puces pour ajuster l’apparence de votre liste. Vous pouvez également choisir entre une liste à puces ou une liste numérotée.

Voici quelques-unes des options disponibles :

  1. Changer la couleur des puces et des textes :
Changez la couleur du texte et la couleur des puces d'arrière-plan.Changez la couleur du texte et la couleur des puces d'arrière-plan.

Sélectionnez le bloc de liste. Dans la colonne de droite, ” la couleur », vous pouvez choisir la couleur du texte et la couleur de fond des puces.

  1. Ajuster le nombre de colonnes :
Ajuster le nombre de colonnesAjuster le nombre de colonnes

Vous pouvez diviser votre liste en plusieurs colonnes pour une présentation plus dynamique. Sélectionnez le bloc de liste et utilisez le ” Nombre de colonnes» pour choisir le nombre de colonnes.

  1. Changer la police :
Changer la policeChanger la police

Personnalisez l’apparence de votre texte en ajustant la police, la taille, la hauteur des lignes, etc. Sous l’onglet ” typographie » dans la colonne de droite, vous pouvez définir les paramètres suivants pour le texte de votre liste.

  1. Sous-listes :
Ajouter des sous-listesAjouter des sous-listes

Pour créer une sous-liste, appuyez sur la touche feuille après avoir entré un élément de liste. Cela créera un niveau de liste imbriqué. utilise-le Maj+Tabulation pour revenir au niveau de liste précédent.

2. Personnalisation des listes à puces avec CSS

La personnalisation des listes à puces avec CSS vous permet de donner à vos listes un style unique qui correspond au design de votre site. Voici comment utiliser CSS pour personnaliser les listes à puces dans WordPress.

Une introduction au CSS pour les listes à puces

CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation d’un document écrit en HTML. En modifiant le CSS de votre site, vous pouvez modifier l’apparence des listes à puces, notamment le type de puce, la couleur, la taille, etc.

Exemples de styles CSS pour les puces personnalisées

Voici quelques exemples de styles CSS que vous pouvez appliquer à vos listes à puces pour les personnaliser :

  1. Changer le type de puce :
ul.custom-bullet { list-style-type: square; /* Types de puces : circle, disc, square */ }
  1. Utiliser une image comme puce :
ul.custom-bullet { list-style-image: url('path/to/image.png'); /* Remplacez par le chemin de votre image */ }
  1. Changer la couleur de la puce :
ul.custom-bullet li { color: #FF5733; /* Couleur des puces */ }

Ajoutez des puces personnalisées avant ::

ul.custom-bullet li::before { content: '\2022'; /* Code Unicode pour une puce */ color: #FF5733; /* Couleur des puces */ font-size: 20px; /* Taille des puces */ display: inline-block; width: 1em; margin-left: -1em; }

Application des styles CSS dans WordPress

Pour appliquer ces styles CSS à vos listes WordPress, vous devez ajouter du code CSS à votre thème. Voici comment procéder :

  1. Entrez dans l’éditeur de thème :
CSS supplémentaireCSS supplémentaire

Connectez-vous à votre tableau de bord WordPress. Aller ” l’apparence » > « Personnaliser “. Cliquez sur ” CSS supplémentaire ».

  1. Ajouter du CSS personnalisé :
Ajouter du CSS personnaliséAjouter du CSS personnalisé

Collez le code CSS dans le champ de texte. Cliquez sur ” publie-le » pour enregistrer vos modifications.

3. Utiliser des plugins pour personnaliser les listes à puces

La personnalisation des listes à puces avec CSS peut être puissante, mais nécessite des connaissances de base en codage. Pour ceux qui préfèrent une solution plus simple sans code, l’utilisation des plugins WordPress est une excellente option.

Voici quelques plugins populaires qui vous permettent de personnaliser facilement les listes à puces.

Présentation des plugins de personnalisation de liste populaires

  1. Codes courts ultimes : Un plugin polyvalent qui offre une variété de codes courts pour ajouter divers éléments de contenu, y compris des listes personnalisées. Il comprend des options pour personnaliser les puces, les couleurs et les styles directement depuis l’éditeur de blocs.
  2. Élémenteur : Un générateur de page par glisser-déposer qui permet une personnalisation avancée des listes. Vous pouvez ajouter des icônes personnalisées, modifier les couleurs et les polices, et bien plus encore, le tout à l’aide d’une interface visuelle intuitive.
  3. Trousse fantôme : Plugin de création de pages simple et efficace. Vous pouvez créer des listes à puces personnalisées. Il offre diverses options de personnalisation telles que la modification des icônes, des couleurs et de la taille des puces.

Conseils pour une personnalisation efficace des listes à puces

La personnalisation de vos listes à puces peut considérablement améliorer l’apparence de votre site WordPress et rendre votre contenu plus attrayant. Voici quelques conseils pour personnaliser efficacement les listes à puces.

Choisir des icônes et des symboles

L’utilisation d’icônes et de symboles personnalisés peut donner à vos listes à puces un aspect unique. Vous pouvez choisir des icônes qui correspondent au thème de votre site Web ou au thème de votre contenu. Par exemple, une liste de tâches peut utiliser des signets et une liste de recettes peut utiliser des icônes d’aliments.

  1. Utiliser Font Awesome : Font Awesome est une bibliothèque d’icônes très populaire qui vous permet d’ajouter facilement des icônes personnalisées à vos listes. Vous pouvez intégrer Font Awesome à votre site Web WordPress et utiliser des icônes spécifiques pour vos puces.
ul.custom-bullet li::before { content: '\f00c'; /* Code Unicode pour une icône de coche */ font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #FF5733; margin-right: 0.5em; }

Vous pouvez trouver une liste détaillée de ces symboles ici. La liste est longue, voici donc quelques-uns des plus populaires : flèches, disposition des boîtes, éléments de bloc, formes géométriques, symboles divers.

  1. Images personnalisées : Vous pouvez également utiliser des images comme puces en stylisant la liste avec CSS.
ul.custom-bullet { list-style-image: url('path/to/image.png'); }

Considérations relatives à l’accessibilité

Lors de la personnalisation des listes à puces, il est essentiel de prendre en compte l’accessibilité. Assurez-vous que les icônes et les couleurs que vous utilisez sont compréhensibles pour tous les utilisateurs, y compris les malvoyants. Voici quelques conseils :

  • Contraste des couleurs : Utilisez des couleurs haute visibilité pour les puces et le texte afin de garantir une lecture facile.
  • Descriptions textuelles : fournissez des descriptions textuelles ou des alternatives d’icônes pour les lecteurs d’écran.

Bonnes pratiques pour la cohérence visuelle

Le maintien d’une cohérence visuelle sur l’ensemble de votre site est essentiel pour une apparence professionnelle. Voici quelques pratiques recommandées :

  • Styles cohérents : utilisez des styles de puces cohérents pour créer une uniformité visuelle sur vos pages.
  • Hiérarchie de la lumière : Si vous utilisez des sous-listes, assurez-vous que la hiérarchie est claire et bien définie avec des retraits appropriés.
  • l’intervalle : Ajustez l’espacement entre les éléments de la liste pour une meilleure lisibilité.
Jacques TremblayJacques Tremblay
Articles récents de Jacques Tremblay (voir tout)



Cloud Computing

Leave a Reply

Your email address will not be published. Required fields are marked *