La configuración de diseño de sección controla cómo se posicionan, espacian y alinean los Bloques de una Sección en escritorio y en móvil. La configuración de fondo de sección agrega una imagen, un video o un color detrás de ellos. Usa ambas para asegurarte de que tu página se vea bien en todos los dispositivos y refleje tu marca.

Este artículo cubre la configuración de una Sección completa. Para cambiar un solo Bloque, consulta Personalizar la configuración de diseño de bloques y Personalizar la configuración de fondo de bloques. Para entender cómo funcionan juntas las Secciones y los Bloques, lee Agregar Secciones a las páginas.

Section Settings tiene cuatro grupos: Background, Desktop Layout, Mobile Layout y Time Reveal. Este artículo cubre los tres primeros. Para mostrar una Sección solo después de un evento o un tiempo de espera, consulta Configuración de Time Reveal.

Abre Desktop Layout para controlar cómo se ve una Sección en dispositivos de escritorio:

Activa Hide Section para que una Sección sea invisible para los visitantes en dispositivos de escritorio. Para probarlo, activa y desactiva Hide Section en la Vista Previa de Escritorio del Editor de Plantilla y observa cómo la Sección desaparece y reaparece. Guarda tus cambios después de probar. Si una Sección sigue oculta sin querer, asegúrate de que Hide Section esté desactivado.

Ingresa tus propios valores de relleno superior, derecho, inferior e izquierdo para cambiar el espacio dentro de la Sección. Cambiar el relleno desplaza todos los Bloques de la Sección. En escritorio, los valores predeterminados son 100 píxeles arriba y abajo, y 40 píxeles a la izquierda y a la derecha. Para restablecer el relleno al valor predeterminado, elimina tu valor personalizado.

Abre Layout para alinear, posicionar y controlar la dirección de los Bloques de la sección.

Activa Equal Height Blocks en tu Configuración de Diseño de Escritorio de la Sección para ajustar todos los Bloques de la Sección y alinearlos juntos en la parte superior de la Sección. Activar esta función ajustará los Bloques para que tengan la misma altura y se alineen juntos en la parte superior.

Aprende más sobre cómo crear bloques de igual altura.

Activar esta configuración hará que la Sección llene todo el ancho de la ventana del navegador de tus usuarios. Esto ajustará todo el contenido dentro de la Sección al tamaño de la ventana del navegador.

De manera similar a hacer que la Sección ocupe todo el ancho, activar esta configuración hará que la Sección llene toda la altura de la ventana del navegador de tus usuarios.

Abre Mobile Layout para controlar cómo se ve una Sección cuando tu página se visualiza en una ventana del navegador de menos de 768 píxeles de ancho:

Activa Hide Section para ocultar una Sección a los visitantes cuya ventana del navegador tenga menos de 768 píxeles de ancho.

Ingresa valores de relleno superior, derecho, inferior e izquierdo para desplazar los Bloques de una Sección en móvil. Los valores predeterminados son 40 píxeles arriba y abajo, y 10 píxeles a la izquierda y a la derecha. Para restablecer el relleno al valor predeterminado, elimina tu valor personalizado.

Abre Background para agregar una imagen o un video detrás de una Sección, posicionar la imagen y elegir un color de fondo. Las Secciones y los Bloques se adaptan automáticamente a distintos tamaños de pantalla, así que prueba tus opciones tanto en escritorio como en móvil.

Establece Background Media Type en None, Image o Video para elegir qué medio muestra la Sección. Agrega tu medio en la configuración Background Image o Background Video. Por ejemplo, al elegir Image se muestra la imagen de la configuración Background Image. Si no has agregado una imagen o un video, no se muestra nada, así que agrega primero tu medio y luego selecciona su tipo. Para una imagen de fondo, usa una imagen de aproximadamente 2880 por 1200 píxeles.

Si elegiste Image, ajusta la posición vertical de la imagen en la Sección a Top, Center o Bottom.

Marca Fixed Background Image para mantener la imagen fija mientras los visitantes se desplazan, de modo que los Bloques de la Sección se desplacen sobre ella. Desmárcala para que la imagen se desplace con la Sección. Esto solo se aplica en ventanas del navegador de 768 píxeles de ancho o más.

Usa Background Color para crear un fondo sólido sin imagen ni video. Cuando agregas una imagen o un video, el mismo color se coloca encima como superposición.

Para mostrar una imagen o un video detrás de tu Sección, haz transparente el color superpuesto. Usa el control deslizante Opacity del selector de color para ajustar la superposición.