Perfeccionar diseños para todos los dispositivos

Experience Builder le permite configurar y crear distintos diseños de página para sus experiencias web, para que se rindan bien en todos los tamaños de pantalla. La configuración de cada diseño individual se basa en un diseño adaptable, en el que puede crear diseños únicos para tamaños de pantalla grandes, medianos y pequeños. Cada diseño es una adaptación de la experiencia, que ofrece mayor flexibilidad para una mayor personalización de la aplicación y un mejor uso del tamaño de pantalla y distinto contenido.

Las plantillas se crearon para funcionar con varios tamaños de pantalla. Cuando selecciona una plantilla de aplicación a pantalla completa en blanco o una de página de desplazamiento en blanco, cuentan con el diseño Automático habilitado para dispositivos con pantalla pequeña y mediana. Así se mantienen todos los widgets sincronizados con los widgets del diseño del dispositivo de pantalla grande y también se ordenan automáticamente.

Para crear un diseño por separado para un dispositivo de pantalla pequeña o mediana, haga clic en el botón Personalizar junto al diseño de la página o pantalla. A continuación, puede ordenar y redimensionar manualmente los widgets y las ventanas del dispositivo de pantalla seleccionado. Para retirar un grupo de widgets o de pantallas del diseño de dispositivo pequeño, haga clic en el botón Mover a la lista de pendientes Mover a la lista de pendientes en su barra de herramientas. Con ello se elimina el widget del lienzo del dispositivo actual y se guarda su configuración en caso de que necesite agregarlo de nuevo al diseño. Una vez que habilita la opción de diseño personalizado, si se agrega algún otro widget en otros modos de dispositivo, no se agregan al dispositivo actual. Puede agregarlos manualmente desde la pestaña Pendiente en el panel Insertar widget.

Cuando edita diseños para dispositivos de pantalla pequeña, los siguientes paneles de configuración grandes que aparecen de otro modo en el lienzo aparecen ahora en los márgenes del builder:

  • El panel Estilo rápido en los widgets Botón, Divisor y Navegación por vistas
  • El panel Contenido dinámico
  • El panel Agregar widget de los widgets Marcador de posición y Cuadrícula
  • Los paneles Seleccionar plantilla para páginas, encabezados, pies de página, bloques y cuadrículas

Sugerencia:

Para probar los diseños para distintos dispositivos y tamaños de pantalla, haga clic en Vista en directo en la barra de herramientas del builder. Vista en directo le permite confirmar que el contenido se adapta correctamente antes de guardar y publicar el contenido. También puede experimentar adecuando algunos ajustes y manipulando los widgets interactivos y dinámicos para comprobar cómo van a funcionar.

Sugerencia:

Para obtener más información sobre la configuración de optimización para móviles de Experience Builder, pruebe el tutorial Optimizar un diseño de aplicación para móviles.