{"id":148566,"date":"2025-05-19T15:53:22","date_gmt":"2025-05-19T12:53:22","guid":{"rendered":"https:\/\/elementor.com\/help\/prioriser-les-styles-en-conflit\/"},"modified":"2025-05-19T15:53:22","modified_gmt":"2025-05-19T12:53:22","slug":"prioriser-les-styles-en-conflit","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/","title":{"rendered":"Prioriser les styles en conflit"},"content":{"rendered":"\n<p>La mise en forme des \u00e9l\u00e9ments dans l&rsquo;\u00c9diteur Elementor V4 est construite autour du concept de classes. Pour plus d&rsquo;informations sur les classes dans V4, consultez <a href=\"https:\/\/elementor.com\/help\/classes-in-elementor\/\">Les classes dans Elementor<\/a>. &nbsp;<\/p>\n\n\n\n<p>Travailler avec des classes pr\u00e9sente de nombreux avantages, notamment la possibilit\u00e9 de r\u00e9utiliser des \u00e9l\u00e9ments, rendant votre travail plus rapide et plus efficace. Cependant, l&rsquo;utilisation de classes peut parfois signifier que vous ajoutez des styles contradictoires \u00e0 un \u00e9l\u00e9ment. Par exemple, un \u00e9l\u00e9ment paragraphe peut avoir une classe qui d\u00e9finit la couleur du texte en vert et une autre classe qui la d\u00e9finit en rouge. Comment l&rsquo;\u00c9diteur d\u00e9termine-t-il quelle couleur utiliser ?   <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Priorisation des classes et identification des conflits<\/h2>\n\n\n\n<p>Dans l&rsquo;exemple suivant, nous utiliserons deux classes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Red_text : Cette classe est configur\u00e9e pour rendre le texte rouge.<\/li>\n\n\n\n<li>Green_text : Cette classe est configur\u00e9e pour rendre le texte vert.<\/li>\n<\/ul>\n\n\n\n<p>Pour apprendre \u00e0 cr\u00e9er des classes, consultez <a href=\"https:\/\/elementor.com\/help\/classes-in-elementor\/\">Les classes dans Elementor<\/a>.<\/p>\n\n\n\n<p>Pour d\u00e9montrer la priorit\u00e9 des classes et l&rsquo;identification des conflits, cr\u00e9ons un \u00e9l\u00e9ment d&rsquo;exemple.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ajoutez un \u00e9l\u00e9ment Paragraphe au canevas.<br>Puisque nous n&rsquo;avons pas mis en forme le paragraphe, il utilisera la couleur de texte par d\u00e9faut &#8211; noir.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"321\" class=\"wp-image-57455\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png 1206w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16-300x142.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16-1024x483.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16-768x362.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/>&nbsp;<\/li>\n\n\n\n<li>Cliquez sur l&rsquo;onglet <strong>Style<\/strong>.<br><img decoding=\"async\" width=\"280\" height=\"252\" class=\"wp-image-57456\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-17.png\" alt=\"\"><\/li>\n<\/ol>\n\n\n\n<p>Le haut de l&rsquo;onglet Style contient la zone de texte <strong>Classes<\/strong>. La zone de texte <strong>Classes<\/strong> contient les noms de toutes les classes qui s&rsquo;appliquent \u00e0 l&rsquo;\u00e9l\u00e9ment. Pour l&rsquo;instant, la seule classe qui s&rsquo;applique \u00e0 l&rsquo;\u00e9l\u00e9ment est <strong>Local<\/strong>.  &nbsp;<\/p>\n\n\n\n<p>Local est une classe sp\u00e9ciale. Chaque \u00e9l\u00e9ment poss\u00e8de une classe locale qui s&rsquo;applique uniquement \u00e0 cet \u00e9l\u00e9ment. \u00c0 ce stade, nous n&rsquo;avons ajout\u00e9 aucun style \u00e0 la classe locale, donc l&rsquo;\u00e9l\u00e9ment Paragraphe utilise les param\u00e8tres par d\u00e9faut.  <\/p>\n\n\n\n<p>Maintenant, ajoutons de la couleur au texte.<br><img decoding=\"async\" width=\"680\" height=\"210\" class=\"wp-image-57457\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18.png 1206w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18-300x93.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18-1024x316.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18-768x237.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dans la zone de texte <strong>Classes<\/strong>, ajoutez la classe <strong>Red_text<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>Le texte devient rouge car il utilise la couleur d\u00e9finie par la classe Red_text.<\/p>\n\n\n\n<p>Maintenant, examinons les indicateurs. Les indicateurs vous montrent quels param\u00e8tres sont utilis\u00e9s pour votre \u00e9l\u00e9ment. <br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"793\" class=\"wp-image-57458\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-19.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-19.png 250w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-19-106x300.png 106w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ouvrez le champ <strong>Typographie<\/strong> et regardez le param\u00e8tre <strong>Couleur du texte<\/strong>. Le point indicateur est vert, montrant que c&rsquo;est le param\u00e8tre qui sera utilis\u00e9. &nbsp;<\/li>\n<\/ul>\n\n\n\n<p>[callout type=\u00a0\u00bbnote\u00a0\u00bb]Si vous fermiez le champ Typographie, un point indicateur appara\u00eetrait \u00e0 c\u00f4t\u00e9 du mot Typographie. Les indicateurs apparaissent \u00e0 c\u00f4t\u00e9 de tout param\u00e8tre de Style qui a une valeur. Voir ci-dessous pour un tableau expliquant la signification des couleurs d&rsquo;indicateur.  <br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"362\" class=\"wp-image-59010\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Field-indicators.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Field-indicators.png 616w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Field-indicators-232x300.png 232w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><br>[\/callout]<\/p>\n\n\n\n<p>Maintenant, allez \u00e0 la classe locale et regardez le param\u00e8tre Typographie.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"785\" class=\"wp-image-57459\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-20.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-20.png 251w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-20-107x300.png 107w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/p>\n\n\n\n<p>Il y a un point gris \u00e0 c\u00f4t\u00e9 de <strong>Couleur du texte<\/strong>. Cela montre que cet \u00e9l\u00e9ment contient une autre classe qui d\u00e9finit la couleur du texte. <br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"272\" class=\"wp-image-57460\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-21.png\" alt=\"\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Retournons \u00e0 la zone de texte <strong>Classes<\/strong> et ajoutons la classe <strong>Green_text<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>Remarquez que m\u00eame si nous avons ajout\u00e9 la classe Green_text apr\u00e8s la classe Red_text, elle se d\u00e9place \u00e0 gauche de la Red_class. Les classes \u00e0 gauche ont toujours la priorit\u00e9 sur les classes \u00e0 droite. Cela signifie que la classe <strong>local<\/strong> aura toujours la priorit\u00e9 la plus \u00e9lev\u00e9e car elle est toujours la classe la plus \u00e0 gauche.  <br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"244\" class=\"wp-image-57461\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22.png 1208w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22-300x108.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22-1024x368.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22-768x276.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n\n\n\n<p>Pour comprendre pourquoi, cliquez sur l&rsquo;ic\u00f4ne du Gestionnaire de classes pour ouvrir le Gestionnaire de classes. Pour plus de d\u00e9tails, consultez <a href=\"https:\/\/elementor.com\/help\/the-elementor-editor-class-manager\/\">Le Gestionnaire de classes de l&rsquo;\u00c9diteur Elementor<\/a>. &nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"329\" class=\"wp-image-57462\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-23.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-23.png 264w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-23-255x300.png 255w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/>&nbsp;&nbsp;<\/p>\n\n\n\n<p>Remarquez que <strong>Green_text<\/strong> est au-dessus de <strong>Red_text<\/strong>, ce qui signifie qu&rsquo;elle a la priorit\u00e9 sur <strong>Red_text<\/strong>. Tout \u00e9l\u00e9ment ayant \u00e0 la fois <strong>Green_text<\/strong> et <strong>Red_text<\/strong> adoptera les param\u00e8tres de <strong>Green_text<\/strong>. <\/p>\n\n\n\n<p>Si nous regardons les param\u00e8tres de <strong>Typographie<\/strong> pour chaque classe, nous verrons :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dans la classe <strong>Red_text<\/strong>, il y a un point orange \u00e0 c\u00f4t\u00e9 de <strong>Couleur du texte<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"29\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdurA__7LT01JLEXelEcZxgZ7uxs3H_0V5bk_7eLcW7iZWm9r0ya8T_ERRoUGBRe23jURnirnukrcKc8tNo4A45cZFtoGBzhPC1fFS1waqsyU5HSmayz94N7MqTqpkbwi58EBw?key=qzb6HNs8KOoIEJo-rkVcbuLx\">. Cela montre qu&rsquo;il y a une autre classe qui remplace le param\u00e8tre de cette classe. <\/li>\n\n\n\n<li>Dans la classe <strong>Green_text<\/strong>, il y a un point vert \u00e0 c\u00f4t\u00e9 de <strong>Couleur du texte<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"29\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeLDF860uXXnxfSBQ8G-mHeu_mbXCFBHSsyd8-IdcJMpHRxjpR9aI4PVdlVpqEu4zMjcJ9ObSeIMTD2kQVL68gLH3wSrBB4ZHHel0YJ-vAxdjr7Plj8QatfSVgrNvyzjT29Muo?key=qzb6HNs8KOoIEJo-rkVcbuLx\">. Cela montre que c&rsquo;est la couleur utilis\u00e9e dans cet \u00e9l\u00e9ment. &nbsp;&nbsp;<\/li>\n\n\n\n<li>Dans la classe <strong>local<\/strong>, il y a un point gris \u00e0 c\u00f4t\u00e9 de <strong>Couleur du texte<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"29\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdGYiU2uH0ppsCKOmvoGPqqxnu0PItL_rX2s9g0hTl-cdXvA4g_JXEHCiKYJb0f1VzyI0GKLfiZqS5cAhC_iwU4ZFdIixOrUJpGe0c_0WW9teuG9F8xUFnvFuwGB0cTXGrIQ5g?key=qzb6HNs8KOoIEJo-rkVcbuLx\">. Cela montre que cet \u00e9l\u00e9ment a une autre classe d\u00e9terminant ce param\u00e8tre mais qu&rsquo;il n&rsquo;y a pas de conflit avec cette classe. <\/li>\n<\/ul>\n\n\n\n<p>Enfin, voyons ce qui se passe lorsque nous modifions la classe locale.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"443\" class=\"wp-image-57463\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24.png 1206w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24-300x195.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24-1024x667.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24-768x500.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dans <strong>Typographie<\/strong>, changez la <strong>Couleur du texte<\/strong>.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Le texte change pour cette couleur car la classe <strong>local<\/strong> a toujours la priorit\u00e9 la plus \u00e9lev\u00e9e. L&rsquo;indicateur \u00e0 c\u00f4t\u00e9 de <strong>Couleur du texte<\/strong> devient rose, indiquant que cette couleur est locale et a la priorit\u00e9 maximale. <\/p>\n\n\n\n<p>Voici un tableau des indicateurs et leur signification :<br>[callout type=\u00a0\u00bbnote\u00a0\u00bb]Ces indicateurs apparaissent \u00e0 c\u00f4t\u00e9 des param\u00e8tres qui contiennent des valeurs et des champs, tels que <strong>Taille<\/strong> et <strong>Typographie<\/strong>, qui contiennent des param\u00e8tres avec des valeurs. Il peut y avoir plusieurs indicateurs \u00e0 c\u00f4t\u00e9 des noms de champs car il peut y avoir des param\u00e8tres individuels dans ces champs qui ont des statuts diff\u00e9rents. Par exemple, un champ Typographie peut contenir un <strong>Type de police<\/strong> qui est utilis\u00e9 par ce param\u00e8tre (indicateur vert) et une <strong>Taille de police<\/strong> qui est d\u00e9termin\u00e9e par un param\u00e8tre diff\u00e9rent (indicateur orange).   <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Indicateur<\/strong><\/td><td><strong>Signification<\/strong><\/td><\/tr><tr><td>Rose<\/td><td>Valeur d\u00e9finie par la classe locale. Ne peut jamais \u00eatre remplac\u00e9e. <\/td><\/tr><tr><td>Vert<\/td><td>Ce param\u00e8tre est actuellement d\u00e9termin\u00e9 par cette classe. Cela peut \u00eatre modifi\u00e9 en r\u00e9organisant les priorit\u00e9s des classes. &nbsp;<\/td><\/tr><tr><td>Gris<\/td><td>Ce param\u00e8tre est actuellement d\u00e9termin\u00e9 par une autre classe.<\/td><\/tr><tr><td>Orange<\/td><td>Ce param\u00e8tre est actuellement d\u00e9termin\u00e9 par une classe diff\u00e9rente. Cela peut \u00eatre modifi\u00e9 en r\u00e9organisant les priorit\u00e9s des classes ou peut \u00eatre remplac\u00e9 par la classe <strong>local<\/strong>. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Identifier quelle classe est utilis\u00e9e<\/h2>\n\n\n\n<p>Les indicateurs expliqu\u00e9s ci-dessus montrent o\u00f9 il y a des conflits mais peuvent \u00e9galement fournir des informations plus pr\u00e9cises. Cliquez sur un indicateur, et une fen\u00eatre contextuelle explique exactement quel style est utilis\u00e9 et quel(s) style(s) sont ignor\u00e9s. &nbsp;<\/p>\n\n\n\n<p>Nous utiliserons les classes de l&rsquo;exemple ci-dessus pour voir comment cela fonctionne.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li> Faites glisser un \u00e9l\u00e9ment Paragraphe sur le canevas.<\/li>\n\n\n\n<li>Cr\u00e9ez les classes <strong>Red_text<\/strong> et <strong>Green_text<\/strong> comme mentionn\u00e9 ci-dessus.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"236\" class=\"wp-image-58857\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/This-is-what-the-classes-field-should-look-like.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/This-is-what-the-classes-field-should-look-like.png 612w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/This-is-what-the-classes-field-should-look-like-300x186.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><br>Voici \u00e0 quoi devrait ressembler le champ Classes.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"516\" class=\"wp-image-58858\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field.png 612w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field-163x300.png 163w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field-556x1024.png 556w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Dans le panneau, ouvrez le champ Typographie.<br>[callout type=\u00a0\u00bbnote\u00a0\u00bb]L&rsquo;indicateur \u00e0 c\u00f4t\u00e9 du mot Typographie montre qu&rsquo;il y a un conflit dans les champs de typographie.[\/callout]<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"290\" class=\"wp-image-58860\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-first-popup-.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-first-popup-.png 582w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-first-popup--290x300.png 290w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Cliquez sur l&rsquo;indicateur \u00e0 c\u00f4t\u00e9 de <strong>Couleur du texte<\/strong>.<br>Une fen\u00eatre contextuelle affiche le nom des classes en conflit. Les propri\u00e9t\u00e9s de la classe non utilis\u00e9e sont barr\u00e9es. <\/li>\n<\/ol>\n\n\n\n<p>Les capacit\u00e9s d&rsquo;\u00e9dition responsive de l&rsquo;\u00e9diteur vous permettent de d\u00e9finir diff\u00e9rentes classes pour diff\u00e9rentes tailles d&rsquo;\u00e9cran. \u00c0 titre d&rsquo;exemple, nous allons d\u00e9finir diff\u00e9rentes tailles de police pour les ordinateurs de bureau et les mobiles. <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ajoutez un \u00e9l\u00e9ment Paragraphe au canevas et saisissez du texte.<\/li>\n\n\n\n<li>Ouvrez le champ <strong>Typographie<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"349\" class=\"wp-image-58863\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-scaled.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-scaled.png 2560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-300x154.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-1024x526.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-768x394.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-1536x788.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-2048x1051.png 2048w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Dans le compteur <strong>Taille de police<\/strong>, entrez <strong>14<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"107\" class=\"wp-image-58864\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-scaled.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-scaled.png 2560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-300x47.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-1024x161.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-768x121.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-1536x241.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-2048x321.png 2048w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Cliquez sur l&rsquo;ic\u00f4ne mobile.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"350\" class=\"wp-image-58865\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-scaled.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-scaled.png 2560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-300x155.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-1024x528.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-768x396.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-1536x791.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-2048x1055.png 2048w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Ouvrez le champ <strong>Typographie<\/strong> et d\u00e9finissez la taille du texte \u00e0 <strong>24<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"714\" class=\"wp-image-58867\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size.png 608w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size-118x300.png 118w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size-402x1024.png 402w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size-603x1536.png 603w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Cliquez sur l&rsquo;indicateur \u00e0 c\u00f4t\u00e9 de <strong>Taille de police<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"155\" class=\"wp-image-58871\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-second-popup.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-second-popup.png 562w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-second-popup-300x167.png 300w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>La fen\u00eatre contextuelle montre quelle taille de police est utilis\u00e9e pour mobile et laquelle pour les ordinateurs de bureau. Puisque nous sommes en mode mobile, la propri\u00e9t\u00e9 bureau est barr\u00e9e.  <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>La mise en forme des \u00e9l\u00e9ments dans l&rsquo;\u00c9diteur Elementor V4 est construite autour du concept de classes. Pour plus d&rsquo;informations sur les classes dans V4, consultez Les classes dans Elementor. &nbsp; Travailler avec des classes pr\u00e9sente de nombreux avantages, notamment la possibilit\u00e9 de r\u00e9utiliser des \u00e9l\u00e9ments, rendant votre travail plus rapide et plus efficace. Cependant, [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1608],"tags":[1694],"class_list":["post-148566","post","type-post","status-publish","format-standard","hentry","category-features-fr","tag-v4-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Prioriser les styles en conflit | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Prioriser les styles en conflit in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prioriser les styles en conflit | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Prioriser les styles en conflit in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T12:53:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1206\" \/>\n\t<meta property=\"og:image:height\" content=\"569\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Prioriser les styles en conflit\",\"datePublished\":\"2025-05-19T12:53:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/\"},\"wordCount\":1280,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\",\"keywords\":[\"V4\"],\"articleSection\":[\"Features\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/\",\"url\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/\",\"name\":\"Prioriser les styles en conflit | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\",\"datePublished\":\"2025-05-19T12:53:22+00:00\",\"description\":\"Learn everything about Prioriser les styles en conflit in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Non cat\u00e9goris\u00e9\",\"item\":\"https:\/\/elementor.com\/help\/fr\/non-categorise\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Prioriser les styles en conflit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/#website\",\"url\":\"https:\/\/elementor.com\/help\/fr\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/fr\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/help\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Prioriser les styles en conflit | Elementor","description":"Learn everything about Prioriser les styles en conflit in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/","og_locale":"fr_FR","og_type":"article","og_title":"Prioriser les styles en conflit | Elementor","og_description":"Learn everything about Prioriser les styles en conflit in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/","og_site_name":"Help","article_published_time":"2025-05-19T12:53:22+00:00","og_image":[{"width":1206,"height":569,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Cliff Churgin","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/fr\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Prioriser les styles en conflit","datePublished":"2025-05-19T12:53:22+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/"},"wordCount":1280,"publisher":{"@id":"https:\/\/elementor.com\/help\/fr\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","keywords":["V4"],"articleSection":["Features"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/","url":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/","name":"Prioriser les styles en conflit | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","datePublished":"2025-05-19T12:53:22+00:00","description":"Learn everything about Prioriser les styles en conflit in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/fr\/prioriser-les-styles-en-conflit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/fr\/"},{"@type":"ListItem","position":2,"name":"Non cat\u00e9goris\u00e9","item":"https:\/\/elementor.com\/help\/fr\/non-categorise\/"},{"@type":"ListItem","position":3,"name":"Prioriser les styles en conflit"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/fr\/#website","url":"https:\/\/elementor.com\/help\/fr\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/fr\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/help\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/fr\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/fr\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/help\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/posts\/148566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/comments?post=148566"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/posts\/148566\/revisions"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/media?parent=148566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/categories?post=148566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/fr\/wp-json\/wp\/v2\/tags?post=148566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}