Gerenciamento de estilos de email

No Designer de email, ao selecionar um elemento, várias opções específicas para o tipo de conteúdo selecionado são exibidas na variável Settings painel. Você pode usar essas opções para alterar facilmente o estilo do seu email.

Selecionar um elemento

Para selecionar um elemento na interface do Designer de email, você pode:

  • clique diretamente no email,
  • ou navegue pela árvore de estrutura disponível nas opções localizadas à esquerda Paleta.

Navegar na árvore de estrutura permite fazer uma seleção mais precisa. Você pode selecionar:

  • toda a componente da estrutura,
  • uma das colunas que compõem o componente de estrutura,
  • ou somente um componente localizado dentro de uma coluna.

Para selecionar uma coluna, você também pode fazer o seguinte:

  1. Selecione um componente de estrutura (diretamente no email ou usando a árvore de estrutura disponível à esquerda) Paleta).
  2. No barra de ferramentas contextual, clique em Select a column para escolher a coluna desejada.

Veja um exemplo em esta seção.

Ajustar configurações de estilo

  1. Selecione um elemento no seu email. Para obter mais informações, consulte Selecionar um elemento.

  2. Ajuste as configurações de acordo com suas necessidades. Cada elemento selecionado oferece um conjunto diferente de configurações.

    Você pode inserir planos de fundo, alterar tamanhos, modificar o alinhamento horizontal ou vertical, gerenciar cores, adicionar preenchimento ou margeme assim por diante.

    Para fazer isso, use as opções exibidas na Settings painel ou adicionar atributos de estilo em linha.

  3. Salve o conteúdo.

Ajustar o preenchimento e a margem

A interface do Designer de email permite que você ajuste rapidamente as configurações de preenchimento e margem.

Padding: essa configuração permite gerenciar o espaço localizado dentro da borda de um elemento.

Por exemplo:

  • Use o preenchimento para definir margens nos lados esquerdo e direito de uma imagem.
  • Use o preenchimento superior e inferior para adicionar mais espaçamento a um Text ou Divider componente.
  • Para definir bordas entre colunas dentro de um elemento de estrutura, defina o preenchimento de cada coluna.

Margin: essa configuração permite gerenciar o espaço entre a borda do elemento e o próximo elemento.

OBSERVAÇÃO

Dependendo da sua seleção (componente de estrutura, coluna ou componente de conteúdo), o resultado não será o mesmo. O Adobe recomenda definir a variável Padding e Margin no nível da coluna.

Para ambos Padding e Margin, clique no ícone de bloqueio para interromper a sincronização entre os parâmetros superior e inferior ou direita e esquerda. Isso permite ajustar cada parâmetro separadamente.

Alinhamento do estilo

  • Alinhamento de texto: coloque o cursor do mouse em um texto e use a barra de ferramentas contextual para alinhá-lo.

  • Alinhamento horizontal pode ser aplicada ao texto, às imagens e aos botões - atualmente não à função Divider e Social componentes.

  • Para definir alinhamento vertical, selecione uma coluna dentro de um componente de estrutura e escolha uma opção no painel Configurações .

Configuração de planos de fundo

Quando se trata de definir planos de fundo com o Email Designer, o Adobe recomenda o seguinte:

  1. Aplique uma cor de fundo ao corpo do email, se exigido pelo design.
  2. Na maioria dos casos, defina as cores do plano de fundo no nível da coluna.
  3. Tente não usar as cores de fundo em componentes de imagem ou texto, pois elas são difíceis de gerenciar.

Abaixo estão as configurações de fundo disponíveis que você pode usar.

  • Defina um Background color para todo o email. Selecione as configurações de corpo na árvore de navegação acessível na paleta esquerda.

  • Defina a mesma cor de plano de fundo para todos os componentes da estrutura selecionando Viewport background color. Essa opção permite selecionar uma configuração diferente da cor do plano de fundo.

  • Defina uma cor de plano de fundo diferente para cada componente de estrutura. Selecione uma estrutura na árvore de navegação acessível na paleta esquerda para aplicar uma cor de plano de fundo específica somente a essa estrutura.

    Certifique-se de não definir uma cor de plano de fundo da janela de visualização, pois ela pode ocultar as cores de plano de fundo da estrutura.

  • Defina um Background image para o conteúdo de um componente de estrutura.

    OBSERVAÇÃO

    Alguns programas de email não suportam imagens de fundo. Quando não houver suporte, a cor de plano de fundo da linha será usada. Certifique-se de selecionar uma cor de plano de fundo de fallback apropriada caso a imagem não possa ser exibida.

  • Defina uma cor de plano de fundo no nível da coluna.

    OBSERVAÇÃO

    Esse é o caso de uso mais comum. O Adobe recomenda configurar as cores de fundo no nível da coluna, pois isso permite mais flexibilidade ao editar todo o conteúdo de email.

    Você também pode definir uma imagem de plano de fundo no nível da coluna, mas isso raramente é usado.

Exemplo: ajuste do alinhamento vertical e do preenchimento

Você deseja ajustar o preenchimento e o alinhamento vertical dentro de um componente de estrutura composto de três colunas. Para fazer isso, siga as etapas abaixo:

  1. Selecione o componente de estrutura diretamente no email ou usando a árvore de estrutura disponível à esquerda Paleta.

  2. No barra de ferramentas contextual, clique em Select a column e escolha aquele que deseja editar. Também é possível selecioná-lo na árvore de estrutura.

    Os parâmetros editáveis para essa coluna são exibidos no Settings painel à direita.

  3. Em Vertical alignment, selecione Up.

    O componente de conteúdo é exibido na parte superior da coluna.

  4. Em Padding, defina o preenchimento superior dentro da coluna. Clique no ícone de bloqueio para interromper a sincronização com o preenchimento inferior.

    Defina o preenchimento à esquerda e à direita para essa coluna.

  5. Continue de forma semelhante para ajustar o alinhamento e o preenchimento das outras colunas.

  6. Salve as alterações.

É possível sublinhar um link e selecionar sua cor e seu destino no Designer de email.

  1. Em um componente onde um link é inserido, selecione o texto do rótulo do link.

  2. Nas configurações do componente, marque Underline link para sublinhar o texto do rótulo de seu link.

  3. Para selecionar em qual contexto de navegação seu link será aberto, selecione um Target.

  4. Para alterar a cor do link, clique em Link color.

  5. Escolha a cor que você precisa.

  6. Salve as alterações.

Adicionar atributos de estilo em linha

Na interface do Designer de email, ao selecionar um elemento e exibir suas configurações no painel lateral, é possível personalizar os atributos em linha e o valor desse elemento específico.

  1. Selecione um elemento no seu conteúdo.

  2. No painel lateral, procure a variável Styles Inline configurações.

  3. Modifique os valores dos atributos existentes ou adicione novos usando o + botão. Você pode adicionar qualquer atributo e valor compatível com CSS.

O estilo é aplicado ao elemento selecionado. Se os elementos filho não tiverem atributos de estilo específicos definidos, o estilo do elemento pai será herdado.

Nesta página