Saltar al contenido principal

Cómo implementar el modo oscuro en su sitio con Divi

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

El modo oscuro continúa ganando popularidad como una opción conveniente que permite a los usuarios experimentar la web con menos tensión en la vista. Seamos realistas, todos tendemos a pasar más tiempo mirando las pantallas de lo que probablemente deberíamos, por lo que cualquier conveniencia adicional para la experiencia del usuario (como el modo oscuro) puede ser de gran ayuda. 

Los sistemas operativos, los programas y los navegadores generalmente incluyen capacidades de modo oscuro integradas, pero algunos desarrolladores lo llevan a otro nivel al incluir una experiencia de modo oscuro personalizada para su sitio web. La idea es tener más control sobre cómo se ve su sitio web en modo oscuro sin tener que comprometer la marca y / o el diseño.

En este tutorial, le mostraremos cómo crear un conmutador de modo oscuro personalizado en Divi desde cero sin un complemento. Con esta función de alternancia de modo oscuro, tendrá control sobre el diseño del modo oscuro y tendrá una mejor experiencia de usuario adaptada a su marca.

Vamos a empezar!

vista

Aquí hay una vista previa del diseño que crearemos en este tutorial.

Aquí está el botón de modo oscuro personalizado que vamos a crear.

Alternar el modo oscuro

Y aquí está el antes y el después del modo oscuro aplicado a uno de nuestros diseños predefinidos.

Y aquí está el interruptor de modo oscuro agregado a un encabezado global. Observe cómo permanece el modo claro / oscuro cuando navega por el sitio.

Parte 1: Construyendo el cambio del modo oscuro

En esta primera parte del tutorial, vamos a construir un conmutador de modo oscuro con una página en Divi. Una vez que se haya creado la palanca con el código, podrá guardarla en la biblioteca Divi y agregarla a cualquier lugar de su sitio web.

Para comenzar, agregue una fila de una columna a la sección predeterminada cuando construya desde cero con Divi en la parte frontal.

Sección Divi

Agregar módulo de resumen

Para construir la palanca personalizada, vamos a diseñar un módulo Blurb con un poco de CSS personalizado.

Agregue un nuevo módulo de texto de presentación a la línea.

Contenido

Elimina el contenido ficticio predeterminado para el título y el cuerpo. Luego agregue el ícono cuadrado en lugar de la imagen.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

Módulo resumen Divi

diseño

Vaya a la configuración de diseño y actualice lo siguiente:

  • Color del icono: # 666666
  • Alineación de imagen / icono: izquierda
  • Tamaño de fuente del icono: 22 píxeles
Configuración del icono Divi
  • Ancho: 50px
  • Alineación del módulo: centro
  • Altura: 25px
Configuración de dimensionamiento divi
  • Margen: 0px bajo
  • Esquinas redondeadas: 4px
  • Ancho del borde: 2px
  • Color del borde: # 666666
Configuración de borde Divi

CSS personalizado

Una vez que el diseño esté en su lugar, cambie a la pestaña avanzada. En CSS personalizado, agregue el siguiente CSS personalizado al elemento principal para asegurarse de que el desbordamiento no quede oculto por el estilo de las esquinas redondeadas.

desbordamiento: visible! importante;

Luego agregue el siguiente CSS personalizado al elemento After:

contenido: "luz"; posición: absoluta; izquierda: -35px; arriba: 0px;

Esto agrega una etiqueta al módulo Blurb que cambiaremos de "claro" a "oscuro" al hacer clic.

Botón de alternancia Divi

Diseño del texto del cuerpo

Dado que el texto del pseudoelemento de la publicación hereda los estilos del texto del cuerpo, podemos agregar los estilos del texto del cuerpo usando las opciones de Divi de la siguiente manera:

  • Fuente del cuerpo: Roboto
  • Color del texto del cuerpo: # 666666
  • Tamaño del texto del cuerpo: 13px
  • Espaciado de las letras del cuerpo: 1px.
Botón de alternancia de fuente

Agregar código personalizado con un módulo de código

Para agregar el código necesario (CSS / JQuery) para operar el modo oscuro, usaremos un módulo de código.

Cree un nuevo módulo de código debajo del módulo Blurb en la misma columna.

Agregar módulo de código

Luego pegue el siguiente código en el área de código:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Agregar clases CSS personalizadas

El código personalizado requiere que tenga una clase CSS personalizada agregada al módulo o conmutador de Blurb. Esto permitirá que la propaganda active la función de alternar el modo oscuro y hacer clic.

Clase de módulo de difusión

Abra la configuración del módulo Blurb y agregue una clase CSS personalizada de la siguiente manera:

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

  • Clase CSS: et-dark-toggle
Código divi css

Clase capaz de modo oscuro

También necesitamos agregar una clase CSS personalizada a cada elemento Divi que queremos que tenga la capacidad de modo oscuro. Una vez que el elemento tiene la clase CSS, ese elemento heredará el CSS personalizado del "modo oscuro" en el código que agregamos después de que se habilitó el modo oscuro. Este método nos da más control sobre nuestro diseño de modo oscuro, ya que algunos elementos pueden no requerir estilo en modo oscuro.

Para comenzar, podemos agregar el modo oscuro a la sección que contiene nuestro interruptor de modo oscuro.

Abra los parámetros de la sección y agregue la siguiente clase CSS:

  • Clase CSS: et-dark-mode-able
Sección divi del selector de CSS

Parte 2: Agregar características del modo oscuro a una página Divi

Ahora que tenemos el código CSS y las clases en su lugar, estamos listos para aplicar la funcionalidad y el diseño del Modo Oscuro a una página completa en Divi. Para hacer esto, usaremos nuestro diseño prediseñado de la página de inicio de la aplicación móvil.

Para agregar el diseño, abra el menú de configuración en la parte inferior del generador visual y haga clic en el icono Agregar nuevo diseño.

Luego, seleccione el diseño de la página de destino de la aplicación móvil en la pestaña Diseños predefinidos.

Asegúrese de que la opción "Reemplazar contenido existente" NO esté seleccionada. No desea borrar la sección con el interruptor de modo oscuro.

Elija el diseño divi 1

Dado que el estilo del modo oscuro solo se aplicará a los elementos con la clase CSS "capaz y modo oscuro", podemos elegir agregar a la página de diferentes maneras.

  1. Podemos agregar la clase CSS a cada elemento de la página individualmente.
  2. Podríamos extender la clase CSS a elementos en toda la página (eso sería más rápido que hacerlo manualmente). Por ejemplo, podríamos abrir la configuración de la sección para la sección superior y extender la clase CSS para esa sección a todas las secciones de la página.
  3. Podemos agregar la clase CSS a los valores predeterminados globales del elemento. Esto aplicará la clase CSS a todos los elementos de todo el sitio, agregando capacidad de modo oscuro en todo el sitio. Por ejemplo, podríamos abrir la configuración de la sección y hacer clic en el icono predeterminado global para cambiar los valores predeterminados de la sección global. Luego podemos agregar la clase CSS y registrarla como una clase CSS para todas las secciones del sitio.

Agregar la clase CSS a los elementos de la página

Para este ejemplo, actualizaremos los elementos de la página agregando la clase CSS a los valores predeterminados globales de las secciones y los módulos de texto. Y también haremos algunas adiciones a otros elementos de la página a medida que avanzamos.

Todas las secciones

Para agregar la clase CSS a todas las secciones, abra la configuración de la sección superior que contiene el modo oscuro. Luego, cambie los valores predeterminados globales de la sección y agregue la siguiente clase CSS a los valores predeterminados globales de la sección:

  • Clase CSS: et-dark-mode-able

Todas las secciones especializadas.

Agregue también la clase CSS a los valores predeterminados globales en la sección especializada.

Agregar a todas las secciones especializadas

Módulos de texto

Luego abra la configuración de uno de los módulos de texto en la página y agregue la misma clase CSS a los valores predeterminados de texto global.

Agregar a módulos de texto

Para probar el resultado, vaya a la página en vivo y haga clic en el botón de modo oscuro en la parte superior de la página.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

Así es como debería verse la página en modo claro.

Modo claro

Y así es como debería verse la página en modo oscuro.

Modo oscuro

Recursos Adicionales

Aquí hay algunos otros recursos que pueden ser de su interés.

Consideraciones finales

Equipar su sitio Divi con un conmutador de modo oscuro personalizado puede ser una excelente manera de mejorar la experiencia del usuario y crear un diseño completamente nuevo que agrada y alivia la vista. Espero que esto te sea de utilidad.

Este artículo contiene los comentarios 0

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
0 acciones
cuota
Tweet
Siguiente