Les designers utilisent rarement une simple règle horizontale. Un séparateur est généralement une div vide avec une hauteur et un fond, ou une courte barre d’accent sous un titre. Reconnaître ces cas garde votre arborescence Elementor propre au lieu de la remplir de conteneurs vides.
Ce qui est reconnu comme un séparateur
Un <hr> devient toujours un widget Divider. Au-delà de cela, une <div> ou un <span> vide est traité comme un séparateur lorsqu’il :
- ne contient aucun texte ni aucun véritable élément de contenu,
- s’affiche comme une barre fine — une faible hauteur, et clairement plus large que haute,
- et possède effectivement une couleur visible, soit un fond, soit une bordure supérieure ou inférieure.
Le cas vide et sans couleur est exclu volontairement. Une div d’espacement vide sans couleur n’est pas un séparateur, et la transformer en ligne visible ajouterait un élément que votre design n’a jamais eu.
Ce qui est repris
La couleur de la ligne et son épaisseur — relevées depuis la bordure lorsqu’il y en a une, sinon depuis la couleur de fond et la hauteur rendue. Une barre d’accent courte clairement plus étroite que son conteneur reçoit aussi une largeur et un alignement explicites, afin qu’une barre de 78 px sous un titre reste une barre de 78 px au lieu de s’étirer sur toute la colonne.
Pourquoi c’est plus important qu’il n’y paraît
Sans cela, chaque ligne décorative devient un Container vide avec un fond — un nœud dans votre arborescence qui ressemble à un élément de mise en page mais n’en est pas un. Multipliez cela par chaque section d’une longue page et la carte de structure devient difficile à lire. Les transformer en widgets Divider permet de garder une arborescence honnête sur ce qui relève de la structure et ce qui relève de la décoration.
Modification ultérieure
Le widget Divider d’Elementor offre bien plus qu’une simple ligne : des styles au-delà du plein (pointillés, tirets, motifs), un texte ou une icône optionnel au centre, ainsi que des réglages de largeur et d’espacement. Une fois qu’une ligne est un véritable widget Divider, tout cela est à un clic — ce qui n’est pas le cas d’une div vide colorée.
Les seuils exacts
Une version plus vague de cette règle produirait des faux positifs sur la moitié d’une page, c’est pourquoi le test est volontairement strict. Une <div> ou un <span> vide devient un Divider uniquement lorsqu’il fait au moins 12 px de large, pas plus de 8 px de haut, et au moins trois fois plus large que haut — en plus d’avoir une couleur visible.
Chaque nombre a son rôle. Le plancher de 12 px élimine les petits points décoratifs et les artefacts de 1 px qui apparaissent autour des bordures. Le plafond de 8 px est ce qui sépare une ligne d’une barre — au-delà, vous avez affaire à un bloc coloré, qui appartient à un Container dans lequel vous pouvez placer des éléments. Le ratio 3:1 écarte les petits carrés : un échantillon de couleur de 6 × 6 passe les deux premiers tests mais n’est manifestement pas un séparateur.
Les mesures proviennent de l’élément tel qu’il est réellement rendu, et non de la feuille de style. Ainsi, une barre dont la hauteur vient d’une règle de padding ou d’une hauteur de ligne héritée est évaluée sur ce que vous voyez plutôt que sur la propriété qui l’a produite.
Les barres en dégradé comptent aussi
Le test de couleur accepte une image de fond autant qu’une couleur de fond, et un dégradé CSS est une image de fond. Ainsi, la barre d’accent populaire — une barre courte sous un titre de section passant d’une couleur de marque à une autre — est reconnue et convertie en Divider.
Il vaut toutefois la peine de savoir ce qui se passe ensuite : le Divider d’Elementor accepte une couleur unie, pas un dégradé, donc le widget arrive avec une seule couleur plutôt que le fondu. Si le dégradé compte, c’est l’un des rares cas où conserver l’original sous la forme d’un petit Container stylisé est le meilleur choix.
Quand la ligne n’est pas du tout un élément distinct
Une grande partie des lignes d’une vraie page ne sont pas des éléments. Ce sont des bordures sur autre chose — une border-bottom sous un titre, une bordure supérieure sur un pied de page, une bordure gauche marquant une citation.
Celles-ci ne deviennent pas des widgets Divider, et ne doivent pas. La bordure est une propriété du titre ou du conteneur, et elle est convertie exactement comme telle : un réglage de bordure sur le widget auquel elle appartient. Le résultat visuel est identique et la structure est plus honnête, car la ligne reste attachée à l’élément qu’elle décore. Déplacez le titre et la ligne se déplace avec lui — ce qui ne serait pas vrai si elle avait été séparée en un widget Divider distinct placé en dessous.
Les espaceurs ne sont pas des séparateurs
Une div vide avec une hauteur et sans couleur est un espaceur, et elle échoue volontairement au test de couleur. La transformer en Divider dessinerait une ligne que votre design n’a jamais eue — un changement visible, et le pire type de changement, car il semble intentionnel.
Les espaceurs suivent plutôt les règles normales des wrappers : un div sans effet de style est réduit, et un div portant une hauteur minimale survit comme Container avec cette hauteur. Si vous préférez avoir un widget Spacer explicite, c’est un échange rapide dans l’éditeur — et une bonne idée pour tout ce que vous prévoyez d’ajuster de façon responsive plus tard, car le widget Spacer propose des contrôles de hauteur par appareil.
Conseil pour la source
Si vous voulez qu’un séparateur soit converti proprement, donnez-lui une couleur de fond explicite et une petite hauteur plutôt que de dépendre d’un pseudo-élément. Les pseudo-éléments tels que ::after ne sont pas de vrais nœuds du DOM, ils ne peuvent donc pas du tout être convertis en widgets — tout ce qui est dessiné avec eux doit être reconstruit manuellement dans Elementor. C’est la raison la plus courante pour laquelle la barre d’accent d’un designer disparaît pendant la conversion : elle n’a jamais été dans le DOM au départ.