El diseño de elementos en el Editor de Elementor V4 se basa en la idea de las clases. Para obtener mås información sobre las clases en V4, consulte Clases en Elementor.
Trabajar con clases tiene muchas ventajas, especialmente la oportunidad de reutilizar elementos, lo que hace que su trabajo sea mås råpido y eficiente. Sin embargo, el uso de clases puede, a veces, significar que estå añadiendo estilos conflictivos a un elemento. Por ejemplo, un elemento de pårrafo puede tener una clase que establezca el color del texto en verde y otra clase que establezca el color del texto en rojo. ¿Cómo determina el Editor qué color usar?
Priorizar clases e identificar conflictos
En el siguiente ejemplo, usaremos dos clases:
- Red_text: Esta clase estĂĄ configurada para poner el texto en rojo.
- Green_text: Esta clase estĂĄ configurada para poner el texto en verde.
Para aprender a crear clases, consulte Clases en Elementor.
Para demostrar la prioridad de clase y la identificaciĂłn de conflictos, vamos a crear un elemento de muestra.
- Añada un elemento de pårrafo al lienzo.
Como no hemos aplicado estilo al pĂĄrrafo, usarĂĄ el color de texto predeterminado: negro.
- Haz clic en la pestaña Estilo.
La parte superior de la pestaña Estilo tiene el cuadro de texto Clases. El cuadro de texto Clases contiene los nombres de todas las clases que se aplican al elemento. Ahora mismo, la Ășnica clase que se aplica al elemento es Local.
Local es una clase especial. Cada elemento tiene una clase local que se aplica solo a ese elemento. En este punto, no hemos añadido ningĂșn estilo a la clase local, por lo que el elemento PĂĄrrafo estĂĄ usando la configuraciĂłn predeterminada.
Ahora vamos a añadir algo de color al texto.
- En el cuadro de texto Clases, añada la clase Red_text.
El texto se vuelve rojo porque usa el color establecido por la clase Red_text.
Ahora, vamos a ver los indicadores. Los indicadores le muestran qué ajustes se estån utilizando para su elemento. 
- Abra el campo TipografĂa y mire el ajuste Color del texto. El punto indicador es verde, lo que muestra que este es el ajuste que se utilizarĂĄ.
Ahora vaya a la clase local y mire el ajuste TipografĂa.
Hay un punto gris junto a Color del texto. Eso muestra que este elemento contiene una clase diferente que establece el color del texto. 
- Volveremos al cuadro de texto Clases y añadiremos la clase Green_text.
Observe que, a pesar de que añadimos la clase Green_text después de la clase Red_text, se desplaza a la izquierda de la Red_class. Las clases de la izquierda siempre tienen prioridad sobre las clases de la derecha. Esto significa que la clase local siempre tendrå la måxima prioridad, ya que siempre es la clase situada mås a la izquierda. 
Para entender por qué, haga clic en el icono del Administrador de clases para abrir el Administrador de clases. Para obtener mås información, consulte El Administrador de clases del Editor de Elementor. 
Observe que Green_text estĂĄ por encima de Red_text, lo que significa que tiene prioridad sobre Red_text. Cualquier elemento con Green_text y Red_text adoptarĂĄ los ajustes de Green_text.
Si miramos los ajustes de TipografĂa para cada clase, veremos:
- En la clase Red_text hay un punto naranja junto a Color del texto
. Esto muestra que hay otra clase que anula el ajuste para esta clase.
- En la clase Green_text hay un punto verde junto a Color del texto
. Esto muestra que este es el color utilizado en este elemento.
- En la clase local hay un punto gris junto a Color del texto
. Esto muestra que este elemento tiene otra clase que determina este ajuste, pero no entra en conflicto con esta clase.
Por Ășltimo, veamos quĂ© ocurre cuando editamos la clase local.
- En TipografĂa, cambie el Color del texto.
El texto cambia a ese color porque la clase local siempre tiene la mĂĄxima prioridad. El indicador junto a Color del texto se vuelve rosa, lo que indica que este color es local y tiene la mĂĄxima prioridad.
A continuaciĂłn, se muestra un grĂĄfico de indicadores y lo que significan:
| Indicador | Lo que significa |
| Rosa | Valor establecido por la clase local. Nunca se puede anular. |
| Verde | Este ajuste estĂĄ actualmente determinado por esta clase. Esto se puede cambiar reorganizando las prioridades de clase. |
| Gris | Este ajuste estĂĄ actualmente determinado por otra clase. |
| Naranja | Este ajuste estĂĄ actualmente determinado por una clase diferente. Esto se puede cambiar reorganizando las prioridades de clase o se puede anular mediante la clase local. |
Identificar qué clase se estå utilizando
Los indicadores explicados anteriormente le muestran dónde hay conflictos, pero también pueden proporcionar información mås exacta. Haga clic en un indicador y una ventana emergente explica exactamente qué estilo estå utilizando y qué estilo(s) estå ignorando.
Usaremos las clases del ejemplo anterior para ver cĂłmo funciona.
- Arrastre un elemento de pĂĄrrafo al lienzo.
- Cree las clases Red_text y Green_text como se mencionĂł anteriormente.
AsĂ es como deberĂa verse el campo Clases.
- En el panel, abra el campo TipografĂa.El indicador junto a la palabra TipografĂa muestra que hay algĂșn conflicto en los campos de tipografĂa.Note
Una ventana emergente muestra el nombre de las clases en conflicto. Las propiedades de la clase que no se estĂĄ utilizando estĂĄn tachadas.
Las capacidades de edición responsiva del editor le permiten establecer diferentes clases para diferentes tamaños de pantalla. Como ejemplo, estableceremos diferentes tamaños de fuente para ordenadores de escritorio y móviles.
- Añada un elemento de pårrafo al lienzo e introduzca algo de texto.
- Abra el campo TipografĂa.
- En el contador Tamaño de fuente, introduzca 14.
- Haga clic en el icono del mĂłvil.
- Abra el campo TipografĂa y establezca el tamaño del texto en 24.
- Haga clic en el indicador junto a Tamaño de fuente.
- La ventana emergente muestra qué tamaño de fuente se utiliza para móviles y cuål para ordenadores de escritorio. Como estamos en modo móvil, la propiedad del escritorio estå tachada.
