En diciembre de 2018, Webflow lanzó una función muy esperada para el CMS: la paginación. Lo que no se dieron cuenta es que la paginación también me permitiría crear mediante un truco otra función muy solicitada: los deslizadores dinámicos. En este artículo, te mostraré cómo lo hice y cómo puedes hacerlo tú también.
Con la paginación, puedes crear diapositivas con contenido extraído de tus colecciones del CMS. Así, los usuarios pueden navegar fácilmente por las imágenes de los proyectos de tu portafolio de diseño o pasar las páginas de las recetas en tu sitio web gastronómico.
En este tutorial, profundizaremos en los conceptos básicos mostrándote cómo crear un deslizador sencillo, pero totalmente dinámico. Pero antes...
Unas palabras del editor
Esta publicación no es una nueva función oficial de Webflow, sino un ingenioso truco descubierto por el autor, Louis Buignet. Sabemos que todos queréis deslizadores realmente dinámicos y planeamos ofrecerlos, pero pensamos que os gustaría conocer este práctico truco mientras tanto.
Además, varios de vosotros, lectores avispados, habéis señalado un posible problema de experiencia de usuario: la página se recarga con cada nueva diapositiva. Esa es la naturaleza de basar el truco en la paginación. Sin embargo, uno de nuestros ingenieros, Forrest Oliphant —también conocido como el poseedor del apellido más genial de la historia—, desarrolló una forma ingeniosa de hacer que esa recarga sea fluida. El taller de Webflow a continuación te muestra cómo:
Dicho esto, volvamos al tema que nos ocupa: usar la paginación para crear un deslizador dinámico con Webflow.
Paginación: definición
Los libros están paginados: puedes navegar de una página a otra, hacia adelante o hacia atrás. En el diseño web, es el mismo concepto. Se puede navegar por páginas de contenido relacionado haciendo clic en la página siguiente o volviendo a la anterior.
Lo cual, si lo piensas bien, suena mucho a un deslizador, ¿no?
Con eso en mente, voy a mostrarte cómo construir tu propio deslizador dinámico usando la paginación.
Si eres de los que aprenden trasteando, puedes abrir este deslizador del CMS en Webflow y echar un vistazo. Pero si aprendes leyendo, ¡sigue bajando para ver el tutorial completo!
Crea una colección del CMS y añade diapositivas
Lo primero es lo primero: necesitas crear una colección del CMS. Si no sabes qué es eso, no te preocupes. Respira hondo y echa un vistazo al tutorial en vídeo de Webflow sobre conceptos básicos del CMS. ¿Te sientes mejor? Genial, ¡sigamos adelante!
Haz clic en el icono del CMS en la barra de herramientas de la izquierda. Crea una nueva colección y ponle de título... bueno, lo que quieras. Yo elegí "Slider cms" para mayor claridad.
Cada diapositiva tiene tres elementos: una imagen, el nombre de la página y una descripción de la página. También hay un pie de página, pero no forma parte de la colección, así que no hay que preocuparse por eso ahora mismo. Echa un vistazo a cómo se unen estos elementos, proclamando con orgullo mi usuario de Webflow al mundo. Por si te lo perdiste, es ZBRAH.
Una vez creada la nueva colección, le añadiremos dos campos. El campo Nombre se genera automáticamente, pero añadiremos un campo de imagen y un campo de texto plano para la descripción de la página. (Nota: tu equipo de contenidos podría preferir un campo de texto enriquecido para mayor flexibilidad). Todo esto se hace haciendo clic en el botón Añadir nuevo campo y eligiendo el tipo de campo adecuado.
Como puedes ver a continuación, puedes incluir muchos tipos diferentes de elementos en una colección, lo que te da la creatividad necesaria para crear una plantilla para cualquier contenido dinámico que quieras mostrar.
Así es como se ve la estructura de la Colección (o esquema) después de haber añadido los dos campos adicionales.
Como ocurre con todas las Colecciones, cada elemento de la Colección (es decir, la diapositiva) sigue esta misma plantilla.
Una vez configurada la estructura de campos, podemos duplicar este elemento del CMS y todo su contenido. Solo hace falta desplazarse un poco hacia abajo en la plantilla que acabas de crear y pulsar el botón de duplicar en la parte inferior derecha.
Esto creará un nuevo elemento del CMS con los mismos campos rellenos con el mismo contenido. Esto funciona muy bien para el contenido que será igual en cada página, y siempre puedes cambiar lo que hay en los campos de contenido según lo que necesites modificar.
Si observamos más de cerca una diapositiva individual, veremos todos los campos de la Colección rellenos con su contenido correspondiente:
Cada diapositiva tiene un color diferente, con mi nombre de usuario de Webflow, ZBRAH, centrado. Porque, como diseñadores de Webflow, siempre deberíamos ser el centro de atención, ¿verdad?
Tanto el texto como el bloque de color forman parte de una imagen .jpg. Esta imagen tiene un tamaño de 1200 x 800 píxeles. Un ancho de 1200 píxeles es la medida que muchos recomiendan para pantallas más grandes. Un poco más adelante en este artículo te mostraremos cómo maximizar el tamaño de esta imagen en el diseño.
Si quieres probar esto por tu cuenta, ten en cuenta que las imágenes más pequeñas pueden pixelarse al ampliarlas en pantallas grandes. A menos que el brutalismo sea lo tuyo, presta atención a las dimensiones y la resolución de la imagen original.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Construyendo tu "slider": cómo integrar una Colección paginada en tu diseño
En tus proyectos, probablemente tendrás más contenido que solo un slider, pero he limitado esta construcción al slider y a un pie de página para simplificar.
Vale, ¡vamos a construir el slider! Abre el panel Añadir elementos, desplázate hasta la lista de Colección y añade una a tu página.
Las 4 diapositivas de nuestra Colección CMS del Slider aparecen ahora en la página. ¿Qué ha pasado? ¡Pues que todavía no hemos paginado la lista!
Para activar la paginación, selecciona la lista de Colección en el lienzo y abre el panel de Ajustes haciendo clic en el icono del engranaje en la parte superior derecha de la pantalla. A continuación:
- Desplázate hacia abajo
- Marca la casilla Paginación
- Elige mostrar un elemento por página
¡Boom! ¡Estas cuatro diapositivas ya están paginadas!
Convertir una diapositiva en una página completa
Queremos que cada diapositiva ocupe todo el ancho de la página. El bloque principal de contenido de cada página está compuesto por esta diapositiva, cuyo estilo está controlado por el contenedor de la lista de Colección. El ancho horizontal predeterminado es del 100%, lo que estira la diapositiva a lo largo de todo el espacio horizontal. No hay nada que hacer aquí, ya que la configuración predeterminada es justo como queremos que se muestre.
Echemos un vistazo al elemento con la clase Section hero. Este contenedor alberga todas las piezas del diseño de la página. Ahí están la Colección del slider CMS y el pie de página. Los ajustes de flex para esta clase están configurados para centrar estos elementos.
En el momento de escribir este artículo, Webflow ha lanzado una versión beta de su panel de estilos. Si lo que ves es diferente, no te preocupes.
Echemos un vistazo a los ajustes del elemento de colección para nuestro slider del CMS. Si profundizamos un poco más en los ajustes del elemento de colección, llegaremos a los ajustes de estilo dinámico. Queremos que el fondo de cada diapositiva sea la imagen de nuestra colección de sliders. Para ello, marca la opción de obtener imagen de fondo del CMS de Slider.
Ten en cuenta que, al activar la paginación, las palabras "Siguiente" y "Anterior" aparecen por defecto en el componente. Para mantener un diseño limpio y sencillo, solo queremos las flechas. Ve al Navegador y busca la clase de Paginación. Elimina los bloques de texto que encontrarás tanto en "Anterior" como en "Siguiente". (También puedes hacerlo directamente en el lienzo si te resulta más fácil).
¡Y listo! ¡Aquí tenemos nuestra primera diapositiva en todo su esplendor!
La animación de abajo muestra la navegación hacia adelante usando la flecha que apunta a la derecha. Usamos la flecha que apunta a la izquierda para navegar hacia atrás.
¿A que queda genial? Si no te convence el aspecto de las flechas, selecciónalas y ajusta el estilo de la clase del icono. Puedes modificar lo que quieras, como la fuente, el tamaño de letra o el color.
Sliders del CMS y más allá
Este tutorial sobre sliders del CMS te ofrece lo básico para empezar por tu cuenta. Dale tu toque creativo y experimenta con diferentes transiciones animadas. Para profundizar un poco más, echa un vistazo a la página de ejemplos de Webflow y empieza a probar cosas por tu cuenta.
¿Tienes preguntas? ¡La comunidad de Webflow es el lugar ideal para empezar!
