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.

Pourquoi utiliser des puces et des listes numérotées dans WordPress ?

Les puces et les listes numérotées rendent votre contenu plus facile à lire et à parcourir. Au lieu de longs blocs de texte, les lecteurs peuvent trouver rapidement les informations dont ils ont besoin.

Ils sont particulièrement utiles pour les tutoriels, les guides étape par étape, les listes de fonctionnalités et les points clés importants. Voici quelques-uns des principaux avantages de l'utilisation de listes dans WordPress :

• Améliorer la lisibilité : Les listes décomposent les longs paragraphes et rendent le contenu plus facile à suivre, en particulier pour les lecteurs qui parcourent la page.
• Garder les visiteurs engagés : Un formatage clair aide les lecteurs à rester concentrés et à continuer à faire défiler votre contenu.
• Faciliter la mémorisation des informations : Les points organisés sont souvent plus faciles à comprendre et à retenir que le texte dense.
• Aide au référencement : Un contenu bien structuré peut aider les moteurs de recherche à mieux comprendre votre page et peut améliorer vos chances d'apparaître dans les extraits mis en avant.
• Améliorer l'accessibilité : Les listes correctement formatées fonctionnent mieux avec les lecteurs d'écran et autres technologies d'assistance.

Dans cet esprit, voyons comment vous pouvez 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.

Méthode 1 : Comment ajouter des puces et des listes numérotées en utilisant le bloc de liste intégré de WordPress (Facile)

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

Cela vous permet de créer de simples listes numérotées ou à puces sans installer de plugin WordPress séparé. Cela dit, ce bloc par défaut n'a 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 le billet 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 « Augmenter le 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 « Augmenter le 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 à l'aide des paramètres « Typographie » dans les options de bloc de droite.

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

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

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

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 ».

Une fois que vous avez créé une liste, vous pouvez passer des formats à puces et numérotés en sélectionnant le bloc de liste et en cliquant sur l'icône « Liste à puces » ou « Liste numérotée » dans la barre d'outils du bloc.

Cela permet des ajustements rapides si la structure de votre contenu change.

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 courts codes simples. Il compte plus de 400 000 installations actives et une note de 4,9/5 étoiles sur WordPress.org.

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, allez-y et installez le plugin WordPress dans votre zone d'administration. Après cela, créez un nouveau billet 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 pour parcourir les icônes disponibles. 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 savoir plus sur la recherche des 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 ou site Web WordPress.

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 voudrez peut-être utiliser SeedProd.

Ce thème WordPress avancé et ce plugin de constructeur de pages vous permettent de créer des pages conçues par des professionnels à l'aide d'un simple éditeur 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.

Approuvé par plus d'un million de sites Web, SeedProd a constamment obtenu une note de 4,9/5 étoiles de la part de milliers d'utilisateurs sur WordPress.org. Nous avons testé l'outil de manière approfondie et avons constaté que son éditeur intuitif par glisser-déposer le rend incroyablement 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 modèles magnifiques 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 comme vous le souhaitez. Par exemple, l'ajout de mots-clés pertinents à une URL améliore souvent votre SEO WordPress et aide la page à apparaître dans les résultats de recherche pertinents.

Pour en savoir plus, veuillez consulter notre guide sur comment effectuer 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, veuillez consulter 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 point de liste, 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 passer des dispositions 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 de titre.

Pour un style avancé, vous utiliseriez généralement du CSS plutôt que d'intégrer des éléments HTML structurels comme des titres directement dans des éléments de liste.

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 commençant par une liste numérotée, puis en cliquant sur le bouton « Retrait » pour créer une sous-liste imbriquée. Par défaut, WordPress conservera le même type de liste, de sorte que les éléments imbriqués seront également numérotés.

Pour transformer la liste imbriquée en puces, sélectionnez simplement l'élément de liste indenté et cliquez sur l'icône « Liste à puces » dans la barre d'outils du bloc.

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 voudrez peut-être également apprendre comment ajouter la collaboration dans l'éditeur de blocs WordPress et découvrir nos meilleurs choix de meilleurs plugins de blocs Gutenberg pour WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.