DocumentaçãoJourney Optimizer B2BDocumentação do Journey Optimizer B2B Edition

Criação de modelo de email

Last update: Mon Oct 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Usuário

Depois de criar um modelo de email, use o espaço de design visual para criar os componentes estruturais e de conteúdo no seu modelo de email.

Adicionar estrutura e conteúdo structure-content

  1. Para iniciar o design do conteúdo, arraste um item das Estruturas e solte-o na tela.

    Adicione quantos itens de Estruturas forem necessários e edite as configurações para cada um no painel à direita.

    note tip
    TIP
    Selecione o componente n:n coluna para definir o número de colunas de sua escolha (entre três e 10). Você também pode definir a largura de cada coluna movendo as setas abaixo dela.

    Arraste uma estrutura para a tela e ajuste as configurações {width="800" modal="regular"}

    Cada tamanho de coluna não pode ser menor que 10% da largura total do componente de estrutura. Somente colunas vazias podem ser removidas.

  2. Expanda a seção Conteúdo e adicione quantos componentes de conteúdo forem necessários em um ou mais componentes de estrutura.

    Arraste um elemento de conteúdo para a tela e ajuste as configurações {width="800" modal="regular"}

  3. Se necessário, você pode fazer personalizações adicionais para cada componente nas guias Configurações ou Estilo.

    Por exemplo, é possível alterar o estilo do texto, o preenchimento ou a margem de cada componente.

  4. Para adicionar conteúdo condicional e adaptar o conteúdo aos perfis direcionados com base em regras condicionais, selecione um componente de conteúdo e clique no ícone Habilitar conteúdo condicional na barra de ferramentas do componente.

    Para obter mais informações, consulte Conteúdo condicional.

Adicionar CSS personalizado

Você pode adicionar seu próprio CSS personalizado diretamente no espaço de design do modelo de email. Use o CSS personalizado para aplicar um estilo avançado e específico, proporcionando maior flexibilidade e controle sobre a aparência do seu conteúdo. É uma prática recomendada adicionar esse estilo de mais alto nível antes de incluir componentes, como imagens, botões e texto.

Com pelo menos um componente de conteúdo na tela, selecione o componente Corpo na árvore de navegação esquerda para acessar o editor de CSS personalizado.

Acessar os estilos de corpo {width="800" modal="regular"}

  1. Na guia Estilos exibida à direita, clique em Adicionar CSS personalizado.

    note note
    NOTE
    O botão Adicionar CSS personalizado está disponível somente quando o componente Corpo é selecionado. No entanto, você pode aplicar estilos CSS personalizados a todos os componentes dentro dele.

    O editor pop-up Adicionar CSS personalizado é exibido com comentários de código de espaço reservado.

  2. Insira seu código CSS no editor.

    Verifique se o CSS personalizado é válido e segue a sintaxe apropriada. Se o CSS inserido for inválido, uma mensagem de erro será exibida e o CSS não poderá ser salvo. Para saber mais, consulte validade de CSS.

  3. Clique em Salvar para salvar o CSS personalizado.

    A folha de estilos personalizada é aplicada ao conteúdo existente. Você pode verificar se o CSS personalizado é aplicado de acordo com suas necessidades. Para obter informações sobre como fazer alterações e ajustar o aplicativo da folha de estilos, consulte Solução de problemas.

NOTE
Se você remover todo o conteúdo, a seção CSS não aparecerá mais no painel de estilos de corpo e o CSS personalizado definido anteriormente não será mais aplicado. Se você adicionar conteúdo de volta, a seção Estilos CSS será exibida novamente e o CSS personalizado será aplicado novamente.

Adicionar fragmentos

NOTE
Os 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.

Um fragmento visual é um componente de design reutilizável que pode ser referenciado por vários ativos de conteúdo no Adobe Journey Optimizer B2B edition. 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.

  1. Para abrir a lista de fragmentos, selecione o ícone Fragmentos ( í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.

    Selecione um fragmento da lista {width="700" modal="regular"}

  2. Arraste e solte qualquer um dos fragmentos no componente estrutural.

    O editor renderiza o fragmento na seção/elemento da estrutura de email.

    note tip
    TIP
    Para adicionar o fragmento de forma que ele ocupe o layout horizontal inteiro no email, adicione uma estrutura de coluna 1:1 e arraste e solte o fragmento nele.

    O conteúdo do fragmento é atualizado dinamicamente na estrutura para mostrar como o conteúdo aparece no conteúdo.

recommendation-more-help

Campos editáveis em fragmentos personalizáveis

Um fragmento visual pode incluir campos editáveis que você pode personalizar. Campos personalizados permitem modificar parâmetros ao incorporar o fragmento ao conteúdo e criar uma experiência personalizada sem afetar o fragmento original. O autor do fragmento pode criar o fragmento para personalização de componentes de texto, imagem e botão. Se um fragmento incluído contiver componentes com campos editáveis, você poderá alterar os valores padrão para personalizá-lo para o seu conteúdo.

  1. Selecione o componente de fragmento.

    As Configurações exibidas à direita incluem e editam campos com os valores padrão.

    Alterar parâmetros do componente de fragmento {width="700" modal="regular"}

  2. Altere qualquer campo editável, conforme necessário.

style
shade-box

Depois que o modelo é salvo, ele aparece na página de detalhes do fragmento ao selecionar a guia Usado por no resumo.

Adicionar ativos de imagem

No editor de conteúdo visual, selecione o ícone do Marketo Engage Assets ( Marketo Engage Assets icon ) ou o ícone do Experience Manager Assets ( AEM Assets icon ) na barra de navegação esquerda. No seletor de ativos, você pode selecionar ativos diretamente armazenados na biblioteca de origem.

NOTE
Se você tiver provisionado com o Adobe Experience Manager as a Cloud Services, terá acesso aos repositórios do Marketo Engage Design Studio e do Adobe Experience Manager Assets as a Cloud Service quando sua conta de usuário tiver as permissões necessárias. Esses repositórios estão separados e não estão sincronizados. Você pode usar ativos de imagem de qualquer origem.

  • Adicione um novo ativo arrastando e soltando o ativo de imagem em um componente de estrutura.

    Arraste um ativo do Marketo Engage para a tela e ajuste as configurações {width="800" modal="regular"}

  • Substitua um ativo de imagem existente selecionando-o na tela e clique em Selecionar um ativo nas ferramentas de origem de imagem.

    Selecione um ativo da biblioteca de origem {width="600" modal="regular"}

Para obter mais informações sobre o uso de ativos do seu tipo de origem, consulte Usar ativos para criação de conteúdo.

Conforme você trabalha com o conteúdo no espaço de design visual, pode acessar os componentes, as colunas e os elementos de conteúdo usando a árvore de navegação. Clique no ícone da Árvore de navegação ( Ícone da árvore de navegação ) à esquerda para exibir a árvore.

Acessar as camadas de conteúdo {width="800" modal="regular"}

O exemplo a seguir descreve as etapas para ajustar o preenchimento e o alinhamento vertical dentro de um componente de estrutura com colunas.

  1. Selecione a coluna no componente de estrutura diretamente na tela ou usando a Árvore de navegação exibida à esquerda.

  2. Na barra de ferramentas da coluna, clique na ferramenta Selecionar uma coluna 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 nas guias Configurações e Estilos à direita.

    Componentes da coluna exibidos no designer visual {width="800" modal="regular"}

  3. Para editar as propriedades da coluna, clique na guia Estilos à direita e altere-os de acordo com suas necessidades:

    • Para Plano de fundo, altere a cor do plano de fundo conforme necessário.

      Desmarque a caixa de seleção para um plano de fundo transparente. Habilite a configuração Imagem de plano de fundo para usar uma imagem como plano de fundo em vez de uma cor sólida.

    • Para o Alinhamento, selecione o ícone Superior, Meio ou Inferior.

    • Para Preenchimento, defina o preenchimento para todos os lados.

      Selecione Preenchimento diferente para cada lado se desejar ajustar o preenchimento. Clique no ícone Bloquear para interromper a sincronização.

    • Expanda a seção Avançado para definir estilos embutidos para a coluna.

    Alterar os estilos da coluna selecionada {width="700" modal="regular"}

  4. Se necessário, repita essas etapas para ajustar o alinhamento e o preenchimento das outras colunas no componente.

  5. Salve as alterações.

Personalizar conteúdo

O Journey Optimizer B2B edition usa uma sintaxe simples em linha que permite criar expressões com conteúdo personalizado delimitado por chaves {}. É possível adicionar várias expressões no mesmo conteúdo ou campo sem restrições.

Exemplos:

  • Hello {{lead.firstName}} {{lead.lastName}}
  • Hello {%= lead.mktoName ?: "Marketer" %}
NOTE
O Journey Optimizer B2B edition agora segue a sintaxe camel case para tokens de personalização em emails a fim de corresponder aos outros aplicativos da Adobe Experience Platform para uma experiência consistente. Este formato de token é totalmente compatível com a linguagem de modelo Handlebars. Todos os tokens adicionados antes dessa alteração são atualizados automaticamente.

Ao processar o conteúdo, o Journey Optimizer B2B edition substitui a expressão pelos dados contidos no banco de dados do Experience Platform. Assim, o primeiro exemplo torna-se Olá, John Doe.

O exemplo a seguir descreve as etapas para personalizar o conteúdo usando atributos de lead/conta e tokens de sistema.

  1. Selecione o componente de texto e clique no ícone Adicionar personalização na barra de ferramentas.

    Clique no ícone Personalizar {width="600"}

    Esta ação abre a caixa de diálogo Editar Personalization.

  2. Adicione um token clicando no sinal de adição ( + ) ao lado dele.

    Se quiser adicionar o token com um fallback (texto padrão que aparece quando esse campo não está disponível para um cliente potencial), clique no ícone Mais ( … ) e escolha Inserir com texto de fallback.

    Construir texto personalizado usando tokens {width="700" modal="regular"}

  3. Adicione tokens adicionais ou outro texto estático que deseje incluir.

  4. Clique em Salvar.

    O script de personalização é exibido no espaço de design visual. Você pode selecioná-la para fazer alterações quando necessário.

    Selecionar script de personalização {width="600"}

Editar rastreamento de URL vinculado

  1. Clique no ícone Links ( Ícone Mostrar links ) à esquerda para exibir todas as URLs vinculadas no seu conteúdo a ser rastreado.

  2. Se necessário, clique no ícone Editar ( Editar ícone ) e modifique o Tipo de Rastreamento ou o Rótulo.

    Você também pode adicionar Marcas para um link.

Clique no ícone Editar para acessar o rastreamento de links {width="500"}

Aplicar estilo de modo escuro

Use o Modo escuro para analisar a exibição de emails para ver se há um tema escuro em um cliente de email. Um modo ou tema escuro permite que um cliente ou aplicativo de email de suporte exiba emails com planos de fundo mais escuros e cores mais claras para texto, botões e outros elementos visuais. Na parte superior direita da tela de design, altere o seletor para Modo escuro ( Ícone de modo escuro ). Em seguida, visualize e defina configurações personalizadas específicas usadas para exibição pelos clientes de email de suporte quando o tema escuro estiver habilitado.

Tela de design de email mostrando o seletor de modo escuro e o conteúdo de email exibidos no modo escuro {width="700" modal="regular"}

Para obter mais informações sobre o estilo e as práticas recomendadas do modo escuro, consulte Modo escuro para conteúdo de email.

Exibir opções

Aproveite as opções de exibição e validação de conteúdo disponíveis no espaço de design visual.

  • Aumentar/diminuir o zoom do conteúdo nas opções de zoom predefinidas.

  • Alternar a exibição do conteúdo na área de trabalho, dispositivo móvel ou somente texto/texto sem formatação.

    • Clique no ícone Olho para visualizar o conteúdo entre dispositivos.
    • Selecione um dos dispositivos prontos para uso ou insira dimensões personalizadas para visualizar o conteúdo.

Mais opções

No menu Mais…, na parte superior do espaço de design de email, você pode realizar as seguintes ações:

Clique em Mais para acessar as ações do modelo {width="500"}

  • Redefinir modelo - Clique nesta opção para limpar a tela de design em branco e reiniciar a criação de conteúdo.
  • Salvar como fragmento - Salve todo o modelo ou partes dele como um fragmento a ser reutilizado em vários emails ou modelos de email. Forneça um nome e uma descrição para o fragmento e salve-o na lista de fragmentos disponíveis.
  • Alterar seu design - Retorne à página Criar seu email. A partir daí, você pode escolher outro modelo para reiniciar o processo de design. Você também pode optar por criar o conteúdo do zero com uma tela em branco (Modo clássico) ou usar um Tema da marca (Modo do tema).
  • Exportar HTML - Baixe o conteúdo na tela visual para o sistema local no formato HTML empacotado como um arquivo zip.
6ef00091-a233-4243-8773-0da8461f7ef0