Personalización del diseño de los grupos

los bloques Grupo te ayudan a organizar el contenido en un contenedor al que puedes aplicarle estilos y que puedes colocar como una unidad. En esta guía, te mostraremos cómo utilizar los ajustes de diseño para crear secciones de página adaptables y bien alineadas con un bloque Grupo.

Por defecto, un bloque Grupo organiza los bloques que hay dentro de él para que se muestren uno encima del otro. Cambiar la forma en la que se organizan los bloques dentro de un grupo te permite controlar si los contenidos aparecen uno al lado del otro (horizontalmente) o apilados (verticalmente), lo que te da más flexibilidad de diseño. Puedes personalizar la alineación del contenido del grupo si sigues estos pasos:

1. Selecciona la vista de lista en la parte superior de la pantalla de edición.
2. Elige el bloque Grupo.
3. En la barra lateral de ajustes del bloque de la derecha, elige una de estas opciones:
   • Grupo: la disposición por defecto para los los bloques Grupo.
   • Pila: ordena los bloques verticalmente, uno encima del otro. Ideal para crear contenido claro y secuencial, como pasos o elementos destacados.
     • En Justificación, cambia la alineación vertical con opciones como alinear hacia arriba, hacia abajo o al centro.
   • Fila: coloca los bloques uno al lado del otro horizontalmente. Perfecto para crear comparaciones de funciones o galerías de imágenes.
     • En Justificación, ajusta la alineación horizontal con opciones como hacia la izquierda, hacia la derecha o en el centro, o ajustando el espacio entre los elementos.
   • Cuadrícula: organiza los bloques en un diseño de cuadrícula personalizado. Útil para mostrar productos o miembros de un equipo.
4. Haz clic en «Guardar» o «Publicar» para guardar tus cambios.

Controlar el ancho total de tu bloque Grupo te ayuda a crear una jerarquía visual en tu página y a ajustar cómo responde tu contenido a los diferentes tamaños de pantalla. Puedes cambiar la cantidad de espacio que usa el bloque Grupo con opciones como Ancho del contenido, Ancho amplio y Ancho completo, si sigues estos pasos:

1. Selecciona la vista de lista en la parte superior de la pantalla de edición.
2. Elige el bloque Grupo.
3. En la barra de herramientas que aparece, selecciona el icono «Alineación» y elige entre estas opciones:
   • Contenido (o «Ninguna»): establece el ancho de los bloques como el ancho del área de contenido por defecto. Ideal para secciones de contenido normales.
   • Ancho amplio: incrementa el ancho de los bloques (pero no se configuran al ancho completo). Ideal para llamar la atención sobre contenidos importantes sin ocupar toda la pantalla.
   • Ancho completo: configura el bloque para que se ajuste al ancho completo del área disponible. Perfecto para crear secciones de contenido envolvente, como banners o galerías de imágenes grandes.
4. Haz clic en «Guardar» o «Publicar» para guardar tus cambios.

Consulta más información sobre cómo cambiar el ancho del contenido.

Puedes controlar cuánto espacio ocupa tu contenido dentro de un grupo, algo útil cuando creas diseños adaptables que funcionan bien tanto en pantallas de dispositivos móviles como de ordenador. Sigue estos pasos para cambiar los ajustes del ancho del contenido de tu bloque Grupo:

1. Selecciona la vista de lista en la parte superior de la pantalla de edición.
2. Elige el bloque Grupo.
3. En la barra lateral de ajustes del bloque, busca la sección «Bloques interiores». Activa o desactiva el ajuste «Los bloques interiores usan el ancho del contenido» :
   • Activado: el contenido seguirá los ajustes del ancho del contenido del sitio o bien podrás ajustar los valores de ancho específicos mediante los controles de ancho.
   • Desactivado: el contenido se ampliará para rellenar el ancho completo del bloque Grupo.
4. Haz clic en «Guardar» o «Publicar» para guardar tus cambios.

El ajuste «Los bloques interiores usan el ancho del contenido» controla el ancho que tendrá el contenido dentro del bloque Grupo:

Cuando está Activado: el contenido de dentro de tu bloque Grupo seguirá el ajuste global del ancho de contenido de tu sitio (normalmente, entre 700 y 800 píxeles de ancho). Esto crea una columna de contenido contenida y centrada, incluso si tu bloque Grupo abarca todo el ancho de la página. Esto mejora la legibilidad en pantallas más grandes y mantiene un diseño atractivo.

Cuando está Desactivado: el contenido de dentro de tu bloque Grupo se expandirá para rellenar todo el ancho del bloque Grupo . Si tu bloque Grupo es de ancho completo, tu contenido también se extenderá a lo largo de todo el ancho. Esto es útil para crear diseños de borde a borde, como galerías de imágenes de ancho completo o cuando quieres que el contenido coincida con el ancho del fondo de tu bloque Grupo .

Un ejemplo práctico: si tienes un bloque Grupo con un fondo de color que ocupe todo el ancho de la página, al activar «Los bloques interiores usan el ancho del contenido» se crearía una columna de contenido centrada con el fondo de color que se extendería de borde a borde, perfecta para resaltar información importante al tiempo que se mantiene el interés visual.

El ajuste de las dimensiones te permite controlar la altura, el ancho y el espaciado de tu bloque Grupo para que se adapte mejor a tus necesidades de contenido y diseño. Esto te ayuda a crear secciones equilibradas visualmente y le da a tu contenido espacio para respirar. Puedes configurar un espaciado preciso alrededor del contenido del bloque Grupo si sigues estos pasos:

1. Selecciona la vista de lista en la parte superior de la pantalla de edición.
2. Elige el bloque Grupo.
3. En la barra lateral de ajustes del bloque, busca la sección Dimensiones .
4. Configura valores para los siguientes elementos:
   • Relleno: espacio entre el contenido y el borde del bloque Grupo. Un mayor relleno crea un espacio de respiro alrededor de tu contenido.
   • Margen: espacio alrededor del exterior del bloque Grupo. Ayuda a separar esta sección de otros contenidos.
5. Utiliza el icono del enlace para alternar entre ajustes laterales uniformes o individuales.

Obtén más información sobre la personalización de dimensiones del bloque.

Al ajustar este espaciado, puedes controlar lo cerca o lejos que aparece el contenido en tu bloque Grupo, lo que crea la relación visual correcta entre elementos. Esto ayuda a los visitantes a distinguir entre el contenido relacionado mientras se mantiene una sección cohesiva. Gestiona el espaciado entre los bloques de dentro de tu grupo:

1. Selecciona la vista de lista en la parte superior de la pantalla de edición.
2. Elige el bloque Grupo.
3. En la barra lateral de ajustes del bloque, busca la sección Espaciado del bloque .
4. Usa los controles para configurar los siguientes elementos:
   • Espaciado del bloque: espacio entre bloques individuales. Un mayor espaciado crea una separación clara, mientras que un menor espaciado hace que el contenido parezca más conectado.
   • Altura mínima: la altura mínima que debe tener el bloque Grupo. Útil para crear secciones cohesivas o para añadir espacios en blanco para obtener un equilibrio visual.

Obtén más información sobre cómo ajustar el espacio entre bloques.