Diseño dinámico – Widget

Breve descripción general

El widget es un elemento de un ShoutOut creado en el Diseñador visual que se puede añadir al marco. Los tipos de widgets son Texto, Imagen, Botón, Línea, Vista web, Lottie, Marco, Carrusel.

Estilo

El estilo del widget se puede cambiar desde el conjunto de propiedades:

• Imagen: cárgala y selecciona el radio de la esquina, el ancho del borde y el color del borde.

  • También puedes seleccionar una acción para que cuando un usuario haga clic en la imagen, se realice una acción; por ejemplo, se redirigirá a una URL externa o a una dirección de correo electrónico.

  • Cuando se selecciona una acción, el indicador del icono cambiará de neutro a verde.

• Texto: elige la fuente, el tamaño y el color de la fuente, la alineación del texto.

• Línea: el radio de las esquinas, el ancho del borde, el color de la línea y el color del borde se pueden cambiar.

• Vista web: pasa la URL y ve la vista previa.

• Botón: selecciona la acción que deseas que realice el botón.

  • Cuando se selecciona la acción, el indicador del icono rojo cambiará a verde.

  • Se admite texto de varias líneas en un botón: presiona Enter para crear una nueva línea.

• El selector de color ahora tiene una herramienta de pipeta para capturar el color que ya existe en el diseño.

Añadir un widget

Para añadir un widget, haz clic en el botón Plus en el conjunto de propiedades y arrastra el widget seleccionado al lienzo.

Verás una indicación azul de dónde se añadirá ese widget.

Se pueden añadir hasta cuatro widgets en una fila dentro de un marco.

Redimensionar un widget

Para cambiar el tamaño de un widget, selecciónalo y arrastra el controlador, o utiliza la herramienta de tamaño y espaciado en la barra lateral.

El tamaño del botón se puede controlar a través del espaciado exterior (distancia con los otros widgets) e interior (distancia del texto del botón a sus bordes).

Estirar un widget

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 varios widgets en una fila, cada uno de ellos se ajustará dinámicamente para llenar el espacio dentro del marco. Por ejemplo, cuando hay dos widgets, cada uno ocupará el 50% del espacio, cuando hay cuatro, cada uno ocupará el 25%.

La altura del widget se puede controlar manualmente.

Espaciado externo

Para crear espacio entre varios widgets, selecciona el widget y ajusta el espaciado exterior en el conjunto de propiedades.

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".

Carrusel

• De forma predeterminada, cuando añades un widget de carrusel al marco, se crearán 3 diapositivas, cada una con una imagen y texto.

• Puedes añadir otros widgets dentro del carrusel (texto, imagen, botón, vista web, línea). Cada diapositiva puede tener diferentes widgets.

• Si activas la reproducción automática, las diapositivas se moverán automáticamente. De lo contrario, puedes moverte entre ellos haciendo clic en los indicadores de puntos en la parte inferior del ShoutOut.
• La altura de todo el ShoutOut se basará en la diapositiva más alta.
• Puedes establecer el orden de las diapositivas del carrusel arrastrándolas.
• Los bordes, las esquinas y el diseño que establezcas para el carrusel serán los mismos para todas las diapositivas. La imagen o el color de fondo y el contenido interno pueden ser individuales para cada diapositiva.

• El número máximo de diapositivas de carrusel es 5.

• Solo se puede añadir un carrusel por ShoutOut.

• Duplicar una diapositiva añadirá otra diapositiva.

Notas técnicas

• Se pueden añadir hasta cuatro widgets en fila dentro de un marco