Ajustar los colores del menú
Define los colores de la barra del menú, los submenús, las pestañas, las etiquetas de producto y el botón de agregar al carrito.
Los colores de la pestaña Colores se aplican a todos los elementos del menú, así que puedes adaptarlo a tu marca en un solo lugar.
Cambiar un color
-
Abre la pestaña Colores
En el editor de menús, haz clic en el icono del bote de pintura en la barra lateral izquierda (1).
Abre la pestaña Colores (1) y haz clic en un campo de color (2). -
Elige un color
Haz clic en el campo junto a un color (2). Elige un color o escribe un código hexadecimal como
#FFFFFF. -
Revisa la vista previa
Pasa el cursor sobre los elementos de la vista previa para comprobar los colores al pasar el cursor.
-
Guarda y publica
Haz clic en Guardar y luego en Publicar.
Ajustes de color
Menú principal
- Color de fondo
- El fondo de la barra del menú.
- Hover background color
- El fondo de un elemento de nivel superior al pasar el cursor o mientras su submenú está abierto.
- Separator color
- Líneas divisorias entre elementos, que se muestran cuando Mostrar separador en escritorio o Mostrar separador en móvil están activados en Ajustes del menú.
- Color del texto
- Texto e iconos de los elementos de nivel superior.
- Hover text color
- Texto e iconos de los elementos de nivel superior al pasar el cursor.
Submenú
Menús desplegables, mega menús y su contenido.
- Color de fondo
- El fondo del submenú.
- Border color
- El borde del submenú, que se muestra cuando Mostrar borde está activado en Ajustes del menú.
- Heading color
- Encabezados dentro de los submenús, como los títulos de las listas de enlaces.
- Color del texto
- Enlaces y texto dentro de los submenús.
- Hover text color
- Enlaces del submenú al pasar el cursor.
- Description color
- Texto de descripción bajo los elementos.
- Hover description color
- Texto de descripción al pasar el cursor.
Tab menu
- Heading color
- Nombres de las pestañas.
- Active heading color
- El nombre de la pestaña seleccionada.
- Active background color
- El fondo de la pestaña seleccionada.
Etiqueta
Etiquetas de los productos que se muestran en el menú.
- Sale text color · Sale background color
- La etiqueta de oferta en los productos con descuento.
- Sold out text color · Sold out background color
- La etiqueta de agotado.
Botón Agregar al carrito
Se muestra cuando Mostrar botón Agregar al carrito está activado en Ajustes del menú > Avanzado.
- Color del texto · Hover text color
- Texto del botón, en estado normal y al pasar el cursor.
- Color de fondo · Hover background color
- Fondo del botón, en estado normal y al pasar el cursor.
Solución de problemas
Los elementos son difíciles de leer o desaparecen al pasar el cursor
Asegúrate de que Color del texto contraste con Color de fondo, y Hover text color con Hover background color. Un texto blanco sobre un fondo blanco al pasar el cursor hace que los elementos desaparezcan.
Quiero un elemento de otro color
Usa los ajustes de Color del propio elemento (plan Pro Navigation), por ejemplo para un elemento “Rebajas” en rojo. Consulta Editar un elemento de menú.
¿Te ha sido útil?
¡Gracias por tu opinión! Cuéntanos qué faltaba
Informar de un problema