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:
- Selecione um componente de estrutura (diretamente no email ou usando a árvore de estrutura disponível na Paleta esquerda).
- 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
-
Selecione um elemento no seu email. Para obter mais informações, consulte Seleção de um elemento.
-
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.
-
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.
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:
- Aplique uma cor de fundo ao corpo do email se isso for necessário para o design.
- Na maioria dos casos, defina as cores do plano de fundo no nível da coluna.
- 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:
-
Selecione o componente de estrutura diretamente no email ou usando a árvore de estrutura disponível na Paleta esquerda.
-
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.
-
Em Vertical alignment, selecione Up.
O componente de Conteúdo é exibido na parte superior da coluna.
-
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.
-
Proceda de forma semelhante para ajustar o alinhamento e o preenchimento das outras colunas.
-
Salve as alterações.
Links de estilo about-styling-links
É possível sublinhar um link e selecionar a cor e o público alvo no Designer de email.
-
Em um componente em que um link é inserido, selecione o texto do rótulo do seu link.
-
Nas configurações do componente, marque Underline link para sublinhar o texto do rótulo do seu link.
-
Para selecionar em qual contexto de navegação seu link será aberto, selecione um Target.
-
Para alterar a cor do seu link, clique em Link color.
-
Escolha a cor necessária.
-
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.
-
Selecione um elemento no seu conteúdo.
-
No painel lateral, procure as configurações de Styles Inline.
-
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.