Aprende a ajustar la visibilidad, alineación, espaciado y posicionamiento del contenido de Bloques individuales para optimizar la experiencia de tus usuarios al verlos en distintos dispositivos (por ejemplo, móvil o escritorio).
¿Qué es la configuración de diseño de bloque?
La Configuración de Diseño de Bloque, al igual que la Configuración de Diseño de Sección, consiste en la Configuración de Diseño de Escritorio y Diseño Móvil para optimizar tu página en dispositivos de escritorio y móviles. Sin embargo, con la Configuración de Diseño de Bloque, puedes optimizar Bloques individuales:
¿Buscas reorganizar o reordenar tus Bloques? Aprende a agregar y reorganizar los Bloques de tu Página.
Personalizar el diseño de escritorio del bloque
Para acceder a la configuración de diseño de escritorio del bloque
- Abre la pestaña Website desde el Dashboard.
- Selecciona la pestaña Pages.
- Abre el editor de páginas de tu Página. Aprende más
- Ve al editor de la barra lateral y selecciona la Sección que contiene el Bloque que quieres personalizar.
- Haz clic en el Bloque para abrir el Editor de Bloque.
- Ve a la Configuración de Bloque y haz clic en Desktop Layout:
Configuración de diseño de escritorio del bloque
- Hide Block: Oculta los Bloques al verlos en dispositivos de Escritorio.
- Alignment: Alinea el contenido del Bloque a la izquierda, centro o derecha del espacio del Bloque.
- Inside Spacing: Desplaza el contenido del Bloque ajustando el espaciado interno del Bloque.
- Outside Spacing: Desplaza el contenido del Bloque ajustando el espaciado externo del Bloque.
- Make Flush: Elimina el espaciado alrededor del Bloque. Usa la Herramienta de Guía para ver el cambio.
- Place this block on its own row: Mueve el bloque para que ocupe su propia fila dentro de la Sección.
Consejo: Para superponer bloques, configura el espacio negativo con la configuración de Espaciado Externo del bloque. El bloque superior será el bloque más a la derecha que quieras superponer. Sin embargo, es importante tener en cuenta que, debido a la naturaleza dinámica de tu página, el tamaño de pantalla usado para verla (por ejemplo, escritorio, móvil o tablets) puede distorsionar el formato previsto al usar espaciado negativo para superponer tus bloques.
Personalizar el diseño móvil del bloque
Para acceder a la configuración de diseño móvil del bloque
Consejo: Cambia tu Vista Previa a Vista Móvil (ubicada en la parte superior del editor) para ayudarte a personalizar tu Configuración de Diseño Móvil.
- Abre la pestaña Website desde el Dashboard.
- Selecciona la pestaña Pages.
- Abre el editor de páginas de tu Página. Aprende más
- Ve al editor de la barra lateral y selecciona la Sección que contiene el Bloque que quieres personalizar.
- Haz clic en el Bloque para abrir el Editor de Bloque.
- Ve a la Configuración de Bloque y haz clic en Mobile Layout:
Configuración de diseño móvil del bloque
- Alignment: Alinea el contenido del Bloque a la izquierda, centro o derecha del espacio del Bloque.
- Hide Block: Oculta los Bloques al verlos en dispositivos Móviles.
- Inside Spacing: Desplaza el contenido del Bloque ajustando el espaciado interno del Bloque. Ajusta rápidamente tu espaciado en incrementos de 10 tanto en tu Diseño Móvil como de Escritorio manteniendo presionada la tecla
shift mientras haces clic en los valores de espaciado.
- Outside Spacing: Desplaza el contenido del Bloque ajustando el espaciado externo del Bloque.
- Image on Top: Si tu Bloque contiene una Imagen, muévela a la parte superior de la Sección al verla en dispositivos móviles.
