Table des matières
Dans ce guide exhaustif, nous plongerons dans le monde de la personnalisation des listes en CSS. Pour les utilisateurs de WordPress, nous démontrerons comment Elementor, le constructeur de sites web populaire, simplifie ce processus, vous permettant de réaliser votre vision de conception sans nécessiter de connaissances approfondies en codage.
Les bases du style de liste en CSS
Introduction aux balises <ul>, <ol>, et <li> Balises
Les listes sont un pilier fondamental de la conception web. Elles aident à organiser l’information de manière claire et structurée, rendant votre site web plus facile à lire et à comprendre. HTML nous fournit trois balises essentielles pour créer des listes :
- <ul> : Signifie « liste non ordonnée ». C’est votre solution pour les listes à puces où l’ordre des éléments n’a pas d’importance particulière.
- <ol> : Signifie « liste ordonnée ». Utilisez ceci lorsque vous devez afficher des éléments dans une séquence numérotée.
- <li> : Signifie « élément de liste ». Chaque élément, qu’il s’agisse d’une puce ou d’un élément numéroté, est encadré par des balises <li>.
Exemple de structure HTML
HTML
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ce code simple créerait une liste non ordonnée de base avec trois puces (• Café, • Thé, • Lait).
La propriété list-style-type
CSS (Cascading Style Sheets) est le langage qui contrôle la présentation visuelle de votre site web. La propriété list-style-type est votre outil principal pour personnaliser l’apparence de ces puces ou numéros dans vos listes. Voici quelques-unes des valeurs les plus courantes que vous utiliserez :
- disc : Le style par défaut affiche des cercles pleins comme puces.
- circle : Crée des cercles vides comme puces.
- square : Rend des puces carrées.
- none : Le mot magique ! Cette valeur supprime complètement les puces ou les numéros.
Voyons comment cela fonctionne dans un exemple CSS simple :
CSS
ul {
list-style-type: none;
}
Ce fragment supprimerait les puces de TOUTES les listes non ordonnées (<ul>) sur votre site web.
Cibler des listes spécifiques
Bien que le style uniforme de toutes vos listes puisse être utile, vous voudrez souvent personnaliser les puces (ou leur absence) de manière plus granulaire. C’est là que les classes et les ID CSS s’avèrent pratiques.
Utilisation des classes
Les classes vous permettent d’appliquer des styles à plusieurs listes sur votre site web. Voici comment :
Ajoutez une classe à votre HTML
HTML
<ul class="no-bullets">
<li>Item One</li>
<li>Item Two</li>
</ul>
Stylisez la classe dans votre CSS
CSS
.no-bullets {
list-style-type: none;
}
Maintenant, seules les listes avec la classe no-bullets auront leurs puces supprimées.
Utilisation des ID
Les ID ciblent une liste spécifique sur votre site web. Utilisez-les lorsque vous avez besoin d’un style unique pour une seule liste.
Ajoutez un ID à votre HTML
HTML
<ul id="special-list">
<li>Item One</li>
<li>Item Two</li>
</ul>
Stylisez l’ID dans votre CSS (notez le symbole #)
CSS
#special-list {
list-style-type: square;
}
Points clés à retenir
- Les classes (indiquées par .) sont pour styler plusieurs éléments.
- Les ID (indiqués par #) sont utilisés pour styler un élément unique.
- Vous pouvez combiner l’utilisation des classes et des ID pour une flexibilité de style maximale.
Supprimer les puces avec Elementor
La puissance de l’éditeur visuel d’Elementor
Si l’idée d’écrire du code CSS vous semble intimidante, Elementor a la solution ! Son interface visuelle intuitive vous permet de styler les listes, y compris la suppression des puces, en quelques clics seulement. Voici la beauté d’Elementor :
- Personnalisation sans code : Vous n’avez pas besoin d’être un expert en CSS pour obtenir des résultats d’apparence professionnelle.
- Aperçus en direct : Visualisez vos modifications reflétées sur la page en temps réel, rendant les ajustements de conception un jeu d’enfant.
Interface de glisser-déposer : La construction de votre site web s’avère naturelle et intuitive.
Guide étape par étape
Localiser le widget Liste : Dans l’éditeur Elementor, faites glisser et déposez le widget ‘Liste’ sur votre page ou modifiez une liste existante. - Ouvrir les contrôles de style : Dans le panneau de gauche, vous verrez un ensemble d’onglets de style. Cliquez sur l’onglet ‘Style’.
Trouver list-style-type : Sous la section ‘Typographie’, vous verrez une option pour ‘Type de style de liste’. Définir sur ‘Aucun’ : Cliquez sur le menu déroulant et sélectionnez l’option ‘Aucun’.
C’est tout ! Vos puces disparaîtront comme par magie. Vous pouvez utiliser la même interface pour explorer d’autres options de style, telles que la modification de la couleur ou de la taille des listes numérotées.
Personnalisation avancée dans Elementor
La liste des options de style d’Elementor va au-delà des bases. Vous pouvez explorer des fonctionnalités telles que :
Images de puce personnalisées : Nous examinerons cela dans une section ultérieure. Ajustement de l’espacement et de l’indentation : Pour un contrôle précis de l’apparence de la liste. Stylisation d’éléments de liste individuels : Créez des designs uniques au sein d’une seule liste.
Si vous souhaitez explorer les puces personnalisées ou des techniques de liste vraiment avancées, la documentation et la communauté d’Elementor fournissent des tutoriels utiles et des exemples de code pour développer vos compétences.
Maîtriser le CSS pour un contrôle complet
Comprendre l’héritage
Le CSS a une nature hiérarchique, ce qui signifie que les styles appliqués aux éléments parents peuvent se répercuter et affecter leurs enfants imbriqués. Ce concept est important avec les listes :
- Listes parentes : Lorsque vous stylisez une balise <ul> ou <ol> , ces styles sont souvent transférés aux éléments de liste individuels (<li>) à l’intérieur.
Styles de remplacement : Pour styliser différemment des niveaux de liste spécifiques, vous devrez utiliser des sélecteurs CSS plus précis.
Exemple :
CSS
ul {
list-style-type: square; /* All lists will have square bullets */
}
ul ul {
list-style-type: circle; /* Nested lists will have circle bullets */
}
L’abréviation list-style
Pour un CSS efficace, vous pouvez combiner plusieurs propriétés liées aux listes en une seule déclaration en utilisant l’abréviation list-style. Cela fonctionne comme suit :
CSS
ul {
list-style: disc inside;
}
This is equivalent to:
CSS
ul {
list-style-type: disc;
list-style-position: inside;
}
Décomposons cela :
List-style-type
Nous avons déjà abordé cela ! Définit le style de puce/numéro (par exemple, disque, carré, aucun).
List-style-position
Contrôle où la puce se situe par rapport au texte.
- Inside place la puce dans le flux de contenu de l’élément de liste.
- Outside place la puce en dehors du flux de contenu régulier, créant plus d’espace de respiration.
Remplacement des puces par des images personnalisées
La propriété list-style-image ouvre un monde de possibilités visuelles pour vos listes. Voici comment remplacer les puces ennuyeuses par des graphiques accrocheurs :
- Choisissez votre image : Trouvez ou créez une petite image qui correspond à votre style de design. Les icônes, les flèches ou les formes simples fonctionnent bien. Gardez à l’esprit la taille du fichier pour une vitesse de chargement de page optimale.
CSS
ul {
list-style-image: url('path/to/your/image.png');
}
Remplacez ‘chemin/vers/votre/image.png’ par le chemin de fichier réel ou l’URL web de l’image choisie.
Dimensionnement et positionnement des images
Vous souhaitez probablement avoir un certain contrôle sur l’apparence de vos images personnalisées. Expérimentez avec ces propriétés supplémentaires :
List-style-position : Nous en avons discuté plus tôt, mais inside ou outside influencera le placement de l’image. Propriétés d’arrière-plan : Si vous avez besoin d’un positionnement plus complexe, traitez l’image comme un arrière-plan en utilisant background-size, background-repeat et background-position.
Exemple
CSS
ul {
list-style-image: url('checkmark.svg');
list-style-position: inside;
background-repeat: no-repeat; /* Prevent the image from tiling */
background-position: 0 50%; /* Position the image in the center */
}
Note importante : Fournissez toujours une solution de repli en utilisant list-style-type au cas où l’image ne se chargerait pas. Cela garantit que votre liste affiche toujours quelque chose de visuellement significatif.
Conseils de dépannage
Même avec un CSS soigné, il arrive parfois que des choses inattendues se produisent et que vos puces ne coopèrent pas. Voici une boîte à outils de dépannage à garder à l’esprit :
Incohérences entre navigateurs
Des différences mineures de rendu entre les navigateurs web (Chrome, Firefox, Safari, etc.) peuvent se produire. Testez votre site web sur plusieurs navigateurs pour détecter tout comportement de style étrange.
Styles conflictuels
Si vous disposez de multiples fichiers CSS ou feuilles de style, il est possible qu’ils entrent en conflit les uns avec les autres. Utilisez les outils de développement de votre navigateur (généralement accessibles en faisant un clic droit et en sélectionnant « Inspecter ») pour examiner quels styles sont effectivement appliqués à vos listes.
- Spécificité : Les sélecteurs CSS plus spécifiques ont la préséance. Assurez-vous que vos règles de style pour les puces ciblent les listes appropriées avec une spécificité suffisante pour remplacer les valeurs par défaut.
Mise en garde concernant !important : Bien que la déclaration !important puisse forcer la priorité des styles, il convient de l’utiliser avec parcimonie. Son utilisation judicieuse peut faciliter la maintenance de votre CSS à long terme.
Scénarios courants
- Réapparition des puces : Vérifiez si des styles de liste parente provoquent des problèmes d’héritage. Ajustez votre CSS pour cibler spécifiquement les listes que vous souhaitez modifier.
- Images n’apparaissant pas : Vérifiez minutieusement vos chemins de fichiers ! Un seul caractère erroné peut rompre le lien. Considérez également la mise en cache du navigateur – parfois, un rafraîchissement forcé (Ctrl+F5 ou Cmd+Maj+R) est nécessaire pour forcer le chargement de l’image.
- Positionnement inattendu : Assurez-vous que votre propriété list-style-position et les propriétés d’arrière-plan additionnelles fonctionnent harmonieusement pour positionner vos images comme souhaité.
Les outils de développement sont vos meilleurs alliés lors du débogage des problèmes CSS. Apprenez à les utiliser efficacement, et vous résoudrez les énigmes de style avec aisance !
Au-delà de la suppression des puces : Stylisation créative des listes
Listes horizontales
Il est parfois judicieux de s’affranchir du format de liste verticale traditionnel et d’agencer vos éléments horizontalement. Les techniques de flexbox CSS et d’inline-block offrent d’excellentes solutions :
Méthode CSS Flexbox
Enveloppez votre liste : Encapsullez votre <ul> ou <ol> dans un élément conteneur (généralement une <div>).
Appliquez les propriétés Flexbox
CSS
.horizontal-list-container {
display: flex; /* Activate flexbox layout */
flex-direction: row; /* Arrange items in a row */
}
Méthode Inline-Block
Ciblez les éléments de liste
CSS
ul li {
display: inline-block;
}
Important ! Avec ces deux méthodes, il sera probablement nécessaire d’ajuster les marges et le rembourrage pour affiner l’espacement entre vos éléments de liste horizontaux.
Ajustement des marges, du rembourrage et de l’indentation
Prenons le contrôle de l’espacement autour de vos éléments de liste pour un aspect raffiné :
- Marges : Les marges créent de l’espace à l’extérieur de la bordure d’un élément. Utilisez des propriétés telles que margin-top, margin-right, etc., pour contrôler l’espacement entre les éléments de liste ou entre la liste entière et le contenu environnant.
- Rembourrage : Le rembourrage crée de l’espace à l’intérieur de la bordure d’un élément. Utilisez la propriété padding pour ajouter de l’espace autour du contenu textuel de chaque élément de liste.
- Indentation du texte : Utilisez la propriété text-indent pour ajuster précisément où commence le texte de votre élément de liste. Une valeur négative peut décaler le texte par rapport à la puce, créant une séparation visuelle plus importante.
Exemple
CSS
ul li {
margin-right: 20px; /* Space between list items */
padding: 10px; /* Internal spacing for visual comfort */
text-indent: -5px; /* Shift text slightly to the right */
}
Meilleures pratiques d’accessibilité
Tout en améliorant visuellement vos listes, il est essentiel de prendre en compte les utilisateurs en situation de handicap. Voici sur quoi vous concentrer :
- HTML sémantique : L’utilisation correcte des balises <ul>, <ol>, et <li> informe les technologies d’assistance (comme les lecteurs d’écran) qu’elles sont en présence d’une liste. Cette information structurelle est inestimable pour la navigation et la compréhension de votre contenu.
- Évitez de vous fier uniquement aux indices visuels : Si vous supprimez les puces, assurez-vous qu’il y a suffisamment de distinction visuelle entre les éléments de liste. Un espacement adéquat, des changements de police ou des bordures peuvent être utiles pour ceux qui pourraient avoir des difficultés à percevoir le style par défaut.
- Test avec un lecteur d’écran : Expérimentez avec un logiciel de lecture d’écran (comme NVDA ou VoiceOver) pour avoir une expérience directe de la manière dont vos listes sont présentées aux utilisateurs ayant des déficiences visuelles.
Quand NE PAS supprimer les puces
Il existe des situations où les puces ou les numéros traditionnels servent un objectif clair :
- Clarté et lisibilité : Pour des listes simples où l’ordre n’a pas d’importance (par exemple, des listes d’ingrédients, des listes de fonctionnalités), les puces facilitent l’analyse visuelle rapide de l’information.
- Priorisation de l’ordre : Les listes ordonnées sont essentielles pour les instructions, les étapes ou les classements où la séquence est importante.
Stylisation des menus de navigation
Les listes constituent l’épine dorsale de nombreux menus de navigation de sites web. Explorons quelques cas d’utilisation courants :
Navigation de niveau supérieur : Souvent stylisée sous forme de listes horizontales pour les sections principales du site web. Menus déroulants : Utilisent des listes imbriquées pour révéler des sous-catégories lors du survol ou du clic sur un élément de niveau supérieur. Menus mobiles : Une mise en forme créative des listes peut alimenter une navigation responsive qui se réduit en un menu « hamburger » sur les écrans plus petits.
Elementor simplifie la création de menus de navigation accessibles et magnifiquement conçus avec de nombreuses options de personnalisation.
Conseils de conception et inspiration
Exemples visuels
Une image vaut mille mots, alors parsemons cette section d’exemples visuels. Il pourrait s’agir de captures d’écran ou d’images intégrées montrant :
- Des conceptions créatives de puces personnalisées
- Des dispositions de listes horizontales
- Des styles de liste uniques utilisés dans des sites web réels
Tendances de conception
L’incorporation des tendances actuelles de conception web peut donner à vos listes une apparence fraîche et moderne. Envisagez d’explorer :
Minimalisme : Des lignes épurées, un espace blanc généreux et un style de liste pour un aspect sophistiqué. Typographie audacieuse : Utilisation de polices fortes et de tailles contrastées pour faire ressortir votre liste d’éléments. Micro-interactions : Ajout d’animations au survol ou au clic pour améliorer l’engagement de l’utilisateur avec vos listes. Couleur et repères visuels : Utilisation de la psychologie des couleurs ou de séparateurs visuels pour guider l’œil de l’utilisateur et différencier les éléments de la liste.
Utilisation des listes pour la hiérarchie visuelle
Les listes ne sont pas réservées aux puces et aux courses ! Elles peuvent structurer efficacement votre contenu :
Titres et sous-titres : Traitez les titres comme des listes en utilisant différents niveaux ( h1 , h2 , etc.) pour une organisation claire du contenu. Barres latérales et encadrés : Stylisez les listes pour créer des sections de contenu visuellement distinctes qui attirent l’attention. Caractéristiques du produit : Présentez les avantages ou les spécifications du produit dans un format de liste structuré et facile à parcourir.
Constructeur de thème et kits de conception d’Elementor
Les puissants outils d’Elementor facilitent l’exploration de la conception :
Constructeur de thème : Permet de personnaliser chaque aspect de votre site web, y compris la façon dont les listes sont stylisées sur les pages d’archives, les articles de blog, et plus encore. - Kits de conception : Prenez un bon départ avec des modèles Elementor préconçus et des kits de sites web. Beaucoup incluent un style de liste unique que vous pouvez adapter et faire vôtre.
Amélioration de votre site WordPress avec Elementor
Avantages d’Elementor pour WordPress
Tout au long de ce guide, nous avons vu comment Elementor simplifie la suppression des puces et ouvre d’innombrables possibilités de conception de listes. Mais ses avantages vont bien au-delà de la mise en forme des listes :
Facilité d’utilisation : L’interface glisser-déposer et l’aperçu en direct rendent la conception web accessible à tous, indépendamment de l’expérience en codage. Profondeur de conception : Elementor offre un contrôle fin pour ceux qui sont à l’aise avec le CSS, permettant des éléments de site web vraiment uniques et personnalisés. Vitesse et performance : Le code d’Elementor est optimisé pour un chargement rapide, et lorsqu’il est associé à l’hébergement Elementor, vous obtenez des performances imbattables. Communauté florissante : Accédez à une vaste bibliothèque de tutoriels, aux forums support, et aux extensions tierces pour Elementor, étendant encore davantage ses fonctionnalités.
Conclusion
Dans ce guide, nous avons couvert :
- Les bases de la mise en forme CSS des listes, le contrôle des puces (ou leur absence !), et l’héritage.
- Comment Elementor vous met aux commandes de la conception avec une personnalisation sans code.
- Les techniques CSS avancées pour remplacer les puces par des images personnalisées et affiner l’espacement.
- L’importance de l’accessibilité et des meilleures pratiques de conception.
- Les avantages de performance de l’hébergement Elementor et ses optimisations intégrées.
Que vous soyez débutant ou concepteur web chevronné, Elementor vous permet de créer des listes visuellement attrayantes et bien structurées qui améliorent l’expérience de votre site web. Associé à l’hébergement Elementor, vous bénéficierez de temps de chargement ultra-rapides qui augmentent la satisfaction des utilisateurs et la visibilité sur les moteurs de recherche.
Vous êtes à la recherche d'un nouveau contenu ?
Recevez des articles et des informations dans notre lettre d'information hebdomadaire.
En saisissant votre email, vous acceptez de recevoir les emails d’Elementor, y compris les emails marketing,
et vous acceptez nos conditions générales et notre politique de confidentialité.
