[Beta]{class="badge informative"}
Usar temas de marca para o conteúdo do email email-brand-themes
Com temas, os designers não técnicos têm a capacidade de criar diretrizes reutilizáveis de design de conteúdo de email que se alinham a uma marca e um estilo específicos. Os temas permitem que os profissionais de marketing aproveitem emails visualmente atraentes e consistentes com a marca de forma mais rápida e com menos esforço, além de fornecer opções avançadas de personalização para necessidades de design exclusivas.
Diretrizes e limitações de tema themes-guidelines
Ao trabalhar com temas, lembre-se das seguintes diretrizes e limitações:
-
Ao criar um modelo de email ou de email a partir de uma tela em branco (criar do zero), você pode escolher o Modo de tema para começar a criar seu conteúdo usando um tema para aplicar um estilo específico que se ajuste à sua marca e ao seu design. Se você escolher o Modo manual, não poderá aplicar um tema, a menos que redefina o design do modelo de email ou de email.
-
Fragmentos não são compatíveis entre o Modo de tema e o Modo manual no conteúdo do email. Para usar um fragmento no conteúdo de email no qual um tema é aplicado, ele também deve ser criado no Modo de tema.
-
As alterações em um tema personalizado não são aplicadas automaticamente em cascata a todos os emails ou modelos de email que já o utilizam. Edite o conteúdo de cada para atualizar o tema.
-
Se você excluir um tema, ele não afetará nenhum email ou template de email no qual já foi aplicado.
Criar um tema de marca create-theme
Defina o tema da sua própria marca que poderá ser aplicado ao conteúdo do seu email e do seu modelo de email no conteúdo de email futuro.
-
Acesse as ferramentas de tema usando um dos seguintes métodos:
-
Crie um novo modelo de email e clique em Editar modelo de email para iniciar a página Criar seu modelo.
-
Clique em … Mais na parte superior direita do espaço de design de conteúdo de email e escolha Alterar seu design.
Na caixa de diálogo de confirmação, clique em Alterar modelo para abrir a página de design.
-
-
Na página de design, escolha Criar ou editar temas.
-
Selecione o tema padrão ou use qualquer um dos temas do Adobe para usar como ponto de partida.
note note NOTE Se quiser usar um de seus temas personalizados (Meus temas) como ponto de partida, você poderá duplicá-lo e alterar o nome do tema ao editar o tema. -
Clique em Criar.
A página Criar um tema fornece uma tela com os elementos existentes de todos os tipos de texto, botões e contêineres do tema inicial.
-
Use a navegação correta para acessar as diferentes guias de estilo de tema e alterar as configurações do tema:
Os elementos visuais são alterados na tela de desenho à medida que você define as novas configurações de tema. Se o resultado não for o que você deseja, clique no ícone Desfazer (
-
Quando a definição do tema estiver concluída, clique em Salvar.
-
Clique em Fechar para retornar à página Criar um tema e em Cancelar para retornar à página de design.
Você pode então escolher Criar do zero para abrir o espaço de design visual e usar o tema para o email ou modelo.
Configurações gerais
Na guia Configurações gerais, defina os parâmetros básicos para o seu tema:
-
Insira um Nome do tema exclusivo.
-
Ajuste a Largura da janela de visualização para o conteúdo (corpo) do email. Use as setas para cima e para baixo para aumentar ou diminuir a largura ou insira o valor (em pixels).
Cores
Selecione a guia Cores e use as configurações para definir a paleta de cores do tema.
-
Clique em Editar para exibir a paleta de cores que inclui as cores do tema.
Escolha uma Predefinição para usar um esquema de cores para o tema ou ajuste cada cor no conjunto. Você também pode usar uma combinação de ambos.
Para o quadrado colorido selecionado na parte superior, é possível definir a cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.
Clique na seta Voltar para fechar as ferramentas da paleta de cores.
-
Clique em Adicionar variante para criar várias variantes de cores, como o modo light e dark, em que cada variante tem sua própria paleta de cores e controles de nuance. Você pode ter até seis variantes.
Para cada variante, clique no ícone Editar (
Para cada cor que você deseja alterar para a variante, mova o botão para a esquerda ou direita para desativá-la ou ativá-la. Para uma configuração de cor ativada, clique no quadrado de cor para escolher a cor.
accordion Configurações de cor variante As configurações são agrupadas por tipo:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 Tipo Configurações Descrição Geral 
Essas configurações determinam as cores do corpo, das estruturas, dos contêineres, dos planos de fundo, dos links, das grades e das bordas. Títulos 
Essas configurações se aplicam aos elementos Heading, onde é possível definir cores de texto e de borda para cada um dos seis níveis de cabeçalho. Expanda cada nível de cabeçalho que você deseja definir para a variante.Parágrafos 
Essas configurações se aplicam aos elementos Paragraph, onde é possível definir cores de texto e de borda para cada um dos três tipos de parágrafo. Expanda cada tipo de parágrafo que você deseja definir para a variante.Botões 
As configurações se aplicam aos elementos de botão, onde é possível definir a cor de preenchimento, a cor da borda e a cor do texto para cada uma das três predefinições de botão: Primário, Secundário e Terciário.
Configurações de texto
Na guia Configurações de texto, é possível definir os tipos de fontes, estilos e tamanhos globais que deseja usar para o tema. Para obter um controle mais granular, também é possível editar esses parâmetros para tipos de cabeçalho e parágrafo.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configurações | Descrição |
| Global |
|
Defina a Biblioteca de fontes como Padrão ou Fontes do Google. Em seguida, escolha a família de fontes que deseja usar. Essas configurações de texto global são aplicadas em todo o, a menos que você defina estilos de texto diferentes para os níveis de cabeçalho e tipos de parágrafo. |
| Títulos |
|
Para o nível de cabeçalho que você deseja definir, selecione H1, H2 e assim por diante. Defina a Biblioteca de fontes como Padrão ou Fontes do Google. Em seguida, escolha a família, o tamanho e o estilo da fonte. Escolha o Alinhamento do texto: Esquerda, Centralizada, Direita ou Justificada. |
| Parágrafos |
|
Para o nível de cabeçalho que você deseja definir, selecione P1, HP e assim por diante. Defina a Biblioteca de fontes como Padrão ou Fontes do Google. Em seguida, escolha a família, o tamanho e o estilo da fonte. Ajuste a Altura da linha conforme necessário. Escolha o Alinhamento do texto: Esquerda, Centralizada, Direita ou Justificada. |
Espaçamento e borda
Na guia Espaçamento, é possível definir o preenchimento e a margem para os diferentes tipos de elementos. Para Selecionar tipo, escolha o tipo de conteúdo. Em seguida, defina o preenchimento, as margens, os cantos e as bordas aplicáveis a esse tipo de elemento.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configurações | Descrição |
| Margens |
|
Escolha o ícone Margem para exibir configurações que replicam o parâmetro CSS margin, que controla o espaço fora da borda de um componente e o separa de outros componentes/elementos. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor. Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente separadamente. Clique nos ícones Bloquear e Desbloquear para sincronizar ou dessincronizar os valores das margens superior, inferior e esquerda, direita. |
| Preenchimentos |
|
Escolha o ícone Preenchimento para exibir configurações que replicam o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente/elemento e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente. Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. É possível definir o preenchimento de todos os lados, do botão superior, da esquerda para a direita ou de cada lado do componente separadamente. Clique nos ícones Bloquear e Desbloquear para sincronizar ou dessincronizar os valores de preenchimento superior-inferior e esquerdo-direito. |
| Cantos |
|
Escolha o ícone Cantos para exibir configurações que replicam o parâmetro CSS border-radius, que define o raio dos cantos do componente/elemento. Defina o valor numérico de acordo com a curva desejada para os cantos. Um valor de 0 (padrão) produz um canto quadrado. |
Mova o botão Borda para a direita para habilitar as opções de exibição de borda e defina-as de acordo com seus critérios de design:
-
Para definir o Tamanho da borda (largura da linha), clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.
-
Para definir o Estilo da borda, escolha um valor na lista de valores CSS
border-stylepadrão, como Sólido, Pontilhado e Tracejado. -
Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.
Botões
Na guia Botões, é possível definir atributos diferentes (diferentes da cor) para elementos de botão, como raio de borda (forma), texto e tamanho. É possível alterar as configurações de cada uma das três predefinições de botão: Primário, Secundário e Terciário.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configurações | Descrição |
| Texto |
|
Defina a Biblioteca de fontes como Padrão ou Fontes do Google. Em seguida, escolha a família, o tamanho e o estilo da fonte. Escolha o Alinhamento do texto: Esquerda, Centralizada, Direita ou Justificada. |
| Borda |
|
Mova o botão Borda para a direita para habilitar as opções de exibição da borda do botão e defina-as de acordo com seus critérios de design. Defina o Tamanho da borda (largura da linha) aumentando ou diminuindo o número de pixels. Defina o Estilo da borda escolhendo um valor na lista de valores CSS border-style padrão, como Sólido, Pontilhado e Tracejado. |
| Tamanho |
|
Na opção Altura, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do botão de acordo com seu conteúdo. Para a Largura, use o botão de alternância para definir a largura por pixels ou porcentagem. Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do botão com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do botão como 50% da largura do conteúdo do bloco. Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Auto) é o padrão e dimensiona a largura do botão de acordo com seu conteúdo. |
Divisor
Na guia Divider, é possível definir o estilo da linha e as configurações do contêiner de um componente divisor.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configurações | Descrição |
| Linha |
|
Defina o Estilo da borda escolhendo um valor na lista de valores CSS border-style padrão, como Sólido, Pontilhado e Tracejado. |
| Tamanho do contêiner |
|
Para a opção Altura, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels do componente/elemento. Um valor vazio (Automático) é o padrão e dimensiona a altura de acordo com seu conteúdo (estilo de linha). Para a Largura, use o botão de alternância para definir a largura por pixels ou porcentagem. Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina a largura do elemento com base na caixa de conteúdo do bloco. Por exemplo, um valor de 50 define a largura do divisor como 50% da largura do conteúdo do bloco. Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Auto) é o padrão e dimensiona a largura do divisor de acordo com seu conteúdo. |
| Alinhamento |
|
Escolha o alinhamento horizontal dentro do bloco contêiner: Esquerda, Centralizada ou Direita. |
Grade
Na guia Grade, é possível controlar lacunas de coluna e linha para um elemento de grade:
-
Lacuna da coluna - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels da lacuna entre as colunas da grade. Ou você pode inserir um número no campo.
-
Lacuna de linhas - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels da lacuna entre as linhas de grade. Ou você pode inserir um número no campo.
Editar um tema
É possível editar um tema usando o mesmo fluxo de trabalho e as mesmas ferramentas usadas ao criar um tema. A diferença é que você seleciona a guia Meus temas e seleciona o tema personalizado que deseja alterar.
Use o painel à direita para navegar pelas diferentes guias e alterar as configurações do tema:
Os elementos visuais exibidos mudam à medida que você altera as configurações. Se o resultado na tela não for o que você deseja, clique no ícone Desfazer (
Quando as alterações do tema forem concluídas, clique em Salvar.
Gerenciar temas personalizados
É possível gerenciar os temas personalizados usando o mesmo fluxo de trabalho e as ferramentas usadas ao criar um tema. A diferença é que você seleciona a guia Meus temas e gerencia seus temas na lista exibida.
Se você tiver uma grande lista de temas personalizados, use o campo Pesquisar e outros filtros para reduzir a lista exibida. Ao gerenciar a lista de temas disponíveis, você pode editar, excluir ou duplicar um tema personalizado a qualquer momento.
Editar um tema
-
Selecione o tema que você deseja alterar e clique em Editar na parte superior direita.
-
Use a navegação à direita para usar as diferentes guias de estilo e alterar as configurações do tema:
Os elementos visuais exibidos mudam à medida que você altera as configurações. Se o resultado na tela não for o que você deseja, clique no ícone Desfazer, na parte inferior do painel direito. Clique no ícone Refazer para reaplicar a alteração.
-
Quando as alterações do tema forem concluídas, clique em Salvar.
Excluir ou duplicar um tema
Ao localizar o tema, clique no ícone do menu Mais (…) no canto inferior direito do cartão de tema e escolha a ação que deseja realizar:
-
Duplicar - Escolha esta ação para duplicar o tema. O novo tema é idêntico a Cópia de anexada ao nome do original. Você pode alterar o nome ao editar o tema.
-
Excluir - Escolha esta ação para remover o tema personalizado. Na caixa de diálogo de confirmação, clique em Excluir.
note note NOTE A exclusão do tema não afeta nenhum email ou template de email no qual ele já foi aplicado.
Usar um tema para criação de conteúdo de email use-email-theme
Ao criar um novo modelo de email ou de email, você pode optar por usar um tema de marca que simplifica o processo de criação de conteúdo e garante que o design se alinhe aos padrões definidos. Para um novo fragmento, também é possível aplicar um tema antes de salvar o fragmento. O fragmento permanece no modo de Tema a partir desse ponto e é compatível para adicionar a emails e modelos de email que também estão no modo de Tema.
-
Selecione uma das seguintes ações:
-
Selecione um modelo de email que incorpore um tema (criado no Modo de tema). O tema específico para cada modelo é aplicado automaticamente.
-
Use a opção Design do zero e selecione Usar Temas para começar com um tema de estilo predefinido.
note important IMPORTANT Se você escolher o modo Estilo Manual, deverá redefinir o design do email para aplicar um tema. Se você escolher o modo Temas, somente os fragmentos criados também no modo Temas estarão disponíveis para serem adicionados ao conteúdo do email.
-
-
No espaço de design de email, clique no ícone Temas (
O tema padrão ou o tema aplicado ao modelo é exibido. Você pode alternar entre as variantes de cor deste tema.
-
Clique na seta ao lado do tema exibido para exibir a lista de temas personalizados e do Adobe disponíveis.
-
Clique em Meus temas e selecione seu tema personalizado.
-
Clique fora da lista.
O tema personalizado recém-selecionado aplica os estilos a todos os componentes de email na tela. É possível alternar entre as variantes de cor.
-
Se precisar substituir os estilos de tema de um componente selecionado, clique no ícone Desbloquear estilos de componente (
No diálogo de confirmação, clique em Desbloquear.
Selecione a guia Estilos no painel direito para alterar as configurações do componente.
Alterar o tema do seu conteúdo de email
Para um modelo de email ou email criado no Modo de tema, você pode alterar o tema a qualquer momento. O conteúdo do email permanece inalterado, mas os estilos são atualizados para refletir o novo tema.
-
Abra o email ou o modelo de email no espaço de design.
-
Clique no ícone Temas (
O tema aplicado é exibido no painel direito.
-
Clique na seta ao lado do tema exibido para exibir a lista de temas personalizados e do Adobe disponíveis.
-
Selecione outro tema.
-
Clique fora da lista.
O tema selecionado aplica os estilos a todos os componentes de email na tela. É possível alternar entre as variantes de cor.