Cómo usar Dynamic tags en Elementor para contenido dinámico optimizado

Las etiquetas dinámicas de Elementor son marcadores que permiten insertar contenido dinámico de WordPress en los campos de los widgets compatibles, sin necesidad de programar. Se reconocen por el icono de círculos apilados que aparece junto al campo y se organizan en siete grupos: post, archivo, sitio, acciones, medios, autor y comentarios. No todas están disponibles en todos los campos.

Las etiquetas dinámicas constituyen un recurso muy útil que Elementor pone a nuestra disposición para aprovechar al máximo el contenido dinámico de WordPress.

Como es sabido, el contenido dinámico es el pilar sobre el que funcionan las webs actuales basadas en CMS en general y, en este caso concreto, en nuestro apreciado WordPress.

Esto significa que una parte importante de la información reside en una base de datos a la que WP realiza sus consultas para mostrar esos datos en la web que vemos en nuestro navegador.

Ese contenido dinámico, organizado en tablas y campos dentro de la base de datos de nuestro sitio, ya lo empleamos en nuestros diseños de plantillas dinámicas de single, loops, archivos, búsquedas, productos, etc., para lograr esos diseños tan singulares que nos permite Elementor.

Y esto lo conseguimos mediante los widgets dinámicos que nos posibilitan construir dichas plantillas.

Pero, ¿y el resto de los widgets, acaso no cuentan con contenido dinámico?

La realidad es que sí, y para ello recurrimos a las etiquetas dinámicas. Podemos utilizar distintos campos de entrada en los widgets que tienen habilitada esa función mediante el pequeño icono de etiqueta dinámica.

Es más, no solo nos permite incorporar contenido dinámico en nuestras páginas estáticas, sino también mejorar notablemente nuestras plantillas dinámicas con detalles de gran relevancia.

Vamos a descubrir cómo utilizarlas y a analizar detalladamente cada uno de los siete grupos de etiquetas dinámicas disponibles para comprender mejor cómo aprovecharlas.

También veremos algunos ejemplos en los que estas etiquetas dinámicas te permitirán realmente marcar la diferencia en tus propuestas de desarrollo y diseño web. ¡Allá vamos 🙂

Cómo utilizar las etiquetas dinámicas de Elementor

Emplear las etiquetas dinámicas resulta muy sencillo. Solo tienes que seguir estos pasos:

1. Escoge un widget compatible. Lo reconocerás al comprobar que sus campos muestran, normalmente a la derecha, unos pequeños círculos apilados
2. Para ver las etiquetas disponibles en el widget, haz clic en ese icono.
3. Selecciona la etiqueta que deseas utilizar; más abajo te explico todas las que hay.
4. Por último, configura el comportamiento de la etiqueta elegida. También encontrarás más abajo información sobre las opciones disponibles.

OJO: No todas las etiquetas dinámicas están disponibles para todos los campos de contenido dinámico. Únicamente las etiquetas disponibles aparecerán como opciones en la lista desplegable del campo correspondiente.

Ventajas de utilizar las etiquetas dinámicas en Elementor

Las etiquetas dinámicas te posibilitan mostrar contenido de forma dinámica según distintos criterios, como los autores de las publicaciones, las categorías, las etiquetas y los campos personalizados. Este grado de personalización garantiza que el contenido de tu sitio conecte con cada usuario de manera personalizada.

• Integración sin código: Las etiquetas dinámicas forman parte esencial de Elementor, lo que facilita incorporar contenido dinámico en tus diseños sin necesidad de programar nada.
• Mayor flexibilidad: Es compatible con múltiples fuentes dinámicas, entre ellas posts, tipos de publicaciones personalizadas o CPTs, productos de WooCommerce y taxonomías personalizadas. Esta flexibilidad te permite crear secciones dinámicas ajustadas a las necesidades concretas de tu web.
• Integración de datos de usuarios: Incorpora información específica del usuario en tu contenido, generando experiencias personalizadas para los usuarios que hayan iniciado sesión.
• Lógica condicional: Gracias a la reciente funcionalidad nativa de Elementor de mostrar contenido condicional combinada con las etiquetas dinámicas, puedes establecer reglas avanzadas de contenido basadas en diversas condiciones, permitiendo por ejemplo mostrar contenidos distintos a diferentes usuarios o en contextos diferentes.

Qué etiquetas dinámicas hay disponibles en Elementor para WordPress

El contenido dinámico obtiene información del sitio web o de la página/publicación actual, y cambia de forma dinámica según la página o publicación en la que se encuentre.

Etiquetas dinámicas de una entrada (post)

Los posts representan una publicación concreta en WordPress, como una entrada de blog, una página o cualquier tipo de contenido personalizado o CPT.

A continuación se muestran las etiquetas dinámicas que recuperan la información correspondiente de la base de datos para mostrarla en el frontend:

• Campo personalizado de la publicación (Post Custom Field): te permite escoger entre los campos personalizados vinculados a la publicación actual.
• Extracto de la publicación (Post Excerpt): muestra el resumen breve de la publicación actual.
• ID de la publicación (Post ID): El ID de WordPress de la publicación actual.
• Términos de la publicación (Post Terms): La taxonomía seleccionada para la publicación actual (categoría, etiquetas, etc.).
• Hora de la entrada (Post Time): La hora en que se publicó la publicación actual (según la configuración de fecha/hora de WordPress).
• Título de la entrada (Post Title): El título de la publicación actual.
• URL de la entrada (Post URL): La URL de la publicación actual.

Veamos un par de ejemplos de uso con etiquetas dinámicas de post

• Formulario de contacto en un blog: Si utilizas un campo oculto en el formulario, puedes capturar dinámicamente el título del post desde el que se envía el formulario, lo que ayuda a saber de qué entrada habla el usuario y a comprender mejor el contexto de este formulario.
• Botón de compartir en redes sociales: Configura un botón estático para compartir automáticamente la URL del post en distintas redes sociales como Facebook o X.

Etiquetas dinámicas del archivo (archive)

Estas etiquetas muestran datos de páginas de archivo, lo que permite personalizar cómo se visualiza esta información.

• Descripción del archivo (Archive Description): La descripción del archivo actual.
• Meta del archivo (Archive Meta): Muestra información del archivo basada en una clave meta.
• Título del archivo (Archive Title): El título del archivo actual.
• URL del archivo (Archive URL): La URL del archivo actual.

Resultan ideales para mantener la coherencia y la personalización sin tener que modificar manualmente cada archivo. Veamos dos buenos ejemplos de uso con etiquetas dinámicas de archive.

• Encabezado de archivo personalizado: Crea un encabezado que diga «Artículos sobre [Categoría actual]» o «Posts de [Año]». La etiqueta sustituye automáticamente el texto según el archivo visitado.
• Breadcrumbs (o migas de pan) personalizados: Usa etiquetas dinámicas para mostrar el nombre del archivo actual como parte de una ruta de navegación fija.

Etiquetas dinámicas del sitio (site)

Estas etiquetas abarcan información general del sitio y aseguran que los datos del sitio estén siempre actualizados sin intervención manual.

• Título de la página (Page Title): El título de la página actual.
• Descripción corta del sitio (Site Tagline): El eslogan del sitio, por decirlo así.
• Título del sitio (Site Title): El título del sitio.
• Fecha y hora actuales (Current Date Time): Muestra la fecha y hora actuales.
• Solicitar parámetro (Request Parameter): Usa datos transferidos mediante GET, POST o Query Vars Requests para funcionalidades avanzadas.
• Shortcode: Puedes emplear un shortcode dinámico de WordPress para contenido que Elementor no cubra con una etiqueta dinámica o que no sea nativo de Elementor.
• Información de usuario (User Info): Muestra información del usuario actual, como ID, Nombre visible, Nombre de usuario, Nombre, Apellido, Biografía, Email, Sitio web o Meta de usuario.
• URL del sitio (Site URL): nos muestra en el frontend la URL del sitio.
• URL interna (Internal URL): Muestra una URL interna para el enlace, eligiendo entre Contenido, Taxonomía, Medios o Autor.

Casos prácticos con etiquetas dinámicas de site:

• Pie de página fijo: Incorpora de forma dinámica el nombre del sitio para que siga actualizado si más adelante lo cambias en los ajustes generales.
• Enlace de «Volver al inicio»: Genera un botón que siempre apunte al URL principal del sitio sin tener que editarlo a mano en distintas páginas.

Etiquetas dinámicas de acciones (actions)

Las etiquetas de acciones ofrecen enlaces dinámicos para ejecutar acciones concretas y resultan muy prácticas para mejorar la usabilidad y la funcionalidad básica del sitio sin complicaciones.

• Caja de luz: Configura una lightbox para que se abra al hacer clic sobre un elemento multimedia.
• URL de contacto (Contact URL): Genera un enlace inteligente al hacer clic en el elemento. Nos ofrece hasta 9 formas distintas de contacto (Mirar imagen abajo).
• Ventana emergente: Abre o cierra un popup al hacer clic en un elemento. Muy útil para seguir acompañando al usuario de nuestra web hasta su siguiente destino.

Etiquetas dinámicas de medios (media)

Hace referencia al contenido multimedia del sitio, como imágenes destacadas, vídeos, galerías o archivos adjuntos.

• Datos de la imagen destacada (Featured Image Data): Muestra los metadatos de la imagen destacada de la publicación actual, permitiéndote elegir entre
  • Título
  • Alt
  • Leyenda
  • Descripción
  • URL del archivo
  • URL del adjunto

Dos ejemplos, uno con gran impacto visual y otro para enlazado automático.

• Imagen destacada personalizada: Emplea dinámicamente la imagen destacada de un post o página como fondo visual en bloques decorativos fijos, como banners o encabezados, realzando y usando las imágenes y elementos de branding favoritos para ello.
• Botón de descarga de archivos: Configura un botón para que enlace automáticamente al último archivo adjunto subido en una entrada específica.

Etiquetas dinámicas de autor (author)

Incluye datos vinculados con los autores del contenido.

• Información del autor (Author Info): Muestra información sobre el autor de la publicación actual, eligiendo entre Biografía, Email o Sitio web.
• Meta del autor (Author Meta): Muestra información del autor basada en una clave meta, como el país o la fecha de nacimiento del autor.
• Nombre del autor (Author Name): El nombre del autor de la publicación actual.
• URL del autor (Author URL): La URL de la página del autor de la publicación actual.

Perfecto para dar visibilidad a los autores y reforzar la conexión con los visitantes 🙂

Casos prácticos con etiquetas dinámicas de autor:

• Sección de «Escrito por»: Incorpora dinámicamente el nombre, la foto y la biografía del autor en un bloque fijo para personalizar los artículos o páginas.
• Página de agradecimientos: Muestra una lista personalizada con nombres y fotos de todos los autores implicados en un proyecto, sin necesidad de actualizaciones manuales.

Etiquetas dinámicas de comentarios (comments)

Estas etiquetas aportan información dinámica relacionada con los comentarios.

• Número de comentarios (Comments Number): El número de comentarios de la publicación actual.
• URL de los comentarios (Comments URL): La URL del formulario de comentarios en la publicación actual.

Casos prácticos con etiquetas dinámicas de comentarios

• Recuento de comentarios dinámicos: En un bloque de texto fijo, muestra automáticamente el número de comentarios en un post, animando a los usuarios a participar comentando.
• Enlace directo al formulario: Genera un botón fijo que lleve automáticamente al formulario de comentarios de una entrada específica, haciendo más efectiva la navegación de la web.

Vamos a ver una más en detalle.

Cómo crear un enlace dinámico en Elementor

Esta es una funcionalidad muy chula. Muchos de los widgets admiten la función de enlace dinámico, por lo que convertir ese enlace en dinámico en Elementor es muy sencillo.

Sigue estos cuatro pasos:

1. Selecciona el elemento donde deseas agregar un enlace dinámico.
2. Selecciona el campo de enlace y pulsa en el icono «Etiquetas dinámicas» ubicado al lado del icono de configuración.
3. Desplázate hacia abajo hasta la sección Sitio y selecciona «URL interna».
4. Haz clic en el campo de enlace y verás un menú desplegable de configuración. Desde allí, establece el «Tipo como Contenido». Luego, utiliza la barra de búsqueda para encontrar el nombre de la página o publicación deseada.

Y eso es todo. De esta manera tendrás creado un enlace dinámico rápidamente. 🎉

Gracias a las etiquetas dinámicas para sitios con WooCommerce, puedes crear páginas en las que mostrar los productos más recientes, o productos individuales, a modo de landings de producto que quieras mostrar.

Estos productos, además, podrían ser personalizados para los visitantes basados en sus categorías navegadas o incluso para clientes registrados, en criterios relacionados con sus anteriores compras.

Estas son las etiquetas disponibles que puedes usar:

• Precio de producto (Product Price): El precio del producto actual.
• Valoración del producto (Product Rating): La valoración del producto actual.
• Oferta del producto (Product Sale): El estado de oferta del producto actual.
• Descripción corta de producto (Product Short Description): La descripción corta del producto actual.
• SKU del producto (Product SKU): El SKU del producto actual.
• Inventario de producto (Product Stock): El número de existencias del producto actual.
• Términos del producto (Product Terms): La taxonomía seleccionada (categoría, etiquetas, etc.) para el producto actual.
• Título del producto (Product Title): El título del producto actual.

Algunos ejemplos muy interesantes de uso de las etiquetas de WooCommerce son:

• Boton dinamico para compartir un producto específico: Ideal para que los compradores compartan productos que les parecen interesantes con sus amigos y compañeros
• Mostrar el precio actual en un widget fijo en una página estática: Ideal para landings especiales de productos que además permitirá que el precio se actualice cuando se cambie sin tener que preocuparse.
• Formularios inteligentes que registran a través de una etiqueta en un campo oculto el nombre del producto para que quede registrado exactamente el producto que está visitando el cliente para una mejor atención.
• Información de stock en tiempo real que incluso hace que se oculte de manera condicional en caso de que se agote el producto hasta que se restablezca el stock.
• Personaliza emails o mensajes en la web con información del cliente registrado en nuestro sitio y así reforzar la experiencia del cliente.

En definitiva, la combinación de Elementor, WooCommerce y las etiquetas dinámicas convierten esto en un combo claramente ganador.

Conclusiones sobre las etiquetas dinámicas

Como has podido comprobar, existen multitud de aplicaciones, y es posible mejorar y automatizar la carga de información personalizada desde la base de datos mediante las etiquetas dinámicas, además de algunas ideas realmente interesantes sobre cómo emplear esta herramienta en tus sitios web.

Además, hay muchos plugins de terceros y addons que añaden etiquetas dinámicas adicionales, tales como:

• ACF
• Jet Engine
• Dynamic elements for Elementor

Y varios más que podrás encontrar en nuestro actualizado resumen de Addons para Elementor.

Si aun así, no te bastara, Elementor para desarrolladores provee información muy completa y asequible para que puedas crear tus propias etiquetas dinámicas.

Aunque parecen sencillas, la verdad es que las etiquetas dinámicas de Elementor te ayudarán a mejorar mucho la experiencia e interfaz de uso para tus visitantes. Podrás crear cosas como formularios más inteligentes, botones más contextuales a través de este contenido en prácticamente todos tus widgets.

Si tienes alguna duda o quieres contarnos algo, por favor usa nuestros comentarios de abajo. Nos vemos en el próximo post 😀

Preguntas Frecuentes