Editor de Wix Studio: elegir entre herramientas basadas en flexbox y herramientas basadas en cuadrícula

El Editor de Wix Studio ofrece potentes herramientas de estilo para organizar los elementos, cada una de ellas adaptada a las necesidades de diseño específicas. Estas herramientas se basan en dos tecnologías CSS comunes, cuadrícula y flexbox, y comprender esta distinción puede ayudarte a planificar los mejores diseños adaptativos para mostrar el contenido de tus clientes. 

En este artículo, desglosaremos las herramientas de estilo por tipo, explicaremos sus capacidades clave y te ayudaremos a decidir cuál es la mejor según tus necesidades.

Las cuadrículas son un modelo CSS bidimensional que utiliza filas y columnas para organizar los elementos dentro de celdas predefinidas. Son particularmente eficaces para crear diseños modulares adaptativos con un control preciso.

Las secciones en blanco vienen con una cuadrícula integrada, que contiene una sola celda (que alberga la sección completa). Divide la cuadrícula en más celdas según sea necesario para darle una estructura adaptativa al contenido. Después de decidir el estilo para la versión de escritorio, puedes elegir uno diferente para los breakpoints más pequeños.

Un cuadrícula CSS avanzada ofrece total libertad para crear diseños complejos en cuadrículas de sección, contenedores, ventanas interactivas, flexboxes y elementos repetidores. Puedes establecer el tamaño exacto de cada celda, en cada breakpoint, usando medidas adaptativas (por ejemplo, fr, mín./máx., %). 

Ideal para: diseños complejos que requieren ajustes de píxeles perfectos.

Un contenedor es una herramienta de estilo simple, pero esencial. Cuando adjuntas elementos al contenedor, este se convierte automáticamente en el elemento principal y define la estructura. 

Ideal para: diseños independientes y aislados dentro de secciones. 

Flexbox es un modelo CSS unidimensional optimizado para diseños en los que los elementos deben ajustarse de manera dinámica dentro de un contenedor principal. Con las herramientas flexbox, los elementos se "flexibilizan" a la perfección para adaptarse al espacio asignado, ya sea que se expandan, se encojan o se ajusten.

Una pila es un contenedor flexible invisible que garantiza la alineación vertical u horizontal de los elementos.  El apilamiento mantiene intactos los márgenes entre los elementos y evita que los elementos se superpongan en pantallas más pequeñas.

Además, puedes establecer el orden de los elementos de la pila por breakpoint para asegurarte de que el estilo se vea impecable en todos los tamaños de pantalla. 

Ideal para: diseños independientes y aislados dentro de una sección, donde los elementos necesitan una alineación precisa a lo largo de un solo eje horizontal o vertical. 

Una flexbox es un diseño flexible que viene listo para usar en el que los ítems se ajustan automáticamente para adaptarse a cada pantalla. Se compone de contenedores adaptativos, con diversos tipos de visualización, para adaptarse a tu contenido específico (por ejemplo, Mosaico, Tipo cinta, Columnas). 

Puedes elegir un tipo de visualización diferente para cada ventana gráfica (por ejemplo, los estilos tipo cinta funcionan muy bien para dispositivos móviles) y establecer también un orden específico para los ítems.

Ideal para: organizar un gran volumen de contenido con un estilo ordenado y práctico. 

Un repetidor es una lista de ítems que tienen el mismo diseño y estilo, pero cada uno tiene un contenido diferente. Los ajustes de estilo y diseño son automáticos, por lo que nunca tendrás que preocuparte por la cohesión. 

Lo que hace que los repetidores sean realmente únicos es la posibilidad de conectarlos a tus colecciones de contenido. Esto te permite administrar y actualizar el contenido desde el back-end sin que afecte al diseño en sí, lo que los convierte en la herramienta de estilo definitiva basada en datos. 

Ideal para: listas o cualquier tipo de contenido que desees dividir en ítems que se vean perfectamente coherentes.

Antes de seleccionar una de nuestras herramientas, planifica el estilo que deseas para cada tamaño de pantalla. Luego, puedes elegir una herramienta de estilo que incluya las capacidades que necesitas. 

Cada herramienta de estilo está diseñada para adaptarse a diferentes cantidades y tipos de contenido. Por ejemplo, un contenedor funciona bien para contenido más pequeño y específico, mientras que una cuadrícula de sección grande es más adecuada para organizar estilos complejos. 

Así mismo, si bien tanto las flexboxes como los repetidores son excelentes para presentar grandes volúmenes de contenido de manera organizada, tienen distintos propósitos. Los repetidores optimizan la coherencia al aplicar el mismo estilo y diseño en todos los ítems, mientras que las flexboxes te dan la libertad de diseñar cada ítem individualmente.

Los elementos de flexbox y de cuadrícula son diferentes en la forma en la que el contenido se ajusta a los distintos tamaños de pantalla. Las cuadrículas muestran un número diferente de filas y columnas para adaptarse a pantallas más pequeñas; En las herramientas basadas en flexbox, el contenido se ajusta o se reordena automáticamente para adaptarse a la pantalla del visitante.

Solo los repetidores admiten esta opción. Elige esta herramienta si necesitas mostrar contenido de las colecciones del CMS. 

De manera alternativa, puedes conectar elementos específicos (por ejemplo, texto, imágenes) a la colección y agrégalas a un contenedor o a una pila para mantener el estilo organizado.