Prioriser les styles en conflit

La mise en forme des éléments dans l’Éditeur Elementor V4 est construite autour du concept de classes. Pour plus d’informations sur les classes dans V4, consultez Les classes dans Elementor.  

Travailler avec des classes présente de nombreux avantages, notamment la possibilité de réutiliser des éléments, rendant votre travail plus rapide et plus efficace. Cependant, l’utilisation de classes peut parfois signifier que vous ajoutez des styles contradictoires à un élément. Par exemple, un élément paragraphe peut avoir une classe qui définit la couleur du texte en vert et une autre classe qui la définit en rouge. Comment l’Éditeur détermine-t-il quelle couleur utiliser ?

Priorisation des classes et identification des conflits

Dans l’exemple suivant, nous utiliserons deux classes :

• Red_text : Cette classe est configurée pour rendre le texte rouge.
• Green_text : Cette classe est configurée pour rendre le texte vert.

Pour apprendre à créer des classes, consultez Les classes dans Elementor.

Pour démontrer la priorité des classes et l’identification des conflits, créons un élément d’exemple. 

1. Ajoutez un élément Paragraphe au canevas.
   Puisque nous n’avons pas mis en forme le paragraphe, il utilisera la couleur de texte par défaut – noir.
    
2. Cliquez sur l’onglet Style.
   

Le haut de l’onglet Style contient la zone de texte Classes. La zone de texte Classes contient les noms de toutes les classes qui s’appliquent à l’élément. Pour l’instant, la seule classe qui s’applique à l’élément est Local.  

Local est une classe spéciale. Chaque élément possède une classe locale qui s’applique uniquement à cet élément. À ce stade, nous n’avons ajouté aucun style à la classe locale, donc l’élément Paragraphe utilise les paramètres par défaut.

Maintenant, ajoutons de la couleur au texte.

• Dans la zone de texte Classes, ajoutez la classe Red_text.

Le texte devient rouge car il utilise la couleur définie par la classe Red_text.

Maintenant, examinons les indicateurs. Les indicateurs vous montrent quels paramètres sont utilisés pour votre élément.

• Ouvrez le champ Typographie et regardez le paramètre Couleur du texte. Le point indicateur est vert, montrant que c’est le paramètre qui sera utilisé.  

Note

Si vous fermiez le champ Typographie, un point indicateur apparaîtrait à côté du mot Typographie. Les indicateurs apparaissent à côté de tout paramètre de Style qui a une valeur. Voir ci-dessous pour un tableau expliquant la signification des couleurs d’indicateur.

Maintenant, allez à la classe locale et regardez le paramètre Typographie.

Il y a un point gris à côté de Couleur du texte. Cela montre que cet élément contient une autre classe qui définit la couleur du texte.

• Retournons à la zone de texte Classes et ajoutons la classe Green_text.

Remarquez que même si nous avons ajouté la classe Green_text après la classe Red_text, elle se déplace à gauche de la Red_class. Les classes à gauche ont toujours la priorité sur les classes à droite. Cela signifie que la classe local aura toujours la priorité la plus élevée car elle est toujours la classe la plus à gauche.

Pour comprendre pourquoi, cliquez sur l’icône du Gestionnaire de classes pour ouvrir le Gestionnaire de classes. Pour plus de détails, consultez Le Gestionnaire de classes de l’Éditeur Elementor.  
  

Remarquez que Green_text est au-dessus de Red_text, ce qui signifie qu’elle a la priorité sur Red_text. Tout élément ayant à la fois Green_text et Red_text adoptera les paramètres de Green_text.

Si nous regardons les paramètres de Typographie pour chaque classe, nous verrons :

• Dans la classe Red_text, il y a un point orange à côté de Couleur du texte . Cela montre qu’il y a une autre classe qui remplace le paramètre de cette classe.
• Dans la classe Green_text, il y a un point vert à côté de Couleur du texte . Cela montre que c’est la couleur utilisée dans cet élément.   
• Dans la classe local, il y a un point gris à côté de Couleur du texte . Cela montre que cet élément a une autre classe déterminant ce paramètre mais qu’il n’y a pas de conflit avec cette classe.

Enfin, voyons ce qui se passe lorsque nous modifions la classe locale.

• Dans Typographie, changez la Couleur du texte. 

Le texte change pour cette couleur car la classe local a toujours la priorité la plus élevée. L’indicateur à côté de Couleur du texte devient rose, indiquant que cette couleur est locale et a la priorité maximale.

Voici un tableau des indicateurs et leur signification :

Les capacités d’édition responsive de l’éditeur vous permettent de définir différentes classes pour différentes tailles d’écran. À titre d’exemple, nous allons définir différentes tailles de police pour les ordinateurs de bureau et les mobiles.

1. Ajoutez un élément Paragraphe au canevas et saisissez du texte.
2. Ouvrez le champ Typographie.
   
3. Dans le compteur Taille de police, entrez 14.
   
4. Cliquez sur l’icône mobile.
   
5. Ouvrez le champ Typographie et définissez la taille du texte à 24.
   
6. Cliquez sur l’indicateur à côté de Taille de police.
   
7. La fenêtre contextuelle montre quelle taille de police est utilisée pour mobile et laquelle pour les ordinateurs de bureau. Puisque nous sommes en mode mobile, la propriété bureau est barrée.