Gerenciamento de estilos de email managing-styles

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

Selecionar um elemento selecting-an-element

Para selecionar um elemento na interface do Email Designer, é possível:

  • clique diretamente no email,
  • ou procure a árvore de estrutura disponível nas opções localizadas na Paleta esquerda.

Navegar pela árvore de estrutura permite fazer uma seleção mais precisa. É possível selecionar:

  • a componente de estrutura completa,
  • uma das colunas que compõem o componente de estrutura,
  • ou somente um componente localizado em 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 na Paleta esquerda).
  2. Na barra de ferramentas contextual, clique em Select a column para escolher a coluna desejada.

Veja um exemplo em esta seção.

Ajuste das configurações de estilo adjusting-style-settings

  1. Selecione um elemento no seu email. Para obter mais informações, consulte Seleção de 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 margem e assim por diante.

    Para fazer isso, use as opções exibidas no painel Settings ou adicione atributos de estilo embutidos.

  3. Salve o conteúdo.

Ajustar o preenchimento e a margem about-padding-and-margin

A interface Email Designer permite ajustar 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 as margens nos lados esquerdo e direito de uma imagem.
  • Use o preenchimento superior e inferior para adicionar mais espaçamento a um componente Text ou Divider.
  • Para definir bordas entre colunas dentro de um elemento de estrutura, defina o preenchimento para cada coluna.

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

NOTE
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 os parâmetros Padding e Margin no nível da coluna.

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

Alinhamento de estilo about-alignment

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

  • O alinhamento horizontal pode ser aplicado ao texto, às imagens e aos botões; no momento, não se aplica aos componentes Divider e Social.

  • Para definir o 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 about-backgrounds

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

  1. Aplique uma cor de fundo ao corpo do email se isso for necessário para o 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 isso dificulta o gerenciamento.

Veja abaixo as configurações de fundo disponíveis para uso.

  • Defina um Background color para o email inteiro. Certifique-se de selecionar as configurações de corpo na árvore de navegação acessível na Paleta esquerda.

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

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

    Certifique-se de não definir uma cor de fundo do visor, pois isso pode ocultar as cores de fundo da estrutura.

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

    note note
    NOTE
    Alguns programas de email não são compatíveis com imagens de fundo. Quando não houver suporte, a cor do plano de fundo da linha será usada. Certifique-se de selecionar uma cor de fundo sobressalente apropriada caso a imagem não possa ser exibida.
  • Definir uma cor de fundo no nível da coluna.

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

    Também é possível definir uma imagem de fundo no nível da coluna, mas isso raramente é usado.

Exemplo: ajuste do alinhamento vertical e do preenchimento example--adjusting-vertical-alignment-and-padding

Você deseja ajustar o preenchimento e o alinhamento vertical dentro de um componente de estrutura composto por 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 na Paleta esquerda.

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

    Os parâmetros editáveis para essa coluna são exibidos no painel Settings à 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 esquerdo e direito para essa coluna.

  5. Proceda 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 a cor e o público alvo no Designer de email.

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

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

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

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

  5. Escolha a cor necessária.

  6. Salve as alterações.

Adição de atributos de estilo em linha adding-inline-styling-attributes

Na interface do Designer de email, ao selecionar um elemento e exibir suas configurações no painel lateral, você pode personalizar os atributos em linha e seus valores para esse elemento específico.

  1. Selecione um elemento no seu conteúdo.

  2. No painel lateral, procure as configurações de Styles Inline.

  3. Modifique os valores dos atributos existentes ou adicione novos usando o botão +. É possível adicionar qualquer atributo e valor que seja compatível com CSS.

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

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff