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 Crear una nueva clase.
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 una colecciĂłn de caracterĂsticas de estilo compartidas. Por ejemplo, si estĂĄ creando un sitio web y quiere que el texto estĂĄndar en todo el sitio utilice la fuente Arial de 12 puntos, puede crear una clase llamada Texto principal con estas caracterĂsticas. De esta manera, cada elemento con la clase Texto principal, usarĂa Arial de 12 puntos como su 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.
Consejo: Lo mejor es construir sus clases para que haya el menor nĂșmero posible de conflictos. Estos conflictos no solo pueden hacerle perder el tiempo, sino que tambiĂ©n pueden ralentizar su sitio.
Ejemplo de construcciĂłn de clases
En este ejemplo, veremos la construcciĂłn de un sitio web que incluye varios botones. Con el fin de ahorrar tiempo y aumentar el rendimiento, crearemos dos clases: una para definir los botones importantes y otra para definir los botones secundarios.
- Cree una pĂĄgina en el editor de Elementor.
- Arrastre un widget de botĂłn al lienzo.
Las opciones aparecen 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 âbotĂłn principalâ.
Main_button aparece en el cuadro de texto Clases.
Tenga en cuenta que el nombre de la clase Main_button estĂĄ en verde. Eso significa que estĂĄ editando esa clase.
- Abra 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 mĂĄs detalles, consulte Pestaña Estilo – Fondo.
Ahora vamos a crear una clase para los botones secundarios. - En el cuadro de texto Clases de CSS, borre BotĂłn principal.
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 âBotĂłn secundarioâ.
Tenga en cuenta que el nombre de la clase estĂĄ en verde, lo que significa que estĂĄ editando la clase.
- Abra 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 es diferente al fondo del botĂłn principal.
Ahora vamos a probar los resultados.
- Añada un nuevo elemento de botón al lienzo.
- Abra la pestaña Estilo.
- Haga clic en el cuadro de clases de CSS y seleccione BotĂłn principal en el menĂș desplegable.
El botĂłn deberĂa adoptar las caracterĂsticas de la clase BotĂłn principal.
- Haga clic en el cuadro de clases de CSS 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 de clases de CSS, haga clic en los tres puntos situados junto a BotĂłn secundario.
- Seleccione Eliminar en el menĂș desplegable.
El cuadro de clases de CSS ahora deberĂa contener solo las clases local y BotĂłn principal.
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 situados junto a la clase local.
Al editar la clase local, podemos cambiar el estilo de este botĂłn sin cambiar otros botones con la clase BotĂłn principal.
- Seleccione Hover en el menĂș desplegable.
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.
- Abra el campo Fondo.
- Seleccione un color de fondo diferente.
Observe que cuando mueve el cursor sobre el botĂłn, cambia de color.
