Breve Visão Geral
O layout dinâmico pode ser usado para projetar ShoutOuts no Visual Designer. Ele oferece a adaptabilidade de tela do layout flexível, além de proporcionar mais liberdade e flexibilidade aos usuários.
Este artigo aborda os principais recursos e capacidades do layout.
Principais benefícios do Layout Dinâmico
- O ShoutOuts se adapta automaticamente ao tamanho e orientação da tela em que está sendo visualizado
- Reduz o tempo de construção – há arranjos de conteúdo prontos para uso na tela
- Capacidade de criar layouts dinâmicos fáceis de ler e navegar, independentemente do dispositivo usado
- Melhora a experiência do usuário tornando os popups mais fáceis de usar em todos os dispositivos
- Aumenta o desempenho geral do site, permitindo que os popups carreguem mais rapidamente e usem menos recursos
- Permite criar um único design que pode ser facilmente adaptado para oferecer suporte a diferentes idiomas
- Quando o tamanho do texto traduzido exceder o idioma original, o balão será adaptado adequadamente
Principais recursos do Layout Dinâmico
A tela de Layout Dinâmico consiste nas seguintes camadas:
- Canvas: Corpo do ShoutOut, que mostra como ele ficará na tela para um usuário
- Quadros e widgets podem ser adicionados à tela
Dynamic Layout: Canvas
- Quadro: espaço designado na tela que pode ser movido e projetado
- Widgets podem ser adicionados dentro do quadro
Dynamic Layout: Frame
- Widget: Elemento dentro do quadro
- Tipos de widgets: Texto, Imagem, Botão, Linha, Webview
Dynamic Layout: Widgets
Geral
Especificação de cor
Cada nível do design, quando selecionado, é destacado com uma cor específica:
Estilo
- Para Tela e Molduras, uma cor de fundo, o raio dos cantos e a largura da borda podem ser definidos na guia Estilo
Cor e imagem de fundo
- Selecione uma cor de fundo para preencher a tela ou moldura ou carregue uma imagem
- Brinque com a opacidade da imagem para torná-la mais brilhante ou pálida em comparação com o texto
- Selecione como a imagem será inserida na tela ou moldura:
- Preencher: a imagem preencherá todo o espaço. As proporções da imagem serão mantidas, mas algumas partes da imagem podem ser cortadas.
- Ajuste: a imagem será redimensionada para caber na tela. A imagem inteira será exibida, mas algumas partes da tela podem estar em branco.
- Alongamento: a proporção será ignorada, a imagem preencherá a tela inteira.
- Tile: a imagem será repetida em padrões e cobrirá a tela inteira. Use a escala de zoom para brincar com o tamanho da imagem e o padrão.
- Use a escala de zoom para tornar a imagem maior ou menor
- Gire a imagem - vire-a vertical ou horizontalmente
- Alterar o posicionamento da imagem (por exemplo, se algumas partes estiverem reduzidas, você pode ajustar o posicionamento para decidir qual parte será mostrada e qual será cortada)
Você sabia?
Se a opacidade da imagem for de 100%, a cor de fundo não será vista. Você pode criar camadas de cor e imagem reduzindo a opacidade.
Breadcrumbs
- Os rastros de navegação estão disponíveis na bolsa de propriedades e na tela
- Por exemplo, ao selecionar um widget, você verá o quadro ao qual ele pertence
- Os rastros de navegação podem ser clicados e usados para navegar
Vídeos de Dica de Terça-feira
Atualizações no Visual Designer
Introdução ao Visual Designer - Layout Dinâmico
Notas técnicas
Limitações
- O Visual Designer não pode ser personalizado usando CSS global ou personalizado
- Sites Frameset não são suportados – o conteúdo não pode ser desenhado neles
- É possível adicionar até quatro widgets seguidos dentro de um quadro
- A largura do ShoutOut não pode exceder 1000px
Suporte
- Web Player: Suporta ShoutOuts
- Mobile Player: suporta ShoutOuts, Smart Walk-Thrus (limitado), Enquetes e Iniciadores
- Desktop Player: Suporta ShoutOuts e Smart Walk-Thrus (limitado)
