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.