27 Oct Cómo modificar el Header y el Footer en WordPress

La cabecera (header) y el pie de página (footer) son dos de las secciones más importantes de cualquier sitio web. La cabecera suele contener el logotipo, el menú de navegación principal y, a veces, información de contacto o un llamado a la acción (CTA). El pie de página cierra el sitio con información de copyright, enlaces secundarios, iconos de redes sociales y, a menudo, información legal o de contacto.

Modificar estas áreas en WordPress puede parecer confuso al principio, ya que existen múltiples formas de hacerlo. El método correcto depende de tu tema, de los plugins que utilices (como editores visuales) y de lo que quieras cambiar exactamente.

Este artículo te guiará a través de los tres métodos principales para editar tu header y footer: 1- El apartado de Menús (Para cambiar los enlaces de navegación); 2- El Personalizador del Tema (El método estándar de WordPress, muy potente en temas modernos); 3- Editores Visuales (Page Builders) (Usando Elementor como ejemplo principal).

Método 1: Modificar los Enlaces con el Apartado de Menús

Este método no cambia el diseño (colores, logo, estructura) de tu cabecera o pie de página, sino el contenido de los menús de navegación que se muestran en ellos. Es la forma más básica y universal.

Cuándo usarlo: Cuando solo necesitas añadir, eliminar o reordenar los enlaces del menú (ej. “Inicio”, “Servicios”, “Blog”, “Contacto”).

Pasos Detallados:

1. Accede al Panel de WordPress: Inicia sesión en tu escritorio de WordPress (normalmente tusitio.com/wp-admin).
2. Ve a Menús: En la barra lateral izquierda, navega a Apariencia > Menús.
3. Selecciona o Crea un Menú:
   • Si ya tienes un menú: Búscalo en el desplegable “Selecciona un menú para editarlo” y haz clic en “Seleccionar”.
   • Si es nuevo: Haz clic en “crea un nuevo menú”, dale un nombre (ej. “Menú Principal”) y haz clic en “Crear Menú”.
4. Añade Elementos al Menú:
   • En la columna de la izquierda (“Añadir elementos al menú”), verás secciones como “Páginas”, “Entradas”, “Enlaces personalizados” y “Categorías”.
   • Marca las casillas de las páginas que quieras añadir (ej. “Inicio”, “Contacto”) y haz clic en “Añadir al menú”.
   • Para añadir un enlace a otro sitio web, usa “Enlaces personalizados”, pon la URL y el “Texto del enlace”.
5. Organiza el Menú:
   • En la sección “Estructura del menú” a la derecha, puedes arrastrar y soltar los elementos para reordenarlos.
   • Para crear un submenú (desplegable), arrastra un elemento ligeramente hacia la derecha, debajo de su elemento “padre”.
6. Asigna la Ubicación (¡Paso Clave!):
   • Debajo de la estructura del menú, verás “Ajustes del menú > Ubicaciones del menú”.
   • Aquí es donde conectas tu menú con el tema. Verás opciones como “Menú principal”, “Menú secundario”, “Menú del pie de página”, etc. (Los nombres exactos dependen de tu tema).
   • Marca la casilla correspondiente. Por ejemplo, para la cabecera, marca “Menú principal” (Primary Menu). Si tienes un menú para el footer, asígnale esa ubicación.
7. Guarda los Cambios: Haz clic en el botón azul “Guardar menú”.

Visita tu sitio web y verás que los enlaces en tu cabecera (o pie de página) se han actualizado.

Método 2: Usar el Personalizador del Tema (Theme Customizer)

Este es el método nativo de WordPress para cambiar el diseño y la estructura de tu sitio, incluyendo el header y el footer. Lo que veas aquí depende al 100% del tema que tengas instalado. Usaremos Astra, uno de los temas más populares, como ejemplo principal.

Cuándo usarlo: Para cambiar el logotipo, los colores, la disposición de la cabecera, el texto de copyright del footer y añadir widgets.

Pasos Detallados (Ejemplo con Tema Astra):

1. Accede al Personalizador: En el panel de WordPress, ve a Apariencia > Personalizar. Esto abrirá una nueva interfaz con una vista previa en vivo de tu sitio a la derecha y las opciones a la izquierda.
2. Busca las Opciones de Cabecera/Footer: En el menú de la izquierda, busca opciones llamadas “Maquetador de cabeceras” (Header Builder) y “Maquetador de pies de página” (Footer Builder). (Otros temas pueden llamarlo “Cabecera”, “Opciones de cabecera”, “Footer”, etc.).

Editando la Cabecera (Header Builder de Astra)

1. Haz clic en “Maquetador de cabeceras”.
2. Verás una cuadrícula visual en la parte inferior de la pantalla. Esta representa tu cabecera, dividida en tres filas (Superior, Principal, Inferior) y varias columnas.
3. Para añadir elementos: Haz clic en el icono + en cualquier ranura vacía y selecciona un elemento (ej. “Logotipo del sitio”, “Menú principal”, “Botón”, “Iconos sociales”, “HTML”).
4. Para mover elementos: Simplemente arrastra y suelta los elementos (ej. “Logotipo del sitio”) de una ranura a otra.
5. Para editar un elemento: Haz clic sobre el elemento (ej. “Logotipo del sitio”) en la cuadrícula. Las opciones para ese elemento aparecerán en el panel de la izquierda.
   • Logotipo: Podrás subir tu imagen de logo, ajustar su ancho y subir un logo diferente para pantallas retina o móviles.
   • Menú principal: Podrás ajustar el diseño, los colores de los enlaces, los efectos “hover” y el diseño del submenú.
6. Para editar el diseño de la fila: Haz clic en el icono de engranaje (⚙️) de la fila (ej. “Barra principal”) para cambiar su altura, color de fondo, bordes, etc.
7. Cuando estés contento, haz clic en el botón “Publicar” en la parte superior.

Editando el Pie de Página (Footer Builder de Astra)

1. Vuelve al menú principal del Personalizador y haz clic en “Maquetador de pies de página”.
2. Funciona igual que el de la cabecera, con una cuadrícula visual.
3. Para añadir widgets: Haz clic en el + y selecciona “Widget 1”, “Widget 2”, etc. Luego puedes hacer clic en ese elemento “Widget” para añadir contenido real (como un menú secundario, un bloque de texto o una lista de entradas recientes).
4. Para editar el Copyright: Por defecto, Astra añade un elemento “Copyright”. Haz clic en él. En el panel izquierdo, puedes editar el texto. Es común usar códigos cortos como [current_year] (para el año actual) y [site_title] (para el nombre del sitio).
5. Ejemplo: Copyright © [current_year] [site_title] | Todos los derechos reservados.
6. Haz clic en “Publicar” para guardar los cambios.

Nota sobre Temas Clásicos (sin Maquetador)

Si tu tema no tiene un “Maquetador” visual, probablemente usarás dos secciones en el Personalizador:

• Cabecera: Opciones para subir el logo y quizás cambiar colores.
• Widgets: Para el pie de página, muchos temas clásicos ofrecen “Áreas de widgets” (ej. “Pie de página 1”, “Pie de página 2”). Deberás ir a Apariencia > Widgets (o a la sección “Widgets” del Personalizador) y arrastrar los widgets que desees (ej. “Texto”, “Menú de navegación”) a esas áreas.

Método 3: Control Total con Editores Visuales (Elementor)

Si usas un page builder como Elementor, especialmente Elementor Pro, puedes saltarte por completo las opciones de tu tema y diseñar tu cabecera y pie de página desde cero, píxel por píxel.

Cuándo usarlo: Cuando quieres un diseño 100% personalizado que el Personalizador de tu tema no te permite hacer. (Requiere Elementor Pro).

Pasos Detallados (Usando Elementor Pro Theme Builder):

1. Accede al Maquetador de Temas: En el panel de WordPress, ve a Plantillas > Maquetador de temas (Theme Builder).
2. Selecciona el Tipo de Plantilla: Verás una interfaz donde puedes gestionar todas las partes de tu sitio (Cabecera, Pie de página, Página individual, Archivo, etc.).

Creando una Nueva Cabecera (Header)

1. En el Maquetador de temas, haz clic en la pestaña “Cabecera” (Header).
2. Haz clic en el botón “Añadir nueva” (o “Add New”).
3. Elige una Plantilla (Opcional): Elementor te ofrecerá una biblioteca de plantillas de cabecera prediseñadas. Puedes insertar una para empezar rápido o cerrar la ventana para diseñar desde cero.
4. Diseña con Widgets: Estarás en el editor de Elementor. Arrastra y suelta los widgets desde el panel izquierdo:
   • Logo del sitio (Site Logo): Añadirá automáticamente el logo que subiste en el Personalizador de WordPress.
   • Menú de navegación (Nav Menu): Añadirá el menú que creaste en “Apariencia > Menús”. Podrás estilizarlo completamente (colores, tipografía, espaciado, puntero, diseño móvil).
   • Botón (Button): Para un CTA como “Solicitar Presupuesto”.
   • Iconos sociales (Social Icons): Para enlazar a tus redes.
5. Estructura: Puedes usar secciones y columnas para organizar los elementos (ej. una sección con 3 columnas: Logo a la izquierda, Menú en el centro, Botón a la derecha).
6. Publica y Asigna Condiciones (¡Paso Clave!):
   • Cuando termines de diseñar, haz clic en el botón “Publicar” (o “Actualizar”).
   • Elementor te preguntará “¿Dónde quieres mostrar tu plantilla?” (Where Do You Want to Display Your Template?).
   • Haz clic en “AÑADIR CONDICIÓN” (ADD CONDITION).
   • Por defecto, dirá “Incluir: Todo el sitio (Entire Site)”. Esto es lo que quieres para tu cabecera principal.
   • Haz clic en “GUARDAR Y CERRAR” (SAVE & CLOSE).

¡Listo! Tu cabecera de Elementor ahora reemplazará a la cabecera por defecto de tu tema en todo el sitio.

Creando un Nuevo Pie de Página (Footer)

El proceso es idéntico, pero seleccionando “Pie de página” en el Maquetador de temas.

1. Ve a Plantillas > Maquetador de temas > Pie de página.
2. Haz clic en “Añadir nueva”.
3. Diseña desde cero o usa una plantilla.
4. Widgets comunes para el footer:
   • Copyright: Elementor tiene un widget de Copyright dinámico.
   • Menú de navegación: Para enlaces secundarios (Política de Privacidad, Términos).
   • Formulario (Form): Para un boletín de suscripción (Newsletter).
   • Mapa (Map): Si tienes una ubicación física.
5. Publica y Asigna Condiciones: Al igual que con la cabecera, haz clic en “Publicar”, “AÑADIR CONDICIÓN” y asegúrate de que esté configurado para “Incluir: Todo el sitio”.
6. Guarda y Cierra.

¿Qué Método Usar?

Usa Apariencia > Menús si… solo quieres cambiar los enlaces (ej. añadir una página de “Servicios” a tu navegación).

Usa Apariencia > Personalizar si… estás contento con tu tema pero quieres cambiar el logo, los colores, o el texto de copyright (especialmente fácil con temas como Astra o GeneratePress).

Usa Elementor Pro (Theme Builder) si… necesitas un control absoluto sobre el diseño y quieres crear una cabecera o pie de página 100% personalizado que tu tema no permite.