Un Group es una caja que contiene otros bloques y los organiza. Úsalo para poner cosas una al lado de otra, crear columnas o dar a una parte de una sección su propio fondo y su propio borde.
Dónde puedes usar grupos
Muchas secciones aceptan un bloque Group: el pie de página, el boletín, el hero, las diapositivas del slideshow, la FAQ, antes y después, las reseñas, el contacto, la 404, la confirmación del pedido, las filas desplegables y la zona de texto de las listas de productos, como productos destacados y colecciones. Cada sección decide qué bloques pueden ir dentro de sus grupos y cuántos grupos admite.
Para añadir uno en el constructor, selecciona la sección, haz clic en Add new block y elige Group. Después arrastra otros bloques dentro. Algunas secciones (pie de página, boletín, reseñas) también te permiten poner un grupo dentro de otro.
Diseño
- Width: Fill ocupa el espacio libre y lo reparte a partes iguales con otros grupos Fill a su lado. Fit es solo tan ancho como su contenido. Custom define un Custom width en porcentaje.
- Direction: Vertical apila los bloques, Horizontal los pone uno al lado del otro. Los bloques lado a lado pasan a una nueva línea cuando no hay espacio suficiente.
- Stack vertically on mobile (solo Horizontal): en los móviles los bloques se apilan.
- Position: coloca los bloques arriba o abajo (Top, Center, Bottom).
- Alignment: coloca los bloques de izquierda a derecha (Left, Center, Right).
- Space between: reparte los bloques dejando el mismo espacio entre ellos. Se ofrece en la dirección en la que fluyen los bloques: en Position para un grupo vertical, en Alignment para un grupo horizontal.
Apariencia
- Use parent color scheme: activado por defecto, así que el grupo usa los colores de la sección. Desactívalo y elige un Color scheme para dar al grupo sus propios colores de fondo y de texto.
- Border: None o Solid. Solid añade Border thickness (de 1 a 20 píxeles) y Border opacity. El color es el color de borde del esquema.
- Corner radius: redondea las esquinas, de 0 a 100 píxeles.
- Background overlay: añade una capa de color encima del fondo. Define Overlay color y Overlay style: Solid, o Gradient, que se desvanece hasta transparente, con una Gradient directionUp o Down. Útil para que el texto se lea bien sobre una imagen de hero.
Espaciado
Gap es el espacio entre los bloques dentro del grupo (de 0 a 100 píxeles). Padding es el espacio entre el borde del grupo y sus bloques, en cada lado.
Recetas
- Dos botones uno al lado del otro en un hero: ponlos en un grupo Horizontal con un espaciado pequeño.
- Tres columnas en el pie de página: un grupo Horizontal con tres elementos Fill dentro, y Stack vertically on mobile activado.
- Una tarjeta: un grupo Vertical con su propio esquema de colores, un borde Solid, un radio de esquinas y relleno.
- Texto a la izquierda, botón a la derecha: un grupo Horizontal con Alignment en Space between.
Bueno saberlo
- Una columna es más ancha de lo que quieres: dos grupos Fill reparten el espacio a partes iguales. Pon uno en Custom y dale un porcentaje.
- El grupo no aparece: un grupo sin bloques, o solo con bloques ocultos, no se muestra en tu tienda.
- Group no aparece en la lista de bloques: esa sección no admite grupos o ya alcanzó su límite de grupos.
- Los ajustes de Text, Button y Divider están en Bloques Group, Text, Button y Divider: ¿cómo funcionan los ajustes de los componentes de diseño?.