El editor de Elementor estå diseñado para ayudar a los creadores web a trabajar de forma råpida y eficiente. Como parte de esa misión, el editor adopta los principios del diseño atómico. Este sistema se basa en la idea de crear elementos pequeños y reutilizables. En Elementor, estos elementos se denominan clases. Esto estå en consonancia con el vocabulario utilizado por CSS.
Como beneficio adicional, el uso adecuado de las clases también puede mejorar el rendimiento de su sitio web.
Crear una clase
La creación de clases se realiza automåticamente. Lo hace cada vez que añade un elemento al lienzo. Cuando añade un elemento al lienzo, las opciones del elemento aparecen en el panel izquierdo. En la parte superior de la pestaña Estilo, verå el campo Clase con la clase local ya rellenada. Ahora puede añadir nuevas clases al elemento siguiendo este proceso:
- Introduzca un nombre de clase en el cuadro de texto.
AparecerĂĄ un menĂș desplegable.
- Seleccione el nombre de la clase en Añadir nueva clase global.
Editar una clase
Después de crear una clase, necesita editarla para establecer sus propiedades.
Para editar una clase:
- Cree la clase.
- Compruebe el campo de clases de CSS. La clase que estĂĄ editando serĂĄ rosa si es una clase local. De lo contrario, serĂĄ verde. Cuando la clase es rosa o verde, estĂĄ editando esa clase.
¿Qué es una clase?
Una clase es bĂĄsicamente una colecciĂłn de caracterĂsticas de estilo compartidas. Por ejemplo, si estĂĄ creando un sitio web y quiere que el texto estĂĄndar de todo el sitio utilice la fuente Arial de 12 puntos, puede crear una clase llamada Texto principal con estas caracterĂsticas. De este modo, cada elemento que tuviera la clase Texto principal, utilizarĂa Arial de 12 puntos como fuente.
La clase local
En Elementor, cada elemento tiene al menos una clase: la clase local. Esta clase define el elemento particular con el que estĂĄ trabajando. Es importante tener en cuenta que, aunque todos los elementos tienen una clase local, la clase local puede ser diferente para cada elemento. Por ejemplo, puede tener un widget de texto que utilice la fuente Arial en su clase local y otro widget de texto que utilice Calibri en su clase local. 
JerarquĂa de clases
La otra cosa importante a tener en cuenta sobre las clases, es que funcionan por jerarquĂas. Si las clases se contradicen entre sĂ, el Editor sabe quĂ© caracterĂsticas tienen prioridad. Por ejemplo, si un elemento contiene dos clases, una que establece la fuente en Arial y otra que establece la clase en Calibri, el editor necesita determinar cuĂĄl tiene prioridad. Esta prioridad se establece en el administrador de clases. Sin embargo, la clase local siempre tiene la mĂĄxima prioridad. Por lo tanto, en el caso anterior, si la clase local establece la fuente en New Time Roman, el elemento usarĂa la fuente New Times Roman.
Ejemplo de construcciĂłn de clases
En este ejemplo, veremos cĂłmo crear un sitio web que incluirĂĄ varios botones. Para ahorrar tiempo y mejorar el rendimiento, crearemos dos clases: una para definir los botones importantes y otra para definir los botones secundarios.
- Crea una pĂĄgina en el Editor de Elementor.
- Arrastre un widget de botĂłn al lienzo.
Las opciones aparecen en el panel.
- En el panel, haga clic en la pestaña Estilo.
- En el cuadro de texto Clases, junto a local, introduzca Main_button.
- En el menĂș desplegable, seleccione Crear nuevo âMain_buttonâ.
BotĂłn principal aparece en el cuadro de texto Clases.
Tenga en cuenta que el texto Main_button estĂĄ en verde. Eso significa que estĂĄ editando esa clase.
- Abre el campo Tamaño.
- DĂ© al botĂłn una anchura de 200 PX y una altura de 50 PX.
- Abra el campo Fondo.
- Seleccione un color para el botĂłn. Para obtener mĂĄs informaciĂłn, consulte Pestaña Estilo – Fondo.
Ahora vamos a crear una clase para los botones secundarios.
- En el cuadro de texto Clases, borre Main_button.
Tenga en cuenta que el botĂłn vuelve a su configuraciĂłn predeterminada.
- En el cuadro de texto Clases, introduzca Secondary_button.
- En el menĂș desplegable, seleccione Crear nuevo âSecondary_buttonâ.
Tenga en cuenta que el texto estĂĄ en verde, lo que significa que estĂĄ editando la clase.
- Abre el campo Tamaño.
- DĂ© al botĂłn una anchura de 100 PX y una altura de 50 PX.
- Abra el campo TipografĂa.
- Establezca el tamaño de la fuente en 12.
- Abra el campo Fondo.
- Seleccione un color para el fondo. AsegĂșrese de que sea diferente al fondo de Main_button.
Ahora pruebe los resultados. - Añada un nuevo elemento de botón al lienzo.
- Abra la pestaña Estilo.
- Haga clic en el cuadro de texto Clases y seleccione Main_button en el menĂș desplegable.
El botĂłn deberĂa adoptar las caracterĂsticas de la clase Main_button.
- Haga clic en el cuadro Clases y seleccione BotĂłn secundario en el menĂș desplegable.
El botĂłn tendrĂĄ la mayorĂa de las caracterĂsticas de la clase BotĂłn principal. Esto se debe a que la clase BotĂłn principal estĂĄ mĂĄs arriba en la jerarquĂa de clases. Sin embargo, la fuente del botĂłn adopta el estilo de la clase BotĂłn secundario. Esto se debe a que nunca definimos la tipografĂa del BotĂłn principal, por lo que la clase BotĂłn secundario determina el estilo de la fuente.
- En el cuadro Clases, haga clic en los tres puntos junto a Secondary_button.
- Seleccione Eliminar en el menĂș desplegable.
El cuadro Clases de CSS ahora deberĂa contener solo las clases local y Main_button. Observe que el tamaño de la fuente vuelve al tamaño predeterminado porque la clase Secondary_button ya no estĂĄ.
Ahora digamos que queremos personalizar este botĂłn para que parezca un botĂłn principal, pero que tenga una caracterĂstica adicional: cambia de color cuando los visitantes lo sobrevuelan.
- Haga clic en los tres puntos junto a la clase local y seleccione Hover en el menĂș desplegable.
Al editar la clase local, podemos cambiar el estilo de este botĂłn sin cambiar otros botones con la clase BotĂłn principal.
Hover es lo que se llama un estado. Cuando lo selecciona, determina el aspecto que tendrĂĄ el botĂłn cuando los visitantes pasen el ratĂłn por encima. Para obtener mĂĄs informaciĂłn, consulte Estados de los elementos.
- Abra el campo Fondo.
- Seleccione un color de fondo diferente.
Observe que cuando mueve el cursor sobre el botĂłn, cambia de color.
