Cómo implementar un cambio de modo oscuro en su sitio Divi

El modo oscuro continúa creciendo en popularidad como una opción conveniente para que los usuarios experimenten la web con menos tensión en los ojos. Seamos realistas, todos tendemos a pasar más tiempo mirando pantallas de lo que probablemente deberíamos, por lo que cualquier comodidad 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 están llevando 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 funcionalidad de alternar el modo oscuro, tendrá control sobre el diseño del modo oscuro y tendrá una mejor experiencia de usuario adaptada a su marca.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Aquí está el conmutador de modo oscuro personalizado que construiremos.

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

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

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Construyendo el interruptor de modo oscuro

En esta primera parte del tutorial, vamos a crear un conmutador de modo oscuro con una página en Divi. Una vez que se crea el conmutador con el código, podrá guardarlo en la Biblioteca Divi y agregarlo a cualquier lugar de su sitio web.

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

Agregar publicidad

Para crear el conmutador personalizado, vamos a diseñar un módulo publicitario con un poco de CSS personalizado.

Agregue un nuevo módulo publicitario a la fila.

Contenido

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

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 px

  • Ancho: 50px
  • Alineación del módulo: centro
  • Altura: 25px

  • Margen: 0px inferior
  • Esquinas redondeadas: 4px
  • Ancho del borde: 2px
  • Color del borde: #666666

CSS personalizado

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

01
overflow: visible !important;

Luego agregue el siguiente CSS personalizado al elemento After:

01
02
03
04
content: "light";
position: absolute;
left: -35px;
top:0px;

Esto agrega una etiqueta al módulo de publicidad que cambiaremos de «claro» a «oscuro» al hacer clic.

Diseño de cuerpo de texto

Dado que el texto en el pseudo-elemento posterior hereda los estilos de texto del cuerpo, podemos agregar los estilos de texto del cuerpo usando las opciones de Divi de la siguiente manera:

  • Fuente del cuerpo: Roboto
  • Color del cuerpo del texto: #666666
  • Tamaño del cuerpo del texto: 13px
  • Espaciado entre letras del cuerpo: 1px

Adición de código personalizado con un módulo de código

Para agregar el código necesario (CSS/JQuery) para que el modo oscuro funcione como su magia, usaremos un módulo de código.

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

Luego pegue el siguiente código en el cuadro de código:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<style>
/**
 * 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;
}
</style>
<script>
  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 Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.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");
      }
  });
</script>

Agregar las clases de CSS personalizadas

El código personalizado requiere que tenga una Clase CSS personalizada agregada al módulo de propaganda o alternar. Esto permitirá que la publicidad active el cambio de modo oscuro y la funcionalidad al hacer clic.

Clase de módulo de Blurb

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

  • Clase CSS: et-dark-alternar

Clase con capacidad para el 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 tenga la clase CSS, ese elemento heredará el CSS personalizado de «modo oscuro» en el código que agregamos una vez que se haya activado el modo oscuro. Este método nos brinda más control sobre nuestro diseño de modo oscuro, ya que es posible que algunos elementos no requieran ningún estilo de modo oscuro.

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

Abra la configuración de la sección y agregue la siguiente clase CSS:

  • Clase CSS: et-dark-mode-capaz

Parte 2: agregar la funcionalidad del modo oscuro a una página Divi

Ahora que tenemos el código y las clases CSS 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, vamos a utilizar nuestro diseño prefabricado de la página de destino 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.

A continuación, seleccione el diseño de la página de destino de la aplicación móvil en la pestaña de diseños prefabricados.

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

Dado que el estilo de modo oscuro solo se aplicará a los elementos con la clase CSS «et-dark-mode-capable», 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 a lo largo de la página (esto sería más rápido que hacer cada uno 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 en todo el sitio, agregando la 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 editar los valores predeterminados de la sección global. Luego podemos agregar la Clase CSS y guardarla como una Clase CSS para todas las secciones en todo el sitio.

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

Para este ejemplo, vamos a actualizar los elementos de la página agregando la clase CSS a los valores predeterminados globales de las secciones y módulos de texto. Y también haremos algunas adiciones a los 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 interruptor de modo oscuro. Luego edite los valores predeterminados globales para la sección y agregue la siguiente clase CSS a los valores predeterminados globales de la sección:

  • Clase CSS: et-dark-mode-capaz

Todas las secciones de especialidad

Agregue la clase CSS a los valores predeterminados globales de la sección de especialidad también.

Módulos de texto

A continuación, 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 globales de texto.

Blurbs

A continuación, abra la configuración de uno de los anuncios publicitarios en el diseño de página y agregue la clase CSS a los valores predeterminados globales de Blurb.

Columnas Testimoniales

Más abajo en el diseño de la página, hay algunos testimonios, cada uno dentro de una columna con un fondo blanco personalizado. Para anular los estilos de columna en modo oscuro, agregue la clase CSS a una de las columnas y extiéndala a las otras columnas dentro de la fila.

NOTA: No es una buena idea agregar la Clase CSS a los valores predeterminados globales de la columna porque eso romperá algunos de los elementos de diseño (es decir, no es una buena idea dar a todas las columnas un fondo oscuro cuando la mayoría de las veces los fondos de las columnas son transparentes).

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

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

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

Parte 3: agregar el conmutador de modo oscuro a un encabezado global

Si desea ampliar la funcionalidad del modo oscuro en todo el sitio, sería una buena idea agregar el interruptor de modo oscuro a su Divi Global Header. De esa manera, estará disponible para los usuarios de todo el sitio en un lugar conveniente.

Guardar el modo oscuro y el código en la biblioteca Divi

Pero antes de hacer eso, debemos guardar el cambio de modo oscuro y el código en la Biblioteca Divi. Esto hará que sea más fácil agregar a otras áreas de nuestro sitio, incluido el encabezado global.

Regrese al diseño que construimos con Divi desplegado en la parte delantera. A continuación, abra el menú del módulo de publicidad utilizado para crear el modo oscuro y seleccione Guardar en la biblioteca. Asigne un nombre al diseño y guárdelo en la biblioteca.

A continuación, guarde también el módulo de código en la Biblioteca Divi.

Importación de una plantilla de encabezado global prefabricada

Si aún no tiene un encabezado global, deberá crear uno propio o usar uno de nuestros paquetes de creación de temas prefabricados.

Para este tutorial, vamos a utilizar el encabezado global incluido en el quinto paquete de creación de temas . Para agregar el encabezado global usando el generador de temas, deberá descargar el paquete del generador de temas y luego usar las opciones de portabilidad para importar el archivo JSON llamado «divi-theme-builder-pack-5-default-website-template.json» .

Una vez que se haya cargado la plantilla, haga clic para editar el encabezado global.

Luego, agregue el interruptor de modo oscuro de la biblioteca a la columna 1 en la segunda fila del encabezado.

Debajo del módulo de cambio/borrador de modo oscuro, agregue el módulo de código que ha guardado en la biblioteca directamente debajo del cambio de modo oscuro.

Dado que tenemos la clase CSS «et-dark-mode-capable» como predeterminada para todas las secciones, las secciones dentro del encabezado también la tendrán de forma predeterminada. Para deshabilitar esto, simplemente dale una clase CSS superior.

Resultados finales

Estos son los resultados finales de nuestra página de alternar el modo oscuro.

Y aquí está el cambio de modo oscuro en el encabezado. El modo seleccionado (oscuro o claro) permanecerá mientras navega a otras páginas del sitio.

Ajuste de los estilos de modo oscuro CSS personalizados

Si desea ajustar el estilo del modo oscuro de los elementos de alternar o Divi, deberá hacerlo dentro del código dentro del módulo de código.

Actualmente, el código solo tiene un estilo de modo oscuro básico aplicado a cada uno de los elementos una vez en modo oscuro. Este consta de un color de fondo oscuro y un color de texto claro.

Pensamientos finales

Equipar su sitio Divi con un modo oscuro personalizado puede ser una excelente manera de impulsar la UX y crear un diseño completamente nuevo que agrade y alivie la vista. Con suerte, te resultará útil.

Espero escuchar de usted en los comentarios.

¡Salud!

Publicaciones relacionadas:

  1. Cómo crear un título de modo de fusión dividida con Divi
  2. Cómo recrear los filtros de color, efectos y ejemplos de modo de fusión con Divi (Parte 2)
  3. Cambio acumulativo de diseño (CLS): qué es y cómo optimizar su sitio web para ello
  4. 5 maneras en que Divi cambió mi negocio (y mi vida)