Cómo agregar modo oscuro al elementor

En este tutorial, agregaremos un modo frontal oscuro a un sitio web elemental. El contenido de este artículo sigue de cerca los pasos descritos en la publicación general “Cómo agregar la forma oscura a WordPress” hace unos meses, pero adapté todo aquí para mostrarle cómo puede agregar rápida y fácilmente una forma oscura. a un sitio web de Elementor.

Si no sabe cuál es el modo oscuro, piense en su dispositivo iOS, página de Facebook o navegador Reddit. Todas estas interfaces de usuario le permiten cambiar entre un esquema de color UI “normal” y un esquema de color “oscuro”.

El modo Dark Source es una ventaja para su sitio, ya que facilita la lectura por la noche, usando menos batería del dispositivo y simplemente se ve genial. Ha ganado mucha más popularidad en los últimos dos años, porque la mayoría de las principales aplicaciones y plataformas han agregado su propio “modo nocturno”. Si ha creado un sitio web con Elementor, es relativamente fácil agregar un modo nocturno al frente. El editor ya tiene un modo de fondo oscuro, ahora, es hora de agregar esta funcionalidad al frente. Cuando se trata de agregar el modo oscuro a WordPress y Elementor, hay dos componentes principales. En primer lugar, es la interfaz real que usará para cambiar entre los dos esquemas de color, y en segundo lugar son los colores que se aplicarán cuando se cambie el modo oscuro.
Encontrar los colores en la forma oscura El primer paso para agregar el camino oscuro al elemento es encontrar/generar los colores del modo oscuro. Nos gusta usar un sitio web gratuito llamado Color Hunt para encontrar paletas de colores oscuras que podamos integrar fácilmente en nuestro sitio. Por ejemplo, si el fondo es blanco, la versión en su forma oscura sería negra. La coloración del texto generalmente se convierte en blanco o gris claro, y los colores de acento generalmente se mantienen igual si operan en ambos fondos.
Estos son algunos de nuestros colores cuando hacemos formas oscuras para los sitios de elementos: lea nuestra guía a Coolors.co aquí. Planificación del modo oscuro Una vez que se haya dado cuenta de los colores del modo oscuro, es útil planificar los elementos elementales que realmente se modificarán al activar el modo oscuro. En algunos casos, ya hay fondos oscuros que no deben cambiarse, y en otros casos tendrá que cambiar las imágenes, fuentes y colores de fondo general. Por lo general, después de identificar los elementos que necesitan cambiar su color cuando se cambie el modo oscuro, les asignaremos una ID personalizada utilizando la pestaña “Avanzada” de los editores de elementos.
Agregar el modo oscuro al elementor
“Página normal”

“Página oscura”

Este aspecto de la página es una plantilla de elementos Envato. Para agregar realmente el modo oscuro al elemento, usaremos un complemento de WordPress diseñado para esta tarea. Por supuesto, puede hacer esto con JavaScript y CSS (que es esencialmente lo que hace este complemento), pero al hacerlo le ahorra mucho tiempo y esfuerzo. A partir de nuestras pruebas, no hay una degradación visible del rendimiento al incorporar el modo oscuro en el sitio. La placa se llama modo Noche WP y está disponible de forma gratuita en el almacén de WordPress. Hay algunas otras ofertas, aunque el modo NIGHT WP es, con mucho, el más fuerte y extensible (¡sin mencionar, es gratis!).
Este complemento ofrece las dos cosas principales que necesita cuando agrega una forma oscura a un sitio web elemental. En primer lugar, le permite colocar un interruptor de conmutación en el modo oscuro en cualquier lugar de su sitio mediante un código corto. En segundo lugar, le permite definir qué colores se aplicarán en cualquier lugar del sitio al cambiar este modo oscuro. Después de la instalación, agregue el interruptor de modo oscuro a su sitio elemental. Esto se hace agregando un accesorio en cualquier lugar. En este ejemplo, agregaremos el código corto a la parte superior de la página (solo para fines demostrativos), pero el encabezado Elemental Pro es útil para las aplicaciones de producción del modo oscuro en Elementor.

Idioma del código: JSON / JSON con comentarios (JSON) También puede colocar el código corto en una barra lateral o directamente en el menú utilizando este complemento. El complemento viene con cuatro estilos de conmutación construidos que puede elegir especificando en el código corto.
Idioma de código: JSON / JSON con comentarios (JSON)
Una vez que haya colocado el interruptor, es hora de aplicar el estilo de la oscuridad en su sitio primero, abra la personalización e implemente la coloración básica. La pestaña de la noche en personalización le permite cambiar el fondo de su cuerpo, el color del texto, el color del enlace y el color del enlace. Para cambiar cualquier otra cosa, tendremos que usar algunos CSS personalizados, que discutiremos en la próxima sección de este artículo. Para comenzar, complete las opciones de coloración de las aduanas con el esquema de color en el modo oscuro. Incluso puede configurar la noche/modo oscuro para que sea el color predeterminado de su sitio.
Al personalizar, si activa el modo oscuro, verá que se han aplicado algunos cambios, pero el sitio parece un poco roto. Esto se debe al hecho de que el modo nocturno no se puede aplicar a todo lo que el elemento y su tema tienen que ofrecer desde la caja. En cambio, tendremos que hacer algunas especificaciones CSS personalizadas. Aplicación de modo nocturno CSS personalizado en el especificador CSS CSS elemental es lo que hace que este complemento sea tan fuerte. Ni siquiera tiene que saber CSS personalizado para aplicar el modo oscuro al elemento, porque es muy simple y fácil de hacer.

Body.wp-Night-Mode-On .elector-selector {Night Mode Styling}
Su flujo de trabajo es simple: identifique áreas que necesitan tener estilos CSS oscuros y luego aplicar colores. Actualmente, nuestra página parece ligeramente rota con el estilo predeterminado para el modo nocturno (aplicado en el paso anterior). Para limpiar las cosas, especificaremos todo lo que no tiene el modo oscuro aplicado utilizando nuestro CSS personalizado.

El sitio después de aplicar colores en el cliente. Esto se puede agregar a la página, utilizando la configuración CSS personalizada de Elementary a la página, la entrada CSS personalizada en la personalización de WordPress o un tercero como YellowPencil. Puede asegurarse de que sus estilos CSS personalizados solo se apliquen al modo nocturno con el prefijo con los prefijos con “Body.wp-Night-Model”, luego agregando el selector general y finalmente agregando las reglas de estilo. Por ejemplo, esto cambiaría cualquier elemento de fuente que tenga la clase CSS “Clase de elemento” en negro solo cuando se activa el modo nocturno. Body.wp-Night-Mode. } Usaremos YellowPencil y es nuestro complemento recomendado para administrar muchos CSS personalizados con Elementor. Primero, cubriremos el flujo de trabajo de Dev Tools, que es gratuito. Flujo de trabajo para herramientas de desarrollo primero, identifique el selector específico del elemento que necesita cambiar cuando se aplica el modo oscuro. Por ejemplo, todos nuestros títulos no cambian su color al aplicar el estilo predeterminado para el modo nocturno. Para asegurarnos de que lo hacemos, usaremos CSS personalizado.
Para identificar su selector, puede usar herramientas de desarrollo o lápiz amarillo. Con las herramientas de desarrollo, haga clic con el botón derecho en el elemento que necesita cambiar para el estilo en modo oscuro y haga clic en “Inspeccionar el elemento”.
Aquí puede ver que nuestro encabezado es especificado por el selector H2 y la clase CSS personalizada “. Tites de cabeza” para cambiar esto en blanco cuando el modo oscuro se activa en nuestro sitio elemental, simplemente haremos una regla CSS así: Body.wp-Night-Mode-On H2. Element-Heading-Title {color: #fff; } En esencia, dice que la clase de título del título elemental será blanca cuando se active el modo oscuro. Cuando el modo oscuro está deshabilitado, este estilo no se aplicará. Luego observamos todas las reglas de estilo CSS en el modo oscuro en una hoja de estilo de escritorio, utilizando la herramienta de código gratuita de Microsoft Visual Studio. Por lo general, aplicaremos el estilo de selectores generales, como H1, H2, H3 o Sección o Div, y Div, y Div, y Div, Luego lo ajustaremos finamente utilizando la clase única que se atribuye a cada elemento elemental. Por ejemplo, si queremos cambiar el color de fondo de una determinada columna en el elemento, todo lo que tenemos que hacer es identificar su clase CSS única.

De esa clase CSS única, generamos nuestra regla CSS:
Cuerpo .wp-night-mode. }
Lenguaje del código: CSS (CSS) Nuevamente, esta regla está escrita en nuestra hoja de estilo contenida en el código de Visual Studio. Con el modo oscuro en el elemento, generalmente solo cambiamos el color de fondo o el color de texto. El flujo de trabajo continúa hasta que se construye la hoja de estilo. Firefox DevTools para identificar el selector de elementos, frente al código para escribir CSS. Luego lo copiamos y lo pegamos directamente a la entrada CSS personalizada bajo el aspecto de personalización y la prueba para ver si nuestro modo nocturno/oscuro ahora se aplica a todos los elementos del sitio. Además, si desea reducir la “identificación de una clase única” para este flujo de trabajo, puede especificar su propia clase ID o CSS directamente en el editor elemental, luego generar el modo oscuro en ese selector. Flujo de trabajo Yellowpencil Nuestra agencia usa YellowPencil como una forma de administrar CSS personalizado para nuestros sitios de elementos y quería mostrarle cómo se incorpora esto en nuestro flujo de trabajo al agregar el modo oscuro al elemento. Con YellowPencil, puede indicar y hacer clic en ciertos elementos, y completará automáticamente su editor CSS con ese selector. Si está interesado, eche un vistazo a este artículo: Yellowpencil nos ahorra durante mucho tiempo y hace que sea muy fácil aplicar y administrar una gran cantidad de CSS personalizados. Ni siquiera tiene que escribirlo, ya que esta herramienta tiene una interfaz visual con el usuario que genera automáticamente CSS a partir de sus entradas.

El estilo de fondo se establece con una interfaz gráfica, y el código CSS se genera y se aplica automáticamente.

Haga clic en el elemento que se volverá a restar en el modo nocturno.


Después de generar el código base, asegúrese de prefijarlo con Body.wp-Night-Mode-On, haga clic en Guardar y aplicar a su sitio web. Reglas CSS comunes para el modo oscuro para el elemento que puede cambiar la mayoría de sus títulos principales simplemente:
Cuerpo .wp-night-mode-on h1, cuerpo .wp-night-mode-on h2, cuerpo .wp-night-mode-on h3, cuerpo .wp-night-mode-on h4, cuerpo .wp-night- MODE-ON H5, cuerpo .wp-night-mode-on h6 {color: #fff}
Idioma de código: CSS (CSS) Puede cambiar los antecedentes de las secciones especificando todas las secciones para cambiar:
Body .wp-Night-Mode-On Sección {Color de fondo: #2F374A}

Idioma de código: CSS (CSS) Puede hacerlo con columnas y otros selectores.

Body .wp-Night-Mode-on.-element-column {Background-Color: #2F374A}
Idioma de código: CSS (CSS) Selectores comunes Elementor CSS incluye:

altura primaria
imagen primaria
widget de elementor
El botón del elemento
A El elementor le gusta usar SPAN, por lo que puede abordar elementos que se ven así,
Observe el oscuro “resaltar”
Con:
Body .wp-Night-Mode-On Span {Background-Color: #2F374A}
Lenguaje de código: CSS (CSS) También puede establecer los efectos de paso del mouse (aunque querrá ser específico de sus selecciones):
Body .wp-Night-Mode-on Span: Hover {Background-Color: Pink}
Lenguaje del código: CSS (CSS) Si las imágenes funcionan contra el fondo oscuro, puede dejarlas en paz, pero a menudo tiene imágenes oscuras que deben cambiarse. Aborde las imágenes en el elemento de modo oscuro utilizando una colección de métodos. En primer lugar, simplemente puede cambiar el color de fondo (como lo hice en el ejemplo anterior). También puede aplicar el filtro CSS Invest (1) para revertir completamente los colores. Esto es genial si tiene un PNG sólido con un fondo transparente. Al dar un paso más allá, puede incorporar tanto brillo como filtro invertido y cambiar su PNG con un fondo transparente. Filtro: Brillo (0) Invest (1)
Lenguaje de código: HTTP (HTTP) también puede reemplazar la imagen original (opacidad, pantalla o visibilidad) y usar la imagen de fondo en su recubrimiento para reemplazarla con algo nuevo. Además, solo es encontrar los selectores para cada uno de los elementos que necesita para cambiar el estilo al aplicar el modo oscuro en el elemento, escribir la regla CSS y luego agregarlo a su sitio de WordPress. Tutorial de YouTube Si está interesado, aquí está nuestro tutorial de YouTube. No se crea especialmente para el elemento, pero le dará una presentación general y lo ayudará a ver el proceso de agregar una forma oscura a la interfaz de su elemento.

Conclusión Esperamos que este artículo haya sido útil y que le haya enseñado cómo agregar un modo de front-end oscuro a un sitio web elemental.Para obtener más lecturas, puede consultar este artículo, aunque contiene la misma información (no adaptada para el elemento).Aplicamos este efecto en muchos sitios web de clientes, por lo que si tiene preguntas específicas, no dude en contactar en nuestra sección de comentarios. Abon y distribuir
Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.
Dar la baja en cualquier momento.No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.