Comment ajouter facilement des puces et des listes numérotées dans WordPress

Créer un contenu bien organisé avec des puces et des listes numérotées peut sembler basique, mais nous avons constaté que de nombreux utilisateurs ont du mal à les faire paraître juste comme il faut. 📋

Après avoir exploré diverses méthodes de formatage dans l'éditeur de blocs, nous avons découvert les moyens les plus simples de créer des listes claires et cohérentes.

Grâce à des tests approfondis dans nos environnements de démonstration, nous avons identifié plusieurs méthodes pour ajouter et styliser des listes dans WordPress, des simples puces aux listes personnalisées.

Ce qui est formidable, c'est que vous n'avez besoin d'aucune connaissance en codage pour que vos listes aient un aspect professionnel.

Dans ce guide pour débutants, nous vous montrerons exactement comment ajouter et formater des puces et des listes numérotées dans WordPress.

Quand ajouter des puces et des listes numérotées dans WordPress

Vous devriez ajouter des listes à votre contenu chaque fois que vous avez besoin de présenter des informations dans un format structuré et facile à parcourir. L'essentiel est de choisir le bon type de liste pour votre contenu.

Utilisez une liste numérotée lorsque l'ordre des éléments est important. C'est idéal pour les tutoriels étape par étape, les classements du top 10, ou tout processus qui suit une séquence spécifique.

Utilisez une liste à puces lorsque l'ordre des éléments n'a pas d'importance. C'est idéal pour lister les caractéristiques d'un produit, des exemples, ou un groupe d'idées connexes.

L'utilisation correcte des listes aide les visiteurs à comprendre votre contenu en un coup d'œil, même si l'information est complexe. Cela améliore l'expérience utilisateur et peut maintenir les gens plus longtemps sur votre site WordPress.

Dans cet esprit, voyons comment ajouter des puces et des listes numérotées dans WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Method 1: Using the Built-in WordPress List Block (Easy)
• Méthode 2 : Utilisation de Shortcodes Ultimate (Listes avec icônes personnalisées)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• Foire aux questions sur l'ajout de points de puce et de listes numérotées dans WordPress

Méthode 1 : Utilisation du bloc de liste intégré à WordPress (Facile)

La manière la plus simple d'ajouter des puces et des listes numérotées est d'utiliser le bloc Liste et l'éditeur de blocs Gutenberg de WordPress.

Cela vous permet de créer des listes numérotées ou à puces simples sans installer de plugin WordPress séparé. Cela dit, ce bloc par défaut n'offre que quelques options de personnalisation.

Si vous souhaitez affiner vos listes avec des icônes personnalisées, des mises en page horizontales, différentes couleurs, et plus encore, nous vous recommandons d'utiliser l'une des autres méthodes de cet article.

Pour commencer, ouvrez simplement l'éditeur de blocs pour l'article ou la page WordPress où vous souhaitez ajouter une liste. Ou, vous pouvez ouvrir l'éditeur de widgets pour ajouter la liste à puces à une zone de widget, comme une barre latérale.

Vous pouvez ensuite choisir de créer une liste à puces ou une liste numérotée.

Comment créer une liste à puces dans WordPress

Pour créer une liste à puces, cliquez sur l'icône '+' pour ajouter un nouveau bloc WordPress.

Dans la fenêtre contextuelle qui apparaît, tapez 'Liste'.

Lorsque le bon bloc apparaît, cliquez dessus pour l'ajouter à la page.

Cela crée le premier élément d'une liste à puces. Tapez simplement le texte que vous souhaitez utiliser pour le premier élément de la liste.

Une fois cela fait, appuyez sur la touche 'Entrée' de votre clavier pour passer à la ligne suivante. WordPress créera automatiquement le deuxième point de la liste.

Vous pouvez maintenant continuer et taper le texte que vous souhaitez utiliser pour le deuxième point de la liste. Répétez simplement ces étapes pour ajouter d'autres éléments à la liste.

Si vous souhaitez créer une liste imbriquée, cliquez sur le bouton 'Retrait'. Cela déplace le curseur d'un cran vers la droite, prêt pour que vous puissiez taper le texte en retrait.

Vous pouvez cliquer à nouveau sur le bouton « Retrait » pour créer deux niveaux de puces imbriquées.

Comme vous pouvez le voir dans l'image suivante, chaque niveau utilise une icône différente.

Pour diminuer le retrait, cliquez sur le bouton « Rétracter ».

Cela déplace le curseur d'un cran vers la gauche, prêt pour que vous commenciez à taper.

En appuyant sur les boutons « Retrait » et « Rétracter », vous pouvez créer des listes imbriquées avec plusieurs niveaux différents.

Par défaut, l'éditeur de blocs WordPress utilisera la taille de police « Moyenne », mais vous pouvez choisir entre petite, grande et très grande en utilisant les paramètres « Typographie » dans les options de bloc de droite.

Vous pouvez également ajouter des liens ou utiliser les options de formatage de texte standard, telles que le gras et l'italique. Cela rend vos listes encore plus faciles à parcourir et à comprendre d'un coup d'œil.

Comment créer une liste numérotée dans WordPress

Pour créer une liste numérotée dans WordPress, appuyez simplement sur la touche « 1 » de votre clavier suivie d'un point (.)

WordPress transformera automatiquement ce texte en premier élément d'une liste numérotée.

Vous êtes maintenant prêt à taper le premier élément de la liste numérotée.

Après cela, appuyez simplement sur la touche « Retour » de votre clavier, et WordPress créera automatiquement le point numéroté suivant.

Tout comme avec les puces, vous pouvez créer des listes imbriquées en cliquant sur les boutons « Retrait » et « Rétracter ».

Cela crée une puce en retrait sous la puce numérotée.

Contrairement aux listes à puces, vous ne pouvez utiliser qu'un seul niveau de retrait.

Lorsque vous êtes satisfait de l'apparence de la liste, cliquez simplement sur le bouton « Mettre à jour » ou « Publier » pour la rendre visible sur votre site Web WordPress.

Méthode 2 : Utilisation de Shortcodes Ultimate (Listes avec icônes personnalisées)

Le bloc Liste intégré est parfait pour créer des listes textuelles, mais parfois, vous voudrez peut-être créer une liste avec des icônes personnalisées. De cette façon, vous pouvez rendre vos listes plus attrayantes visuellement et mieux adaptées au thème de votre contenu.

La façon la plus simple de le faire est d'utiliser Shortcodes Ultimate. Ce plugin vous permet de créer des listes avec des icônes personnalisées à l'aide de simples shortcodes.

Pour cela, nous utiliserons la version gratuite du plugin car elle est déjà suffisante pour cette méthode. Mais si vous souhaitez des fonctionnalités plus avancées, vous pouvez passer à un plan payant.

Pour utiliser Shortcodes Ultimate, installez le plugin WordPress dans votre zone d'administration. Ensuite, créez un nouvel article ou modifiez-en un existant dans l'éditeur de blocs.

Maintenant, cliquez sur le bouton « + » n'importe où sur la page et sélectionnez le bloc « Shortcode ».

À ce stade, copiez et collez le shortcode ci-dessous dans le bloc :

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Ce shortcode affichera trois éléments de liste à puces avec des icônes d'étoile jaune, comme ceci :

Pour personnaliser l'icône et la couleur, vous pouvez vous rendre sur le site web de Fork Awesome. C'est là que vous verrez toutes les icônes que vous pouvez utiliser pour vos listes à puces. Ici, recherchez simplement une icône que vous souhaitez utiliser.

Par exemple, nous utiliserons l'icône « flag ». Maintenant, copiez le nom de l'icône et retournez dans l'éditeur de blocs.

Une fois sur place, remplacez simplement star par celui-ci. Donc, au lieu de icon: star, nous utiliserons icon: flag.

Pour changer la couleur, remplacez le code HEX dans icon_color="#ffde0f" par le code HEX de la couleur souhaitée.

Donc, si vous voulez rendre l'icône verte, vous devez taper icon_color="#008000". Vous pouvez en apprendre davantage sur la façon de trouver les bonnes couleurs dans notre article sur comment trouver le schéma de couleurs parfait pour votre site WordPress.

Maintenant, n'oubliez pas de remplacer List item par votre propre texte.

Voici à quoi ressemble maintenant notre code :

Lorsque vous êtes satisfait de l'apparence de la liste, vous pouvez cliquer sur le bouton « Mettre à jour » ou « Publier » pour la rendre visible sur votre blog WordPress ou votre site web.

Voici à quoi ressemble la liste sur le front-end :

Méthode 3 : Utilisation d'un plugin de constructeur de page (Idéal pour les pages de destination)

Si vous souhaitez créer de belles listes avec un style personnalisé, vous pourriez vouloir utiliser SeedProd.

Ce thème WordPress avancé et ce plugin de constructeur de pages vous permettent de créer des pages conçues professionnellement à l'aide d'un simple éditeur par glisser-déposer.

Il est également livré avec un bloc Liste prêt à l'emploi qui vous permet d'affiner chaque partie de la conception de la liste, y compris la modification de l'espace entre les éléments individuels, le remplacement des puces standard par des icônes personnalisées, et plus encore.

De plus, il est facile de concevoir des pages autonomes avec un design unique, c'est donc également un excellent choix si vous souhaitez ajouter des listes à une page d'accueil personnalisée ou à une page de destination.

Nous avons testé l'outil de manière approfondie et l'avons trouvé très convivial pour les débutants. Pour en savoir plus, consultez notre avis sur SeedProd.

La première chose à faire est d'installer et d'activer SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez saisir votre clé de licence.

Vous pouvez trouver ces informations dans votre compte sur le site Web de SeedProd. Après avoir ajouté la clé de licence, cliquez simplement sur « Vérifier la clé ».

Choisissez un modèle conçu par des professionnels

Après cela, allez dans SeedProd » Pages de destination et cliquez sur « Ajouter une nouvelle page de destination ».

Sur l'écran suivant, il vous sera demandé de choisir un modèle.

SeedProd est livré avec plus de 300 magnifiques modèles organisés en différentes catégories, telles que les modèles de page 404 et les pages de remerciement WooCommerce personnalisées.

Cliquez simplement sur n'importe quel onglet pour voir les différents modèles de cette catégorie.

Lorsque vous trouvez un modèle que vous souhaitez utiliser, passez votre souris dessus, puis cliquez sur l'icône de coche.

Nous utilisons le modèle « Explosive Growth Webinar » dans toutes nos images, mais vous pouvez utiliser le design de votre choix.

Ensuite, vous devez donner un titre à la page.

SeedProd créera automatiquement une URL basée sur le titre de la page, mais vous pouvez la modifier à votre guise. Par exemple, l'ajout de mots-clés pertinents à une URL améliore souvent votre référencement WordPress et aide la page à apparaître dans les résultats de recherche pertinents.

Pour en savoir plus, consultez notre guide sur comment faire une recherche de mots-clés pour votre blog WordPress.

Lorsque vous êtes satisfait du titre et de l'URL, cliquez simplement sur « Enregistrer et commencer à modifier la page ».

Créez votre mise en page personnalisée

SeedProd ouvrira maintenant votre modèle dans son éditeur glisser-déposer. Sur la droite, vous verrez un aperçu en direct de la conception de la page, avec certains paramètres sur la gauche.

SeedProd est livré avec de nombreux blocs que vous pouvez ajouter à votre conception, y compris des blocs qui vous permettent d'ajouter des boutons de partage social, des vidéos, des formulaires de contact, et plus encore.

Pour plus d'informations, consultez notre guide sur comment créer une page personnalisée dans WordPress.

Pour ajouter une liste à votre design, trouvez le bloc « Liste » et faites-le glisser sur la page.

Cela ajoute une liste verticale à votre page avec un espace réservé « Élément 1 ».

Si vous souhaitez plutôt créer une liste horizontale, cliquez sur l'onglet « Avancé », puis sélectionnez le bouton « Horizontal ».

Vous êtes maintenant prêt à commencer à construire votre liste en sélectionnant l'onglet « Contenu ».

Pour remplacer le texte par défaut par votre propre message, cliquez sur « Élément 1 » dans le menu de gauche.

Vous pouvez maintenant taper votre élément de liste dans le petit éditeur de texte qui apparaît.

Ici, vous pouvez également appliquer le formatage de votre choix, tel que gras ou italique.

Par défaut, SeedProd utilise une coche pour chaque puce, mais il dispose d'une bibliothèque intégrée de polices d'icônes, qui comprend 1400 icônes Font Awesome que vous pouvez utiliser à la place.

Pour remplacer la coche, placez simplement votre souris dessus, puis cliquez sur « Bibliothèque d'icônes » lorsqu'elle apparaît.

Cela ouvre une fenêtre contextuelle où vous pouvez choisir l'icône que vous souhaitez utiliser à la place.

Vous pouvez utiliser différentes icônes pour les puces individuelles au sein de la liste, c'est donc un excellent moyen de créer des listes plus intéressantes et attrayantes.

Pour créer d'autres puces, cliquez simplement sur le bouton « Ajouter un nouvel élément ».

Vous pouvez maintenant ajouter du texte et modifier l'icône par défaut en suivant exactement le même processus décrit ci-dessus.

Après avoir ajouté tous les éléments à votre liste, vous pouvez modifier la taille de la police et l'alignement à l'aide des paramètres du menu de gauche.

Vous pouvez également augmenter ou diminuer l'espace entre les éléments de liste individuels à l'aide du curseur « Espace entre ».

Après cela, vous voudrez peut-être changer la couleur des icônes dans la liste. Même si vous utilisez des icônes différentes, SeedProd appliquera la même couleur à chaque élément afin que le design soit toujours cohérent.

Pour effectuer ce changement, cliquez sur la zone « Couleur de l'icône », puis choisissez une nouvelle couleur dans le pop-up qui apparaît.

Une fois cela fait, vous voudrez peut-être cliquer sur « Avancé » et examiner certains paramètres supplémentaires. Nous avons déjà vu comment vous pouvez basculer entre les mises en page de liste verticale et horizontale, mais vous pouvez également changer la couleur du texte et la police.

Pour vraiment faire ressortir votre liste, vous pouvez même ajouter une ombre portée ou une animation CSS.

La plupart des paramètres de l'onglet « Avancé » sont assez explicites, il vaut donc la peine de les explorer pour voir quels effets vous pouvez créer.

Une fois cela fait, vous pouvez continuer à travailler sur la conception de votre page en ajoutant d'autres blocs, puis en les personnalisant à l'aide des paramètres du menu de gauche.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez simplement sur le menu déroulant du bouton « Enregistrer » et sélectionnez « Publier ».

Vous pouvez maintenant visiter cette page pour voir la liste en direct sur votre boutique en ligne ou votre site Web.

Méthode 4 : Utilisation de code pour ajouter des puces et des listes numérotées (Avancé)

Vous pouvez également créer des listes en utilisant l'éditeur de code WordPress intégré et le HTML.

Bien que l'éditeur de blocs soit plus simple, l'utilisation de l'éditeur de code vous donne un contrôle précis sur la structure HTML, ce qui peut être utile pour le dépannage ou pour coller des listes complexes pré-formatées.

Pour en savoir plus sur ce sujet, consultez notre guide sur comment modifier le HTML dans l'éditeur de code WordPress.

Pour commencer, ouvrez la page ou l'article où vous souhaitez afficher la liste. Ensuite, cliquez sur l'icône à trois points dans le coin supérieur droit et sélectionnez « Éditeur de code ».

Les étapes suivantes varieront selon que vous souhaitiez ajouter une liste à puces ou une liste numérotée.

Comment créer une liste à puces en utilisant du code

Pour créer une liste à puces, commencez par taper ceci :

<!-- wp:list -->
<ul>

ul signifie « unordered list » (liste non ordonnée), ce qui signifie que la liste n'a pas de numéros, et wp:list indique à WordPress que vous créez manuellement un bloc Liste.

Ensuite, appuyez sur la touche « Retour » pour passer à une nouvelle ligne et créer votre premier élément de liste :

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Ici, li signifie « list item » (élément de liste), et nous terminons la ligne avec /li.

Vous pouvez répéter ce processus pour créer plus d'éléments de liste. Par exemple :

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Lorsque vous avez terminé, fermez le bloc de code avec un autre indicateur de « liste non ordonnée » :

</ul>
<!-- /wp:list -->

Cela nous donne le code de liste suivant :

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Comme vous pouvez le voir dans l'image suivante, cela crée une liste très simple, mais vous pouvez la personnaliser en ajoutant d'autres éléments HTML, tels que des balises d'en-tête.

Comment créer une liste numérotée en utilisant du code

Pour créer une liste numérotée, tapez simplement ceci :

<!-- wp:list {"ordered":true} -->

Vous pouvez ensuite taper ol qui signifie « ordered list » (liste ordonnée) :

<!-- wp:list {"ordered":true} -->
<ol>

Après cela, ajoutez chaque élément de liste en suivant le même processus décrit ci-dessus :

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Enfin, fermez la liste ordonnée en utilisant une balise /ol et wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Foire aux questions sur l'ajout de points de puce et de listes numérotées dans WordPress

Voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout de puces et de listes numérotées dans WordPress :

Comment créer une liste avec des puces et une numérotation ?

Vous pouvez créer une liste mixte en utilisant le bouton « Indenter ». Commencez une liste numérotée, et lorsque vous souhaitez ajouter un sous-élément avec une puce, cliquez simplement sur le bouton « Indenter » dans la barre d'outils. Cela créera une puce imbriquée sous votre élément numéroté.

Quel est le raccourci pour les puces dans WordPress ?

Le principal raccourci clavier pour démarrer une liste à puces dans l'éditeur de blocs WordPress est de taper un astérisque (*) suivi de la barre d'espace. Pour une liste numérotée, tapez 1. suivi de la barre d'espace.

Comment faire d'une liste numérotée a) dl b) ol c) list d) ul ?

Vous pouvez créer une liste numérotée en utilisant l'option (b), la balise <ol> en HTML. 'ol' signifie « ordered list » (liste ordonnée), qui est utilisée lorsque la séquence des éléments est importante. La balise <ul> est utilisée pour les listes non ordonnées (à puces).

Est-il préférable d'utiliser des listes ou des divs ?

Il est toujours préférable d'utiliser les balises de liste appropriées (comme <ul> ou <ol>) pour le contenu de liste au lieu des balises <div>. Les balises de liste fournissent une signification sémantique, ce qui est crucial pour le SEO et pour que les outils d'accessibilité comme les lecteurs d'écran comprennent la structure de votre contenu.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des puces et des listes numérotées dans WordPress. Vous pourriez également vouloir apprendre comment ajouter la collaboration dans l'éditeur de blocs WordPress et nos meilleurs choix de plugins de blocs Gutenberg pour WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.