Diseño dinámico del Diseñador visual

Breve descripción general

El Diseño dinámico se puede utilizar para crear ShoutOuts en el Diseñador visual. Ofrece la adaptabilidad del diseño flexible del lienzo, al tiempo que proporciona más libertad y flexibilidad a los usuarios.

Este artículo trata sobre las funciones y capacidades clave del diseño.

Beneficios clave del diseño dinámico

• Los ShoutOuts se adaptan automáticamente al tamaño y la orientación de la pantalla en la que se ven
• Reduce el tiempo de creación: posee arreglos de contenido listos para usar en el lienzo.
• Capacidad de crear diseños dinámicos que sean fáciles de leer y navegar, independientemente del dispositivo que se esté utilizando
• Mejora la experiencia del usuario al hacer que las ventanas emergentes sean más fáciles de usar en todos los dispositivos
• Aumenta el rendimiento general del sitio web al permitir que las ventanas emergentes se carguen más rápido y utilicen menos recursos.
• Te permite crear un solo diseño que se pueda adaptar fácilmente para soportar diferentes idiomas
• Cuando el tamaño del texto traducido excede el tamaño del texto original, la burbuja se adaptará en consecuencia

Características clave del diseño dinámico

El lienzo de diseño dinámico consta de las siguientes capas:

• Canvas: cuerpo del ShoutOut que muestra cómo se verá en pantalla para un usuario
  • Se pueden añadir marcos y widgets al lienzo

Dynamic Layout – Canvas

• Marco: espacio designado en el lienzo que se puede mover y diseñar
  • Los widgets se pueden añadir dentro del marco

Dynamic Layout – Frame

• Widget: elemento dentro del marco
  • Tipos de widgets: Texto, Imagen, Botón, Línea, Webview

Dynamic Layout – Widget

General

Especificación de color

Cada nivel del diseño, cuando se selecciona, se resalta con un color específico:

• Lienzo: verde

• Marco: rosa

• Widget: azul

Estilo

• Para Lienzo y Marcos, se pueden establecer un color de fondo, un radio de esquina y un ancho de borde en la pestaña Estilización

Color e imagen de fondo

• Selecciona un color de fondo para rellenar el lienzo o el marco o subir una imagen
• Jugar con la opacidad de la imagen para hacerla más brillante o más pálida en comparación con el texto
• Selecciona cómo se insertará la imagen en el lienzo o marco:
  • Rellenar: la imagen llenará todo el espacio. Las proporciones de la imagen se mantendrán, pero es posible que se recorte alguna parte de la imagen.
  • Ajuste: la imagen se redimensionará para ajustarse al lienzo. Se mostrará la imagen completa, pero algunas partes del lienzo pueden estar en blanco.
  • Estiramiento: se ignorará la relación de aspecto, la imagen llenará todo el lienzo.
  • Mosaico: la imagen se repetirá en patrones y cubrirá todo el lienzo. Utiliza la escala de zoom para jugar con el tamaño de la imagen y el patrón.
• Utiliza la escala de zoom para hacer que la imagen sea más grande o más pequeña.
• Rotar la imagen: girarla vertical u horizontalmente.
• Cambiar el posicionamiento de la imagen (por ejemplo, si algunas partes están alejadas, puedes ajustar el posicionamiento para decidir qué parte se mostrará y cuál se recortará).

Migas de pan

• Las migas de pan están disponibles en el conjunto de propiedades y en el lienzo.
• Por ejemplo, al seleccionar un widget, verás el marco al que pertenece.
• Se puede hacer clic en las migas de pan y utilizarlas para navegar.

Vídeos de consejos del martes

Actualizaciones del Diseñador visual

Introducción al Diseñador visual - Diseño dinámico

Crear con el Diseñador visual

Notas técnicas

Limitaciones

• El Diseñador Visual no se puede personalizar utilizando CSS global o personalizado
  • Nuestro objetivo es reemplazar la necesidad de utilizar CSS global/personalizado con la funcionalidad "en el Editor"
• Los sitios de Frameset no son compatibles: no se puede mostrar contenido en ellos
• Se pueden añadir hasta cuatro widgets en fila dentro de un marco

Soporte

• Reproductor web: admite ShoutOuts
• Reproductor móvil: admite ShoutOuts, Smart Walk-Thrus (limitado), encuestas y Lanzadores
• Reproductor de escritorio: admite ShoutOuts y Smart Walk-Thrus (limitado)