Nos hace muchísima ilusión compartir 3 nuevas funciones que te permiten crear galerías personalizadas a partir de tus imágenes y vídeos del CMS de forma sencilla.
Ahora puedes subir, diseñar y mostrar tus fotos y vídeos del CMS y de Ecommerce fácilmente gracias a tres nuevas funciones:
- El nuevo campo de imágenes múltiples
- CSS grid 2.0
- Una mejora en nuestro componente lightbox
Para mostrarte un par de estas funciones en acción, Meg, la nueva integrante de nuestro equipo de comunidad, creó una galería de miniaturas de productos en una página de producto de ecommerce.
Sube hasta 25 imágenes a la vez con el nuevo campo de imágenes múltiples
¡Las subidas por lotes son lo más! Nuestro nuevo campo de imágenes múltiples te permite subir hasta 25 imágenes. En un solo campo, puedes soltar todas las mejores fotos de un proyecto de portafolio, un montón de miniaturas de productos o incluso tus 10 GIFs favoritos de perros bailando salsa... siempre que pesen menos de 4 MB cada uno, claro. También puedes reordenar tus imágenes como quieras.
Para añadir un campo de imágenes múltiples (o tres) a tu colección, ve a la configuración de cualquier colección (incluidos tus productos de Ecommerce), haz clic en "Añadir nuevo campo" y selecciona el tipo de campo de imágenes múltiples. Ponle un nombre, añade un texto de ayuda (si quieres), guarda la configuración de la colección y ya estarás listo para empezar a soltar tus imágenes.
Una vez subidas, puedes conectar esas imágenes a cualquier diseño en una página de plantilla de colección usando una lista de colección. De esta forma, tus diseños se mantienen súper flexibles, extrayendo dinámicamente las imágenes que corresponden a cada elemento, incluso si la cantidad varía.
Crea una cuadrícula de imágenes dinámica usando grid 2.0
El mes pasado anunciamos mejoras importantes en CSS grid en Webflow. Entre esas mejoras se incluye la nueva capacidad de crear diseños de cuadrícula fácilmente editables con contenido dinámico, como, por ejemplo, esas fotos de proyectos de portafolio o las miniaturas de productos que acabas de soltar en tu nuevo campo de imágenes múltiples.
El lanzamiento de CSS grid 2.0 introdujo el concepto de autoflow, un nuevo modo predeterminado para posicionar los elementos hijos de la cuadrícula, lo que incluye todo el contenido dinámico diseñado en una cuadrícula. Básicamente, esto significa que tu contenido será mucho más flexible porque la propia cuadrícula coloca automáticamente el contenido en la siguiente celda disponible, sin importar cómo modifiques tus columnas o filas.
Autoflow hace que el diseño responsivo con tu contenido dinámico sea un proceso fluido. Mira el ejemplo a continuación. Cuando eliminamos una columna para adaptarnos mejor al tamaño de una pantalla móvil, nuestro contenido se desplaza automáticamente para ajustarse al nuevo diseño.
Para crear un diseño de cuadrícula a partir de contenido dinámico, arrastra una lista de colección a tu proyecto. En las opciones de diseño del panel de estilo de tu lista de colección (no de tu contenedor de lista de colección), elige un diseño de cuadrícula. A partir de ahí, puedes personalizar los tamaños de tus filas, columnas e incluso el espaciado entre ellas. Modifica el número de columnas o filas a medida que diseñas para cada punto de interrupción responsivo.
Para saber más sobre CSS grid 2.0, lee nuestro anuncio reciente, o entérate de todo en un curso completo en Webflow University.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Presume tus imágenes y vídeos dinámicos usando lightboxes
El componente lightbox de Webflow te permite mostrar tus imágenes en una ventana a pantalla completa, creando una experiencia envolvente y atractiva. ¡Y ahora puedes conectar el componente lightbox a tus fotos y vídeos de CMS y Ecommerce!
Para crear una galería con efecto lightbox, primero debes crear una lista de colección y conectarla a una fuente de imagen: puede ser un campo de imagen única, de imágenes múltiples o un vídeo. Ten en cuenta que, por ahora, solo puedes mostrar esas imágenes en una plantilla de elemento de colección.
Arrastra el componente lightbox a tu lista de colección. Tendrás que conectar tu fuente de imagen o vídeo tanto al enlace del lightbox como a la imagen anidada. Para vincular tus lightboxes y lograr ese efecto de galería, marca la casilla en la configuración del lightbox y asígnale un nombre al grupo.
¡Y eso es todo!
¡Muéstranos tus galerías dinámicas!
Sabemos que muchos esperaban con ansias la posibilidad de crear galerías dinámicas y estamos deseando ver qué se les ocurre. Asegúrate de compartir tus creaciones con nosotros aquí o en tu red social favorita con el hashtag #MadeInWebflow.
¿Qué sigue?
Trabajamos constantemente para mejorar las capacidades dinámicas de Webflow para ti. Los lanzamientos que compartimos hoy son solo una pequeña muestra de las mejoras que hemos implementado o que tenemos preparadas.
En lo que va de 2019, hemos lanzado novedades de todo tipo. Algunos puntos destacados en el mundo del contenido dinámico incluyen:
- El lanzamiento oficial de Webflow Ecommerce a finales de febrero
- Un nuevo "gestor de conexiones" que te permite ver cada instancia donde una colección está conectada a tus diseños
- Una nueva función para reordenar la visualización de las colecciones CMS
- Una nueva función para filtrar feeds de colección mediante campos de referencia múltiple
- Una nueva función para proteger tus páginas de Colección con contraseña
Aunque no podemos prometer fechas concretas, ya estamos trabajando en algunas iniciativas emocionantes:
- Una experiencia de pago con PayPal para Ecommerce
- La posibilidad de usar el campo de imágenes múltiples con tus variantes de producto en Ecommerce
- La capacidad de programar elementos de colección
- Filtrado "o" en listas de colección
¿Tienes ideas sobre cómo podemos mejorar? Publica o vota en nuestra lista de deseos. Es una fuente fundamental para nosotros a la hora de priorizar nuevas funciones.
¡Que disfrutes creando con Webflow!
