Curso WordPress 2021 | 16. Como Modificar el HEADER o CABECERO de nuestra PÁGINA WEB

En esta lección del curso de WordPress personalizamos el header o cabecera: la parte de arriba de la web con el logo y el menú. Todo se hace desde Apariencia → Personalizar (o Personalizar en la barra negra). Las opciones dependen del tema; aquí usamos Astra gratuito.

1. Logotipo y título

1. Cabecera → Identidad del sitio (en versiones recientes de Astra, pulsa sobre el logo en el constructor de cabecera).
2. Seleccionar logotipo → Subir tu logo. Puedes omitir el recorte para dejarlo tal cual.
3. Decide si mostrar el título del sitio y la descripción corta junto al logo. Con logo, a menudo queda más limpio sin ellos.

2. Favicon (icono del sitio)

Es el iconito que sale en la pestaña del navegador y en los resultados de Google en el móvil. En Icono del sitio, sube una imagen cuadrada (mínimo 512 × 512 px) y recórtala.

3. Disposición y ancho

• Elige dónde va el logo (izquierda, centro o derecha) y dónde el menú.
• Ancho del contenido: Ancho completo reparte la cabecera por toda la pantalla; Contenido la deja centrada.
• Borde inferior: una línea bajo la cabecera, con el grosor y color que quieras.
• Menú principal: estilos del menú y submenús. Puedes añadir un buscador como último elemento.

4. Color de fondo de la cabecera

En la versión de Astra del vídeo no había opción para el fondo, así que lo hice con CSS. Hoy Astra lo trae en Cabecera → Diseño → Fondo, pero el truco del CSS te servirá para cualquier cosa:

1. En la web, clic derecho sobre la cabecera → Inspeccionar. Con la flechita del inspector, selecciona la barra completa y mira su clase (en Astra, main-header-bar).
2. En Personalizar → CSS adicional, escribe:

.main-header-bar {
  background-color: #000000;
}

5. Colores globales

En Global → Colores cambia el color del texto (por ejemplo, blanco sobre la cabecera negra) y el color de los enlaces (el del elemento activo del menú). Así toda la web usa la misma paleta.

Pulsa Publicar para guardar. El pie de página (footer) se personaliza igual, desde Personalizar → Pie de página.

En la siguiente lección: que la web se vea bien en móvil y tablet (diseño responsive). ¿Dudas? En los comentarios.