Breve Visão Geral
Widgets são os blocos de construção usados no Dynamic Layout ShoutOuts para criar conteúdo estruturado e flexível dentro de um quadro. Ao combinar diferentes tipos de widgets, como texto, imagens, botões e carrosséis, você pode criar layouts responsivos que se adaptam ao conteúdo e ao tamanho da tela.
Este artigo explica como adicionar, estilizar e gerenciar widgets no Layout Dinâmico, incluindo comportamento do layout, espaçamento e limitações específicas do widget.
Para adicionar um widget a um quadro:
- Selecione o ícone mais no conjunto de propriedades.
- Arraste o widget para a tela
- Use o indicador azul para escolher onde o widget será colocado
Observação
É possível adicionar até quatro widgets em uma única linha dentro de um quadro.
Você pode personalizar a aparência e o comportamento do widget no conjunto de propriedades.
Imagem
- Carregar uma imagem
- Ajustar o raio dos cantos, a largura da borda e a cor da borda
- Atribua uma ação para a interação do usuário com a imagem, como:
- Redirecionamento para uma URL externa
- Abrindo um cliente de e-mail
Quando uma ação é selecionada, o indicador de ação muda de neutro para verde.
Texto
- Selecione a fonte, o tamanho da fonte e a cor do texto
- Definir alinhamento de texto
Dica
Use a ferramenta de pipeta selecionadora de cores para capturar cores já usadas no design.
Linha
- Ajustar o raio dos cantos
- Alterar a largura da borda, a cor da borda e a cor da linha
Vídeo
- Adicionar um vídeo de
- YouTube
- Vimeo
- Biblioteca de Recursos
- Personalize o vídeo usando os controles avançados de reprodução, incluindo:
- Ajustar vídeo: Horários personalizados de início e término.
- Reproduzir em loop: o vídeo será reiniciado automaticamente quando terminar
- Reprodução automática: o vídeo começará a ser reproduzido automaticamente quando o ShoutOut for exibido.
- Miniatura: selecione qualquer imagem como capa
- Controle de reprodução: pausar, avançar/voltar, abrir o YouTube
Observação
- Quando a reprodução automática está ativada, o mudo é ativado automaticamente
- Se você cortar um vídeo do Vimeo e ativar a reprodução automática ao mesmo tempo, a reprodução automática não funcionará (limitação do Vimeo)
Webview
- Cole uma URL para exibir conteúdo externo
- Visualize o conteúdo diretamente no Designer Visual
Botão
- Atribua uma ação para o botão executar
- Crie texto de botão de várias linhas pressionando Enter
Quando uma ação é selecionada, o indicador de ação muda de vermelho para verde.
Redimensionar
Para redimensionar um widget, realize uma destas ações:
- Selecione o widget e arraste a barra de controle
- Use os controles Tamanho e Espaçamento na barra lateral
O tamanho do botão é controlado por:
- Espaçamento exterior, que define a distância de outros widgets
- Espaçamento interno, que define a distância entre o texto do botão e suas bordas
Esticar
Você pode esticar widgets horizontalmente selecionando o ícone de esticar.
- Quando a proporção está bloqueada, o widget se estica proporcionalmente com base nas dimensões originais
- Quando a proporção é desbloqueada, o widget preenche todo o espaço horizontal dentro do quadro
Quando vários widgets são exibidos em uma fila, cada widget ajusta automaticamente sua largura para preencher uniformemente o espaço disponível. Por exemplo:
- Dois widgets ocupam 50% da linha cada
- Quatro widgets ocupam 25% da linha cada
A altura do widget pode ser controlada manualmente.
Espaçamento externo
O espaçamento externo controla o espaço entre os widgets.
Para ajustar o espaçamento externo:
- Selecione o widget
- Atualizar os valores de espaçamento externo no pacote de propriedades
Por padrão, o mesmo valor é aplicado a todos os lados. Para definir valores diferentes por lado:
- Selecione o ícone de bordas
- Ajustar valores laterais individuais
Quando os valores de espaçamento diferem, o indicador exibe Misto.
Por padrão, a adição de um widget de carrossel cria três slides, cada um contendo uma imagem e texto.
Com um widget de carrossel, você pode:
- Adicione outros widgets dentro de cada slide, incluindo texto, imagem, botão, web view e widgets de linha
- Ativar a reprodução automática para alternar entre slides automaticamente
- Navegue pelos slides usando os indicadores de pontos na parte inferior do ShoutOut
- Reordene os slides arrastando-os
Comportamento e limitações adicionais:
- A altura do ShoutOut é baseada no slide mais alto
- Os ajustes de layout, como bordas, cantos e estrutura, se aplicam a todos os slides
- A cor de fundo, a imagem de fundo e o conteúdo podem diferir por slide
- É suportado um máximo de cinco slides
- Apenas um widget de carrossel pode ser adicionado por ShoutOut
- Duplicar um slide adicionará outro slide ao carrossel
Você também pode criar navegação personalizada atribuindo ações Próximo slide e Slide anterior a botões, texto ou imagens.
O widget vídeo permite incorporar vídeos do YouTube ou Vimeo diretamente no Visual Designer.
As opções de reprodução incluem:
- Cortar o início e o final do vídeo
- Reprodução em loop
- Reprodução automática quando o ShoutOut aparece
Controles adicionais:
- Selecione uma imagem de miniatura personalizada
- Pausar ou pular para frente e para trás
- Abra o vídeo no YouTube
Observação
- Quando a reprodução automática está ativada, o vídeo é silenciado automaticamente
- A reprodução automática não funciona quando um vídeo do Vimeo cortado é usado devido a uma limitação do Vimeo
Vídeo da Dica de Terça-feira
Imagens de plano de fundo, carrosséis e atrasos do ShoutOut
Comunidade WalkMe (WalkMe Community).
Notas técnicas
- É possível adicionar até quatro widgets em uma única linha dentro de um quadro
