Breve descripción general
Los widgets son los bloques de construcción utilizados en ShoutOuts de diseño dinámico para crear contenido estructurado y flexible dentro de un marco. Al combinar diferentes tipos de widgets, como texto, imágenes, botones y carruseles, puedes hacer diseños receptivos que se adaptan al contenido y al tamaño de pantalla.
Este artículo explica cómo añadir, dar estilo y administrar widgets en Diseño dinámico, incluido el comportamiento de diseño, el espaciado y las limitaciones específicas de widget.
Para añadir un widget a un marco:
- Selecciona el icono de suma en el contenedor de propiedades
- Arrastra el widget al lienzo
- Utiliza el indicador azul para elegir dónde se colocará el widget
Nota
Se pueden añadir hasta cuatro widgets en una sola fila dentro de un marco.
Puedes personalizar la apariencia y el comportamiento del widget desde el contenedor de propiedades.
Imagen
- Cargar una imagen
- Ajustar el radio de la esquina, el ancho del borde y el color del borde
- Asigna una acción para la interacción del usuario con la imagen, como:
- Redirigir a una URL externa
- Abrir un cliente de correo electrónico
Cuando se selecciona una acción, el indicador de acción cambia de neutral a verde.
Texto
- Selecciona la fuente, el tamaño de fuente y el color del texto
- Establecer alineación de texto
Consejo
Utiliza la herramienta de pipeta color picker para capturar los colores ya utilizados en el diseño.
Línea
- Ajustar el radio de la esquina
- Cambiar el ancho de borde, el color de borde y el color de línea
Video
- Añade un video de
- YouTube
- Vimeo
- Biblioteca de activos
- Personaliza el video utilizando los controles de reproducción avanzados que incluyen:
- Recortar vídeo: personaliza los tiempos de inicio y finalización
- Reproducir en bucle: el vídeo se reiniciará automáticamente cuando finalice
- Reproducción automática: el vídeo se iniciará automáticamente una vez que aparezca el ShoutOut
- Miniatura: selecciona cualquier imagen como portada
- Control de reproducción: pausar, avanzar/atrás, abrir YouTube
Nota
- Cuando la reproducción automática esté activada, se activará automáticamente el silencio
- Si recortas un vídeo de Vimeo y activas la reproducción automática al mismo tiempo, la reproducción automática no funcionará (limitación de Vimeo)
Vista web
- Pega una URL para mostrar contenido externo
- Previsualiza el contenido directamente en Visual Designer
Botón
- Asigna una acción para que el botón la realice
- Crea texto de botón de varias líneas presionando Intro
Cuando se selecciona una acción, el indicador de acción cambia de rojo a verde.
Administrar elementos
Redimensionar
Para redimensionar un widget, realiza una de las siguientes acciones:
- Selecciona el widget y arrastra la barra de control
- Utiliza los controles tamaño y espaciado en la barra lateral
El tamaño del botón se controla por:
- Espaciado exterior, que define la distancia desde otros widgets
- Espaciado interno, que define la distancia entre el texto del botón y sus bordes
Estirar
Puedes estirar elementos horizontalmente seleccionando el icono de estiramiento
- Cuando la relación de aspecto está bloqueada, el widget se estira proporcionalmente en función de sus dimensiones originales
- Cuando se desbloquea la relación de aspecto, el widget llena todo el espacio horizontal dentro del marco
Cuando aparecen varios widgets en una fila, cada widget ajusta automáticamente su ancho para llenar el espacio disponible de manera uniforme. Por ejemplo:
- Dos widgets ocupan cada uno el 50 % de la fila
- Cuatro widgets ocupan cada uno el 25 % de la fila
La altura del widget se puede controlar manualmente.
Espaciado externo
El espaciado externo controla el espacio entre los widgets.
Para ajustar el espaciado exterior:
- Selecciona el widget
- Actualiza los valores de espaciado exterior en el contenedor de propiedades
De forma predeterminada, se aplica el mismo valor a todos los lados. Para establecer diferentes valores por lado:
- Selecciona el icono de bordes
- Ajustar valores individuales de lado
Cuando los valores de espaciado difieren, el indicador muestra Mixto.
De forma predeterminada, al añadir un widget de carrusel, se crean tres diapositivas, cada una contiene una imagen y texto.
Con un widget de carrusel, puedes:
- Añade otros widgets dentro de cada diapositiva, incluidos widgets de texto, imagen, botón, vista web y línea
- Habilitar la reproducción automática para moverse entre diapositivas automáticamente
- Navega por las diapositivas utilizando los indicadores de puntos en la parte inferior de ShoutOut
- Reordenar las diapositivas arrastrándolas
Comportamiento y limitaciones adicionales:
- La altura del ShoutOut se basa en la diapositiva más alta
- La configuración de diseño, como bordes, esquinas y estructura, se aplica a todas las diapositivas
- El color de fondo, la imagen de fondo y el contenido pueden diferir según la diapositiva
- Se admite un máximo de cinco diapositivas
- Solo se puede añadir un widget de carrusel por ShoutOut
- Duplicar una diapositiva añadirá otra diapositiva al carrusel
También puedes crear una navegación personalizada asignando acciones de Siguiente diapositiva y Diapositiva anterior a botones, texto o imágenes.
El widget video te permite incrustar videos de YouTube o Vimeo directamente en el Diseñador visual.
Las opciones de reproducción incluyen:
- Recortar el inicio y fin del video
- Reproducción en bucle
- Reproducción automática cuando aparece el ShoutOut
Controles adicionales:
- Selecciona una imagen de miniatura personalizada
- Pausar o saltar adelante y atrás
- Abre el video en YouTube
Nota
- Cuando la reproducción automática está activada, el video se silencia automáticamente
- La reproducción automática no funciona cuando se utiliza un video de Vimeo recortado debido a una limitación de Vimeo
Vídeo de consejos del martes
Imágenes de fondo de ShoutOut, carruseles y retrasos
Notas técnicas
- Se pueden añadir hasta cuatro widgets en una sola fila dentro de un marco
