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:

• Canvas: Verde

• Quadro: Rosa

• Widget: Azul

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)

Cor do gradiente

Preencha uma tela ou quadro com um gradiente em vez de uma única cor plana para adicionar profundidade ao design do ShoutOut.

• Abra o seletor de cores para o fundo da tela ou quadro e selecione a opção de gradiente
• Defina o ângulo em graus para controlar a direção em que as cores se misturam na tela ou quadro
• Defina as duas cores de gradiente:
  • Selecione uma parada de cor no controle deslizante para editá-la
  • Insira um valor hexadecimal ou escolha a cor no campo de cores
  • Defina a opacidade para cada cor para controlar o quão fortemente ela é exibida em relação ao texto e outros elementos
• Combine um gradiente com uma imagem de fundo reduzindo a opacidade da imagem, para que ambas as camadas fiquem visíveis

Breadcrumbs

• Os breadcrumbs estão disponíveis no conjunto de propriedades e no canvas
• Por exemplo, ao selecionar um widget, você verá o quadro ao qual ele pertence
• Os Breadcrumbs 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

Construindo com o Designer visual

Notas técnicas

Limitações

• O Visual Designer não pode ser personalizado usando CSS global ou personalizado
• Sites de Frameset não são suportados — o conteúdo não pode ser exibido 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 Launchers
• Desktop Player: Suporta ShoutOuts e Smart Walk-Thrus (limitado)