Si trabajas con WordPress y Elementor, seguramente has necesitado personalizar completamente el encabezado y pie de página de tu sitio web. En este tutorial, te mostraré cómo utilizar el plugin EAU (Elementor Addons & Utilities) para crear headers y footers profesionales de manera sencilla.

¿Qué es EAU?

EAU es un plugin complementario para Elementor que extiende sus funcionalidades básicas. Entre sus características más destacadas está la capacidad de crear plantillas personalizadas para headers y footers sin necesidad de código, reemplazando las secciones predeterminadas de tu tema.

Requisitos Previos

Antes de comenzar, asegúrate de tener instalado y activado:

• WordPress (versión 5.0 o superior)
• Elementor (versión gratuita o Pro)
• Plugin EAU instalado y activado

Paso 1: Acceder a la Configuración de EAU

Una vez instalado el plugin EAU, verás una nueva opción en el menú lateral de WordPress:

1. Dirígete al panel de administración de WordPress
2. En el menú lateral, localiza EAU
3. Haz clic para desplegar el submenú
4. Encontrarás las opciones principales del plugin

Paso 2: Acceder a Header & Footer Builder

Dentro del menú de EAU, busca la opción “Escritorio” o “Header & Footer Builder”. Esta sección te permite gestionar todas las plantillas de encabezado y pie de página.

Interfaz Principal

Al acceder, verás una tabla con las plantillas existentes que incluye:

• Título: Nombre de la plantilla
• Shortcode: Código corto para insertar manualmente
• Reglas de visualización: Dónde se mostrará la plantilla
• Fecha: Fecha de creación o última modificación

Paso 3: Crear un Nuevo Header

Proceso de Creación

1. Haz clic en el botón “Añadir nuevo” en la parte superior de la página
2. Selecciona el tipo de plantilla: Header
3. Asigna un nombre descriptivo (ejemplo: “Header General — VARIANT”)
4. Se abrirá el editor de Elementor

Diseñar tu Header con Elementor

Una vez en el editor de Elementor:

1. Utiliza los widgets disponibles para construir tu diseño
2. Puedes agregar:
   • Logo del sitio
   • Menú de navegación
   • Botones de llamada a la acción
   • Información de contacto
   • Iconos de redes sociales
   • Buscador
3. Personaliza colores, tipografías y espaciados según tu marca
4. Haz que tu header sea responsive ajustando las vistas para tablet y móvil

Guardar y Publicar

Cuando estés satisfecho con el diseño:

1. Haz clic en “Publicar” o “Actualizar”
2. Cierra el editor de Elementor

Paso 4: Configurar las Reglas de Visualización

Este es uno de los aspectos más poderosos de EAU: definir exactamente dónde se mostrará tu header.

Opciones de Display

Puedes configurar que tu header aparezca en:

• Toda la web: Todo el sitio sin excepciones
• Todos los productos: Solo en páginas de productos (WooCommerce)
• Todos los ActivEvents: Páginas de eventos personalizados
• Todo el archivo de Prensa: Páginas de archivo específicas
• Todas las entradas: Posts del blog
• Todos los archivos: Páginas de archivo
• Página del blog / entradas: Específicamente en el blog
• Nuevo Portafolio: Custom post types personalizados
• Contacto, Políticas y Documentación: Páginas específicas

Opciones de Exclusión

También puedes excluir el header de ciertas secciones:

• Entradas específicas
• Páginas particulares
• Custom post types
• Archivos específicos

Ejemplo de Configuración

Para un header general que aparezca en todo el sitio excepto en páginas de producto:

Display: Toda la web
Exclusión: Todos Productos, Todo archivo de Prensa

Paso 5: Crear un Footer

El proceso para crear un footer es prácticamente idéntico:

1. En el Header & Footer Builder, haz clic en “Añadir nuevo”
2. Selecciona Footer como tipo de plantilla
3. Asigna un nombre (ejemplo: “Footer — WHITE”)
4. Diseña tu footer en Elementor con elementos como:
   • Widgets de información de contacto
   • Menús de navegación secundarios
   • Formularios de suscripción
   • Mapas
   • Iconos sociales
   • Copyright y avisos legales
5. Configura las reglas de visualización igual que con el header
6. Publica tu footer

Paso 6: Gestión de Múltiples Headers/Footers

Una de las ventajas de EAU es poder crear múltiples variantes:

Casos de Uso

• Header oscuro y claro: Para diferentes secciones de tu sitio
• Footer simplificado: Para páginas de aterrizaje o checkout
• Headers específicos por categoría: Diferentes diseños según la sección

Prioridad de Plantillas

Si tienes múltiples plantillas con reglas que se solapan, EAU aplicará la más específica. Por ejemplo:

• Una regla para “Toda la web” tiene menor prioridad
• Una regla para “Página específica” tiene mayor prioridad

Funciones Avanzadas

Shortcodes

Cada plantilla genera un shortcode que puedes utilizar manualmente:

[hfe_template id='109799']

Este shortcode te permite insertar el header o footer en cualquier lugar usando:

• Editores de contenido
• Widgets
• Archivos de tema (con do_shortcode())

Integración con Código

Si necesitas mayor control, puedes integrar las plantillas directamente en tu tema:

<?php
if (function_exists('hfe_render_header')) {
    hfe_render_header();
}
?>

Tips y Mejores Prácticas

Optimización

• Mantén el header ligero: Evita demasiadas imágenes pesadas
• Usa menús colapsables: Para dispositivos móviles
• Sticky header: Considera un header fijo para mejor navegación
• Caché: Asegúrate de limpiar la caché después de hacer cambios

Diseño Responsive

• Prueba en todos los dispositivos: Desktop, tablet y móvil
• Ajusta el tamaño de elementos: Logos más pequeños en móvil
• Menú hamburguesa: Implementa menús colapsables para pantallas pequeñas

Rendimiento

• Lazy loading: Habilita carga diferida de imágenes
• Minimiza animaciones: En header/footer para mejorar velocidad
• SVG para logos: Usa formato vectorial cuando sea posible

Solución de Problemas Comunes

El header no aparece

1. Verifica que la plantilla esté publicada
2. Revisa las reglas de visualización
3. Limpia la caché del sitio y del navegador
4. Asegúrate de que no hay conflictos con el tema

Conflictos con el tema

Algunos temas tienen sus propios headers. Para desactivarlos:

1. Ve a la configuración de tu tema
2. Busca opciones de header/footer
3. Desactiva los headers del tema o usa el modo de compatibilidad de EAU

Problemas de estilo

Si los estilos no se aplican correctamente:

1. Regenera los archivos CSS de Elementor
2. Ve a: Elementor → Herramientas → Regenerar archivos CSS
3. Limpia toda la caché

Conclusión

El plugin EAU es una herramienta poderosa para personalizar completamente tu sitio WordPress con Elementor. La capacidad de crear múltiples headers y footers con reglas de visualización específicas te da un control total sobre la apariencia de tu sitio en diferentes contextos.

Con esta guía, deberías poder crear y configurar headers y footers profesionales para cualquier proyecto. Recuerda siempre probar tus cambios en diferentes dispositivos y navegadores antes de publicar en producción.

Recursos Adicionales

• Documentación oficial de Elementor
• Comunidad de EAU en WordPress.org
• Tutoriales en video sobre Elementor Header & Footer

---

¿Te ha resultado útil este tutorial? Déjame un comentario con tus preguntas o comparte cómo has personalizado los headers y footers de tu sitio web.

Tags: WordPress, Elementor, EAU, Header, Footer, Diseño Web, Tutorial