Gerenciar regras de mídia e substituições

Os recursos responsivos não são compatíveis com anúncios HTML para AMP. Anúncios em vídeo, GIFs animados e anúncios gráficos podem usar layouts de vários tamanhos.

Visão geral do layout responsivo

As regras de mídia permitem substituir os estilos padrão e outros atributos para diferentes tamanhos de janela de visualização. Uma regra de mídia se aplica a um tamanho específico ou a um intervalo de tamanho.

Para trabalhar com regras de mídia:

1. Abra o painel "Responsivo" e confira se a caixa Layout responsivo está marcada na guia "Tamanhos e intervalos".
2. Selecione um tamanho ou um intervalo no painel para definir as substituições da regra de mídia.

Enquanto uma regra de mídia está selecionada, os painéis e as ações são desativados se não podem ser limitados a um tamanho específico. Por exemplo, não é possível adicionar novos elementos nem editar eventos. Para fazer essas mudanças, primeiro selecione Editar documento de base no painel "Responsivo".

Regras de mídia para tamanhos específicos

Se você souber as dimensões exatas dos espaços de anúncio onde espera que o criativo apareça, configure regras de mídia para os tamanhos específicos.

Tamanhos comuns

O painel "Responsivo" lista os tamanhos de anúncio comuns para o ambiente do arquivo atual na seção Tamanhos da guia "Tamanhos e intervalos". Não é possível editar ou excluir esses tamanhos.

Tamanhos personalizados

É possível adicionar mais tamanhos ao painel "Responsivo".

Adicionar um tamanho personalizado

1. Clique em  Adicionar tamanho personalizado.
2. Insira as dimensões e pressione Enter.

Editar um tamanho personalizado

1. Passe o cursor sobre o tamanho que você quer editar.
2. Clique no ícone de edição .
3. Insira as novas dimensões.

Excluir um tamanho personalizado

1. Passe o cursor sobre o tamanho que você quer excluir.
2. Clique no ícone de exclusão .

Regras de mídia para intervalos de tamanho

As regras de mídia de intervalo se aplicam a todos os tamanhos especificados nele. Como alternativa, é possível limitar as regras de mídia de intervalo à orientação retrato ou paisagem.

Os intervalos de tamanho dessas regras não podem se sobrepor. As regras de mídia de intervalo podem se sobrepor às de tamanhos específicos. Nesse caso, os dois conjuntos de substituições se aplicam a eles. Quando houver conflito, a regra de mídia do tamanho específico tem prioridade.

Gerenciar regras de mídia de intervalo

Para visualizar as regras de mídia de intervalo, clique no botão Gerenciar regras de mídia de intervalo na seção "Regras de mídia de intervalo" da guia "Tamanhos e intervalos" no painel "Responsivo". Também é possível clicar no botão Mais de uma regra de mídia de intervalo e selecionar Abrir caixa de diálogo… no menu pop-up.

Esta regra de mídia de intervalo afeta dois tamanhos de exibição com substituições.

A caixa de diálogo exibe o espaço da janela de visualização, uma área delimitada por réguas que indicam a largura e a altura. Cada tamanho de exibição é um ponto no espaço da janela de visualização, localizado nas respectivas coordenadas.

Uma regra de mídia de intervalo é representada por uma forma que delimita a parte correspondente do espaço da janela de visualização. As regras de mídia de intervalo que se aplicam a qualquer orientação são exibidas como retângulos. As limitadas à orientação retrato ou paisagem podem ser representadas por outras formas.

Os tamanhos de exibição aparecem no espaço da janela de visualização como pequenos quadrados, para que você veja se eles são afetados pela regra de mídia do intervalo. Os tamanhos de exibição com substituições têm coloração amarela. Não é possível editar os tamanhos de exibição na caixa de diálogo.

Adicionar uma regra de mídia de intervalo

• No painel, faça o seguinte:
  1. Clique em  Adicionar intervalo de tamanho.
  2. Insira as dimensões mínima e máxima do intervalo.
  3. Pressione Enter.
• Na caixa de diálogo, faça o seguinte:
  1. Clique no espaço da janela de visualização e arraste o mouse para desenhar um retângulo.
     • Se o retângulo ficar vermelho, o intervalo de tamanho se sobrepõe a um já existente e não pode ser definido.
  2. Clique em Salvar.

Mudar a orientação de uma regra de mídia de intervalo

É possível especificar a orientação de uma regra de mídia de intervalo para que as substituições só entrem em vigor se a janela de visualização estiver no modo paisagem ou retrato.

1. Clique na lista suspensa de orientação ao lado da regra de mídia de intervalo.
2. Selecione a nova orientação:
   • Qualquer orientação
   • Paisagem
   • Retrato

Editar um intervalo de tamanho

• No painel, faça o seguinte:
  1. Passe o cursor sobre a regra de mídia de intervalo e clique no ícone de edição .
  2. Insira as novas dimensões mínima e máxima do intervalo.
• Na caixa de diálogo, faça o seguinte:
  1. Selecione a regra de mídia de intervalo que você quer editar. As alças de redimensionamento aparecem ao longo da caixa azul que delimita a forma da regra de mídia.
  2. Arraste a forma para um novo local ou arraste uma das alças.
     • Para manter a proporção, pressione a tecla Shift enquanto arrasta as alças de redimensionamento.
     • Se a caixa ficar vermelha, o novo intervalo de tamanho se sobrepõe a um já existente e não pode ser definido.
  3. Clique em Salvar.

Substituições

Use as substituições para otimizar o layout e ajuste as propriedades de diferentes tamanhos de janela de visualização.

Tudo o que é definido por CSS pode ser alterado por uma regra de mídia, inclusive o tamanho, o posicionamento, a visibilidade, a origem e a animação. O Google Web Designer também permite substituir outros atributos, como origens de imagem, propriedades de componentes, conteúdo e configurações de ajuste de texto. As propriedades que não podem ser substituídas são desativadas quando uma regra de mídia é selecionada.

Ver substituições

As substituições do tamanho ou intervalo de tamanho selecionado no momento são exibidas no painel Responsivo da guia Substituições. Cada elemento com uma substituição é listado junto com as propriedades que têm valores substituídos.

Filtrar a lista de substituições

É possível filtrar a lista de substituições usando a lista suspensa na parte superior do painel:

• Todas: mostra todas as substituições.
• Página atual: mostra as substituições de elementos da página atual.
• Seleção: mostra as substituições dos elementos selecionados.

Gerenciar substituições

Adicionar ou alterar uma substituição

1. Selecione a regra de mídia na guia "Tamanhos e intervalos" do painel Responsivo. A regra de mídia é destacada e exibida no canto superior esquerdo do cenário.
2. Faça a mudança desejada.

A etiqueta da propriedade substituída é destacada em amarelo no painel Propriedades, na linha do tempo se a animação foi modificada ou no painel Texto se o conteúdo ou as configurações de ajuste do texto foram alterados. 

       

Exemplos de indicadores de substituição em amarelo

Os tamanhos com substituições exibem o ícone Regras de mídia para tamanhos específicos no painel "Responsivo".

Copiar substituições de uma regra de mídia

1. Realize uma das seguintes ações:
   • Para copiar substituições de um tamanho específico, clique com o botão direito do mouse no tamanho no painel Responsivo.
   • Para copiar substituições de um intervalo de tamanho, passe o cursor sobre ele no painel Responsivo e clique no ícone Mais .
2. Selecione Copiar substituições no menu pop-up.
3. Realize uma das seguintes ações:
   • Para colar substituições em um tamanho específico, clique com o botão direito do mouse no tamanho no painel Responsivo.
   • Para colar substituições em um intervalo de tamanho, passe o cursor sobre ele no painel Responsivo e clique no ícone Mais .
4. Selecione Colar substituições no menu pop-up.

Remover uma substituição

1. Clique na etiqueta amarela da propriedade para substituir.
   • A maioria das substituições é indicada no painel Propriedades.
   • As substituições de animação são indicadas na linha do tempo.
   • As substituições de conteúdo de texto ou configurações de ajuste de texto podem ser vistas no painel Texto.
2. Selecione Remover substituição na caixa de diálogo pop-up.

Remover todas as substituições de uma regra de mídia

• Para um tamanho específico, faça o seguinte:
  1. Clique com o botão direito do mouse no ícone Regras de mídia para tamanhos específicos do tamanho.
  2. Selecione Remover substituições no menu pop-up.
• Para um intervalo de tamanho, faça o seguinte:
  1. Passe o cursor sobre a regra de mídia de intervalo.
  2. Clique no ícone Mais .
  3. Selecione Remover substituições no menu pop-up.