ShoutOuts: diseños dinámicos, gratuitos y Flex Layouts.
Descripción general
Hay tres tipos de plantillas disponibles en el Diseñador visual:
A. Dinámico
B. Gratis
C. Flex
El diseño Flex se está quedando obsoleto: ya no se actualizará con nuevas funciones ni se mostrará en la Galería de plantillas.
Sin embargo, los ShoutOuts existentes que se crearon con Flex seguirán siendo compatibles.
Hemos actualizado y mejorado las capacidades de Flex y desarrollado el Diseño dinámico, que ofrece una variedad de nuevas funciones y una experiencia de construcción mejorada.
Recomendamos que se utilice en todos los ShoutOuts y especialmente cuando se utiliza Multilenguaje: el ShoutOut con él adaptará su tamaño en función de la cantidad de texto.
El diseño libre seguirá estando disponible con las mismas capacidades que antes.
El diseño dinámico tiene la etiqueta relevante en la Galería de plantillas. Todas las plantillas sin una etiqueta son las de Diseño Libre.
Este artículo explica las diferencias entre los tres diseños.
Ventajas del diseño dinámico
- Los ShoutOuts creados a través de la plantilla de diseño dinámico se adaptarán automáticamente a la pantalla en la que se ven.
- Al utilizar Multilingüe: en caso de que el tamaño del texto traducido exceda el original, el globo se adaptará en consecuencia.
- Reduce el tiempo de creación: hay variaciones listas de arreglos de contenido dentro del lienzo.
Limitaciones
- No se admite la personalización utilizando CSS global o personalizado.
- No se admiten sitios de Frameset.
- Forma, Imagen y WebView son los únicos widgets redimensionables; el tamaño de un botón y el texto no se pueden cambiar.
- No hay tamaño mínimo ni máximo para los widgets individuales.
- No hay redimensionamiento manual para Canvas (el tamaño del Canvas se adapta automáticamente al contenido).
Comparación
Estructura de la plantilla
Diseño dinámico
El diseño dinámico tiene tres capas: lienzo, marco (marcado con cuadrados azules) y widget (separados por líneas rojas).
Se pueden añadir varios marcos uno al lado del otro, debajo y encima del otro. Las filas de widgets dentro de los marcos se pueden organizar horizontalmente.
Diseño libre
Los elementos se pueden organizar en cualquier orden.
Diseño flexible
El diseño flexible tiene dos capas: lienzo y widgets.
Solo puede haber un marco en una fila (no se puede añadir otro marco junto a otro). Las filas dentro del marco solo se pueden organizar horizontalmente.
Adaptabilidad basada en el contenido.
Diseño dinámico
El marco de texto se expandirá y se reducirá automáticamente.
Cuando se colocan dos marcos uno al lado del otro, añadir texto a uno de ellos también expandirá el segundo marco.
Cuando hay dos marcos uno al lado del otro y uno por encima o debajo de ellos, añadir texto al marco único no afectará el tamaño de los otros dos.
Cuando hay una imagen en un marco y texto en el otro junto a ella, el redimensionamiento de la imagen afectará a todo el lienzo.
Diseño libre
Al añadir más texto, debes redimensionar manualmente el marco y el lienzo.
Diseño flexible
El marco de texto se expandirá y se reducirá automáticamente.
Posición del lienzo
Diseño dinámico
La posición del lienzo en pantalla solo se puede cambiar desde el conjunto de propiedades. Selecciona una de las opciones predeterminadas o cambia "Posición personalizada" a activado e introduce la configuración preferida en píxeles o porcentaje para cambios más específicos.
Diseño libre
La posición del lienzo se puede cambiar desde la pantalla (selecciona el lienzo y arrástralo libremente) o desde el conjunto de propiedades (puedes seleccionar una de las posiciones preestablecidas o establecer una personalizada).
Diseño flexible
La posición del lienzo se puede cambiar desde la pantalla (selecciona el lienzo y arrástralo libremente) o desde el conjunto de propiedades (puedes seleccionar una de las posiciones preestablecidas o establecer una personalizada).
Cambiar el tamaño del lienzo
Diseño dinámico
El ancho del ShoutOut se puede cambiar estirando las manillas laterales del lienzo o aplicando mediciones en el conjunto de propiedades. La altura se ajustará automáticamente en función de la cantidad de contenido.
Un usuario solo puede redimensionar el ancho del lienzo.
Diseño libre
El lienzo se puede redimensionar utilizando los ajustes de Ancho y Alto en el panel lateral o estirando manualmente los bordes.
Diseño flexible
El tamaño del lienzo se puede cambiar desde el panel lateral. Para ello, cambia el interruptor a ON en el cuadro de tamaño avanzado en la pestaña Diseño. El ancho y el alto máximos se pueden establecer en píxeles o porcentajes (del tamaño de la pantalla del navegador).
El lienzo se expandirá automáticamente adaptándose al contenido dentro o al tamaño de la pantalla, pero no superará el límite máximo establecido de ancho/alto.
Posición de los elementos
Diseño dinámico
La distancia entre los lados del marco y los widgets se puede ajustar en el conjunto de propiedades. Selecciona el marco y establece la distancia predeterminada para todos los lados, o haz clic en el icono de los bordes y controla cada lado individualmente.
Para crear espacio entre dos widgets, selecciona el widget y ajusta el espaciado exterior en el conjunto de propiedades. Utiliza el espaciado exterior para obtener resultados de posición más precisos.
De forma predeterminada, se establece la misma distancia para todos los lados. Para aplicar un valor diferente a uno de los lados, haz clic en el icono de los bordes. Aparecerá la indicación "Mixto".
En el nivel del marco, los elementos se pueden alinear horizontal o verticalmente. La opción está disponible cuando el elemento está dentro de un marco que está junto a otro que tiene más contenido.
Utiliza el espaciado exterior en el nivel del lienzo para ampliar el espacio entre los bordes y los elementos.
Utiliza el espaciado de los widgets para cambiar la cantidad de espacio vertical entre ellos.
Diseño libre
Los elementos se pueden mover libremente dentro del lienzo.
Flex Layout
Los elementos solo se pueden organizar en posiciones preestablecidas que se sugieren automáticamente a los usuarios cuando arrastran un elemento (las posiciones potenciales se indican con líneas azules).
Los marcos se pueden mover arrastrando y soltando, horizontal o verticalmente.
Para obtener resultados más precisos, utiliza el espaciado interno para los marcos y el espaciado externo para los widgets.
La distancia entre los lados del marco y los widgets se puede ajustar en el conjunto de propiedades. Selecciona el marco y establece la distancia predeterminada para todos los lados, o haz clic en el icono de los bordes y controla cada lado individualmente.
La posición del elemento se puede ajustar – dentro del lienzo y en relación con otros elementos – en la pestaña Diseño del panel lateral, eligiendo la alineación del elemento y estableciendo el espaciado exterior.
Nota: la alineación vertical solo está disponible cuando el objeto está junto a otro de mayor altura.
Los widgets se pueden añadir a la misma fila, siempre que haya suficiente espacio para ellos. Cuando se agote el espacio, el widget se creará en una fila separada.
Tamaño de los widgets
Diseño dinámico
Para cambiar el tamaño de un widget, selecciónalo y arrastra la barra de control.
El widget se puede estirar haciendo clic en el icono de estiramiento.
Cuando la relación de aspecto esté bloqueada, el widget se estirará para ajustarse a las figuras insertadas. Cuando la relación de aspecto está desbloqueada, el widget ocupará todo el espacio horizontal disponible dentro del marco.
Cuando hay dos widgets en una fila, cada uno de ellos ocupará el 50% del espacio dentro del marco.
La altura del widget se puede controlar manualmente.
Diseño libre
El tamaño de una imagen, la vista web y la forma se pueden cambiar fácilmente en el lienzo en ambas plantillas. En el diseño flexible, el lienzo se adaptará.
El tamaño de un cuadro de texto y un botón también se pueden cambiar en el lienzo o en el panel lateral.
Diseño flexible
El tamaño de una imagen, la vista web y la forma se pueden cambiar fácilmente en el lienzo en ambas plantillas. En el diseño flexible, el lienzo se adaptará.
El tamaño del cuadro de texto y el botón no se pueden cambiar. El widget se puede estirar haciendo clic en el icono de estiramiento.
El botón se puede estirar horizontal o verticalmente si hay espacio.
Exceder el tamaño del Lienzo.
Diseño dinámico
El lienzo se expandirá dependiendo de la cantidad de contenido. Se reproducirá, pero las partes que exceden la pantalla no se verán y el usuario no tendrá acceso a ella en el modo de edición.
Diseño libre
Cuando añades demasiado contenido y vas más allá de los bordes del lienzo.
Diseño flexible
Cuando has añadido más contenido del que puede caber el lienzo, se ha alcanzado la altura y/o el ancho máximos del lienzo.
