El Repetidor Dinámico es un widget de diseño basado en colecciones que te permite crear rápida y fácilmente diseños estructurados y repetitivos donde el diseño es el mismo para cada elemento, pero el contenido es diferente; como listas de productos, eventos o servicios.
El contenido que se muestra en el Repetidor se gestiona desde una colección interna. Para familiarizarte con las colecciones internas y su funcionamiento, consulta Contenido Dinámico: Colecciones Internas.
Nota
Mientras el Repetidor Dinámico está en pruebas, solo se pueden conectar colecciones internas y de imágenes. En el futuro planeamos dar soporte a Google Sheets, Airtable y bases de datos externas.
El envoltorio (también llamado "marco") del widget Repetidor es el contenedor para los elementos de la colección. En la imagen de abajo, se muestran tres objetos de la colección.
Cada elemento de la colección muestra el contenido de una fila dentro de la colección interna conectada. Esto es posible conectando widget a columnas de la colección interna.
Por ejemplo, en un sitio web de adopción de perros hay una colección interna que lista perros adoptables. Puedes ver una imagen de la colección a continuación.
Para mostrar los perros en el Repetidor Dinámico, las columnas y widget están conectadas de la siguiente manera:
-
La columna "Imagen" está conectada a un widget de Imagen.
-
La columna "Nombre del perro" está conectada a un widget de Encabezado Pequeño.
-
La columna "Descripción del perro" está conectada a un widget de Texto.
Cuando agregas el Repetidor Dinámico al lienzo, se crea una colección interna de muestra que se enlaza al Repetidor Dinámico. Puedes modificar esta colección de muestras, o crear una nueva colección para enlazarla al Repetidor Dinámico.
Para agregar un Repetidor Dinámico widget:
-
En la sección de Elementos de Diseño del panel widget , localiza el Repetidor Dinámico y arrástralo sobre el lienzo. Ten en cuenta que al agregar el Repetidor al lienzo, se crea una colección interna de muestra con 4 elementos de la colección (filas en la colección) que se llenan en el Repetidor Dinámico. Esto es para ayudarte a visualizar el diseño antes de agregar tu propio contenido.
-
Si lo deseas, puedes agregar y eliminar widget del Repetidor Dinámico para satisfacer tus necesidades. No importa qué objeto de colección modifiques, los cambios actualizarán automáticamente todos los demás elementos de la colección. Ten en cuenta que los nuevos widget deberán conectarse manualmente a una columna de colección específica. Esto se completará en una etapa posterior.
Puedes modificar el diseño del envoltorio del Repetidor Dinámico o los elementos de la colección dentro del Repetidor Dinámico. Ten en cuenta que los cambios de diseño realizados en un artículo de la colección se aplicarán a todos los demás. Esto te permite ahorrar tiempo en lugar de aplicar manualmente cambios de diseño a cada elemento individual de la colección y arriesgarte a errores.
Para modificar el diseño del envoltorio, haz clic en el widget Repetidor Dinámico para abrir el menú flotante y haz clic en Editar diseño. En la sección de envoltorios del panel de diseño puedes configurar lo siguiente:
-
Diseño de envoltorio. Puedes definir el color de fondo del Repetidor Dinámico, la alineación, el tamaño, la animación, la posición (fija o fijada) y el espacio entre los elementos de la colección dentro del Repetidor Dinámico.
Para saber más sobre las secciones del panel de diseño y cómo configurar cada opción de diseño, consulta Diseño con tecnología Flexbox.
Para saber más sobre qué significa "fijo" o "clavado" en términos de posición widget, consulta widget Posición: Fija y Clavada.
Para definir cómo se muestran los elementos de la colección en el Repetidor Dinámico, haz clic en el widget del Repetidor Dinámico para abrir el menú flotante y haz clic en Editar diseño. En la sección de Diseño del panel de diseño puedes configurar lo siguiente:
-
Elementos por fila. Selecciona cuántos elementos de colección mostrar por fila. Máximo de 10 elementos por fila.
-
Los objetos encajan. Elige ancho fijo o estirado para ajustar.
Para activar la paginación o una opción de cargar más, abre la sección de navegación del panel de diseño y activa el interruptor Habilitar navegación . Una vez habilitada la navegación, configura lo siguiente:
-
Paginación o Carga más. La paginación divide los elementos de la colección en páginas entre las que los visitantes del sitio navegan. Cargar más muestra una cantidad fija de elementos de colección, y luego cada clic carga un conjunto adicional de elementos de colección.
-
Elementos por página. Define cuántos elementos de colección mostrar por página o antes de que se carguen más resultados.
Para hacer cambios de diseño en el widget dentro de un elemento de colección, haz clic en un elemento individual de la colección para abrir el menú flotante y haz clic en Editar diseño. Todos los cambios de diseño se aplicarán a cada elemento del Repetidor. En la sección de Diseño del panel de diseño puedes configurar lo siguiente:
-
Alineación de contenido. Define la alineación horizontal y vertical del contenido dentro del elemento de la colección.
-
Dirección de apilamiento. Selecciona si los widget dentro del repetidor están apilados horizontal o verticalmente.
-
Envolve y alinea la fila. Si lo deseas, puedes activar el widget de cada elemento de la colección para que se complete en otra fila. Si eliges envolver, también necesitas definir la alineación de filas.
Es importante señalar que el ancho o la altura de los elementos de la colección en el Repetidor Dinámico no pueden cambiar. El artículo de la colección escala para caber al 100% del envoltorio, lo que significa que la altura y el ancho del objeto de la colección están controlados por la altura y el ancho del envoltorio del Repetidor Dinámico. La altura y el ancho del Repetidor Dinámico pueden definir en la sección de Tamaño del panel de diseño.
Cuando añadis el Repetidor Dinámico al lienzo, se crea una colección interna de muestra que se vincula al Repetidor Dinámico y al widget predeterminado dentro de él. Puedes modificar esta colección de muestras o crear una nueva colección interna para enlazar al Repetidor Dinámico. Si añadis nuevos widget al Repetidor Dinámico, tendrán que estar conectados a una columna de colección.
Nota
Actualmente, el Repetidor Dinámico solo puede conectarse a una colección interna o de imágenes. En el futuro, planeamos apoyar todo tipo de colecciones.
Para conectar un Repetidor Dinámico a una colección:
-
Haz clic en el widget de Repetidor Dinámico para abrir el menú flotante.
-
Haz clic en el icono de tres puntos en el menú flotante y luego selecciona Reemplazar colección.
-
En modal, emplea el menú desplegable para seleccionar la colección deseada.
-
Haz clic en Reemplazar.
-
A continuación, tienes que conectar widget a las columnas de la colección. Haz clic en un widget en el Repetidor Dinámico para abrir el menú flotante, luego haz clic en el icono de tres puntos y selecciona Conectar a datos.
-
En el modal, emplea el menú desplegable para seleccionar la columna de la colección que se conectará al widget. Ten en cuenta que solo se mostrarán las columnas compatibles. Por ejemplo, Image widget solo puede conectarse a una columna de la colección con Image como tipo de campo. Haz clic en Conectar. Repite para cada widget en el Repetidor Dinámico.
Para agregar un elemento de colección al Repetidor Dinámico, necesitas agregar una nueva fila en la colección. La fila debe tener contenido antes de que se llene en el Repetidor Dinámico.
Para eliminar un elemento de la colección, elimina la fila correspondiente de la colección.
Para agregar una widget, abre el panel widget y arrastra y suelta el widget deseado en el Repetidor Dinámico. El widget se agrega automáticamente a todos los demás elementos de la colección.
Cuando estés listo para conectar el widget a la colección, haz clic en el widget para abrir el menú flotante. Haz clic en el icono de tres puntos y selecciona Conectar a datos. En la ventana emergente, selecciona la columna a la que quieres conectar el widget. Ten en cuenta que solo se mostrarán columnas compatibles, lo que significa que Imagen widget solo puede conectarse a una columna de la colección con Imagen como tipo de campo. Haz clic en Conectar.
Para cambiar la conexión del widget, haz clic en el widget para abrir el menú flotante. Haz clic en el icono de tres puntos y selecciona Cambiar conexión. Emplea el menú desplegable en la ventana emergente para seleccionar una columna de colección diferente. Haz clic en Conectar.
Para editar el contenido de un elemento en el Repetidor Dinámico, haz clic en el widget y realiza las actualizaciones deseadas. Como el Repetidor Dinámico soporta edición en línea, tus cambios también se actualizarán en la colección conectada.
También puedes editar el contenido de un elemento de la colección directamente desde la colección.
Para aumentar o disminuir el espacio entre los elementos de la colección, haz clic en el Repetidor Dinámico para abrir el menú flotante y haz clic en Editar diseño. En la sección de Espaciado del panel de diseño, emplea la opción Espaciado entre elementos para definir el espacio entre los elementos de la colección.