Visão geral do layout responsivo

Os recursos responsivos não são compatíveis com anúncios HTML para AMP nem com anúncios em vídeo.

O design responsivo usa um layout flexível que se adapta a diferentes orientações ou tamanhos de janelas de visualização. Dessa forma, você não precisa criar vários layouts. O Google Web Designer oferece várias ferramentas para criar um design responsivo.

Seu documento precisa ter, no mínimo, dimensões de página responsivas. Também é possível criar um layout fluido definindo tamanhos e posições de objetos com porcentagens. Para personalizar cada elemento em diferentes tamanhos ou intervalos de tamanho da janela de visualização, use regras de mídia.

Os anúncios gráficos não podem ser responsivos, mas podem usar o fluxo de trabalho responsivo em um layout de vários tamanhos para exportar tamanhos diferentes de um único documento.

Dimensões da página responsiva

Tornar o documento geral responsivo

É necessário que os documentos responsivos tenham a largura e a altura da página definidas como 100% para preencher todo o espaço disponível na tela.

  • Documentos existentes: no painel Responsivo, marque a caixa de seleção Layout responsivo.

  • Novos arquivos: na caixa de diálogo "Novo arquivo", marque a caixa de seleção Layout responsivo ao especificar dimensões. Essa opção não está disponível para todos os tipos de arquivo.

Para que o conteúdo da página seja responsivo, é possível usar regras de mídia e layout fluido.

Layout fluido

Tamanhos e posições baseados em porcentagem

Visão geral da criação de porcentagens

Além das dimensões de página, também é possível especificar o tamanho e a posição dos elementos usando porcentagens em vez de pixels. As porcentagens preservam o tamanho e o alinhamento de um elemento em relação ao contêiner pai, mesmo quando ele é modificado.

Ao alinhar elementos, a opção layout fluido das ferramentas de alinhamento e distribuição permite definir posições baseadas em porcentagem facilmente.

Regras de mídia

Substituir atributos e estilos CSS para diferentes orientações e tamanhos

Com as regras de mídia, o documento detecta o tamanho e a orientação da janela de visualização e aplica estilos e atributos diferentes adequadamente. Por exemplo, um smartphone pode exibir conteúdo em uma única coluna, enquanto um tablet pode mostrar o mesmo conteúdo em duas. Essas mudanças, chamadas de substituições, ocorrem nos tamanhos ou intervalos de tamanho especificados.

É possível alternar entre diferentes conjuntos de regras no painel "Responsivo":

  • Regras padrão: selecione Editar documento de base ao alterar o conjunto padrão de estilos ou ao fazer mudanças que se apliquem a todos os tamanhos da janela de visualização, como adicionar ou excluir recursos, componentes ou eventos.
  • Regras de mídia: selecione um tamanho específico ou um intervalo deles para substituir os atributos e estilos padrão do tamanho da janela de visualização.

Quando uma regra de mídia for selecionada, será possível definir estilos e atributos que se aplicam somente a esse tamanho ou intervalo. Por exemplo, é possível ajustar a posição, o tamanho, a origem, a visibilidade ou a animação de um elemento. O Google Web Designer também permite substituir o conteúdo do texto, as configurações de ajuste e as propriedades do componente.

Saiba mais sobre regras de mídia e substituições.

Isso foi útil?
Como podemos melhorá-lo?

Precisa de mais ajuda?

Faça login e veja mais opções de suporte para resolver o problema rapidamente.

Pesquisa
Limpar pesquisa
Fechar pesquisa
Google Apps
Menu principal
Pesquisar na Central de Ajuda
true
5050422
false