En esta sesión nos centraremos en personalizar la cabecera o el header de nuestra página web.

Nuestro objetivo será hacer que esta cabecera se parezca más a un diseño específico. Aunque no lograremos una réplica exacta sin usar CSS y estilos avanzados, intentaremos aproximarnos al diseño deseado lo máximo posible.

Paso 1: Ajustes Generales

1. Accede al escritorio de WordPress.
2. Ve a Ajustes > Generales y cambia el nombre del sitio. Ejemplo: "Solo 30".
3. Guarda los cambios y recarga la página para visualizar el ajuste.

Paso 2: Opciones de Astra

1. Accede a Apariencia > Opciones de Astra.
2. Haz clic en Maquetador de Cabeceras. Esto te llevará al personalizador de WordPress.
3. Dentro del personalizador, selecciona la opción Cabecera Global.

Paso 3: Personalización del Logotipo y Título

1. En la cabecera, selecciona Título y Logotipo del Sitio.
2. Sube el logotipo de tu sitio:
   • Ajusta el tamaño del logotipo, por ejemplo, 160 píxeles de ancho.
   • Desactiva las opciones de "Mostrar título del sitio" y "Descripción corta" si solo deseas mostrar el logotipo.
3. Configura el favicon:
   • Selecciona y sube el ícono del sitio.

Publica los cambios y verifica que el logotipo y favicon se muestren correctamente.

Paso 4: Configuración del Menú Principal

1. Arrastra el Menú Principal al área deseada de la cabecera.
2. Crea un nuevo menú desde Apariencia > Menús:
   • Nombra el menú como "Principal".
   • Añade elementos como "Cursos", "Charlas" o "Directos".
3. Asigna este menú a la ubicación Menú Principal y guarda los cambios.

Recarga la página para visualizar los cambios.

Paso 5: Ajustes de Diseño

1. Ve a la sección de Diseño en el personalizador:
   • Configura el diseño a Ancho completo o Ancho del contenido según lo necesites.
   • Ajusta los márgenes y rellenos (padding) para eliminar espacios innecesarios.
2. Personaliza el menú:
   • Cambia el color del texto del enlace al color deseado.
   • Ajusta la fuente y el tamaño de letra.
   • Configura el efecto hover (por ejemplo, un color más oscuro al pasar el cursor).

Paso 6: Estilos Personalizados con CSS

Si encuentras limitaciones con las herramientas integradas de Astra, puedes añadir CSS personalizado:

1. Ve a la sección CSS adicional del personalizador.
2. Añade reglas CSS específicas, por ejemplo:

.site-title {
  padding: 0;
  margin: 0;
}
.menu-item {
  line-height: 1.5;
}

3. Guarda los cambios y verifica cómo afectan el diseño.

Consideraciones Finales

Recuerda que temas como Astra están diseñados para crear webs rápidas y funcionales sin necesidad de código. Sin embargo, si necesitas personalizaciones avanzadas, es importante comprender HTML y CSS. Astra Pro ofrece más opciones, pero si buscas un desarrollo completamente a medida, será necesario trabajar con código personalizado.