Cómo implementar un cambio de modo oscuro en su sitio Divi
Publicado: 2020-05-21El modo oscuro continúa creciendo en popularidad como una opción conveniente para que los usuarios experimenten 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 comodidad adicional para la experiencia del usuario (como el modo oscuro) puede ser de gran ayuda. Los sistemas operativos, programas y 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 alternancia de 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 crearemos en este tutorial.
Aquí está el modo personalizado de alternancia que crearemos.
Y aquí está el antes y el después del modo oscuro aplicado a uno de nuestros diseños prediseñados.
Y aquí está el interruptor 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 sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Construyendo la palanca de modo oscuro
En esta primera parte del tutorial, vamos a construir una alternancia 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 Blurb
Para construir el conmutador personalizado, vamos a diseñar un módulo de propaganda con un poco de CSS personalizado.
Agregue un nuevo módulo de propaganda 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: 22px
- Ancho: 50px
- Alineación del módulo: centro
- Alto: 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, salte 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 en el estilo de las esquinas redondeadas.
overflow: visible !important;
Luego agregue el siguiente CSS personalizado al elemento After:
content: "light"; position: absolute; left: -35px; top:0px;
Esto agrega una etiqueta al módulo de propaganda que cambiaremos de "claro" a "oscuro" al hacer clic.
Diseño de texto corporal
Dado que el texto en el pseudo-elemento after hereda los estilos del cuerpo del texto, podemos agregar los estilos del cuerpo del texto 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 entre letras del cuerpo: 1 px
Agregar código personalizado con un módulo de código
Para agregar el código necesario (CSS / JQuery) para hacer que el modo oscuro funcione 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:
<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 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 propaganda active el cambio de modo oscuro y la funcionalidad al hacer clic.
Clase de módulo de propaganda
Abra la configuración del módulo de propaganda y agregue una clase CSS personalizada de la siguiente manera:
- Clase CSS: et-dark-toggle
Clase capaz de modo oscuro
También necesitamos agregar una clase CSS personalizada a cada elemento Divi que queremos que tenga la capacidad del 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 una vez que se haya activado 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 ningún estilo de modo oscuro.
Para comenzar, podemos agregar el modo oscuro a la sección que contiene nuestro interruptor de modo oscuro.
Abra la configuración de la sección y agregue la siguiente clase CSS:
- Clase CSS: et-dark-mode-able
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 prediseñado 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 predefinidos.
Asegúrese de que la opción "Reemplazar contenido existente" NO esté seleccionada. No desea borrar la sección con la palanca de modo oscuro.
Dado que el estilo del modo oscuro solo se aplicará a los elementos con la clase CSS "et-dark-mode-able", podemos optar por agregar a la página de diferentes maneras.
- Podemos agregar la clase CSS a cada elemento de la página individualmente.
- 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 sección para la sección superior y extender la Clase CSS para esa sección a todas las secciones de la página.
- 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 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 de todo el 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 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 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-able
Todas las secciones especiales
Agregue también la clase CSS a los valores predeterminados globales de la sección de especialidad.
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.
Desenfoques
A continuación, abra la configuración de uno de los anuncios en el diseño de página y agregue la clase CSS a los valores predeterminados globales de Blurb.
Columnas de testimonios
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 gran 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 columna son transparentes).
Para probar el resultado, salte 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: Adición de la palanca de modo oscuro a un encabezado global
Si desea extender la funcionalidad del modo oscuro en todo el sitio, sería una buena idea agregar el interruptor del modo oscuro a su Divi Global Header. De esa manera, estará disponible para los usuarios de todo el sitio en un lugar conveniente.
Guardar la palanca y el código del modo oscuro en la biblioteca Divi
Pero antes de hacer eso, necesitamos guardar la alternancia y el código del modo oscuro 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 implementado en el front-end. A continuación, abra el menú del módulo de propaganda 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 el suyo propio o utilizar uno de nuestros paquetes de creación de temas prefabricados.
Para este tutorial, usaremos 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 modo oscuro de la biblioteca a la columna 1 en la segunda fila del encabezado.
Debajo del módulo de alternancia / propaganda del modo oscuro, agregue el módulo de código que ha guardado en la biblioteca directamente debajo de la alternancia del modo oscuro.
Dado que tenemos la clase CSS "et-dark-mode-able" como predeterminada para todas las secciones, las secciones dentro del encabezado también la tendrán por defecto. Para deshabilitar esto, simplemente dele una clase CSS primordial.
Resultados finales
Aquí están los resultados finales de nuestra página de alternancia del modo oscuro.
Y aquí está el 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 alternancia o Divi, deberá hacerlo dentro del código dentro del módulo de código.
Actualmente, el código solo tiene un estilo básico de modo oscuro aplicado a cada uno de los elementos una vez en modo oscuro. Consiste en un color de fondo oscuro y un color de texto claro.
Pensamientos finales
Equipar su sitio Divi con un conmutador de modo oscuro personalizado puede ser una excelente manera de impulsar la UX y crear un diseño completamente nuevo que agrada y al mismo tiempo facilita la vista. Con suerte, le será útil.
Espero tener noticias tuyas en los comentarios.
¡Salud!