Show Menu
TÓPICOS×

Managing Styles

Editar estilos de email

Editar um elemento

No Designer de email, ao selecionar um elemento, várias opções específicas para o tipo de conteúdo selecionado são exibidas no 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 Email Designer, é possível:
  • clique diretamente no email,
  • ou procure a árvore de estrutura disponível nas opções localizadas na Paleta esquerda.
A navegação na árvore de estrutura permite que você faça uma seleção mais precisa. Você pode selecionar:
  • toda a componente da estrutura,
  • uma das colunas que compõe 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 na Paleta esquerda).
  2. Na barra de ferramentas contextual , clique Select a column para escolher a coluna desejada.
Veja um exemplo nesta seção .

Ajustar configurações de estilo

  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 Settings painel ou adicione atributos de estilização em linha.
  3. Salve o conteúdo.

Sobre preenchimento e 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 componente Text ou a um 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.
Dependendo da sua seleção (componente de estrutura, coluna ou componente de conteúdo), o resultado não será o mesmo. A Adobe recomenda definir os parâmetros Padding e Margin no nível da coluna.
Para ambos Padding e Margin , clique no ícone de cadeado para quebrar a sincronização entre os parâmetros superior e inferior ou direito e esquerdo. Isso permite ajustar cada parâmetro separadamente.

Sobre o alinhamento

  • Alinhamento do texto: coloque o cursor do mouse sobre um texto e use a barra de ferramentas contextual para alinhá-lo.
  • O alinhamento horizontal pode ser aplicado ao texto, imagens e botões - atualmente não 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.

Sobre planos de fundo

Quando se trata de configurar planos de fundo com o Email Designer, a Adobe recomenda o seguinte:
  1. Aplique uma cor de plano de fundo ao corpo do seu email, se exigido pelo seu 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 plano de fundo em componentes de imagem ou texto, pois elas são difíceis de gerenciar.
Abaixo estão as configurações de plano de fundo disponíveis que você pode usar.
  • Defina um Background color para o email inteiro. 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 do visor, 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.
    Alguns programas de email não suportam imagens de fundo. 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.
    Este é o caso de uso mais comum. A Adobe recomenda configurar as cores de plano 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 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 na Paleta esquerda.
  2. Na barra de ferramentas contextual , clique Select a column e escolha a 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. Proceda de forma semelhante para ajustar o alinhamento e o preenchimento das outras colunas.
  6. Salve as alterações.

Adicionar atributos de estilo em linha

Na interface do Email Designer, 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 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 que seja 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.

Alternar para exibição móvel

Você pode ajustar o design responsivo de um email editando separadamente todas as opções de estilo para exibição móvel. Por exemplo, você pode adaptar margens e preenchimento, usar tamanhos de fonte menores ou maiores, alterar botões ou aplicar cores de fundo diferentes que serão específicas para a versão móvel do seu email.
Todas as opções de estilo estão disponíveis na exibição móvel. As configurações de estilo do Designer de email são apresentadas na seção Edição de estilos de email.
  1. Crie um email e comece a editar o conteúdo. Para obter mais informações, consulte Criar um conteúdo de email do zero .
  2. Para acessar a exibição móvel dedicada, selecione o Switch to mobile view botão.
    A versão móvel do email é exibida. Ele contém todos os componentes e estilos definidos na exibição da área de trabalho.
  3. Edite independentemente todas as configurações de estilo, como cor do plano de fundo, alinhamento, preenchimento, margem, família de fontes, cor do texto e assim por diante.
  4. Ao editar qualquer configuração de estilo na exibição móvel, as modificações são aplicadas somente à exibição móvel.
    Por exemplo, reduza o tamanho de uma imagem, adicione um plano de fundo verde e altere o preenchimento na exibição móvel.
  5. Você pode ocultar um componente quando exibido em um dispositivo móvel. Para fazer isso, selecione Show only on desktop devices no Display options . Você também pode ocultar esse componente em dispositivos de desktop, o que significa que ele será exibido somente em dispositivos móveis. Para fazer isso, selecione Show only on mobile devices . Por exemplo, essa opção permite que você exiba uma imagem específica em dispositivos móveis e outra imagem em dispositivos desktop. Você pode definir essa opção na exibição móvel ou na exibição da área de trabalho.
  6. Clique novamente no Switch to mobile view botão para voltar à exibição padrão da área de trabalho. As mudanças de estilo que você acabou de fazer não são refletidas.
    A única exceção são as Style inline configurações. Qualquer alteração na configuração em linha de estilo também é aplicada à exibição padrão da área de trabalho.
  7. Qualquer outra alteração na estrutura ou no conteúdo do email, como edições de texto, upload de uma nova imagem, adição de um novo componente etc. também é aplicado à exibição padrão.
    Por exemplo, volte para a exibição móvel, edite algum texto e substitua uma imagem.
    Clique novamente no Switch to mobile view botão para voltar à exibição padrão da área de trabalho. As mudanças são refletidas.
  8. Remover um estilo na exibição móvel leva você de volta ao estilo que foi aplicado no modo desktop.
    Por exemplo, na exibição móvel, aplique uma cor de plano de fundo verde a um botão.
  9. Alterne para a exibição da área de trabalho e aplique um plano de fundo cinza ao mesmo botão.
  10. Alterne novamente para exibição móvel e desative a Background color configuração.
    A cor de fundo definida na exibição da área de trabalho agora é aplicada: fica cinza (não em branco).
    A única exceção é a Border color configuração. Quando desativada na exibição móvel, nenhuma borda é mais aplicada, mesmo se uma cor de borda for definida na exibição da área de trabalho.
A exibição móvel não está disponível em fragmentos .