Cambiar los colores de tu sitio web
Los sitios web en MybookingCloud están confeccionados usando el tema Mybooking Theme para WordPress y el diseñador de páginas Elementor, por está razón debás hacer los ajustes de color en dos partes.
- Paleta de colores de Mybooking
- Paleta de colores de Elementor
- Cambiar el color de la navegación
- Los colores de la cabecera
- Ajustar los colores del footer
Paleta de colores de Mybooking
Mybooking Theme cuenta con una paleta de colores predeterminados que nos ayudan a personalizar algunas partes del tema como los botones , la navegación, el pie de página y otros elementos destacados. Estos ajustes se controlan en los apartados correspondientes del panel Personalizar donde encontramos la paleta principal.
Para cambiar los colores de paleta principal vamos a Apariencia > Personalizar > Mybooking Theme > Colores:
El color primario se corresponde con el color de branding. Usaremos este ajuste para definir el color principal de los botones de los formularios, las tarjetas del catálogo, los resultados de la búsqueda y los pasos del proceso de reservas:
Las variaciones controlan el color al pasar el cursor para algunos botones como el del selector de fechas y el aspecto de los steps. El color secundario controla el aspecto del mensaje destacado en la página de resultados:
En la configuración general, también puedes hacer ajustes secundarios como el color del fondo de la página, el color de los titulares y el del cuerpo del texto. A menos que lo necesites, puedes dejar esos colores por defecto pues ya están ajustados para que tu sitio web se legible.
Paleta de colores de Elementor
Cuando cambies los colores en la paleta de de Mybooking Theme observarás que algunos elementos de la página no varían, esto se debe a que estos están diseñado usando el plugin Elementor.
Este plugin nos permite hacer diseños profesionales en nuestro sitio web y añade herramientas extra y una pantalla de edición desde la que, entre otras cosas, podemos controlar los colores.
Para ajustar los colores de la paleta de Elementor haz lo siguiente:
- En el menú Páginas de tu WordPress selecciona una página y haz clic en
Editar con Elementor
- En la esquina superior izquierda de la pantalla de edición, haz clic en el icono con tres rayas horizontales.
- Haz clic en Ajustes del sitio y a continuación en Colores globales
- Para modificar un color haz clic sobre el e inserta el código HEX o escoge uno en el selector
Cambiar el color de la navegación
Mybooking Theme te permite cambiar el color de los elementos del menú principal situado en la parte superior de las páginas de tu sitio web y también el aspecto de estos al pasar el ratón por encima o cuando están activos.
Para modificar los colores de la navegación ves a Apariencia > Personalizar > Mybooking Theme > Navegación:
En esta sección también se puede configurar el color del menú en dispositivos móviles y el de los elementos desplegables si tenemos secciones anidadas en nuestra navegación.
Si has activado la opción Navegación transparente para que el menú aparezca sobre la foto de la cabecera de la página de inicio, el color fondo no se mostrará en la página principal pero sí en el resto de sitio web.
Los colores de la cabecera
En este apartado puedes configurar el color de los textos que aparecen sobre la fotografía de fondo de la cabecera para adaptarlos a las características de la imagen escogida.
Ves a Apariencia > Personalizar > Mybooking Theme > Cabecera y haz scroll hasta abajo de la sección:
Ajustar los colores del footer
Para configurar el color del texto, los enlaces o el fondo del footer de tu web, ves a Apariencia > Personalizar > Mybooking Theme > Pie de página:
En este apartado también puedes ajustar los colores de la zona de créditos situada bajo el footer:
Preguntas frecuentes
¿Cómo puedo cambiar los colores de las páginas del proceso de reservas?
En este momento la única manera de cambiar los colores es usando código CSS e insertarlo en Apariencia > Personalizar > CSS adicional. Si no sabes cómo hacerlo puedes contratar a un diseñador web o adquirir nuestra bolsa de horas para que lo ajustemos por ti.