La zona de contenido de una página se diseña rápido con Elementor. La cabecera, en cambio — logo, menú, teléfono, quizá un botón — pertenece de entrada al tema. Solo puede adaptarla hasta donde el tema lo prevea. El Theme Builder elimina ese límite.
De qué se encarga el Theme Builder
Con él diseña las zonas que quedan fuera del contenido propiamente dicho de la página: cabecera, pie, el diseño de las entradas individuales, el listado del blog, las páginas de archivo, la página 404 y, en tiendas, las páginas de producto.
El principio es siempre el mismo: usted construye una plantilla y define dónde debe regir. La segunda parte es la que en la práctica se atasca.
El Theme Builder es una función de la versión Pro.
Elementor Pro: poder diseñar libremente cabecera, pie y diseños de entrada es el motivo más frecuente para pasarse a Pro — más que los formularios o los popups. Ver Elementor Pro
Preparación: el tema adecuado
Si Elementor construye la cabecera, el tema no debe entregar una segunda. De lo contrario tendrá dos cabeceras superpuestas.
Lo más sencillo es un tema deliberadamente mínimo como Hello, pensado justo para esto: apenas trae diseño propio y le deja el campo libre a Elementor. En temas más amplios, busque en los ajustes del tema una opción para desactivar su propia cabecera. Si no hay ninguna, es una señal de que el tema y el Theme Builder van a estorbarse mutuamente.
Crear una cabecera
En el menú de WordPress, bajo Plantillas → Theme Builder, elija Cabecera y cree una plantilla nueva. Elementor ofrece bloques ya hechos; yo suelo construir desde cero, porque las variantes prefabricadas rara vez encajan con el resto.
Una estructura sólida tiene este aspecto: un contenedor configurado como fila flex, con el logo a la izquierda y el menú a la derecha. La alineación vertical en «centrada», la distribución horizontal en «espacio entre». Esa es la estructura que tampoco se viene abajo en pantallas estrechas.
Para el menú use el widget Menú de navegación. Recurre a los menús que haya creado en WordPress en Apariencia → Menús — cree por tanto el menú antes, o el widget se quedará vacío.
El paso que muchos olvidan: las condiciones de visualización
Antes de publicar, Elementor pregunta dónde debe regir la plantilla. Esa pregunta no es una formalidad.
Para una cabecera que rija en todas partes, ponga la condición en Todo el sitio. Si en cambio quiere una cabecera distinta solo para la página de inicio, cree una segunda plantilla y ponga ahí la condición más específica. La regla más específica gana frente a la general.
El error más frecuente que veo: plantilla construida, publicada, condición saltada — y luego desconcierto sobre por qué en el sitio web no se ve nada distinto. Puede establecer las condiciones en cualquier momento a posteriori, desde el menú de vista previa del editor o desde el listado de plantillas.
Cabecera fija, resuelta con limpieza
Una cabecera que se mantiene arriba al hacer scroll es uno de los requisitos más habituales. Se resuelve en el contenedor, en Avanzado → Efectos de movimiento → Fijo: Arriba.
Dos puntos en los que se suele atascar:
La cabecera desaparece detrás del contenido. Ponga en Avanzado un índice Z suficiente, por ejemplo 999.
El contenido salta al hacer scroll. Eso ocurre cuando la cabecera fija cambia de altura. Si al hacer scroll quiere mostrar un logo más pequeño, trabaje con los ajustes del efecto y compruebe el resultado en el móvil — ahí los saltos se notan más.
Y una recomendación de la práctica: en el móvil, una cabecera fija se lleva una altura de pantalla valiosa. Ahí suelo desactivarla. Las opciones de visibilidad para ello están igualmente en Avanzado; cómo procedo en móvil en general está en Optimizar Elementor para móvil.
El pie de página
El pie funciona con el mismo patrón, pero es menos delicado — sin fijado, sin lógica de menú. Preste atención a dos cosas: el aviso legal y la política de privacidad tienen que ser accesibles desde cualquier página, y las columnas deberían quedar limpiamente una debajo de otra en el móvil, en vez de apretujadas en horizontal.
Cuando algo no aparece
Tres causas cubren la mayoría de los casos: falta la condición de visualización; el tema sigue entregando su propia cabecera; o un plugin de caché retiene la versión antigua — vacíe la caché antes de seguir buscando.
Otros tropiezos habituales y sus causas los he reunido en Resolver errores frecuentes de Elementor.
Si prefiere montar el Theme Builder una vez acompañado, en lugar de ir a tientas entre condiciones de visualización: eso es exactamente lo que hacemos en mi formación de Elementor.
Etiquetas