Los diseñadores rara vez usan una línea horizontal simple. Un separador suele ser un div vacío con una altura y un fondo, o una barra de acento corta bajo un título. Reconocerlos mantiene limpio tu árbol de Elementor en lugar de llenarlo de contenedores vacíos.
Qué se reconoce como divisor
Un <hr> siempre se convierte en un widget Divisor (Divider). Además, un <div> o <span> vacío se trata como divisor cuando:
- no contiene texto ni elementos de contenido reales,
- se muestra como una barra fina: poca altura, y claramente más ancho que alto,
- y tiene de verdad un color visible, ya sea un fondo o un borde superior/inferior.
El caso vacío y sin color se excluye a propósito. Un div espaciador en blanco sin color no es un separador, y convertirlo en una línea visible añadiría algo que tu diseño nunca tuvo.
Qué se traslada
El color de la línea y su grosor, leídos del borde cuando lo hay y, si no, del color de fondo y la altura renderizada. Una barra de acento corta que es claramente más estrecha que su contenedor recibe además un ancho y una alineación explícitos, de modo que una barra de 78px bajo un título sigue siendo una barra de 78px en lugar de estirarse por toda la columna.
Por qué importa más de lo que parece
Sin esto, cada línea decorativa se convierte en un contenedor vacío con fondo: un nodo de tu árbol que parece un elemento de maquetación pero no lo es. Multiplícalo por cada sección de una página larga y el mapa de estructura se vuelve difícil de leer. Convertirlas en widgets Divisor mantiene el árbol honesto sobre qué es maquetación y qué es decoración.
Editar después
El Divisor de Elementor ofrece más que una línea simple: estilos además del sólido (punteado, discontinuo, patrones), un texto o icono opcional en el centro, y controles de ancho y separación. Una vez que una línea es un widget Divisor real, todo eso está a un clic, algo que no ocurre con un div vacío de color.
Los umbrales exactos
Una versión más vaga de esta regla daría falsos positivos en media página, así que la prueba es deliberadamente estricta. Un <div> o <span> vacío solo se convierte en Divisor cuando mide al menos 12px de ancho, no más de 8px de alto y es al menos tres veces más ancho que alto, además de tener un color visible.
Cada número cumple una función. El mínimo de 12px descarta los pequeños puntos decorativos y los artefactos de 1px que aparecen alrededor de los bordes. El máximo de 8px es lo que separa una línea de una barra: por encima de eso estás ante un bloque de color, que corresponde a un contenedor donde puedes poner cosas dentro. La proporción 3:1 descarta los cuadrados pequeños: una muestra de color de 6×6 supera las dos primeras pruebas, pero es evidente que no es un separador.
Las medidas se toman del elemento tal como se renderiza realmente, no de la hoja de estilos, así que una barra cuya altura viene de una regla de padding o de un line-height heredado se juzga por lo que se ve y no por la propiedad que la produjo.
Las barras con degradado también cuentan
La prueba de color acepta una imagen de fondo además de un color de fondo, y un degradado CSS es una imagen de fondo. Así, la popular barra de acento (una barra corta bajo el título de una sección que va de un color de marca a otro) se reconoce y se convierte en un Divisor.
Conviene saber qué pasa después, eso sí: el Divisor de Elementor admite un color sólido, no un degradado, así que el widget llega con un único color en lugar de la transición. Si el degradado importa, es uno de los pocos casos en los que es mejor conservar el original como un pequeño contenedor con estilo.
Cuando la línea no es un elemento independiente
Buena parte de las líneas de una página real no son elementos. Son bordes de otra cosa: un border-bottom bajo un título, un borde superior en un pie de página, un borde izquierdo que marca una cita.
Estas no se convierten en Divisores, y no deben hacerlo. El borde es una propiedad del título o del contenedor, y se convierte exactamente en eso: un ajuste de borde en el widget al que pertenece. El resultado visual es idéntico y la estructura es más honesta, porque la línea sigue unida a lo que decora. Si mueves el título, la línea se mueve con él, algo que no ocurriría si se hubiera separado en un widget Divisor independiente colocado debajo.
Los espaciadores no son divisores
Un div vacío con altura y sin color es un espaciador, y no pasa la prueba de color a propósito. Convertirlo en un Divisor dibujaría una línea que tu diseño nunca tuvo: un cambio visible, y del peor tipo, porque parece intencionado.
Los espaciadores siguen en cambio las reglas normales de los envoltorios: uno sin ningún efecto de estilo se fusiona, y uno con min-height se conserva como contenedor con esa altura. Si prefieres un widget Espaciador (Spacer) explícito, es un cambio rápido en el editor, y una buena idea para todo lo que pienses ajustar de forma responsive más adelante, ya que el widget Espaciador tiene controles de altura por dispositivo.
Consejo para el código fuente
Si quieres que un separador se convierta limpiamente, dale un color de fondo explícito y una altura pequeña en lugar de depender de un pseudoelemento. Los pseudoelementos como ::after no son nodos reales del DOM, así que no se pueden convertir en widgets de ninguna manera: todo lo que se dibuja con ellos hay que reconstruirlo a mano en Elementor. Esta es la razón más habitual por la que la barra de acento de un diseñador desaparece durante la conversión: nunca estuvo en el DOM.