Si trabajas con WordPress y Elementor, sabes que el diseño de páginas es potente. Sin embargo, ¿qué pasa cuando necesitas mostrar listados de contenido de forma personalizada? Antes, esto implicaba tocar código PHP, usar plugins complejos o limitarse a las opciones preestablecidas de tu tema. Afortunadamente, Elementor ha revolucionado esto con el «Loop Builder».
El «Loop Builder» es, sin duda, la funcionalidad más potente que Elementor ha lanzado en el último año. Permite crear listados dinámicos de cualquier tipo de contenido (entradas de blog, productos, proyectos, etc.) con una flexibilidad increíble y sin escribir una sola línea de código. Es una alternativa directa y más visual al famoso WP_Query de WordPress. Si quieres llevar el diseño de tu sitio al siguiente nivel con la última versión de Elementor Pro , este tutorial es para ti. Aprende a usarlo paso a paso.
¿Qué es el Loop Builder de Elementor y por qué sustituye a tu tema?
El Loop Builder es una herramienta de Elementor Pro que te permite diseñar la «plantilla» de un solo elemento dentro de un listado. Imagina que tienes un listado de entradas de blog. El Loop Builder te permite diseñar cómo se verá CADA una de esas entradas (su imagen, título, extracto, botón) y luego, Elementor se encarga de repetir ese diseño para todas las entradas de tu listado.
¿Por qué decimos que sustituye a tu tema? Porque tradicionalmente, era el tema de WordPress (o un tema hijo) el que definía cómo se mostraban estos listados. Por ejemplo, la página de tu blog o los archivos de categoría. Con el Loop Builder, tú tienes el control total para diseñar visualmente estos listados, liberándote de las limitaciones estéticas o funcionales impuestas por tu tema. Esto te da una flexibilidad de diseño sin precedentes.
Requisitos Previos (Importante)
Para seguir este tutorial y aprovechar al máximo el Loop Builder en Elementor Pro, necesitarás:
- Elementor Pro (v3.32.3 o superior): El Loop Builder es una funcionalidad exclusiva de la versión de pago de Elementor. Asegúrate de tenerlo instalado y activado.
- Contenido existente: Necesitarás tener contenido en tu WordPress para listar. Para este ejemplo, usaremos las «Entradas» (Posts) de tu blog, que vienen por defecto en WordPress.
- Opcional – Custom Post Types (CPT): Si quieres crear listados de contenido más avanzado (como proyectos, productos específicos de un sector, etc.), te beneficiarás de tener un Custom Post Type configurado. Esto se puede hacer con plugins como Custom Post Type UI (CPT UI) o Advanced Custom Fields (ACF).
Creando tu Plantilla de «Loop Item» (Paso 1)
El primer paso es diseñar cómo se verá cada elemento individual de tu listado. A esto lo llamaremos la «plantilla de Loop Item».
- Accede al Constructor de Plantillas:
- Desde tu escritorio de WordPress, ve a Plantillas > Añadir Nueva.
- Selecciona el tipo de plantilla «Loop Item» y dale un nombre fácil de recordar, por ejemplo, «Plantilla Tarjeta de Blog». Luego, haz clic en Crear Plantilla.
- Diseña tu «Tarjeta»:
- Una vez en el editor de Elementor, verás una página en blanco. Aquí es donde diseñarás cómo se verá una sola «tarjeta» de tu listado.
- Arrastra los widgets dinámicos necesarios:
- Imagen Destacada: Arrastra el widget de «Imagen Destacada» al lienzo. Asegúrate de que, en la configuración, la fuente esté en «Imagen destacada».
- Título del Post: Arrastra el widget de «Título del Post».
- Extracto del Post: Arrastra el widget de «Extracto del Post» (o «Contenido del Post» si quieres mostrar más).
- Botón: Arrastra un widget de «Botón» y enlázalo dinámicamente a la «URL del Post». Puedes ponerle un texto como «Leer más».
- Diseña el Estilo: Aplica estilos, colores, tipografías y espaciados como lo harías con cualquier otro diseño de Elementor. Piensa en el aspecto de una «tarjeta» que se repetirá.
- Previsualiza con Contenido Real (y en contexto):
- En la parte inferior izquierda del editor de Elementor, haz clic en el icono del ojo (Ajustes de Vista Previa).
- En «Previsualizar con», selecciona el tipo de contenido que vas a listar (por ejemplo, «Entrada»). Luego, elige una entrada específica de tu blog. Esto te permitirá ver cómo se vería tu plantilla con contenido real.
- Además, Elementor Pro ha mejorado la previsualización en el propio widget de Loop Grid, lo que facilitará ver el resultado final.
- Guarda tu Plantilla:
- Cuando estés satisfecho con el diseño, haz clic en Publicar. Esta plantilla no se publicará como una página web, sino que se guardará para ser usada por el «Loop Grid».
Insertando tu «Loop Grid» en la Página (Paso 2)
Ahora que tienes tu plantilla de «Loop Item» lista, es el momento de insertarla en la página donde quieres que aparezca el listado.
- Edita tu Página o Entrada:
- Ve a la página o entrada de WordPress donde quieres mostrar tu listado (ej. tu página de blog principal, una página de categorías, o cualquier otra página).
- Ábrela con el editor de Elementor.
- Arrastra el Widget «Loop Grid»:
- En el panel de widgets de Elementor, busca el widget llamado «Loop Grid».
- Arrastra este widget a la sección de tu página donde desees que aparezca el listado.
- Selecciona tu Plantilla de Loop Item:
- Una vez arrastrado, el widget «Loop Grid» te preguntará qué tipo de plantilla de Loop Item quieres usar.
- En la opción «Plantilla», selecciona «Elegir existente».
- Busca el nombre de la plantilla que creaste en el Paso 1 (por ejemplo, «Plantilla Tarjeta de Blog») y selecciónala.
- Configura el Diseño del Grid:
- En la pestaña «Contenido» del widget «Loop Grid», podrás ajustar el diseño.
- Define el número de columnas (ej. 3 columnas para un diseño de revista).
- Ajusta el espaciado entre las tarjetas.
- Configura el número de elementos a mostrar por página.
El Poder de la «Query» (Consulta): Cómo filtrar tus posts
La verdadera magia del «Loop Grid» reside en su pestaña «Query» (Consulta). Aquí puedes definir exactamente qué contenido quieres mostrar y cómo.
- Abre la Pestaña «Query»:
- En las opciones del widget «Loop Grid», haz clic en la pestaña «Query».
- Selecciona el Tipo de Fuente:
- En «Fuente», selecciona el tipo de contenido que quieres listar (ej. «Entradas» para posts de blog, «Páginas», «Productos» si tienes WooCommerce, o tus Custom Post Types).
- Filtra tu Contenido (Muy Importante):
- Aquí es donde puedes ser muy específico. Utiliza las opciones de filtrado para mostrar solo lo que necesitas:
- Incluir/Excluir: Puedes incluir posts por categorías, etiquetas, formatos o incluso entradas específicas por ID. De manera similar, puedes excluir elementos que no quieras mostrar.
- Términos: Si quieres mostrar posts de una categoría en particular (ej. solo «Noticias de Tecnología»), selecciona esa categoría aquí.
- Autores: Filtra por autor del post.
- Fecha: Muestra posts de una fecha específica, un periodo o los más recientes.
- Ordenar por: Define cómo se ordenarán los posts (por fecha, título, aleatoriamente, etc.).
- Por ejemplo, si quieres un listado de «Últimas Noticias de Marketing», seleccionarías «Entradas» como fuente y luego incluirías la categoría «Marketing».
- Aquí es donde puedes ser muy específico. Utiliza las opciones de filtrado para mostrar solo lo que necesitas:
El Loop Builder te mostrará los resultados en tiempo real mientras ajustas la consulta. Esto te permite visualizar instantáneamente cómo los filtros afectan tu listado.
Conclusión
El Loop Builder de Elementor Pro es una herramienta transformadora que empodera a los usuarios de WordPress para crear listados de contenido dinámicos y altamente personalizados sin necesidad de código. Desde atractivas rejillas de blog hasta complejos catálogos de productos o portfolios, las posibilidades son casi ilimitadas. Al dominar el diseño de tu «Loop Item» y el poder de la «Query», te liberas de las limitaciones de los temas y tomas el control total de la presentación de tu contenido.
En GAB Developers, estamos comprometidos con ayudarte a aprovechar al máximo las herramientas de WordPress para que tu sitio web no solo funcione, sino que brille. ¿Necesitas ayuda para implementar el Loop Builder o para desarrollar funcionalidades avanzadas en tu WordPress con Elementor?
¡Contáctanos hoy mismo y lleva tu proyecto al siguiente nivel!
