Cómo usar el Theme Builder de Elementor

Theme Builder de Elementor: el panel que cambia tu forma de diseñar en WordPress

Cuando construí mi primer sitio con Elementor sin Pro, pasaba horas peleándome con el header y el footer del tema. Cada vez que quería un cambio simple, como modificar la altura del menú o el color de los enlaces sociales, tenía que entrar al personalizador de WordPress, hacer ajustes ahí, volver a Elementor, y rezar para que todo se viera consistente. Después de unos meses descubrí que existía algo llamado Theme Builder y mi vida cambió. Hoy te quiero contar qué es, cómo funciona y por qué se volvió mi herramienta más usada de Elementor Pro.

La idea detrás del Theme Builder es simple. En WordPress tradicional, las partes estructurales de tu sitio (header, footer, plantilla del blog, página de archivo, página de producto y la temida 404) viven en archivos PHP del tema. Si quieres modificarlas, tienes que tocar código o usar un child theme. El Theme Builder de Elementor te permite diseñar esas partes con el mismo editor visual que ya conoces, sin abrir un editor de código.

Qué incluye exactamente el Theme Builder

El Theme Builder es una función exclusiva de Elementor Pro. Si estás usando la versión gratuita, no la vas a encontrar. Esto es importante mencionarlo porque mucha gente intenta acceder y se confunde cuando no aparece la opción. La versión Pro a partir de 2026 también está incluida en el paquete Elementor One, que sumó hosting, dominio, SSL y el agente Angie por unos 168 dólares al año.

Dentro del Theme Builder puedes crear y administrar siete tipos de plantillas. Cabecera o header, que aparece en la parte superior de todas las páginas que definas. Pie o footer, que va al fondo. Plantilla de blog o archive, que controla cómo se ven las listas de artículos por categoría, etiqueta o autor. Single post, que controla la apariencia de las entradas individuales. Single page, para las páginas estáticas. Product single y product archive para sitios con WooCommerce. Y la página 404, que aparece cuando alguien visita una URL que no existe.

Cada una de estas plantillas se diseña con el editor visual de Elementor. Eso significa que tienes acceso a todos los widgets, contenedores Flexbox, opciones de estilo y configuraciones responsive a las que ya estás acostumbrado.

Cómo se accede al Theme Builder desde el panel

Para llegar al Theme Builder, anda al menú lateral de WordPress, busca Elementor, y haz clic en Theme Builder. Te lleva a un panel central donde ves todas las plantillas organizadas por tipo. Si es la primera vez que entras, todo estará vacío. Cada tipo de plantilla tendrá un botón para añadir nueva.

Cuando creas una plantilla nueva, Elementor te pregunta qué tipo es. Selecciona el que quieras y se abre el editor con un lienzo en blanco. Ahí construyes tu diseño como lo harías con cualquier página. Lo importante es que las plantillas no son páginas en sí. Son moldes que Elementor aplica a páginas reales según las condiciones que definas.

Esas condiciones se llaman display conditions. Cuando guardas la plantilla por primera vez, Elementor te pregunta dónde quieres que aparezca. Puedes elegir todo el sitio, solo páginas específicas, solo entradas de cierta categoría, solo productos de WooCommerce, y muchas combinaciones más. Esa lógica de visibilidad es lo que hace al Theme Builder tan flexible.

Diseñar un header que funcione en todo el sitio

El header es probablemente la primera plantilla que vas a querer construir. Mi recomendación es empezar con un contenedor Flexbox horizontal a ancho completo. Dentro pones tres elementos: un widget de logo a la izquierda, un widget de menú de navegación al centro, y un widget de botón con tu llamada a la acción a la derecha.

El widget de menú de navegación se conecta automáticamente con los menús que tienes definidos en Apariencia, menús. Eso significa que puedes editar el contenido del menú sin tocar el diseño. Esa separación entre estructura y contenido es una de las grandes ventajas del Theme Builder.

Para hacer el header sticky, anda a la configuración del contenedor principal, ve a la pestaña avanzado y activa la opción efectos de desplazamiento. Ahí encuentras la propiedad sticky con opciones de offset y comportamiento responsive. Si quieres que el header cambie de fondo cuando el usuario hace scroll, puedes combinarlo con efectos de transición.

Las condiciones de visualización para un header suelen ser sencillas: aplicar a todo el sitio. Pero si tienes una landing page que necesita un header diferente, puedes crear una segunda plantilla con condiciones específicas para esa landing. Elementor resuelve automáticamente cuál usar en cada caso.

El footer y por qué merece atención

El footer suele tratarse como una zona descuidada. Logos, enlaces a redes sociales, copyright y listo. Pero un buen footer puede mejorar la navegación, el SEO y las conversiones. Con el Theme Builder puedes construir footers complejos sin escribir una línea de código.

Mi estructura favorita es un footer con cuatro columnas usando contenedores Flexbox. La primera columna tiene el logo y una descripción breve. La segunda contiene enlaces a páginas importantes como sobre nosotros, servicios y contacto. La tercera muestra los últimos artículos del blog usando el widget de posts. La cuarta tiene un formulario de suscripción al newsletter.

Debajo de esas cuatro columnas, una segunda fila más delgada con el copyright a la izquierda y los iconos de redes sociales a la derecha. Todo en un solo footer que aplicas a todo el sitio. Cuando necesites actualizar algo, lo haces una vez y se refleja en todas las páginas.

Plantillas de single post: el corazón del blog

La plantilla single post controla cómo se ven las entradas individuales de tu blog. Esto es donde el Theme Builder demuestra su valor real. Sin Theme Builder estás atado al diseño que te da el tema. Con Theme Builder diseñas exactamente cómo quieres presentar cada artículo.

Una plantilla típica que uso tiene cuatro zonas principales. Cabecera del artículo con título, autor, fecha y categorías. Imagen destacada a ancho completo. Cuerpo del contenido con el widget de post content, que renderiza automáticamente lo que escribes en el editor de WordPress. Y al final, una sección de artículos relacionados y comentarios.

Lo bueno es que cada uno de esos elementos es un widget independiente. Puedes ajustar la tipografía del título, el tamaño de la imagen destacada, el estilo del contenido del post y el formato de los relacionados sin tocar archivos PHP. Cuando quieres cambiar algo, lo haces visualmente y se aplica a todas las entradas que cumplan las condiciones.

Las condiciones para single post las suelo configurar por categoría. Por ejemplo, si tengo un blog con artículos de tutoriales y artículos de noticias, puedo tener dos plantillas distintas. La de tutoriales con tabla de contenidos lateral. La de noticias con autor más prominente y fecha de publicación visible. Elementor aplica cada plantilla a las entradas correctas sin que yo tenga que hacer nada extra.

Página de producto WooCommerce con Theme Builder

Si tienes una tienda online con WooCommerce, el Theme Builder se vuelve indispensable. La plantilla product single te permite rediseñar completamente cómo se ven tus productos. WooCommerce por defecto tiene un diseño funcional pero genérico. Con Theme Builder puedes crear experiencias de producto que conviertan mejor.

Una plantilla de producto que uso para clientes tiene la imagen del producto a la izquierda, ocupando un sesenta por ciento del ancho. A la derecha el título, el precio, la descripción corta, el selector de variantes, el botón de añadir al carrito y los iconos de pago aceptados. Debajo de eso, en ancho completo, las pestañas con descripción larga, especificaciones y reseñas.

Cada uno de esos elementos es un widget de WooCommerce que Elementor expone dentro del editor. Puedes diseñar visualmente la galería de imágenes, los botones de cantidad, los badges de oferta y las etiquetas de stock. Todo sin escribir CSS.

La plantilla product archive controla cómo se ven las páginas de categoría de productos y la tienda principal. Aquí defines el grid de productos, los filtros laterales, la paginación y el banner superior. Es donde construyes la experiencia de exploración de tu catálogo.

La plantilla de archivo y la 404

La plantilla archive cubre las páginas de categoría, etiqueta, autor y resultados de búsqueda. Suele ser una de las más olvidadas, pero recibe tráfico orgánico si tu blog está bien optimizado. Yo uso una plantilla con título descriptivo arriba, descripción de la categoría debajo, y un grid de tres columnas con los artículos.

La página 404 es la que aparece cuando alguien intenta acceder a una URL que no existe. Por defecto suele ser una página fría con un mensaje de error genérico. Con Theme Builder puedes convertirla en una oportunidad. Yo siempre incluyo un mensaje amigable, un buscador del sitio, los artículos más leídos del blog y un botón para volver al inicio. Eso reduce el rebote de visitantes perdidos.

Trucos para sacar máximo provecho al Theme Builder

Las plantillas se pueden duplicar. Si construyes un header que funciona muy bien y quieres una variante para una landing específica, no tienes que empezar de cero. Duplica la plantilla original, modifica lo que necesites y ajusta las condiciones de visualización.

El historial de revisiones funciona también dentro del Theme Builder. Si haces un cambio que no te gusta, puedes volver a versiones anteriores desde el panel del editor. Esto te da libertad para experimentar sin miedo a romper algo.

Las plantillas pueden tener fecha de inicio y fecha de fin. Esto es perfecto para promociones temporales. Puedes diseñar un header con banner de oferta especial que se active solo durante un fin de semana específico y desaparezca solo cuando termine el plazo. Sin necesidad de recordar desactivarlo manualmente.

Puedes exportar plantillas como archivos JSON e importarlas en otros sitios. Esto es útil si tienes una agencia o si trabajas con varios proyectos donde reutilizas elementos. Construyes una vez, exportas, importas en el siguiente sitio y ajustas los detalles.

Theme Builder versus editor de bloques de WordPress 7.0

WordPress 7.0, lanzado en mayo de 2026, trajo capacidades nativas para diseñar plantillas de tema con el editor de bloques. Esto plantea una pregunta legítima: sigue teniendo sentido pagar Elementor Pro solo por el Theme Builder.

Mi respuesta sincera es que depende del proyecto. Para sitios simples, el editor de bloques nativo ya hace lo que necesitas. Es rápido, no requiere plugin extra y genera código más limpio. Para sitios complejos con WooCommerce extenso, formularios avanzados, condiciones de visualización detalladas y flujos de diseño muy específicos, el Theme Builder de Elementor sigue ofreciendo ventajas claras.

La curva de aprendizaje también pesa. Si ya manejas Elementor, dominar el Theme Builder te toma horas. Si vienes desde cero, aprender el editor de bloques de WordPress 7.0 puede ser una mejor inversión a largo plazo. No hay respuesta única.

Preguntas frecuentes sobre el Theme Builder de Elementor

El Theme Builder está en la versión gratuita de Elementor

No. Es una función exclusiva de Elementor Pro. Si quieres usarlo necesitas adquirir una licencia Pro o suscribirte a Elementor One, que desde enero de 2026 incluye Pro junto con hosting, dominio, SSL y el agente Angie por unos 168 dólares al año.

Puedo usar Theme Builder con cualquier tema de WordPress

Sí, con la mayoría. Elementor recomienda temas optimizados como Hello Theme, que es gratuito y está diseñado específicamente para trabajar con sus plantillas. Si usas un tema comercial, asegúrate de que sea compatible y desactiva las partes que vas a reemplazar con Theme Builder para evitar duplicaciones.

Qué pasa si desactivo Elementor Pro

Las plantillas del Theme Builder dejarán de aplicarse. Tu sitio volverá al diseño que provee el tema activo en WordPress. Las plantillas seguirán guardadas en la base de datos, así que si reactivas Pro vuelven a funcionar. No pierdes el trabajo, solo deja de mostrarse.

Puedo tener varios headers para diferentes secciones del sitio

Sí, totalmente. Es uno de los usos más comunes. Configuras condiciones de visualización para cada plantilla. Por ejemplo, un header para el blog, otro para la tienda y otro para landings. Elementor aplica el correcto según la URL que se está visitando.

Las plantillas afectan la velocidad del sitio

Pueden afectarla si abusas de widgets pesados o efectos animados. Una buena práctica es construir las plantillas con contenedores Flexbox en lugar de secciones clásicas, usar imágenes optimizadas y limitar los efectos visuales a lo esencial. Bien hechas, las plantillas no impactan negativamente el rendimiento.

El Theme Builder funciona con WooCommerce

Sí, y muy bien. Tienes plantillas específicas para single product, product archive, cart, checkout, my account y thank you page. Esto te permite rediseñar completamente la experiencia de compra sin tocar los templates PHP de WooCommerce.

Puedo importar plantillas hechas por otros diseñadores

Sí. El Theme Builder acepta archivos JSON con plantillas exportadas. Hay bibliotecas oficiales de Elementor y marketplaces de terceros donde puedes descargar plantillas listas para importar. Revisa siempre que la plantilla sea compatible con tu versión de Elementor.

Las condiciones de visualización pueden ser muy específicas

Bastante. Puedes filtrar por tipo de página, categoría, etiqueta, autor, producto, taxonomía personalizada e incluso por parámetros de URL. Eso te permite crear experiencias muy segmentadas sin escribir lógica condicional en PHP.

Qué diferencia hay entre una plantilla y una página normal

Una página normal es una pieza de contenido específica con su propia URL. Una plantilla del Theme Builder es un molde que se aplica a múltiples páginas según las condiciones de visualización. Editas la plantilla una vez y los cambios se reflejan en todas las páginas que la usan.

Vale la pena migrar un sitio existente al Theme Builder

Si ya tienes Elementor Pro y estás luchando con el personalizador del tema para ajustes que deberían ser simples, sí, vale la pena. La migración te toma unas horas y después la administración del sitio se vuelve mucho más rápida. Si tu sitio es pequeño y el tema actual te basta, puedes posponer la migración sin urgencia.