Ajustar colores y tipografías
Los colores y las tipografías de web son seguramente los elementos visuales que más definen su carácter. Te explicamos en este artículo cómo ajustarlos en Mybooking Cloud o en un sitio hecho con alguna de nuestras plantillas prediseñadas
Tabla de contenidos
- 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
- Configurar las tipografías
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 del cliente. 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 los estados hover 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 haga 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 aspecto del menú en dispositivos móviles y el de los elementos desplegables si tenemos secciones anidadas en nuestra navegación.
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
El footer es un elemento importante de todo sitio web pues permite añadir los datos de contacto o navegación secundaria que permita acceder a otras secciones de tu web, como la información legal o los artículos de tu blog.
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:
Configurar las tipografías
La elección de una fuente adecuada para la tipografía de tu sitio web puede ser la diferencia entre presentar un aspecto profesional o amateur. Nuestro consejo es que, si no tienes experiencia en diseño o no cuentas con una persona especializada en tu equipo, dejes los ajustes por defecto tal y como están.
En caso de que quieras cambiar el estilo de la tipografía que muestra tu sitio web, Mybooking Theme te proporciona un listado de fuentes disponible vía Google Fonts que puedes asignar tanto a los titulares como al cuerpo del texto.
Para asignar una tipografía ves a Apariencia -> Personalizar -> Mybooking Theme -> Tipografía:
Si has instalado una de nuestras plantillas prediseñadas usando nuestro plugin gratuito Mybooking Template Importer es posible que tengas que revisar los ajustes de Elementor para que las fuentes se sincronicen con los ajustes de Mybooking Theme.
En el menú de WordPress ves a Elementor -> Ajustes y activa la opción Desactivar fuentes por defecto:
