Cómo cambiar a un diseño oscuro en 5 pasos usando las funciones de eficiencia de Divi

Al diseñar un sitio web, una de las primeras decisiones que toma consciente o inconscientemente es el estilo de color que le va a dar a su sitio web. Los valientes entre nosotros se atreverían a optar por una paleta de colores vibrantes completa pero, seamos honestos, eso es increíblemente difícil de lograr. Es por eso que generalmente es más seguro ir con un diseño claro u oscuro. En la sección Diseños prefabricados de la Biblioteca Divi, puede encontrar una tonelada de diseños claros y oscuros que puede usar libremente al crear cualquier tipo de sitio web. Pero, ¿qué sucede si le gusta el diseño, pero prefiere tener una paleta de colores más oscura o viceversa?

Usar las funciones de eficiencia en Divi , pasar de un paquete de diseño claro a oscuro y viceversa, es más fácil que nunca. En esta publicación, le mostraremos cómo puede convertir un diseño claro en uno oscuro en solo 5 pasos. La cantidad de tiempo que se necesita para hacer esta transición es increíblemente baja si estás usando las técnicas correctas. Sepa que la cantidad de pasos que debe seguir siempre dependerá del diseño en el que esté trabajando, pero una vez que obtenga el enfoque general, podrá hacer que funcione para cualquier diseño con el que esté tratando.

¡Hagámoslo!

Avance

En solo 5 pasos, vamos a cambiar la página de inicio clara del Web Freelancer Layout Pack a una oscura.

Cargar la página de inicio de Freelancer web

Agregue una nueva página y habilite Visual Builder

Comience agregando una nueva página, dándole un título a su página y cambiando a Visual Builder.

Cargue el paquete de diseño Web Freelancer

De las tres opciones que aparecen en su pantalla, elija cargar un diseño prefabricado.

Busque la página de inicio del paquete de diseño Web Freelancer en la lista de paquetes de diseño gratuitos y cárguelo haciendo clic en el botón verde que dice «Usar este diseño».

Paso 1: cambiar el color de fondo general

Cambiar el color de fondo de la sección de la primera sección

¡Hora de empezar! El primer paso que te recomendamos dar es cambiar el color de fondo de todas las secciones de tu página. Una vez que lo haga, podrá notar rápidamente qué elementos de diseño deben cambiarse para que coincidan con el color de fondo oscuro. Abra la primera sección de la página y elija ‘#0c0c0c’ como color de fondo de la sección.

Extender estilo a todas las secciones

Tan pronto como agregue el color de fondo, haga clic derecho sobre él y haga clic en la opción ‘Extender color de fondo’.

Una vez que lo haga, elija extender el color de fondo a todas las secciones de la página.

Paso 2: cambiar los colores del texto

Abrir módulo de encabezado de ancho completo y cambiar el color del texto

El siguiente paso que debe tomar es cambiar los colores del texto que se están utilizando. Como puede que sepa o no, hay una opción predeterminada en Divi que le permite elegir una paleta de colores claros u oscuros para el texto de su página. Sin embargo, una vez que elige un color personalizado, esta opción se reemplaza con el color personalizado que ha elegido. En lugar de verificar cada uno de los elementos para ver si hay un color personalizado allí, continúe y elija ‘Claro’ como color de texto en el Módulo de encabezado de ancho completo.

Extienda el estilo a todos los módulos

Luego, extienda este color de texto claro haciendo clic derecho y seleccionando la opción ‘Extender color de texto’.

Extienda este nuevo color a todos los módulos a lo largo de toda la página.

Cambiar colores personalizados usando la función de selección múltiple

Como se mencionó anteriormente, el paso anterior no se aplicará a los colores que se hayan elegido de antemano. Los módulos de alternancia, por ejemplo, tienen un color de texto de título personalizado. En lugar de modificar cada uno de los conmutadores individualmente, selecciónelos todos a la vez usando la tecla control/comando de su teclado y haciendo clic en cada uno de los módulos individualmente. Una vez que los haya seleccionado todos, haga clic en el icono de configuración.

Ahora, puede hacer que los cambios se apliquen a cada uno de los módulos seleccionados al mismo tiempo. En este caso, cambiaremos el color del texto del título a ‘#848484’.

Paso 3: cambiar botones

Configuración del botón abierto uno del encabezado de ancho completo

Es importante asegurarse de que las llamadas a la acción en su página sigan coincidiendo con la paleta de colores del diseño. En este caso, tenemos un módulo de botones que se ve muy bien tanto en un diseño claro como oscuro. Es por eso que también lo extenderemos a los otros botones de la página. Continúe y abra el Módulo de encabezado de ancho completo y vaya a la configuración del Botón uno.

Extender el estilo del botón a todos los botones de la página

Luego, haga clic con el botón derecho en la configuración del Botón Uno y seleccione la opción ‘Extender Estilos del Botón Uno’.

Extienda el estilo del botón a todos los botones de toda la página.

Cambiar el color del texto del botón 2 en la sección Hero

La función de extensión no llega al segundo botón del Módulo de encabezado de ancho completo porque no es un módulo independiente. Es por eso que vamos a abrir la configuración del Botón Dos y cambiar el color del texto a ‘#ffffff’.

Extender estilos a todos los encabezados de ancho completo en la página

Para asegurarnos de que este color de texto se aplique a todos los Módulos de encabezado de ancho completo en la página, también lo ampliaremos.

Una vez que haya hecho clic con el botón derecho en el color del texto y seleccionado la opción ‘Extender botón dos colores de texto’, continúe y haga que se aplique a todos los encabezados de ancho completo en toda la página.

Paso 4: elimine el margen personalizado y reemplácelo con relleno personalizado

Eliminar margen personalizado

Al cambiar a un diseño oscuro, también es importante eliminar todos los valores de margen personalizados que traen espacios en blanco a su página.

Utilice relleno personalizado en su lugar

Sin embargo, puede mantener la distancia que había antes agregando el margen personalizado como relleno personalizado.

Paso 5: busque y cambie la configuración de diseño especial

Determinar la configuración de diseño especial

El último paso que deberá realizar es muy específico para cada uno de los diseños. Los elementos de diseño que son exclusivos de un diseño también deben cambiarse. Esto puede incluir, entre otros, algunos de los siguientes ajustes:

  • Sombras de caja
  • Fondos de columna
  • Colores de iconos
  • Colores del divisor

Use Buscar y reemplazar en el color de sombra del cuadro de fila

Para este diseño en particular, una de las cosas que necesitaremos cambiar es el color de sombra del cuadro de fila que se está utilizando. Abra la configuración de la fila y haga clic con el botón derecho en la sombra del cuadro sin cambiarla. Luego, seleccione la opción ‘Buscar y reemplazar’.

El uso de la función Buscar y reemplazar es la mejor manera de hacerlo si desea cambiar un código de color específico en toda la página. Puede reemplazarlo fácilmente con otro código de color, en este caso ‘#33302f’. Esto asegurará que no tenga que explorar todos los elementos de diseño para ver exactamente dónde se ha utilizado un color.

Cambiar la configuración que ocurre una sola vez manualmente

Sin embargo, también hay configuraciones de diseño recurrentes de una sola vez dentro de los diseños. Para cambiarlos, tendrás que hacerlo manualmente. La fila en la pantalla de impresión a continuación, por ejemplo, tiene un color de sombra de cuadro que no se ha utilizado en ninguna otra parte de la página. Es por eso que lo estamos cambiando manualmente a ‘#33302f’.

Avance

Echemos un vistazo final al resultado final después de seguir los cinco pasos.

Pensamientos finales

En esta publicación, lo guiamos para convertir un paquete de diseño claro en uno oscuro en solo 5 pasos. La cantidad de pasos que debe seguir siempre dependerá del diseño en el que esté trabajando, pero en general, el enfoque sigue siendo el mismo. Si tiene alguna pregunta o sugerencia, ¡háganoslo saber en la sección de comentarios a continuación!