En este tutorial aprenderás a configurar un color distinto para los enlaces del menú de navegación en la página de inicio cuando usas el tema Astra en WordPress. Esto es útil si quieres que tu menú contraste mejor con una imagen o vídeo de fondo en la portada, pero que en el resto del sitio se mantenga el color habitual.
🔧 Paso 1: Acceder al personalizador de WordPress
- Inicia sesión en tu WordPress.
- En el menú lateral izquierdo, haz clic en Apariencia ▸ Personalizar.
- Se abrirá la vista previa en vivo del personalizador de Astra.
🎨 Paso 2: Ir a los ajustes de cabecera de Astra
- Dentro del personalizador, localiza la sección Constructor de encabezado.
- Haz clic en Menú principal para entrar en la configuración del menú de navegación.
🌈 Paso 3: Configurar colores globales del menú
- En el apartado de Colores, establece el color de los enlaces tal y como quieras que se vean en el resto del sitio (no la portada).
- Por ejemplo, puedes elegir negro (#000000) o un gris oscuro.
- Guarda los cambios con Publicar.
🖼️ Paso 4: Activar el encabezado transparente en la portada
- Vuelve al menú principal del personalizador.
- Haz clic en Encabezado transparente.
- Marca la casilla Activar en portada.
- Guarda los cambios con Publicar.
🎯 Paso 5: Configurar colores del menú solo para la portada
- Dentro del apartado Encabezado transparente, busca la sección de Colores del menú.
- Cambia el color de los enlaces a uno que contraste con tu fondo de portada (ejemplo: blanco #FFFFFF si tu portada tiene fondo oscuro).
- Configura también el color al pasar el ratón (hover) para mantener una buena usabilidad.
- Previsualiza los cambios en móvil, tablet y escritorio.
⚙️ Paso 6: Revisar y publicar
- Haz clic en Publicar para guardar definitivamente la configuración.
- Abre tu web en una ventana de incógnito.
- Comprueba que en la portada los enlaces del menú se ven en el nuevo color, y en el resto de páginas aparece el color global que configuraste en el Paso 3.
📋 Checklist final
- Color de enlaces global configurado en el menú principal.
- Encabezado transparente activado solo en la portada.
- Colores de enlaces personalizados dentro del encabezado transparente.
- Comprobación en escritorio, tablet y móvil.
- Verificación en la portada y en otras páginas.
Con estos pasos ya tendrás un color de menú distinto en la portada con Astra, mientras que en el resto de tu sitio web se mantendrá el color habitual. 🎉
.
Categoría: Tema Astra