Criação de conteúdo de email
No Adobe Marketo Optimizer, o espaço de design de email fornece uma tela visual onde os profissionais de marketing compõem emails. As ferramentas de design de email nos painéis à esquerda e na parte superior (estruturas, componentes de conteúdo, modelos, fragmentos e muito mais) oferecem suporte à criação do zero com arrastar e soltar. Você também pode optar por iniciar com base em um modelo, colar HTML bruto ou reunir mensagens de fragmentos visuais reutilizáveis.
No Marketo Optimizer, cada email está associado a uma ação Enviar Email na jornada de uma pessoa. O fluxo de trabalho completo, desde o design da jornada até a definição de email, acontece em uma experiência contínua. Quando você adicionar um nó Enviar Email a uma jornada de pessoa, clique em Criar email para iniciar o processo. Primeiro, defina as Ações e as configurações de conteúdo para o email. Clique em Editar corpo do email para iniciar o espaço de design de conteúdo de email, no qual você pode escolher como deseja criar seu email a partir das seguintes opções:
-
Crie o email do zero usando a interface de design visual. Crie o componente de layout de email por componente usando a função arrastar e soltar em uma tela em branco. Esse método é melhor para criar novos modelos ou emails únicos.
-
Importe conteúdo existente do HTML para o editor de código ou trabalhe lado a lado com a tela visual.
-
Selecione um modelo existente em uma lista de modelos de email predefinidos ou personalizados. Esse método é mais adequado para casos de uso de email repetíveis.
Ferramentas de design de email email-design-tools
- Barra de ferramentas superior: Salvar, Voltar, Alternar para o editor de código, controles de visualização.
- Painel esquerdo: Estruturas (layouts de coluna), Conteúdo (texto, botão, imagem, divisor, social, HTML), Fragmentos, Modelos, Árvore de navegação (hierarquia de estilo DOM do email).
- Tela do Centro: editor do WYSIWYG com visualização móvel e de área de trabalho.
- Painel direito: configurações e estilos do componente selecionado no momento, incluindo propriedades de conteúdo, plano de fundo, borda, preenchimento e personalização.
Práticas recomendadas de design de email design-best-practices
Seguir as práticas recomendadas do HTML e do CSS ajuda a garantir a renderização consistente entre os clientes de email.
Criar email do zero design-from-scratch
Use o espaço de design de conteúdo visual para definir a estrutura e o conteúdo do email. Ao adicionar e mover componentes estruturais com ações simples de arrastar e soltar, é possível projetar o layout e a organização do conteúdo de email em segundos.
- Na página Criar seu email, selecione a opção Criar do zero.
Quando estiver satisfeito com o conteúdo, clique em Salvar.
Importar conteúdo existente do HTML import-html-content
O conteúdo importado pode ser:
-
Um arquivo HTML com uma folha de estilos incorporada
-
Um arquivo .zip que inclui um arquivo HTML, a folha de estilos (.css) e as imagens
note NOTE Não há restrições na estrutura do arquivo .zip. No entanto, as referências devem ser relativas e se encaixar na estrutura de árvore da pasta .zip. As imagens são sempre carregadas no repositório de ativos.
Para importar um arquivo com conteúdo HTML :
-
Na página inicial de design, selecione a opção Importar HTML.
-
Arraste e solte o HTML ou arquivo .zip contendo seu conteúdo HTML e clique em Importar.
<table> como a primeira camada em um arquivo do HTML pode causar perda de estilo, incluindo configurações de plano de fundo e largura na marca de camada superior.Você pode personalizar o conteúdo importado conforme necessário com as ferramentas do editor visual de email.
Selecione um modelo templates
Ao abrir o espaço de design de email, use a seção Selecionar modelo de design para começar a partir de um modelo de amostra interno ou de um modelo personalizado salvo. Consulte Usar um modelo em um email para obter o fluxo de trabalho completo.
Adicionar estrutura e conteúdo structure-content
Use o editor visual de email para criar sua mensagem de email. Adicione um pré-cabeçalho, estruture o layout com colunas e divisores e preencha essas estruturas com componentes de conteúdo, como imagens, botões e texto. Você também pode aplicar CSS personalizado para estilos avançados e visualizar como o design é renderizado no modo escuro.
Definir o pré-cabeçalho preheader
O pré-cabeçalho é o trecho de texto exibido após a linha de assunto nas visualizações da caixa de entrada. No Marketo Optimizer, o pré-cabeçalho é configurado na tela visual do espaço de design de email, não na tela de propriedades de email ao lado da linha de assunto.
Com o Corpo selecionado na árvore de navegação esquerda, abra o painel Configurações à direita.
Clique na região de texto Pré-cabeçalho e insira sua cópia de pré-cabeçalho. Clique no ícone Adicionar personalização (
Modo escuro dark-mode
A renderização no modo escuro tem suporte por meio de consultas de mídia prefers-color-scheme CSS. As ferramentas de design de email incluem uma pré-visualização no modo escuro e opções para definir o estilo personalizado para clientes de email, ajudando você a validar se o texto permanece legível, se os logotipos são visíveis e se as cores da marca se mantêm contra planos de fundo escuros.
Para obter orientações detalhadas sobre visualização, definição de configurações personalizadas do modo escuro, suporte a clientes de email e práticas recomendadas de teste, consulte Modo escuro para conteúdo de email.
Adicionar componentes de estrutura e conteúdo components
Crie seu layout de email adicionando componentes de estrutura e componentes de conteúdo à tela.
Arraste os itens das seções Estruturas e Conteúdo no painel esquerdo e configure cada componente nas guias Configurações e Estilos à direita.
Adicionar CSS personalizado custom-css
Você pode adicionar CSS personalizado diretamente no espaço de design de email para obter um estilo avançado, além das configurações padrão do componente. É uma prática recomendada adicionar esse estilo de mais alto nível antes de incluir componentes de conteúdo, como imagens, botões e texto.
Consulte Adicionar CSS personalizado para o seu conteúdo para obter etapas, regras de sintaxe e solução de problemas.
Adicionar fragmentos visual-fragments
Um fragmento visual é um componente de design reutilizável que pode ser referenciado por vários ativos de conteúdo no Marketo Optimizer. Geralmente, é um bloco de conteúdo que pode ser pré-criado e inserido rapidamente para tornar a criação mais rápida e consistente.
O exemplo a seguir descreve as etapas para adicionar fragmentos à medida que você cria seu conteúdo.
-
Para abrir a lista de fragmentos, selecione o ícone Fragmentos (
É possível:
- Classifique a listagem.
- Procurar, pesquisar ou filtrar a listagem.
- Alternar entre as visualizações em miniatura e em lista.
- Atualize a lista para refletir qualquer um dos fragmentos criados recentemente.
-
Arraste e solte qualquer um dos fragmentos no componente estrutural.
O editor renderiza o fragmento na seção/elemento da estrutura de email.
O conteúdo do fragmento é atualizado dinamicamente na estrutura para visualizar como o fragmento é renderizado no email.
Depois que o email for salvo, ele aparecerá na página de detalhes do fragmento ao selecionar a guia Usado por no resumo.
Adicionar ativos de imagem insert-image
Quando Marketo Optimizer é provisionado, os ativos existentes do Marketo Design Studio ficam disponíveis no espaço de design de email. Você pode navegar e inserir essas imagens em seus emails diretamente do seletor de ativos.
Tipos de arquivo de imagem compatíveis:
- Totalmente compatível (visível no seletor, incorporável em linha): JPG, PNG, GIF, WebP.
- Acessível com aviso: SVG (com um aviso de que alguns clientes de email não renderizam o SVG).
- Não suportado nesta versão do Beta: TIFF, PDF, DOCX, XLSX, PPTX, CSS, JS, HTML, TXT, arquivos binários, PSD, AI, INDD.
No espaço de design de conteúdo visual, selecione o ícone do Assets (
-
Adicione um novo ativo arrastando e soltando o ativo de imagem em um componente de estrutura.
-
Substitua um ativo de imagem existente selecionando-o na tela e clicando em Selecionar ativo nas ferramentas de origem da imagem.
Para obter mais informações sobre o uso de ativos, consulte Usar ativos para criação de conteúdo.
Navegar pelas camadas, configurações e estilos navigation-layers
Use a árvore de navegação para selecionar componentes e colunas e, em seguida, ajuste suas configurações e estilos no painel direito. Consulte árvore de navegação.
Personalizar conteúdo personalize-content
Marketo Optimizer usa a sintaxe Handlebars para personalização. Os tokens são substituídos no momento do envio por valores dos dados de perfil de cada recipient. Há vários lugares onde você pode usar a personalização em um email:
- Linha de assunto — ponto de personalização mais comum.
- Pré-cabeçalho — definido dentro da tela visual; oferece suporte a tokens de atributos de perfil.
- Texto do corpo do email — nomes e outros atributos de perfil inseridos em linha.
- URLs de Botão — acrescentar parâmetros por destinatário.
Para adicionar personalização :
- No espaço de design de email (ou na página de propriedades de email da linha de assunto), clique no campo onde deseja inserir um token.
- Clique no ícone Personalizar (
- Na caixa de diálogo de personalização, navegue pela árvore de esquema à esquerda. Os atributos de perfil (nome, sobrenome, email, cargo e outros campos de perfil) são listados.
- Selecione um atributo. O editor insere a expressão Handlebars correspondente — por exemplo,
{{profile.firstName}}. - Adicione um valor de fallback para tratar dados ausentes:
{{profile.firstName | default: "there"}}. - Clique em Confirmar ou Inserir. A expressão aparece em linha no campo.
Use expressões Handlebars como a seguir (a personalização usa a mesma sintaxe descrita em Personalizar conteúdo):
{{profile.lastName}}— Inserir o sobrenome do destinatário.{{profile.jobTitle}}— Fazer referência ao título do trabalho do destinatário no corpo do texto.{{profile.firstName}}, ready to take the next step?— Combinar token e texto estático embutido.
Para uma saudação de nome com um fallback quando o valor estiver ausente, use o auxiliar do default como mostrado nas etapas de personalização anteriores (por exemplo, nome com padrão "there").
Além de default, o editor de personalização inclui auxiliares Handlebars integrados para lógica condicional, transformação de texto e formatação de data. Use o navegador de função do editor para explorar os auxiliares disponíveis e inseri-los com a sintaxe correta.
| note tip |
|---|
| TIP |
No espaço de design de email, digite {{ diretamente em qualquer campo de texto para acionar uma lista suspensa de preenchimento automático em linha listando os atributos de perfil disponíveis. Não é necessário abrir a caixa de diálogo de personalização completa para inserções rápidas. |
Para obter detalhes sobre as ferramentas e a sintaxe do editor de expressões, consulte expressões Personalization.
Editar rastreamento de URL vinculado preview-and-edit-linked-urls
O painel Rastreamento de link fornece uma visualização centralizada, onde você pode localizar facilmente cada URL no conteúdo. Clique no ícone Links (
Para definir o rastreamento de um link de conteúdo listado, clique no ícone Editar (
Verificar e testar o email check-and-test-the-email
Use os controles de visualização móvel e de desktop na barra de ferramentas do espaço de design de email para revisar o layout de email antes de salvar. Alterne para a visualização do modo escuro para validar a legibilidade e o contraste (consulte Modo escuro para conteúdo de email).
Perfis de teste, Simular conteúdo e enviar fluxos de trabalho de prova não estão disponíveis nesta versão do Beta. Consulte Limitações atuais na visão geral do canal de email.
Revise Validando conteúdo de email para obter alertas de conteúdo que você deve resolver antes da ativação da jornada.
Validação de conteúdo de email validation
Antes de ativar a jornada, o conteúdo do email deve ser válido. Marketo Optimizer exibe alertas de nível de conteúdo no email e na tela de jornada. Esta seção aborda os alertas que você pode ver e como resolvê-los.
Alertas de conteúdo comuns content-alerts
default, conforme descrito em Personalizar conteúdo. Como alternativa, restrinja o público-alvo da jornada aos perfis em que o atributo é garantido.