Skip to main content
Aprende a personalizar la Configuración de Diseño de tu Sección para optimizar la experiencia de tus usuarios al ver tu sección en dispositivos de escritorio y móviles. Además, entiende cómo resolver discrepancias de diseño comunes para mejorar aún más la experiencia del usuario.
Para aprender a editar el diseño de tus Bloques en una página, asegúrate de consultar este artículo.

​
¿Qué es la configuración de diseño de sección?

La Configuración de Diseño de Sección consiste en la Configuración de Diseño de Escritorio y Diseño Móvil en cada Sección: Configuración de Diseño de Sección Tu Configuración de Diseño de Sección ajusta el posicionamiento del contenido, el relleno y la alineación para optimizar la experiencia de tus usuarios al verla en distintos dispositivos. También ayuda a resolver problemas comunes como contenido superpuesto o alineación incorrecta entre dispositivos. La Configuración de Diseño de Sección te da el poder de diseñar Secciones organizadas y con un diseño hermoso en tus páginas construidas con Kajabi.

​
Personalizar el diseño de escritorio de la sección

​
Para acceder a la configuración de diseño de escritorio de la sección

  • Abre la pestaña Website desde el Dashboard.
  • Selecciona Website Pages o Landing 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 quieres personalizar.
  • Ve a la Configuración de Sección y haz clic en Desktop Layout:

​
Configuración de diseño de escritorio

Personaliza tu Configuración de Diseño de Escritorio para optimizar la experiencia de tus usuarios con la Sección al verla en un dispositivo de Escritorio.

​
Ocultar sección

Ocultar una Sección en tu Configuración de Diseño de Escritorio hará que la Sección especificada sea invisible (u oculta) para los usuarios que la vean en un dispositivo de Escritorio. Si las secciones permanecen ocultas sin querer, verifica que la configuración ‘Hide Section’ esté correctamente configurada en tu editor de páginas para resolver problemas de visibilidad. Prueba esta configuración simplemente marcando y desmarcando Hide Section al verla con la Vista Previa de Escritorio (ubicada en la esquina inferior derecha del Editor de Plantilla) y observa cómo tu Sección desaparece y reaparece ante tus ojos: asegúrate de guardar tus cambios después de probar para conservar los ajustes de visibilidad.
Consejo: Crea dos Secciones duplicadas, una diseñada específicamente para la vista de Escritorio y la otra para la vista Móvil. Luego, selecciona Hide Section en tu Configuración de Diseño de Escritorio para la sección optimizada para la vista Móvil. Repite para la Sección optimizada para Escritorio. Esto asegurará que tus usuarios vean tu Sección exactamente como la planeaste, sin importar el dispositivo usado. Usa las herramientas de Vista Previa Móvil y de Escritorio para probar cada sección y ajustar la configuración y evitar posibles inconsistencias de diseño entre dispositivos.

​
Relleno de sección en escritorio

Personaliza el relleno interno de la Sección con los valores deseados. Cambiar el Relleno de la Sección desplazará todos los Bloques en la Sección hacia la apariencia deseada. Para restablecer tus valores de relleno a la configuración predeterminada, simplemente elimina tu valor personalizado:

​
Alineación vertical

Seleccionar una alineación vertical (Top, Center, Bottom) en una Sección alinea verticalmente todos los Bloques de la Sección con el Bloque más alto de su fila:

​
Alineación horizontal

La configuración de Alineación Horizontal desplaza los Bloques de la Sección para alinearlos horizontalmente con la cuadrícula de 12 columnas. La configuración de Alineación Horizontal se puede establecer como alineada a la Izquierda, Centro o Derecha, o crear Espacio Entre o Espacio Alrededor de todos los Bloques de la Sección:
Consejo: Activa la Cuadrícula (como se muestra arriba) en tus Herramientas de Diseño para ver cómo se ajustan tus Bloques en referencia a la cuadrícula de 12 columnas.

​
Bloques de igual altura

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.
Nota: Activar Equal Height Blocks no cambiará la altura de tus imágenes subidas, para conservar la proporción original de la imagen. En cambio, cada imagen se alineará verticalmente en la parte superior del Bloque más alto de su fila.

​
Hacer que la sección ocupe todo el ancho

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:

​
Hacer que la sección ocupe toda la altura

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:

​
Personalizar el diseño móvil de la sección

​
Para acceder a la configuración de diseño móvil de la sección

  • Abre la pestaña Website desde el Dashboard.
  • Selecciona Website Pages o Landing 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 quieres personalizar.
  • Ve a la Configuración de Sección y haz clic en Mobile Layout:
Consejo: Cambia la Vista Previa de tu Editor de Plantilla a Móvil (ubicada en la parte superior del Editor de Plantilla) al personalizar tu Diseño Móvil para ver exactamente cómo se verá tu página al visualizarla en dispositivos Móviles.

​
Configuración de diseño móvil

Personaliza tu Configuración de Diseño Móvil para optimizar la experiencia de tus usuarios con la Sección al verla en un dispositivo Móvil.

​
Ocultar sección

Ocultar una Sección en tu Configuración de Diseño Móvil hará que la Sección especificada sea invisible (u oculta) para los usuarios que la vean en dispositivos Móviles. Prueba esta configuración simplemente marcando y desmarcando Hide Section con la Vista Previa Móvil (ubicada en la esquina inferior derecha del Editor de Plantilla) y observa cómo tu Sección desaparece y reaparece ante tus ojos:
Consejo: Crea dos Secciones duplicadas, una diseñada específicamente para la vista Móvil y la otra para la vista de Escritorio. Luego, selecciona Hide Section en tu Configuración de Diseño Móvil para la Sección diseñada para verse desde un dispositivo de Escritorio. Repite para la Sección optimizada para dispositivos Móviles. Esto asegurará que tus usuarios vean tu Sección exactamente como la planeaste, sin importar el dispositivo usado.

​
Relleno de sección en móvil

Ajustar el Relleno de Sección cambia la apariencia del relleno interno de la Sección al verla en dispositivos Móviles. Cambia el Relleno de Sección para desplazar los Bloques de la Sección hacia la apariencia deseada. Para restablecer tus valores de relleno a la configuración predeterminada, simplemente elimina tu valor personalizado:
Consejo: Ajusta rápidamente tu relleno en incrementos de 10 tanto en tu Diseño Móvil como de Escritorio manteniendo presionada la tecla “shift” mientras haces clic en las flechas de subir/bajar para cambiar en incrementos/decrementos de 10.