Objetivo: Aprender a crear cabeceras y pies de página coherentes que se mantengan en todas las páginas de tu sitio web con Elementor.

📋 LECCIÓN 4.1: ¿QUÉ SON HEADERS Y FOOTERS Y POR QUÉ SON IMPORTANTES?

🏢 LA ANALOGÍA DEL EDIFICIO

Imagina tu sitio web como un edificio:

• 🏠 Header (Encabezado): Es como la fachada y la puerta principal. Es lo primero que ven los visitantes, contiene la identidad de la marca y la navegación principal.
• 📄 Páginas internas: Son las habitaciones y espacios. Cada una tiene contenido único.
• 🏢 Footer (Pie de página): Es como los cimientos y sótano. Contiene información esencial, enlaces importantes y da estabilidad.

🎯 ¿POR QUÉ SON CRÍTICOS?

El Header es crucial porque:

• ✅ Primera impresión – Define la percepción de tu marca.
• ✅ Navegación – Guía a los usuarios por tu sitio.
• ✅ Consistencia – Mismo look en todas las páginas.
• ✅ Branding – Refuerza identidad visual.

El Footer es esencial porque:

• ✅ Información clave – Contacto, legal, redes.
• ✅ SEO – Enlaces internos importantes.
• ✅ Credibilidad – Aspecto profesional completo.
• ✅ Conversiones – Última oportunidad para acciones.

🚨 LECCIÓN 4.2: LIMITACIONES DE ELEMENTOR FREE PARA HEADERS/FOOTERS

📌 REALIDAD INICIAL:

Con Elementor Free, NO puedes crear headers y footers globales directamente. Pero hay soluciones.

🔧 DOS OPCIONES DISPONIBLES:

1️⃣ USAR LAS OPCIONES DE TU TEMA 🌐

• Ventajas: Fácil y nativo.
• Desventajas: Menos personalizable.
• Ideal para: Proyectos que no requieren algo tan a medida.

2️⃣ USAR PLUGIN COMPLEMENTARIO 🔌

Plugin recomendado: «Elementor Header & Footer Builder» de (Turbo Addons ) https://es.wordpress.org/plugins/header-footer-builder-for-elementor/.

• Es gratuito y oficialmente compatible.
• Permite diseñar headers/footers con Elementor.
• Limitación: Menos opciones que Elementor Pro.

🎯 NUESTRO CAMINO RECOMENDADO:

Vamos a usar la Opción 2 (plugin complementario) porque:

1. Es gratuito.
2. Es compatible al 100% con Elementor.
3. Te prepara para cuando uses Elementor Pro.
4. Es fácil de aprender.

🔧 LECCIÓN 4.3: INSTALAR ELEMENTOR HEADER & FOOTER BUILDER

PASO A PASO DE INSTALACIÓN:

1. 📂 Ve a Plugins en tu WordPress.
2. ➕ Haz clic en «Añadir nuevo».
3. 🔍 Busca: «Elementor Header & Footer Builder».
4. 🎯 Identifica: Autor: Turbo Addons.
5. ⬇️ Instala y ▶️ Activa.

✅ VERIFICACIÓN DE INSTALACIÓN CORRECTA:

Después de activar:

1. 👀 Mira el menú izquierdo de WordPress.
2. Deberías ver: «Turbo H&F Builder».

🎨 LECCIÓN 4.4: CREAR TU PRIMER HEADER PROFESIONAL

🏗️ ESTRUCTURA BÁSICA DE UN HEADER:

Un header profesional típico tiene 3 zonas:

┌──────────────────────────────────────────┐
│            ZONA SUPERIOR                 │
│  [Logo]           [Info contacto]        │
├──────────────────────────────────────────┤
│            ZONA PRINCIPAL                │
│  [Menú principal]    [Botón CTA]         │
└──────────────────────────────────────────┘

PASO 1: ACCEDER AL BUILDER:

1. 📁 Ve a: Turbo H&F Builder.
2. 🖱️ Haz clic en «Header Templates».
3. ✏️ Pon nombre: «Header Principal».
4. 🎯 Haz clic en «Edit with Elementor».

PASO 2: ESTRUCTURA INICIAL:

Creamos 1 filas (rows):

Fila 1 – Información rápida:

1. ➕ Nueva sección: 2 columnas (25% | 75%).
2. Columna 1: Widget «Logo del sitio».
   • Se inserta automáticamente tu logo.
   • Si no tienes logo: usa widget «Imagen».
3. Columna 2: Widget «Menú» o «Navegación»
   • Si usas «Menú»: selecciona tu menú de WordPress.
   • 🎨 Estilo: Espaciado uniforme, sin subrayados.

PASO 3: GUARDAR Y ASIGNAR:

1. 💾 Guarda tu header.
2. 🚪 Sal del editor.
3. 📍 En en Turbo H&F Builder > Header Templates:
   • «Edit conditions».
   • Set Display Condition > «Entire site» (la condición para mostrar el menú será en todo el sitio).
   • Pulsa el botón «Update» (guarda los cambios).

Ahora al ver tu web, verás el nuevo menú que has creado.

📱 LECCIÓN 4.5: HEADER RESPONSIVE – MENÚ HAMBURGUESA

🎯 EL PROBLEMA DEL MÓVIL:

En pantallas pequeñas, los menús horizontales no funcionan.

SOLUCIÓN: MENÚ HAMBURGUESA 🍔

PASO 1: VER EN VISTA MÓVIL:

1. En el editor del header.
2. 🖱️ Haz clic en 📱 Móvil (barra superior).
3. 👁️ Observa: Tu menú probablemente se ve mal o no como te gustaría.

PASO 2: CONFIGURAR BREAKPOINT:

1. ⚙️ Ve a: Elementor > Configuración.
2. 📱 Busca: «Dispositivos de vista previa».
3. 📏 Tablet Breakpoint: 768px (por defecto).
4. 📏 Mobile Breakpoint: 425px (por defecto).

PASO 3: AJUSTAR EL HEADER PARA MÓVIL:

1. En vista 📱 Móvil, selecciona el menú:
2. En la columna de la izquierda, edita las opciones «Mobil menu»
   1. Podrás editar el tamaño del icono hamburguesa, color, alineación, etc, desde las opciones de «Contenido» y «Estilo«.

🏢 LECCIÓN 4.6: CREAR FOOTER COMPLETO

🏗️ ESTRUCTURA DE FOOTER PROFESIONAL:

Los mejores footers tienen 3 partes:

┌────────────────────────────────────────────┐
│         SECCIÓN SUPERIOR                   │
│  [Logo+Descripción] [Enlaces rápidos]      │
│                        [Contacto]          │
├────────────────────────────────────────────┤
│         SECCIÓN MEDIA                      │
│   [Redes sociales] [Métodos de pago]       │
├────────────────────────────────────────────┤
│         SECCIÓN INFERIOR                   │
│  © 2024 TuEmpresa | Política de privacidad │
└────────────────────────────────────────────┘

PASO 1: CREAR NUEVO FOOTER:

1. 📁 Ve a: Turbo H&F Builder.
2. 🖱️ Haz clic en «Header Templates».
3. ✏️ Pon nombre: «Footer Principal».
4. 🎯 Haz clic en «Edit with Elementor».

PASO 2: SECCIÓN SUPERIOR (4 COLUMNAS):

1. ➕ Nueva sección: 4 columnas (25% c/u).

Columna 1 – Logo y descripción:

1. Logo del sitio o Imagen.
2. Editor de texto debajo:
   • Breve descripción de tu empresa (1-2 líneas).
   • 🎨 Estilo: Texto pequeño, gris claro.

Columna 2 – Enlaces rápidos:

1. Encabezado: «Enlaces rápidos» (H4).
2. Lista de iconos o Editor de texto:
   • Inicio.
   • Servicios.
   • Portfolio.
   • Contacto.
   • 🎨 Estilo: Lista sin viñetas.

Columna 3 – Contacto:

1. Encabezado: «Contacto» (H4).
2. Icono + texto (teléfono).
3. Icono + texto (email).
4. Icono + texto (dirección).
5. 🎨 Estilo: Iconos pequeños alineados.

Columna 4 – Newsletter:

1. Encabezado: «Newsletter» (H4).
2. Editor de texto: «Suscríbete para novedades».
3. Formulario (si tienes Elementor Pro).
4. O Botón «Suscribirse» con enlace.

PASO 3: LÍNEA SEPARADORA:

1. ➕ Nueva sección: 1 columna.
2. 🧱 Separador
   • 📏 Ancho: 100%.
   • 🎨 Color: Gris muy claro (#EEEEEE).
   • 📏 Grosor: 1px.

PASO 4: SECCIÓN INFERIOR (COPYRIGHT):

1. ➕ Nueva sección: 2 columnas (50% | 50%).

Columna 1 – Copyright:

1. 🧱 Editor de texto:
   • «© [Tu Empresa]. Todos los derechos reservados.»
   • 🔗 Enlaces: Política de privacidad | Términos.
   • 🎨 Estilo: Texto pequeño, gris.

Columna 2 – Redes sociales:

1. 🧱 Iconos sociales (si tu tema los tiene).
2. O Iconos individuales enlazados.
3. 🎨 Estilo: Alinear a la derecha.

PASO 5: ESTILO GENERAL DEL FOOTER:

1. Selecciona cada sección del footer.
2. 🎨 Estilo > Fondo:
   • Color oscuro (#222222 o #333333).
   • 🎨 Color de texto: Gris claro (#CCCCCC).
3. 📏 Ajusta rellenos:
   • Sección superior: 60px arriba/abajo.
   • Sección inferior: 30px arriba/abajo.

PASO 6: GUARDAR Y ACTIVAR:

1. 💾 Guarda tu footer.
2. 🚪 Sal del editor.
3. 📍 En en Turbo H&F Builder > Footer Templates:
   • «Edit conditions».
   • Set Display Condition > «Entire site» (la condición para mostrar el pie será en todo el sitio).
   • Pulsa el botón «Update» (guarda los cambios).

🏆 PROYECTO PRÁCTICO: HEADER Y FOOTER COMPLETOS

📋 OBJETIVO:

Crear header y footer profesionales para un sitio web de servicios digitales.

🎯 CRITERIOS DE EVALUACIÓN:

PARA EL HEADER:

• Logo alineado a la izquierda.
• Menú principal con 5 enlaces mínimo.
• Botón CTA «Solicitar presupuesto».
• Sticky activado para el menú (activar en «Edit Conditions») .
• Funcional en móvil (hamburguesa o simplificado).
• Colores coherentes con identidad.

PARA EL FOOTER:

• 4 columnas en escritorio.
• Información de contacto completa.
• Enlaces legales (privacidad, términos).
• Redes sociales.
• Copyright actualizado.
• Newsletter o CTA final.

⏳ TIEMPO ESTIMADO:

• Header: 30 minutos.
• Footer: 30 minutos.
• Testing responsive: 10 minutos.
• Total: 1 horas 10 minutos.

📝 CHECKLIST FINAL:

1. ✅ Header aparece en todas las páginas.
2. ✅ Footer completo y sin errores.
3. ✅ Móvil totalmente funcional.
4. ✅ Sticky funciona correctamente.
5. ✅ Enlaces todos funcionan.
6. ✅ Colores coherentes en ambos.
7. ✅ Logo nítido y bien dimensionado.
8. ✅ CTA claro y visible.

💡 CONSEJOS PROFESIONALES

🎨 DISEÑO VISUAL:

1. Mantén altura del header consistente (80-100px ideal).
2. Usa espacios generosos en el footer (no amontones).
3. Jerarquiza información: lo más importante arriba/izquierda.
4. Contraste suficiente para lectura fácil.

⚡ PERFORMANCE:

1. Optimiza logo para web (PNG comprimido).
2. No uses widgets complejos en header/footer.
3. Usa iconos SVG en lugar de imágenes (widgets de iconos ya están en svg).

✅ RESUMEN DE LO APRENDIDO

En este módulo has aprendido:

1. ✅ Importancia de headers y footers profesionales.
2. ✅ Soluciones para Elementor Free (plugin complementario).
3. ✅ Creación de header completo con navegación.
4. ✅ Diseño de footer estructurado y útil.
5. ✅ Técnicas responsive (menú hamburguesa).

🎉 ¡EXCELENTE TRABAJO!
Ahora tu sitio web tendrá la base profesional que merece con header y footer coherentes y funcionales.

¿Estás listo para diseñar la página más importante: la Home?

En el Módulo 5 aprenderás a:

• 🏠 Maquetar una Home Page completa y efectiva.
• 🎯 Jerarquizar contenido para máxima conversión y visitas.
• 📱 Diseñar secciones hero impactantes.
• ✨ Implementar llamadas a la acción efectivas.