Cómo editar encabezados y pies de página con Elementor en WordPress

Elementor es un constructor visual de páginas para WordPress que te permite diseñar, reemplazar y gestionar encabezados y pies de página personalizados mediante una interfaz de arrastrar y soltar, sin necesidad de editar plantillas PHP ni usar un tema hijo. Los dos métodos principales son el Theme Builder de Elementor Pro, que gestiona las plantillas de encabezado y pie de página de forma nativa, y el plugin gratuito Elementor Header & Footer Builder, que replica esa funcionalidad para los usuarios del nivel gratuito.

Ambos métodos inyectan tu plantilla personalizada en la jerarquía de plantillas de WordPress anulando la salida predeterminada header.php y footer.php del tema. Comprender esta distinción es importante al depurar conflictos con tu tema activo o la capa de caché.

Requisitos Previos Antes de Comenzar

Antes de tocar cualquier plantilla, confirma lo siguiente:

• Tu instalación de WordPress está ejecutando la versión 6.0 o superior (el requisito mínimo de Elementor según las versiones estables actuales).
• Tienes un tema hijo activo si tu tema padre incluye su propia lógica de encabezado/pie de página. Editar directamente un tema padre perderá los cambios en la próxima actualización del tema.
• El límite de memoria PHP está configurado en al menos 256 MB. El editor de Elementor consume mucha memoria, y un límite bajo provoca fallos silenciosos al guardar. Comprueba wp-config.php o el php.ini de tu servidor.
• Has borrado cualquier caché de página completa antes de probar los cambios. El HTML en caché servirá el encabezado/pie de página antiguo independientemente de lo que hayas guardado en Elementor.

Si tu sitio WordPress se ejecuta en un entorno de VPS Hosting, tienes acceso directo a php.ini y puedes configurar memory_limit = 256M sin depender de un panel de control de hosting.

Método 1: Elementor Pro Theme Builder

El Theme Builder de Elementor Pro es la solución canónica y totalmente compatible. Te ofrece condiciones de visualización granulares, etiquetas de contenido dinámico e integración directa con los elementos de WooCommerce.

Paso 1: Instalar y Activar Elementor Pro

Adquiere Elementor Pro desde el sitio web oficial de Elementor. Recibirás un archivo ZIP y una clave de licencia.

En tu panel de WordPress, ve a Plugins > Añadir Nuevo > Subir Plugin. Selecciona el archivo ZIP, haz clic en Instalar Ahora y luego en Activar. Tras la activación, ve a Elementor > Licencia y conecta tu clave de licencia. Tanto el plugin gratuito de Elementor como Elementor Pro deben estar activos simultáneamente — Pro es un complemento, no un plugin independiente.

Paso 2: Abrir el Theme Builder

Ve a Plantillas > Theme Builder. La interfaz está dividida en secciones: Encabezado, Pie de Página, Individual, Archivo, Resultados de Búsqueda y Error 404. Cada sección puede contener múltiples plantillas con diferentes condiciones de visualización, lo que te permite mostrar un encabezado diferente en páginas de destino frente a entradas de blog.

Paso 3: Crear o Editar la Plantilla de Encabezado

Haz clic en la pestaña Encabezado y luego en Añadir Nuevo. Un modal te pedirá que nombres la plantilla (por ejemplo, Main Header) y opcionalmente elijas un bloque prediseñado de la biblioteca de plantillas de Elementor.

Dentro del lienzo de Elementor, los widgets más utilizados para un encabezado son:

• Logo del Sitio — obtiene el logo configurado en Apariencia > Personalizar > Identidad del Sitio, manteniéndolo sincronizado con el núcleo de WordPress.
• Menú de Navegación — hace referencia a cualquier menú registrado en Apariencia > Menús. Puedes estilizar los estados hover, los desplegables y el comportamiento del menú hamburguesa para móvil directamente en la configuración del widget.
• Formulario de Búsqueda — añade un campo de búsqueda en tiempo real. Para usuarios Pro, puede conectarse a tipos de entradas personalizadas.
• Botón — útil para elementos CTA como “Solicitar Presupuesto” o enlaces de inicio de sesión.
• Carrito (WooCommerce) — muestra un icono de carrito dinámico con el recuento de artículos si WooCommerce está activo.

Error crítico frecuente: Si arrastras una Sección (o Contenedor en modo Flexbox) y estableces su ancho en Full Width, el fondo del encabezado se extenderá correctamente por todo el viewport. Si lo dejas en Boxed, el color de fondo se detendrá en el ancho del contenido, dejando el fondo de la página sin cubrir en los laterales — un error visual común que confunde a los nuevos usuarios.

Paso 4: Configurar el Encabezado Fijo

Para que el encabezado permanezca fijo en la parte superior del viewport al hacer scroll:

1. Haz clic en la sección/contenedor que envuelve todo el diseño de tu encabezado.
2. Abre la pestaña Avanzado en el panel izquierdo.
3. En Efectos de Movimiento, activa Fijo y configúralo en Arriba.
4. Opcionalmente, establece un punto de interrupción en Fijo En para desactivar el comportamiento fijo en móvil, donde consume demasiado espacio vertical en pantalla.

Caso especial: Los encabezados fijos interactúan mal con la Barra de Administración de WordPress cuando un usuario está conectado. La barra de administración añade 32px de desplazamiento en la parte superior. Elementor gestiona esto automáticamente en la mayoría de los casos, pero si usas un z-index personalizado en la sección fija, verifica que no se superponga a la barra de administración probando mientras estás conectado.

Paso 5: Establecer Condiciones de Visualización para el Encabezado

Tras hacer clic en Publicar, Elementor te pedirá inmediatamente que definas las Condiciones de Visualización. Esta es una de las funciones más potentes y más incomprendidas.

Puedes combinar múltiples condiciones usando reglas de Incluir y Excluir. Por ejemplo: incluir todo el sitio, pero excluir la página de pago — un patrón común en tiendas WooCommerce que desean un encabezado de pago sin distracciones.

Haz clic en Guardar y Cerrar cuando hayas terminado.

Paso 6: Crear o Editar la Plantilla de Pie de Página

El flujo de trabajo del pie de página es idéntico al del encabezado. Haz clic en la pestaña Pie de Página en el Theme Builder y luego en Añadir Nuevo.

Widgets comunes y patrones de diseño para el pie de página:

• Widget Editor de Texto o Encabezado para avisos de copyright. Usa la etiqueta dinámica [current_year] a través del sistema de contenido dinámico de Elementor para evitar actualizar el año manualmente.
• Widget Lista de Iconos o Iconos Sociales para enlaces a redes sociales.
• Widget Menú de Navegación para una navegación secundaria en el pie de página (política de privacidad, términos de servicio, enlaces al mapa del sitio).
• Widget Imagen para insignias de pago o sellos de confianza.
• Widget Shortcode para incrustar la salida de plugins de terceros (por ejemplo, un shortcode de consentimiento de cookies).

Establece las condiciones de visualización siguiendo la misma lógica que el encabezado y haz clic en Guardar y Cerrar.

Método 2: Elementor Header & Footer Builder (Gratuito)

Si utilizas el nivel gratuito de Elementor, el plugin Elementor Header & Footer Builder de Brainstorm Force ofrece una funcionalidad casi idéntica sin necesidad de una licencia Pro.

Paso 1: Instalar el Plugin

Ve a Plugins > Añadir Nuevo, busca Elementor Header & Footer Builder e instala el plugin de Brainstorm Force (verifica el autor — existen plugins con nombres similares). Haz clic en Activar.

Nota de compatibilidad: Este plugin funciona con la mayoría de los temas principales, pero requiere que tu tema activo sea compatible con los hooks header.php y footer.php. Los temas construidos completamente sobre la Edición Completa del Sitio (FSE) basada en bloques — como Twenty Twenty-Three y Twenty Twenty-Four — utilizan un sistema de plantillas diferente y pueden no responder al método de inyección de este plugin. En ese caso, cambia a un tema clásico como Astra, GeneratePress o Hello Elementor, o actualiza a Elementor Pro.

Paso 2: Crear una Plantilla de Encabezado

Ve a Apariencia > Elementor Header & Footer Builder y haz clic en Añadir Nuevo.

En el modal de creación de plantilla:

• Establece el Tipo en Header.
• Asígnale un nombre descriptivo.
• Haz clic en Crear Plantilla.

Serás redirigido al editor estándar de Elementor. El proceso de diseño es idéntico al de Elementor Pro — usa los mismos widgets (Logo del Sitio, Menú de Navegación, Botón, etc.).

Paso 3: Asignar Reglas de Visualización

Tras publicar, desplázate hacia abajo en la pantalla de edición de WordPress de la plantilla (no en el lienzo de Elementor) para encontrar el meta box de Reglas de Visualización. Esto es independiente del modal de condiciones de visualización de Elementor Pro y funciona a través del meta de entradas estándar de WordPress.

Las opciones incluyen:

• Todo el Sitio
• Páginas específicas (seleccionadas individualmente)
• Todas las Páginas Individuales
• Todas las Páginas de Archivo

El sistema de reglas de visualización del plugin gratuito es menos granular que el de Elementor Pro — no puedes segmentar por estado de inicio de sesión del usuario, archivos de tipos de entradas personalizadas ni usar reglas de exclusión. Para la mayoría de los sitios pequeños, esto es suficiente.

Paso 4: Crear una Plantilla de Pie de Página

Vuelve a Apariencia > Elementor Header & Footer Builder, haz clic en Añadir Nuevo y establece el tipo en Footer. El proceso de diseño y asignación de reglas de visualización es idéntico al flujo de trabajo del encabezado descrito anteriormente.

Comparación: Elementor Pro Theme Builder vs. Plugin Gratuito

Técnicas Avanzadas de Personalización

Diseño Responsivo de Encabezado y Pie de Página

El editor de Elementor tiene tres modos de viewport accesibles mediante iconos en la parte inferior del lienzo: Escritorio, Tablet y Móvil. Cada ajuste de espaciado, tamaño de fuente y visibilidad puede anularse por punto de interrupción.

Flujo de trabajo práctico:

1. Diseña primero el diseño de escritorio.
2. Cambia a la vista Tablet y ajusta el apilamiento de columnas, los tamaños de fuente y el relleno.
3. Cambia a la vista Móvil. Oculta los elementos de navegación secundarios usando Avanzado > Responsivo > Ocultar en Móvil. Reemplaza el menú de navegación completo con un botón hamburguesa configurando el Punto de Interrupción del widget Menú de Navegación en Mobile.

Nunca uses los mismos valores de relleno en todos los puntos de interrupción. Un relleno superior/inferior de 40px en escritorio resulta agobiante en una pantalla de teléfono de 375px de ancho. Establece el relleno móvil en 15px o 20px.

Añadir un Encabezado Transparente o Activado por Scroll

Un patrón de diseño común es un encabezado transparente sobre una imagen hero que se vuelve sólido al hacer scroll. Elementor Pro gestiona esto a través de la configuración de Fijo combinada con un Efecto de Scroll:

1. Establece el fondo de la sección del encabezado en None (transparente).
2. Activa Fijo en Efectos de Movimiento.
3. En la configuración de fijo, activa Efectos de Transparencia y establece el color de fondo en el estado de scroll.

Para el plugin gratuito, necesitas CSS personalizado. Añade lo siguiente en Apariencia > Personalizar > CSS Adicional:

/* Transparent header on load */
.hfe-header {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

/* Solid header after scroll — requires a JS class toggle */
.hfe-header.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Luego añade un pequeño fragmento de JavaScript a través de un plugin como Code Snippets:

window.addEventListener('scroll', function () {
    const header = document.querySelector('.hfe-header');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

Usar Etiquetas Dinámicas en el Pie de Página (Pro)

Las etiquetas dinámicas de Elementor Pro te permiten insertar datos en tiempo real en el texto del pie de página sin codificar valores de forma fija. El caso de uso más práctico es el año de copyright:

1. Añade un widget Editor de Texto a tu pie de página.
2. Haz clic en el icono de etiqueta dinámica (el icono de base de datos) junto al campo de texto.
3. Selecciona Sitio > Año Actual.

La salida se muestra como el año actual de cuatro dígitos y se actualiza automáticamente el 1 de enero — sin necesidad de ediciones manuales. Puedes combinar texto estático y etiquetas dinámicas en el mismo widget: © [dynamic: Current Year] Your Company Name. All rights reserved.

Consideraciones de Rendimiento

Los encabezados y pies de página personalizados de Elementor cargan CSS y JavaScript adicionales en cada página. Evalúa el impacto:

• Usa el plugin Query Monitor para comprobar cuántas consultas a la base de datos añade tu plantilla de encabezado por carga de página.
• Ejecuta una auditoría de Lighthouse antes y después de activar el encabezado personalizado. Un encabezado mal estructurado con imágenes no optimizadas puede añadir entre 200 y 400ms al Largest Contentful Paint (LCP) si la imagen del logo no está correctamente dimensionada o no se sirve en formato WebP.
• Si usas un CDN, purga la caché del CDN después de cada actualización del encabezado/pie de página. Los nodos CDN desactualizados seguirán sirviendo el HTML antiguo de la plantilla.

En un entorno de VPS con cPanel, puedes configurar el almacenamiento en caché de objetos con Redis o Memcached para reducir la sobrecarga de consultas a la base de datos que la resolución de plantillas de Elementor añade en cada solicitud.

Solución de Problemas Comunes

El encabezado no se muestra después de publicar:

La causa más frecuente es una condición de visualización faltante o en conflicto. Ve a Plantillas > Theme Builder > Encabezado, abre la plantilla, haz clic en Publicar y verifica que las condiciones de visualización incluyan la página que estás probando. Comprueba también que tu tema activo no esté codificando de forma fija una llamada get_header() que omita el hook de Elementor.

El pie de página se superpone al contenido de la página:

Esto generalmente significa que la sección de la plantilla del pie de página tiene un margen superior negativo o que el contenedor del contenido principal del tema no tiene relleno inferior. Inspecciona el elemento en las DevTools del navegador e identifica qué regla CSS está causando la superposición.

El editor de Elementor no carga (pantalla en blanco o spinner):

Aumenta temporalmente el límite de memoria PHP a 512 MB para diagnosticar. También desactiva todos los plugins excepto Elementor core y Pro, y luego vuelve a activarlos uno por uno para identificar un conflicto.

El encabezado fijo salta en móvil:

iOS Safari tiene problemas conocidos con position: sticky y los cambios dinámicos de altura del viewport causados por la aparición/desaparición del chrome del navegador al hacer scroll. Usa position: fixed con un padding-top compensatorio en el body de la página como solución alternativa, o configura la opción de fijo solo para escritorio.

El encabezado personalizado no aparece en las páginas de WooCommerce:

WooCommerce registra sus propios tipos de página (Tienda, Carrito, Pago, Mi Cuenta). En las condiciones de visualización de Elementor Pro, debes incluir explícitamente WooCommerce > Shop Page o WooCommerce > All WooCommerce Pages — no están cubiertas por la condición genérica “Todo el Sitio” en algunas configuraciones de tema.

Entorno de Hosting y Rendimiento

El rendimiento de tu encabezado y pie de página construidos con Elementor está directamente relacionado con el tiempo de respuesta de tu servidor. Elementor almacena los datos de la plantilla como meta de entradas en la base de datos de WordPress y genera archivos CSS en el servidor. En hosting compartido con I/O limitado, la regeneración de CSS tras una actualización de plantilla puede agotar el tiempo de espera de forma silenciosa, dejando tu sitio con estilos desactualizados.

Para sitios WordPress en producción que usan Elementor, un entorno de VPS Hosting con al menos 2 núcleos de CPU y 4 GB de RAM proporciona el margen necesario para un rendimiento fluido del editor y una generación rápida de CSS. Si gestionas una tienda WooCommerce con encabezado y pie de página personalizados, los Servidores Dedicados eliminan por completo la contención de recursos.

Independientemente de tu nivel de hosting, combina siempre tu instalación de WordPress con un Certificado SSL válido. Las advertencias de contenido mixto — activadas cuando se cargan recursos HTTP dentro de una página HTTPS — romperán la interfaz del editor de Elementor y provocarán que los recursos de tu encabezado (logos, iconos) no se carguen en algunos navegadores.

Matriz de Decisión: ¿Qué Método Deberías Usar?

Lista de Verificación Práctica Antes de Publicar

• Verifica que las condiciones de visualización cubran todos los tipos de página previstos, incluidas las páginas 404 y de resultados de búsqueda.
• Prueba el encabezado y el pie de página en un dispositivo móvil real, no solo con la emulación de las DevTools del navegador.
• Confirma que el logo usa una imagen WebP y que tiene los atributos width y height establecidos explícitamente en el widget de Imagen para evitar el desplazamiento de diseño (CLS).
• Comprueba que todos los enlaces del menú de navegación se resuelven correctamente después de publicar la plantilla.
• Purga todas las capas de caché: caché del servidor, caché del CDN y caché del navegador.
• Ejecuta Lighthouse en escritorio y móvil para confirmar que no hay regresiones en LCP o CLS.
• Si usas etiquetas dinámicas de Elementor Pro, verifica que muestran la salida correcta cuando se visualizan como usuario no conectado.
• Confirma que la etiqueta dinámica del año de copyright del pie de página está activa y no codificada de forma fija.
• Prueba el comportamiento del encabezado fijo con la Barra de Administración de WordPress visible (estado conectado).
• Valida que las páginas de WooCommerce (si corresponde) están cubiertas por la condición de visualización correcta.

Preguntas Frecuentes

¿Puedo usar Elementor para editar encabezados y pies de página sin Elementor Pro?

Sí. Instala el plugin gratuito Elementor Header & Footer Builder de Brainstorm Force. Se integra con el editor gratuito de Elementor y te permite diseñar encabezados y pies de página personalizados con reglas de visualización, aunque con menos opciones de segmentación que el Theme Builder de Elementor Pro.

¿Por qué mi encabezado de Elementor no aparece en mi sitio WordPress después de publicarlo?

La causa más común es una condición de visualización no configurada o incorrecta. Abre la plantilla en el Theme Builder, haz clic en Publicar y asegúrate de que la condición de visualización esté configurada al menos en Todo el Sitio o en el tipo de página específico que estás segmentando. Verifica también que no haya un encabezado codificado de forma fija a nivel de tema en los archivos de plantilla del tema padre.

¿El encabezado personalizado de Elementor reemplaza el encabezado predeterminado del tema?

Sí. Cuando se cumple una condición de visualización, Elementor se engancha en elementor/theme/before_do_header y reemplaza completamente la salida get_header() del tema. El header.php original del tema queda omitido para esas páginas.

¿Un encabezado personalizado de Elementor ralentizará mi sitio?

Puede hacerlo si no está optimizado. Elementor carga su propio archivo CSS por plantilla. Asegúrate de que el logo sea una imagen WebP comprimida, evita cargar widgets innecesarios y activa la opción Carga Mejorada de Recursos de Elementor en Elementor > Ajustes > Avanzado para cargar solo el CSS de los widgets realmente utilizados en cada página.

¿Puedo tener diferentes encabezados para diferentes páginas en WordPress con Elementor?

Sí, con Elementor Pro. Crea múltiples plantillas de encabezado y asigna a cada una una condición de visualización específica — por ejemplo, un encabezado para la página de inicio, otro para las entradas del blog y un encabezado minimalista para la página de pago. El Theme Builder Pro evalúa las condiciones por orden de prioridad, por lo que las condiciones más específicas anulan las más generales.