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 tomas consciente o inconscientemente es el estilo de color que le vas a dar a tu sitio web. Los valientes entre nosotros se atreverían a optar por una paleta de colores vibrantes pero, seamos honestos, eso es increíblemente difícil de lograr. Por eso, por lo general, es más seguro utilizar un diseño claro u oscuro. En la sección Diseños prediseñados de la Biblioteca Divi, puede encontrar un montón de diseños claros y oscuros que puede usar libremente al crear cualquier tipo de sitio web. Pero, ¿qué pasa si le gusta el diseño, pero prefiere tener una paleta de colores más oscura o viceversa?

Con las funciones de eficiencia de 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á utilizando las técnicas adecuadas. 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á hacerlo funcionar para cualquier diseño con el que esté tratando.

¡Hagámoslo!

Avance

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

Subir página de destino de Freelancer web

Agregar una nueva página y habilitar Visual Builder

Comience agregando una nueva página, asigne un título a su página y cambie a Visual Builder.

Cargar paquete de diseño Web Freelancer

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

Busque la página de inicio del Web Freelancer Layout Pack en la lista de paquetes de diseño gratuitos y cárguela 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

¡Es hora de empezar! El primer paso que le recomendamos que dé es cambiar el color de fondo de todas las secciones de su 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.

Extienda el 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

Abra el módulo de encabezado de ancho completo y cambie el color del texto

El siguiente paso que debe realizar 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 elija 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.

Amplíe 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 mediante 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 de control / comando en 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 de apertura 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 lo vamos a extender a los otros botones de la página también. 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'.

Amplíe 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'.

Extienda los 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 haya seleccionado la opción 'Extender el color del texto del botón dos', 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

Determine 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 los iconos
• Colores del divisor
• ...

Utilice 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 la 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'.

Usar 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 manualmente la configuración que ocurre una sola vez

Sin embargo, también hay configuraciones de diseño recurrentes únicas 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.