ShoutOuts: Layouts Dinâmicos, Livres e Flexíveis

Last Updated dezembro 9, 2025

Visão Geral

Existem três tipos de modelos disponíveis no Designer Visual:

A. Dinâmico

B. Grátis

C. Flex

O Layout Flex está sendo descontinuado - não será mais atualizado com novos recursos e exibido na Galeria de modelos.

No entanto, os ShoutOuts existentes criados com o Flex continuarão a ser suportados.

Atualizamos e aprimoramos os recursos Flex e desenvolvemos o Layout Dinâmico, que oferece uma variedade de novos recursos e uma experiência de construção melhorada.

Recomendamos seu uso em todos os ShoutOuts e especialmente ao usar o Multi-Language: o ShoutOut com ele adaptará seu tamanho com base na quantidade de texto.

O Layout Livre ainda estará disponível com os mesmos recursos de antes.

O layout dinâmico tem a tag relevante na Galeria de modelos. Todos os modelos sem tag são os modelos de Layout Livre.

Este artigo explica as diferenças entre os três layouts.

Vantagens do Layout Dinâmico

  • Os ShoutOuts criados por meio do modelo de Layout Dinâmico se adaptarão automaticamente à tela em que são exibidos
  • Ao usar vários idiomas: caso o tamanho do texto traduzido exceda o original, o balão será adaptado em conformidade
  • Reduz o tempo de construção – existem variações prontas dos arranjos de conteúdo dentro da tela

Limitações

  • Sem suporte para personalização usando CSS global ou personalizado
  • Sites Frameset não são suportados
  • Forma, Imagem e WebView são os únicos widgets redimensionáveis; o tamanho de um botão e texto não pode ser alterado
  • Sem tamanho mínimo ou máximo para widgets individuais
  • Sem redimensionamento manual do Canvas (o tamanho do Canvas se adapta automaticamente ao conteúdo)

Comparação

Estrutura do Modelo

Estrutura do Modelo

Layout dinâmico

O layout dinâmico tem três camadas - tela, moldura (marcada em quadrados azuis) e widget (separados por linhas vermelhas).

Vários quadros podem ser adicionados um ao lado do outro, abaixo e acima do outro. As linhas do widget dentro dos quadros podem ser organizadas horizontalmente.

Layout livre

Os elementos podem ser organizados em qualquer ordem.

Layout Flexível

O layout Flex tem duas camadas - tela e widgets.

Só pode haver um quadro em uma linha (outro quadro não pode ser adicionado ao lado de outro). As linhas dentro do quadro só podem ser dispostas horizontalmente.

Adaptabilidade com base no conteúdo

Adaptabilidade com base no conteúdo

Layout dinâmico

O quadro de texto será expandido e encolhido automaticamente.

Quando dois quadros são colocados lado a lado, adicionar texto a um deles também expandirá o segundo quadro.

Quando houver dois quadros um ao lado do outro e um acima/abaixo deles, adicionar texto ao quadro único não afetará o tamanho dos outros dois.

Quando há uma imagem em um quadro e texto no outro ao lado, o redimensionamento da imagem afetará toda a tela.

Layout livre

Ao adicionar mais texto, você precisa redimensionar manualmente o quadro e a tela.

Layout Flexível

O quadro de texto será expandido e encolhido automaticamente.

Posição da Tela

Posição da Tela

Layout dinâmico

A posição da tela na tela só pode ser alterada no saco de propriedades. Selecione uma das opções padrão ou ative a opção "Posição personalizada" para ativar e insira as configurações preferidas em pixels ou porcentagem para alterações mais específicas.

Layout livre

A posição da tela pode ser alterada na tela (selecione-a e arraste-a livremente) ou no saco de propriedades (você pode selecionar uma das posições predefinidas ou definir a personalizada).

Layout Flexível

A posição da tela pode ser alterada na tela (selecione-a e arraste-a livremente) ou no saco de propriedades (você pode selecionar uma das posições predefinidas ou definir a personalizada).

Alterando o tamanho da tela

Alterando o tamanho da tela

Layout dinâmico

A largura do ShoutOut pode ser alterada esticando as alças laterais da tela ou aplicando medidas no saco de propriedades. A altura será ajustada automaticamente com base na quantidade de conteúdo.

Apenas a largura da tela pode ser redimensionada por um usuário.

Layout livre

A tela pode ser redimensionada usando as configurações de Largura e Altura no painel lateral ou esticando manualmente as bordas da tela.

Layout Flexível

O tamanho da tela pode ser alterado no painel lateral. Para fazer isso, ative a opção na caixa Tamanho Avançado na guia Layout. A largura e a altura máximas podem ser definidas em pixels ou porcentagens (do tamanho da tela do navegador).

A tela se expandirá automaticamente, adaptando-se ao conteúdo dentro dela ou ao tamanho da tela, mas não excederá o limite máximo de largura/altura definido.

Posição dos Elementos

Posição dos Elementos

Layout dinâmico

A distância dos lados do quadro aos widgets pode ser ajustada no saco de propriedades. Selecione a moldura e defina a distância padrão para todos os lados ou clique no ícone de bordas e controle cada lado individualmente.

Para criar espaço entre dois widgets - selecione o widget e ajuste o espaçamento externo no saco de propriedades. Use o espaçamento externo para obter resultados de posição mais precisos.

Por padrão, a mesma distância é definida para todos os lados. Para aplicar um valor diferente a um dos lados, clique no ícone de bordas. A indicação "Misto" será exibida.

No nível da moldura, os elementos podem ser alinhados horizontal ou verticalmente. A opção está disponível quando o elemento está dentro de um quadro ao lado de outro quadro que tenha mais conteúdo.

Use o espaçamento externo no nível da tela para expandir o espaço entre as bordas e os elementos.

Use o espaçamento do widget para alterar a quantidade de espaço vertical entre os widgets.

Layout livre

Os elementos podem ser movidos livremente dentro da tela.

Layout Flexível

Os elementos só podem ser dispostos em posições predefinidas que são sugeridas automaticamente aos usuários quando eles arrastam um elemento (posições possíveis são indicadas por linhas azuis).

Os quadros podem ser movidos arrastando e soltando - horizontal ou verticalmente.

Para obter resultados mais precisos, use o espaçamento interno para quadros e o espaçamento externo para widgets.

A distância dos lados do quadro aos widgets pode ser ajustada no saco de propriedades. Selecione a moldura e defina a distância padrão para todos os lados ou clique no ícone de bordas e controle cada lado individualmente.

A posição do elemento pode ser ajustada – dentro da tela e em relação a outros elementos – na guia Layout no painel lateral, escolhendo o alinhamento do elemento e definindo o espaçamento externo.

Observação: o alinhamento vertical só está disponível quando o objeto está ao lado de outro de maior altura.

Widgets podem ser adicionados à mesma linha, desde que haja espaço suficiente para eles. Quando o espaço acabar, o widget será criado em uma linha separada.

Tamanho dos Widgets

Tamanho dos Widgets

Layout dinâmico

Para redimensionar um widget, selecione-o e arraste a barra de controle.

O widget pode ser esticado clicando no ícone de esticação.

Quando a proporção estiver bloqueada, o widget será estendido para incluir figuras inseridas. Quando a proporção estiver desbloqueada, o widget ocupará todo o espaço horizontal disponível dentro do quadro.

Quando houver dois widgets seguidos, cada um dos widgets ocupará 50% do espaço dentro do quadro.

A altura do widget pode ser controlada manualmente.

Layout livre

O tamanho de uma imagem, a visualização na Web e a forma podem ser facilmente alterados na tela em ambos os modelos. No Layout Flexível, a tela se adaptará.

O tamanho de uma caixa de texto e um botão também podem ser alterados na tela ou no painel lateral.

Layout Flexível

O tamanho de uma imagem, a visualização na Web e a forma podem ser facilmente alterados na tela em ambos os modelos. No Layout Flexível, a tela se adaptará.

A caixa de texto e o tamanho do botão não podem ser alterados. O widget pode ser esticado clicando no ícone de esticação.

O botão pode ser esticado horizontal ou verticalmente, se houver espaço.

Excedendo o tamanho da Tela

Excedendo o tamanho da Tela

Layout dinâmico

A tela se expandirá dependendo da quantidade de conteúdo. Ele será executado, mas as partes que excedem a tela não serão vistas e o usuário não terá acesso a ele no modo de edição também.

Layout livre

Quando você adicionou muito conteúdo e isso vai além dos limites da tela.

Layout Flexível

Quando você adicionou mais conteúdo do que o espaço que a tela pode caber e a altura e/ou largura máximas da tela foram atingidas.

 

Was this article helpful?

Thanks for your feedback!

Faça parte de algo maior.

Interaja com colegas, tire dúvidas e compartilhe ideias.

Explore nossa comunidade
×