Usar las opciones de contenido dinámico de Divi
Las opciones de contenido dinámico de Divi te permiten extraer contenido de tu base de datos de forma fluida y mostrarlo.
Uso de las opciones de contenido dinámico en Divi
La función de Contenido Dinámico de Divi te permite convertir cualquier módulo de Divi en un elemento dinámico que extrae información directamente de la base de datos de tu sitio web a través de:
-
Metadatos de publicaciones (Post Meta)
-
Títulos de páginas
-
Imágenes destacadas
Divi permite usar contenido dinámico en cualquier módulo donde se pueda introducir contenido (texto, URLs, imágenes, etc.).
¿Qué es el contenido dinámico?
Los tipos de datos que se pueden usar incluyen:
-
Títulos de páginas y publicaciones
-
Extractos (excerpts)
-
Imágenes destacadas
-
Fecha de publicación
Cualquiera de estos tipos de datos puede mostrarse dinámicamente en un sitio WordPress. Además, el contenido dinámico también puede venir de campos personalizados o tipos de contenido personalizados.
Puedes crear campos personalizados con la ayuda de plugins como Advanced Custom Fields (ACF) y/o Toolset, para mostrar todo tipo de contenido.
En Divi, el contenido dinámico se puede usar en todos los módulos del constructor. Un ícono especial de contenido dinámico indica qué elementos pueden ser dinámicos.
Con el Theme Builder de Divi, puedes crear plantillas dinámicas para publicaciones, páginas de resultados de búsqueda, páginas de categorías, y más, todo mientras diseñas en tiempo real con el Visual Builder de Divi.
Dónde encontrar y usar contenido dinámico en Divi
Hay varios lugares donde puedes usar el contenido dinámico en Divi. Aquí te mostramos los más comunes:
1. Módulos dinámicos predeterminados de Divi
Algunos módulos del Divi Builder ya son dinámicos por defecto. Estos módulos extraen datos de tu sitio automáticamente. Ejemplos:
-
Blog: muestra una lista de publicaciones del sitio en formato de cuadrícula o ancho completo.
-
Título de la publicación: extrae dinámicamente el título de la publicación.
-
Contenido de la publicación (solo en el Theme Builder): muestra el contenido de la publicación.
-
Navegación de publicaciones: genera enlaces a la siguiente y anterior publicación.
-
Deslizador de publicaciones: crea diapositivas con publicaciones especificadas por el usuario.
2. Campos de contenido en los módulos de Divi
Además de los módulos dinámicos, puedes agregar contenido dinámico a cualquier área de entrada de contenido dentro de un módulo de Divi.
Esto significa que cualquier módulo con texto, enlaces o imágenes puede utilizar contenido dinámico.
Para acceder al contenido dinámico:
-
Coloca el cursor sobre un campo de contenido en los ajustes del módulo.
-
Si ese campo puede usar contenido dinámico, verás el ícono de contenido dinámico.
-
Al hacer clic en el ícono, aparecerá la lista de datos dinámicos disponibles en tu sitio.
3. Plantillas del Divi Theme Builder
El Theme Builder de Divi es donde el contenido dinámico realmente muestra su potencial. Con él, puedes diseñar plantillas globales (para todo el sitio) que extraen contenido dinámico, dándote un control total sobre el diseño de todo tu sitio web mediante el constructor visual de Divi.
Puedes crear plantillas para:
-
Publicaciones (Posts)
-
Páginas de categorías
-
Páginas de autor
-
Páginas de etiquetas (Tags)
-
Proyectos
-
Resultados de búsqueda
-
Páginas 404
Los ajustes de plantilla de Divi te permiten asignar condiciones específicas, como aplicar una plantilla a: Todas las páginas, páginas específicas, hijos de una página específica
Esto te da flexibilidad para personalizar el diseño de manera precisa según la estructura de tu sitio.
Además, puedes usar paquetes del Theme Builder que se pueden descargar fácilmente desde el blog de Elegant Themes. Con unos pocos clics, puedes importar estos paquetes y aplicar contenido dinámico a los elementos incluidos en los diseños.
4. Contenido de plantilla para encabezado y pie de página
Divi también permite añadir plantillas para encabezados y pies de página dentro del Theme Builder.
Puedes:
-
Descargar un paquete de encabezado/pie de página desde el blog oficial, o
-
Crear los tuyos propios desde cero.
Al construir encabezados, puedes usar el campo dinámico de logo del sitio, que permite insertar de forma automática una imagen dinámica que muestre el logotipo de tu marca.
Ejemplo:
1. Haz clic en el ícono de Contenido Dinámico en un módulo de menú o imagen.
2. Selecciona el campo Logotipo del sitio.
Al hacerlo, se insertará automáticamente el logotipo que hayas asignado en las opciones del tema de Divi.
De forma similar, puedes usar el campo de fecha dinámica de Divi para mostrar la fecha actual en el pie de página de tu sitio.
Esto es útil para evitar tener que actualizar manualmente la fecha cada año.
4. Contenido de plantillas para publicaciones de blog en Divi
Puedes construir una plantilla de publicación utilizando campos de contenido dinámico para extraer: El título de la publicación, el contenido, la imagen destacada, los metadatos de la publicación.
Si no tienes tiempo para crear tu plantilla desde cero, Divi te facilita el trabajo. En el blog de Elegant Themes puedes encontrar hermosas plantillas dinámicas de publicaciones listas para descargar.
5. Plantillas de archivos (Archive Templates) en Divi
Además de las plantillas para publicaciones, Divi te permite crear varias plantillas de archivo, incluyendo:
-
Páginas de archivo de autor
-
Páginas de categoría
-
Páginas de archivo por fecha
-
Listado de proyectos
-
Páginas de archivo por etiquetas
Crear plantillas de archivo es una excelente manera de mostrar publicaciones dentro de una categoría específica.
Es un paso que a menudo se pasa por alto al construir un sitio web, aunque es clave para la credibilidad visual y profesional de tu marca.
Gracias a Divi, puedes crear impresionantes páginas de categorías en pocos pasos.
Si necesitas más tiempo o experiencia, el blog de Elegant Themes ofrece plantillas gratuitas para publicaciones por categoría y categorías de productos.
Estas plantillas ya incluyen todo lo necesario: diseño, campos dinámicos y estructura funcional, para que puedas tener una página de categoría profesional y atractiva con solo unos clics.
Tipos de sitios web que puedes construir con contenido dinámico
Ejemplo: Si deseas crear un sitio web con listados de bienes raíces, normalmente necesitarías un plugin IDX para lograrlo.
Sin embargo, con las opciones de contenido dinámico de Divi, puedes construir ese tipo de sitio sin necesidad de un servicio IDX costoso.
Además, puedes crear sitios web enfocados en: Destinos turísticos, recetas, concesionarios de automóviles, directorios, sitios de membresía, y mucho más.
El contenido dinámico de Divi te permite crear sitios que, de otro modo, requerirían plugins adicionales.
Esto te da más libertad y flexibilidad, reduciendo costos y simplificando el desarrollo del sitio.
Resumen de los campos de contenido dinámico disponibles en Divi
Divi incluye varios campos de contenido dinámico a nivel de módulo que varían según cada módulo y ubicación. Estos campos de contenido dinámico pueden cargar contenido desde tu base de datos directamente en tu sitio Divi.
La mejor parte es que una vez que cargas contenido dinámico en un módulo Divi, puedes darle estilo usando las configuraciones de diseño incorporadas en Divi Builder. Pero antes de hablar de diseño, aquí hay una lista de cada campo de contenido dinámico disponible en Divi y cómo se usan.
Contenido dinámico de Divi – Campos de texto
-
Título de página/archivo – Este campo extrae dinámicamente el título de tu página o publicación. Puedes usar esto en cualquier módulo que contenga texto. Además, es útil para crear una plantilla con el Theme Builder para tus publicaciones.
-
Extracto de página – Este campo mostrará el extracto ingresado en la publicación o página. Al igual que el campo de título de página/archivo, es útil para construir una plantilla de página para tu sitio.
-
Fecha de publicación de la página – Muestra la fecha de publicación de la página o publicación.
-
Cantidad de comentarios de la página – Muestra el número de comentarios que tiene una publicación.
-
Enlace de página – Extrae dinámicamente un enlace a una página específica. Esto es útil cuando tu sitio está en desarrollo y no quieres volver a enlazar páginas manualmente al lanzar el sitio.
-
Autor de la página – Muestra dinámicamente el autor de la publicación.
-
Biografía automática – Muestra la información biográfica en el perfil de un autor (si está especificada).
-
Título del sitio – Muestra el título de tu sitio web.
-
Lema del sitio – Muestra el lema de tu sitio web.
-
Fecha actual – Muestra la fecha actual. Puedes usar esto para mostrar la fecha en tu pie de página para eliminar la necesidad de cambiarla cada año.
-
Nombre de campo personalizado manual – Muestra un campo de texto manual. Puedes especificar texto antes y después y el nombre del campo. Profundizaremos más en esto más adelante.
Contenido dinámico de Divi – Campos de imagen
-
Imagen destacada – Puedes vincular dinámicamente la imagen destacada de tu página o publicación para mostrarla en cualquier módulo que contenga un campo de imagen.
-
Foto de perfil del autor – Muestra la imagen de perfil del autor de una publicación.
-
Logotipo del sitio – Muestra el logotipo de tu sitio web definido en Divi → Opciones del tema.
Creando un diseño de contenido dinámico
Hay varias maneras de crear un diseño con contenido dinámico dentro de Divi. La primera es usando el Theme Builder de Divi. Puedes crear publicaciones, páginas y otros tipos de plantillas.
Otra forma es incorporar contenido dinámico usando el Page Builder de Divi. Esto te permite tener contenido estático y dinámico en la misma página.
Divi Theme Builder
Comenzar con el Theme Builder es fácil.
1. Navega a Divi → Theme Builder.
2. Haz clic en el botón + Añadir nueva plantilla para crear tu nueva plantilla.
Ejemplo: Cuando creas una plantilla para publicaciones, verás algunos campos adicionales de contenido dinámico disponibles para construir tu plantilla, incluyendo contenido de la publicación y título de la publicación.
Como se mencionó anteriormente, el Título de la publicación extraerá dinámicamente el título de la publicación para la plantilla. El Contenido de la publicación te permite extraer el contenido de tu publicación. Puedes estilizar el texto del cuerpo, el texto del encabezado, y los colores del texto y del enlace.
Para aprender más sobre el Theme Builder de Divi, por favor lee su documentación.
Divi Page Builder
Además de crear plantillas en el Theme Builder, puedes usar el Page Builder de Divi para utilizar contenido dinámico.
Ejemplo: Puedes vincular dinámicamente páginas usando la opción de contenido dinámico del título de página en el módulo de botón.
Haz clic en el ícono dinámico en el campo de enlace del botón para mostrar las opciones de contenido dinámico.
1. Haz clic en el ícono de contenido dinámico en la esquina superior derecha de la vista previa de la imagen.
2. Selecciona la opción Imagen destacada.
Divi extraerá dinámicamente la Imagen destacada de tu página y la insertará en el módulo de imagen seleccionado.
Además, puedes asignar la foto de perfil de un autor a un módulo de imagen. El Contenido Dinámico también puede usarse en cualquier módulo que tenga opciones de texto.
Esto es cierto para módulos de texto, Blurbs, Acordeones, Pestañas, Llamados a la acción y más. Las posibilidades son infinitas.
Por ejemplo, el módulo Blurb tiene varias opciones para agregar contenido dinámico, incluyendo el texto del título, el texto del cuerpo, la imagen, el enlace y las secciones de imagen de fondo.
Opciones dinámicas de Blurb
Campos personalizados
Primero, veamos algunos plugins que pueden ayudarte a construir un sitio Divi personalizado para tus necesidades.
Contenido Dinámico con Plugins
Tanto Toolset como Campos Personalizados Avanzados se integran bien con Divi.
Puedes crear tipos de publicaciones personalizadas, taxonomías, grupos de campos y campos personalizados con ambos plugins.
Una ventaja de Toolset es que te permite crear vistas para mostrar contenido en bucle, similar a una página tipo blog roll. Esto permite consultas de datos personalizadas definidas por campos personalizados. Puedes extraerlos en tus páginas Divi usando el módulo Toolset View.
Esto te permite combinar el contenido estático de la página con contenido dinámico en la misma página, usando campos personalizados que creas con Toolset.
Campos Personalizados Avanzados funciona de manera similar a Toolset, excepto en la creación de plantillas personalizadas.
Con ACF, creas grupos de campos con campos personalizados, pero en lugar de usar ACF para crear una plantilla, usas los campos personalizados directamente a través del Divi Builder.
Ejemplo: quieres construir un sitio web de staging de muebles para mostrar diferentes grupos de salas de estar. Comenzarías creando un grupo de campos para salas de estar.
Luego, crearías campos dentro del grupo para resaltar características de tu sala de estar. Una vez creados los campos, crearías publicaciones para mostrar los grupos de salas que deseas ofrecer para staging.
Finalmente, usarías el Divi Theme Builder para crear una plantilla de publicación para mostrar tus publicaciones.
Añadiendo Campos Personalizados Manualmente
Otra forma de agregar campos personalizados es ingresándolos manualmente. Por defecto, WordPress te da la posibilidad de agregar campos personalizados. Dicho esto, esta opción está oculta en las preferencias de la publicación.
Crea una nueva publicación y navega a las preferencias de la publicación para activar la función.
1. Usando el editor Gutenberg, haz clic en el menú de tres puntos en la esquina superior derecha.
2. Haz clic en Preferencias.
Preferencias de contenido dinámico en publicaciones de Divi
3. Haz clic en Paneles.
4. Activa los campos personalizados en el área de opciones. WordPress te pedirá que recargues la página.
5. Haz clic en el botón Habilitar y recargar.
Introduce tus datos dando un nombre y un valor a tu nuevo campo.
En este caso, comenzaríamos con Tipo de sofá. Añade tantos valores como quieras, cada uno en una línea separada.
Consejos y Mejores Prácticas para el Contenido Dinámico de Divi
No olvides darle un lugar a tu contenido dinámico
Dale a tus campos personalizados un nombre único
Dale a tu contenido dinámico espacio para respirar
Cómo agregar un espaciado apropiado en el contenido dinámico para plantillas del Theme Builder y Page Builder
Por qué es importante añadir espacio
Cómo agregar espacio en las plantillas del Theme Builder
Por ejemplo, usando el Page Builder, tienes una galería dinámica de imágenes que deseas mostrar en tu sitio web. En el campo before, ingresarías el shortcode de tu galería seguido de un espacio. Esto creará una separación natural entre tu galería y cualquier elemento circundante en tu sitio.
Añadiendo espacio en el Page Builder
En el Page Builder, puedes agregar espaciado igual que en las plantillas del Theme Builder. Añade un espacio después de tu contenido dinámico en el campo before, creando automáticamente suficiente espacio para mostrar tu contenido correctamente.
Conclusión
Estiliza tu contenido dinámico
Sigue aprendiendo
- Cómo diseñar un cuadro de autor dinámico para tu plantilla de blog con Divi
- Convertir el módulo Tienda de Divi en tarjetas de productos dinámicos para móviles
-
Cómo usar la función de contenido dinámico de Divi para diseñar un diseño dinámico de publicaciones
-
Cómo personalizar una página de producto de Divi con contenido dinámico en línea
-
Cómo usar contenido dinámico para crear un acordeón de información de producto WooCommerce en Divi
Popular Articles
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
Uso de las Opciones de Sombra de Caja en Divi
Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...Uso de las Opciones de Borde en Divi
Las opciones de borde de Divi permiten añadir y estilizar fácilmente bordes en cualquier elemento de la página. Con las Opciones de Borde de Divi, es posible crear diseños verdaderamente únicos para tu sitio web. ¡Puedes aplicar bordes personalizados ...Uso de las Opciones de Tamaño en Divi
Las Opciones de Tamaño de Divi facilitan el ajuste del tamaño de secciones, filas, columnas y módulos en Divi. Las Opciones de Tamaño de Divi hacen que ajustar el tamaño de secciones, filas, columnas y módulos sea sencillo. El tamaño es una parte ...Uso de las Opciones de Espaciado en Divi
Es fácil personalizar el espaciado en secciones, filas y módulos con las Opciones de Espaciado de Divi. El espaciado es un elemento importante en el diseño web. Ayuda a organizar tu contenido y mantener las cosas claras y equilibradas. Con Divi, es ...Usando las Opciones de Transformación de Divi
Las opciones de transformación de Divi son un conjunto de herramientas poderosas que te permiten manipular el diseño web de formas sorprendentes, creando profundidad y efectos visuales atractivos. Las opciones de transformación de Divi te permiten ...