05 Jun Cómo añadir CSS solo en el editor de Elementor
Recientemente hemos estado experimentando nuevas posibilidades al desarrollar plantillas y herramientas internas para proyectos de clientes basados en WordPress, utilizando el plugin de Elementor.
Durante este proceso, nos hemos enfrentado a un desafío interesante: cómo mantener la facilidad de edición proporcionada por el panel de administración de WordPress y Elementor, al mismo tiempo que incorporamos elementos interactivos más avanzados que podrían estar ocultos al cargar la página inicialmente. Aquí es donde nos encontramos con una particularidad del editor de Elementor:
Como Elementor usa la misma hoja de estilos de nuestro tema, algunos de estos elementos también se ocultan en la vista de edición del propio Elementor
Aunque esta información no está documentada oficialmente por Elementor, hemos descubierto un truco bastante útil. Resulta que cuando estamos en el editor, Elementor inserta una clase css llamada .elementor-editor-active en la etiqueta <body>.
Esta clase nos permite agregar estilos personalizados en el css para mostrar o resaltar elementos de diseño especiales que deben permanecer ocultos en el sitio público. De esta manera, podemos preservar la capacidad de editar el texto utilizando el editor visual.
Es importante tener en cuenta que, al hacer esto, no tendremos una coincidencia exacta de estilos entre la vista de edición y el sitio público, sin embargo, puede resultar bastante útil en determinados casos.
Sin comentarios