Modo oscuro en Elementor V4: variables globales y sin parpadeo
Modo oscuro en un sitio Elementor V4: redefine las variables globales, elige el modo antes de pintar y usa un botón accesible con aria-pressed.
Servicio · Desarrollo con Elementor
Desarrollo con Elementor Pro, incluido lo que necesita código
Construyo y arreglo sitios con Elementor: plantillas de Theme Builder, estilos globales, funciones a medida como plugins y shortcodes, y el trabajo de rendimiento y accesibilidad que el editor no cubre.
=== Desarrollo con Elementor ===
- Construyo:
- páginas, plantillas de Theme Builder, estilos globales
- Amplío:
- con plugins a medida, shortcodes y un tema hijo
- Versiones:
- Elementor Pro, incluido el editor atómico V4
- También:
- modo oscuro, dos idiomas, Core Web Vitals
- Cotización:
- fija, por proyecto
- Respuesta:
- en menos de 24 horas
Qué recibes
-
Plantillas y un sistema de diseño
Plantillas de header, footer y entradas en Theme Builder, con colores, tipografías y espacios como variables y clases globales, para que un cambio actualice todo el sitio.
-
Funciones que Elementor no trae
Lo que el editor no ofrece, escrito como plugins y shortcodes pequeños que se insertan en una página: datos en vivo, búsquedas y filtros, integraciones con API.
-
Rendimiento
Fuentes servidas desde el propio servidor, imágenes del tamaño correcto y caché de página que no rompe los formularios, con Core Web Vitals medidos antes y después.
-
Accesibilidad
Enlace de salto, estilos de foco, etiquetas de formulario y contraste, corregidos en un tema hijo donde el editor se queda corto.
Sitios con Elementor en los que he trabajado
Este sitio es uno de ellos: lo rehíce en 2026 con los elementos atómicos V4 de Elementor, variables globales y clases globales.
- V4 elementos atómicos, variables globales y clases globales, con los que está hecho este sitio
- EN + ES un diseño en dos idiomas, con Polylang y Theme Builder
- Claro + oscuro los dos modos con las mismas variables globales
Cómo funciona
-
Envíame el sitio o el diseño
Una URL, un archivo de Figma o una lista de lo que falla. Te respondo en menos de 24 horas con preguntas o una primera lectura.
-
Cotización cerrada y plan
Recibes un precio fijo, el alcance y los plazos antes de empezar, sin sorpresas en la factura.
-
Desarrollo en staging
Trabajo sobre una copia de staging y te comparto avances que puedes revisar, nunca sobre tu sitio en vivo.
-
Pruebas, lanzamiento y entrega
Revisión en móvil, navegadores, accesibilidad y rendimiento, y notas de qué se puede editar sin riesgo y qué es código.
Preguntas frecuentes
- ¿Trabajas con el nuevo editor de Elementor (V4)?
- Sí. Este sitio está hecho con los elementos atómicos V4 de Elementor, variables globales y clases globales. También trabajo en sitios hechos con los widgets anteriores.
- ¿Puedes agregar una función que Elementor no tiene?
- Casi siempre, sí. La escribo como un plugin pequeño y la agrego a la página como shortcode, para que no dependa del editor. En el sitio de Moynihan Train Hall, que usa Elementor Pro, rehíce con código a medida la herramienta en vivo de trenes de Amtrak y LIRR.
- Nuestro sitio con Elementor está lento. ¿Puedes arreglarlo?
- Muchas veces. Primero mido y después corrijo lo que señalan los números: fuentes, imágenes, caché y scripts sin uso. Antes de cotizar, te digo qué puede cambiar un arreglo y qué no.
- ¿Nuestro equipo puede seguir editando después?
- Sí, esa es la idea. Los estilos viven en variables y clases globales, y dejo notas de qué se puede editar sin riesgo y qué es código.
Cómo lo he hecho antes
Artículos del blog, con el código y las decisiones detrás.
-
-
Plugins con shortcodes en Elementor: cuándo y cómo crearlos
Cuándo conviene un shortcode en vez de un widget de Elementor y cómo escribirlo para validar, escapar, cargar assets solo al usarse y guardar en caché.
-
De 92 a 99 en móvil: Core Web Vitals en un sitio Elementor
Cómo llevé la home de un sitio Elementor V4 de 92 a 99 en Lighthouse móvil: dos familias de fuentes locales, una precarga bien hecha e imágenes con tamaño.
¿Tienes un proyecto así?
Vas a trabajar directamente conmigo, Rolando Escobar: desarrollador WordPress senior que trabaja con equipos de EE. UU. desde 2019. Cuéntame qué necesitas y te respondo en menos de 24 horas con preguntas o una cotización fija.
Cuéntame sobre tu proyecto rolando@rolandowp.com
¿Tienes una agencia? Mira cómo trabajo con tu marca. Otros servicios: Figma a WordPress, plugins e integraciones y accesibilidad (WCAG 2.1 AA).
Cuéntame sobre tu proyecto
Un sitio nuevo, un plugin o un sitio que necesita mantenimiento: escríbeme unas líneas. Te respondo en menos de 24 horas.