3.1Theme Builder: cabecera y pie de página
Lo esencial en 30 segundos
- El Theme Builder (Pro) diseña visualmente las partes globales del sitio: cabecera, pie, plantillas.
- Las condiciones de visualización deciden dónde se aplica una plantilla (todo el sitio, ciertas páginas…).
- La cabecera puede ser fija (sticky) y debe ser responsive (menú hamburguesa en móvil).
Hilo conductor — Nadia pasa a Pro
El carpintero quiere una cabecera idéntica en todas partes (logo + menú + botón "Presupuesto") y un pie con dirección y horarios. Hasta ahora, Nadia recopiaba estos bloques en cada página. Con Elementor Pro y el Theme Builder, crea una cabecera y un pie globales, mostrados en todo el sitio, modificables en un solo lugar.
Inicio del nivel 3 — Nadia se pasa a Elementor Pro.
1. Cabecera y pie globales
El Theme Builder es la funcionalidad estrella de Elementor Pro: permite diseñar visualmente las partes globales del sitio. La cabecera (header) es la banda superior presente en todas partes (logo, menú, botón de acción); el pie de página (footer) la banda inferior (dirección, horarios, redes, avisos legales). Se crean una vez y se muestran en todo el sitio.
Se acabó el copiar y pegar: Nadia diseña la cabecera del carpintero (logo a la izquierda, menú, botón "Presupuesto" a la derecha) y el pie (dirección de Orán, horarios, teléfono) en el Theme Builder.
2. Condiciones, sticky, responsive
Las condiciones de visualización deciden dónde se aplica una plantilla: todo el sitio, solo ciertas páginas, etc. Así se puede tener una cabecera distinta en la página de inicio si hace falta.
La cabecera puede ser fija (sticky): permanece visible arriba al desplazar — práctico para mantener el menú y el botón "Presupuesto" accesibles. Y debe ser responsive: en móvil, el menú se pliega (hamburguesa), a probar.
🔎 Ejemplo concreto — Cabecera y pie del carpintero (caso Nadia)
Theme Builder → Cabecera: logo · menú · botón "Presupuesto" → condición: todo el sitio, sticky activado.
Theme Builder → Pie: dirección Orán · horarios · teléfono · legal → condición: todo el sitio.
Móvil: menú en hamburguesa, probado con el dedo.
→ Un cambio de menú = un solo lugar.Resultado: coherencia total, mantenimiento en un punto.
Lección: diseñar las partes globales en el Theme Builder.
Vocabulario de la sección
- Theme Builder (Pro)
- La funcionalidad de Elementor Pro para diseñar visualmente las partes globales del sitio.
Ejemplo sencillo: Nadia crea allí la cabecera y el pie del carpintero.
Lo que no es: recopiar la cabecera en cada página a mano.
Reflejo: parte presente en todas partes → Theme Builder.
- Cabecera (header)
- La banda superior presente en todo el sitio (logo, menú, botón de acción).
Ejemplo sencillo: logo + menú + botón "Presupuesto".
Lo que no es: una cabecera distinta e incoherente por página.
Reflejo: cabecera global, clara, con una acción.
- Pie de página (footer)
- La banda inferior presente en todas partes (dirección, horarios, redes, avisos legales).
Ejemplo sencillo: dirección de Orán, horarios, teléfono, avisos legales.
Lo que no es: olvidar la información de contacto y los avisos legales.
Reflejo: pie = información útil + avisos legales.
- Condiciones de visualización
- Dónde se aplica una plantilla (cabecera, pie…): todo el sitio, ciertas páginas…
Ejemplo sencillo: cabecera en todo el sitio, otra en la página de inicio.
Lo que no es: no definir condición (la plantilla no se muestra).
Reflejo: crear una plantilla = darle una condición.
- Cabecera sticky y responsive
- La cabecera permanece visible al desplazar (sticky) y se adapta al móvil (hamburguesa).
Ejemplo sencillo: menú y botón "Presupuesto" siempre accesibles; hamburguesa en móvil.
Lo que no es: una cabecera que desaparece o se rompe en móvil.
Reflejo: sticky cuando es útil + siempre probar el móvil.
En la práctica — Crear una cabecera y un pie globales
- En el Theme Builder, crea una cabecera (logo, menú, botón de acción).
- Dale la condición "todo el sitio" y activa el sticky si procede.
- Crea un pie (dirección, horarios, avisos legales) con la misma condición.
- Prueba en móvil: menú hamburguesa, cabecera legible, pie completo.
Guion listo para decir — valorar la cabecera global (20 s)
"He creado su cabecera y su pie de página una sola vez: logo, menú y botón de presupuesto arriba, dirección y horarios abajo, idénticos en todas las páginas. Si quiere cambiar el menú o añadir un horario, lo hago en un solo lugar, y se aplica en todas partes."
Vender la coherencia y el mantenimiento en un punto.
Plantilla para copiar y pegar — comprobación Theme Builder
CABECERA: logo ___ menú ___ botón de acción ___
CONDICIÓN: todo el sitio / páginas: ___ STICKY: sí / no
PIE: dirección ___ horarios ___ teléfono ___ legal ___
CONDICIÓN: todo el sitio / páginas: ___
RESPONSIVE (hamburguesa) PROBADO: sí / noEscaparate de artesano
Cabecera simple (logo + menú + botón de llamada), pie con dirección y horarios.
Inicio específico
Condición particular: una cabecera transparente en el inicio, clásica en otras partes.
Sticky
Mantener el botón "Presupuesto" accesible al desplazar en páginas largas.
Móvil
Menú hamburguesa claro; botón de llamada visible en la cabecera móvil.
✓ Buenas prácticas
- Diseñar cabecera/pie en el Theme Builder (una vez).
- Dar una condición de visualización a cada plantilla.
- Probar la cabecera sticky y el menú móvil.
✗ Errores frecuentes
- Recopiar la cabecera en cada página.
- Olvidar la condición (plantilla no mostrada).
- No probar el menú móvil.
Puntos clave
- Theme Builder (Pro) = partes globales del sitio.
- Cabecera (arriba) y pie (abajo) diseñados una vez.
- Condiciones de visualización = dónde se aplica.
- Cabecera sticky + responsive (hamburguesa).
Reto 48h — aplica mañana
Con Elementor Pro, crea una cabecera global (logo, menú, botón) y un pie (dirección, horarios), aplicados a todo el sitio. Activa el sticky y prueba el menú hamburguesa en móvil. 30 minutos.
- Creo una cabecera y un pie globales.
- Ajusto las condiciones de visualización.
- Pruebo sticky y el menú móvil.
Preguntas frecuentes
¿El Theme Builder es gratuito?
No: es una funcionalidad de Elementor Pro. En Free, no se puede diseñar una cabecera/pie global ni plantillas de contenido con Elementor.
¿Para qué sirven las condiciones de visualización?
Para decidir dónde se aplica una plantilla: todo el sitio, solo ciertas páginas, un tipo de contenido, etc. Sin condición, la plantilla no se muestra en ningún sitio.
¿Qué es una cabecera 'sticky'?
Una cabecera que permanece pegada arriba de la pantalla al desplazar la página — práctico para mantener el menú y un botón de acción siempre accesibles.
El carpintero quiere la misma cabecera (logo, menú, botón Presupuesto) en todas sus páginas, fácilmente modificable. ¿Qué hace Nadia?