La creación de maquetas de combinación de colores para sus clientes es un paso importante en el proceso de diseño web. A veces, el cliente puede tener una paleta de colores de la marca de la empresa que puede usar para el sitio. Pero muchas veces, deberá ofrecer algunos esquemas de color sugeridos que cree que se adaptarán a la marca de la empresa y se verán geniales en su sitio web.
Con Divi , puede cambiar fácilmente el esquema de color de cualquier diseño de página utilizando características de diseño como Buscar y reemplazar y sugerencias de color dentro del generador visual. Y también puede crear múltiples versiones de una página (con diferentes esquemas de color) para su cliente.
En este tutorial, lo guiaré a través del proceso de usar Divi para crear nuevas maquetas de esquemas de color para una página de inicio. Con suerte, aprenderás algunos trucos en el camino.
¡Empecemos!
Voy a utilizar el diseño de la página de inicio de Business Coach para este tutorial. Entonces, si aún no lo ha hecho, cree una nueva página e implemente el generador visual. Luego seleccione «Elegir diseño prefabricado». En la ventana emergente Agregar de la biblioteca, seleccione el diseño de la página de inicio de Business Coach.
Una vez que el diseño esté cargado en la página, no olvides publicarlo.
Vamos a utilizar este diseño de página de inicio para crear diferentes maquetas de combinación de colores. Pero por ahora, necesitamos elegir un nuevo esquema de color.
Elegir su combinación de colores
Es posible que ya tenga un esquema de colores en mente, pero si no, puede usar las sugerencias de colores de Divi o un generador de esquemas de colores de terceros. Para obtener más inspiración, puede buscar en la web esquemas de color que funcionen bien para su industria.
Uso de generadores de esquemas de color de terceros para crear su esquema de color
Hay algunos maravillosos generadores de esquemas de color de terceros (y gratuitos) en la web para ayudarlo a elegir el esquema de color perfecto para su sitio. Algunos de mis generadores de paletas de colores favoritos son de Coolers.co , Canva y Adobe .
La mayoría de estos generadores de esquemas de color generarán al menos cinco colores. Asegúrese de guardar todos los colores que necesita para crear su nuevo esquema de color.
Creación de un esquema de color utilizando las sugerencias de color integradas de Divi
Desde el lanzamiento del nuevo administrador de color y las sugerencias mágicas de color de Divi , Divi realiza un seguimiento automático de los colores guardados y usados recientemente, a los que se puede acceder al cambiar una opción de color en Divi Builder. Puede ver cada paleta haciendo clic en la pestaña «Guardado» o «Reciente».
Divi también tiene una herramienta de sugerencia de color simple e inteligente integrada directamente en el generador visual. No voy a entrar en todos los detalles del algoritmo utilizado (no estoy seguro de poder hacerlo), pero en términos generales, Divi generará una paleta de colores complementarios (y análogos) basada en el color base actual (el color seleccionado en la opción). Esto te ayudará a elegir combinaciones de colores armoniosas para tu diseño.
Para ver las sugerencias de color (o color-scape), simplemente haga clic en el icono de color-scape (el que tiene tres puntos) directamente debajo de la opción de color seleccionada. Allí encontrará paletas que se generan a partir de colores complementarios y análogos de sus colores guardados y usados recientemente. Y cada fila tiene un nuevo esquema de color ampliado para cada color en su paleta de colores guardada o reciente.
Aunque esta herramienta de sugerencia de colores está diseñada para ayudar con la selección de colores a nivel de sección, fila y módulo, puede usar fácilmente la paleta de colores sugerida como un nuevo esquema de color para cada página.
Creación de un esquema de color para el diseño de la página de inicio de Business Coach
Ahora comencemos a crear nuevas maquetas de combinación de colores para el diseño de la página de inicio de Business Coach que agregamos a nuestra nueva página anteriormente. Este diseño prefabricado actualmente tiene un esquema de color básico. El color principal es obviamente el azul oscuro que se usa en todas partes. También tiene algunos tonos diferentes de gris como colores de acento. También hay un color blanco estándar para los fondos de contenido y un color negro que se usa para el texto. Entonces, puede imaginar que si reemplaza cada instancia de ese color azul oscuro primario con otro color, tendrá un esquema de color completamente nuevo.
Desde el generador visual, abra la configuración del encabezado de ancho completo en la sección superior del diseño y busque el color de texto del botón uno. Este es el color azul principal que utiliza este diseño. Ahora haga clic en el icono de color-scape para ver las sugerencias de color para ese color azul actual. Se encontrarán en la paleta de colores de la fila superior.
En este punto, puede seleccionar cualquier color de la paleta para ver nuevos esquemas de color, pero para este ejemplo, me quedaré con el primero generado.
Guardar su combinación de colores en la paleta de colores predeterminada
Para hacer las cosas mucho más convenientes en el futuro, querrá actualizar los colores de su nueva paleta de colores para reemplazar la paleta predeterminada de selectores de color en las opciones de tema. De esa manera, sus colores estarán disponibles en la paleta de colores guardada dentro de Visual Builder durante el resto de sus cambios de color.
En una nueva pestaña, navega a Divi > Opciones de tema. Verá la opción de paleta de colores predeterminada en la pestaña General. No existe una manera realmente fácil de copiar la paleta de colores generada a partir de las sugerencias de color para nuestro color azul. Sugiero abrir su página con el generador visual activo en una ventana y las opciones de Divi Theme en otra ventana. A continuación, copie cada código de color en la paleta de colores predeterminada.
Guardar ajustes.
Sugerencia: es posible que no desee reemplazar los primeros dos colores predeterminados (blanco y negro) por la conveniencia de editar texto y fondos más adelante, pero si necesita todos los espacios de color, no dude en usarlos.
La paleta de colores predeterminada no se actualizará en su página actual porque ya ha heredado la paleta de colores predeterminada anterior. Deberá crear una nueva página con el diseño nuevamente para ver la nueva paleta de colores guardada en su configuración.
Si esto es demasiado inconveniente, puede optar por actualizar la paleta de colores predeterminada solo para su página actual. Para ello, abra el menú de configuración y haga clic en el icono Configuración de página. Luego actualice la paleta en la pestaña de diseño.
Esto actualizará la paleta de colores de toda la página sin tener que crear otra página.
La razón por la que elegí actualizar la paleta de colores predeterminada para el tema (en lugar de solo la página) fue para evitar tener que agregar nuevas paletas de colores a cada nueva maqueta de página que crearía.
Uso de Buscar y reemplazar para actualizar los colores de su página
Ahora regrese al diseño de la página de inicio con su generador visual activo y vaya a la opción Color de texto del botón uno en la configuración del encabezado de ancho completo (el mismo lugar donde estaba antes). Ahora su diseño guardado aún no aparece, pero está bien. Asegúrese de que esté seleccionado el color azul oscuro original y luego haga clic en el icono de color-scape para desplegar las sugerencias de color. Esto mostrará nuestro mismo esquema de color en la fila superior.
Seleccione el color marrón oscuro (#54381c).
Luego abra el selector de color para ver el código de color y copie el código de color en su portapapeles resaltándolo y presionando ctrl + C (o Cmd + C).
Como en realidad no queremos hacer el cambio todavía, haga clic en el botón de deshacer púrpura en la parte inferior del modal de configuración para recuperar el color azul original que necesitamos reemplazar.
Ahora haga clic con el botón derecho en el color azul original y haga clic en la opción Buscar y reemplazar.
En la ventana emergente Buscar y reemplazar, pegue el color marrón debajo de «Reemplazar con». Dado que queremos reemplazar el color en toda la página, puede mantener la opción «Dentro de» como «Esta página». Asegúrese de seleccionar la opción «Reemplazar todo» para que el alcance del cambio de color no se limite solo a los colores de texto del botón uno. Luego haga clic en Reemplazar.
No olvides guardar tu configuración.
Ahora echa un vistazo a la nueva combinación de colores.
Ahora continúe y guarde el diseño en su biblioteca Divi abriendo el menú de configuración y haciendo clic en el icono Guardar en biblioteca. Asigne al diseño un nombre como «Marrón» y luego haga clic en Guardar en la biblioteca.
Esto le permitirá implementar esa versión de su diseño en una nueva página.
Agregue su nuevo diseño de esquema de color a una página nueva
Para agregar su diseño guardado con su nuevo esquema de color marrón a una nueva página, primero deberá crear una nueva página. Luego, asigne un título a su página (algo así como «Marrón») e implemente el generador visual. Luego seleccione Elegir un diseño prefabricado. En la ventana emergente Cargar desde biblioteca, haga clic en la pestaña «Sus diseños guardados» y seleccione el nuevo diseño que acaba de guardar en su biblioteca.
No olvides publicar Tu página.
Ahora repita el mismo proceso de crear una nueva página y agregar el diseño guardado a la página. Esta vez nombra tu página «Púrpura».
Una vez que se agrega el diseño a la página, asegúrese de publicarlo. Luego abra el generador visual y abra la configuración de Encabezado de ancho completo y busque el Color de texto del botón uno (como antes). Ahora debería ver que la paleta de colores del tema guardado se ha actualizado con sus nuevos colores. Esto será de utilidad. Haga clic derecho en la opción de color (actualmente el marrón oscuro) y luego haga clic en buscar y reemplazar. Abra el selector de color en «Reemplazar con» para seleccionar un nuevo color de la paleta de colores guardada. Esta vez selecciona el color púrpura (#5a5ae2). Luego seleccione la opción reemplazar todo. Y no olvides guardar tu configuración.
¡Y como magia, tienes un esquema de color púrpura para tu página!
Creación de una maqueta de página de esquema de color avanzado
Con su nuevo esquema de color disponible, es posible que desee experimentar con varios colores en su página. Por ejemplo, puede optar por tener un color diferente para cada sección de su página. Esto también se puede hacer fácilmente con la función «Buscar y reemplazar».
Para esta próxima maqueta, cree una nueva página y nombre su página algo así como «Multicolor». Luego implemente el generador visual, seleccione «Elegir un diseño prefabricado» e importe el mismo diseño guardado (marrón) a la página (tal como lo hizo antes). En el generador visual, abra la configuración de encabezado de ancho completo y busque el color de texto del botón uno (como antes). Haga clic con el botón derecho en el color de texto del botón uno y seleccione «Buscar y reemplazar». Luego actualice lo siguiente:
Dentro de: esta sección
Reemplazar con: #0f1f2e
Seleccione Reemplazar todo
Luego haga clic en el botón Reemplazar.
No olvides guardar la configuración.
Esto se actualiza en la sección del encabezado superior con el esquema de color azul oscuro.
Ahora omita la segunda sección (puede mantener el esquema de color marrón) y vaya a la tercera sección. Busque el botón en la parte inferior de la sección con el título “¿Aún no está seguro? Ponerse en contacto». Abra la configuración del botón, haga clic con el botón derecho en el color de fondo del botón y seleccione «Buscar y reemplazar».
Luego actualice Buscar y reemplazar de la siguiente manera:
Dentro de: esta sección
Reemplazar con: #366ba2
Seleccione Reemplazar todo
Luego haga clic en el botón reemplazar. Y no te olvides de guardar la configuración.
Omita la quinta sección. Luego repita el mismo proceso para reemplazar el color marrón en la sección 6 (la que tiene «Empresas y personas con las que he trabajado») con el mismo color azul oscuro en la primera sección. Puede hacerlo abriendo el módulo de texto con el texto de cita grande en la opción Color de texto de texto.
En la última sección, busque el módulo de texto en la columna de la derecha y abra la configuración del módulo de texto. Haga clic con el botón derecho en el color de fondo y seleccione la opción Buscar y reemplazar. Actualice lo siguiente:
Dentro de: esta sección
Reemplazar con: #5a5ae2 (el color púrpura)
Seleccione Reemplazar todo
Luego haga clic en el botón Reemplazar y guarde la configuración.
Ahora tiene una maqueta de la página de inicio con varios colores en cada sección.
El último paso es crear un nuevo menú principal para facilitar a los clientes la vista previa de cada maqueta de combinación de colores. Desde su panel de WordPress, vaya a Apariencia > Menús. Luego asigne un título a su menú, haga clic en crear menú y agregue las páginas que creó a su nuevo menú. Luego, asegúrese de seleccionar el Menú principal como su ubicación de visualización. Y haga clic en Guardar menú.
Ahora tiene un sitio listo para exhibir sus maquetas de combinación de colores.
Pensamientos finales
Con las opciones de diseño de Divi, puede implementar fácilmente esquemas de color completamente nuevos para sus diseños de página utilizando sugerencias de color integradas y la opción » Buscar y reemplazar » con Visual Builder. Esto lo hará conveniente para mostrar maquetas de diferentes esquemas de color para sus clientes. Espero que este tutorial te ayude a encontrar el esquema de color perfecto para tu próximo proyecto. Espero escuchar de usted en los comentarios.
¡Salud!