DocumentaçãoJourney OptimizerGuia do Journey Optimizer

Usar os componentes de conteúdo do Designer de email content-components

Última atualização: 5 de outubro de 2026

Criado para:

  • Intermediário
  • Iniciante
  • Usuário

Nesta página: Saiba como adicionar e configurar componentes de conteúdo do Email Designer, como botões, texto, imagens, divisores, HTML, links sociais, decisões de oferta, grades e tabelas, para criar seu conteúdo de email.

style
shade-box

Ao criar seu conteúdo de email, os Componentes de conteúdo permitem personalizar ainda mais seu email com componentes brutos que podem ser editados depois de colocados no email.

É possível adicionar quantos componentes de conteúdo forem necessários dentro de um ou mais componentes de estrutura, que definem o layout do seu email.

NOTE
A Lei Europeia de Acessibilidade declara que todas as comunicações digitais devem ser acessíveis. Siga as diretrizes específicas listadas em esta página ao aproveitar os componentes de conteúdo para criar emails em Journey Optimizer, como o uso de fontes acessíveis, formatos legíveis e o fornecimento de texto alternativo para imagens.

Adicionar componentes de conteúdo add-content-components

Para adicionar componentes de conteúdo ao seu email e ajustá-los às suas necessidades, siga as etapas abaixo.

  1. No Designer de email, use um conteúdo existente ou arraste e solte os Componentes da estrutura no conteúdo vazio para definir o layout do email. Saiba como

  2. Para acessar a seção Componentes de conteúdo selecione o botão correspondente no painel esquerdo do Designer de email.

    Painel de componentes de conteúdo no Email Designer

  3. Arraste e solte os componentes de conteúdo de sua escolha dentro dos componentes de estrutura relevantes.

    Arrastando componentes de conteúdo para uma estrutura

    note
    NOTE
    É possível adicionar vários componentes em um único componente de estrutura e em cada coluna de um componente de estrutura.

  4. Selecione o componente recém-adicionado.

  5. Ajuste os atributos e o estilo de cada componente usando as guias Configurações e Estilo à direita. Por exemplo, é possível alterar o estilo do texto, o preenchimento ou a margem de cada componente. Saiba mais sobre alinhamento e preenchimento

    Guias Configurações e Estilo do componente de Conteúdo

  6. No menu avançado do seu Componente de conteúdo, você pode excluir ou duplicar facilmente qualquer componente de conteúdo, conforme necessário.

    Menu avançado para ações de componentes de conteúdo

Contêiner container

Para aplicar um estilo específico a um grupo de componentes de conteúdo, você pode adicionar um componente Contêiner e depois adicionar o(s) componente(s) de conteúdo desejado(s) dentro dele. Isso permite aplicar um estilo distinto ao contêiner, que será diferente do estilo aplicado aos componentes de conteúdo dentro dele.

Por exemplo, adicione um componente Container e, em seguida, adicione um componente Botão dentro desse container. Você pode usar um plano de fundo específico para o container e outro para o botão.

Componente de contêiner selecionado mostrando suas configurações de estilo no Designer de email

Botão button

Use o componente Botão para inserir um ou vários botões no email e redirecionar o público-alvo do email para outra página.

  1. Clique no botão recém-adicionado para personalizar o texto e ter acesso às guias Configurações e Estilos no painel direito do Email Designer.

    Componente do botão selecionado com a guia Configurações aberta no Designer de Email

  2. No menu Link, adicione a URL para a qual você deseja redirecionar ao clicar no botão.

  3. Escolha como o público será redirecionado com a lista suspensa Target:

    • Nenhum: abre o link no mesmo quadro em que foi clicado (padrão).
    • Branco: abre o link em uma nova janela ou guia.
    • Auto: abre o link no mesmo quadro em que foi clicado.
    • Principal: abre o link no quadro principal.
    • Superior: abre o link no corpo completo da janela.

    Opções da lista suspensa de destino para o componente Botão

  4. Você pode personalizar ainda mais seu botão alterando atributos de estilo como Borda, Tamanho, Margem, etc. do painel Configurações de componente.

Texto text

Use o componente Texto para inserir texto no email e ajustar o estilo (borda, tamanho, preenchimento etc.) usando a guia Estilos.

Componente de texto adicionado ao Email Designer com as guias Configurações e Estilos realçadas

  1. Clique no componente recém-adicionado para personalizar o texto e ter acesso às guias Configurações e Estilos no painel direito do Designer de email.

  2. Altere o texto com as seguintes opções disponíveis na barra de ferramentas:

    Barra de ferramentas de formatação de texto no Designer de email

    • Alterar estilo do texto: aplique negrito, itálico, sublinhado ou riscado ao seu texto.
    • Alterar alinhamento: escolha entre alinhamento esquerdo, direito, central ou justificado para o texto.
    • Criar lista: adicione marcadores ou listas de números ao texto.
    • Definir cabeçalho: adicione até seis níveis de cabeçalho ao texto.
    • Tamanho da fonte: selecione o tamanho da fonte do texto em pixels.
    • Alterar cor da fonte: escolha a cor da fonte.
    • Inserir link: adicione qualquer tipo de link ao seu conteúdo.
    • Editar imagem: adicione uma imagem ou um ativo ao seu componente de texto. Saiba mais sobre o gerenciamento de ativos
    • Alterar cor da fonte: escolha a cor da fonte.
    • Adicionar personalização: adicione campos de personalização para personalizar o conteúdo dos dados de seus perfis. Saiba mais sobre a personalização de conteúdo
    • Mostrar o código-fonte: exibir o código-fonte do texto. Ele não pode ser modificado.
    • Habilitar conteúdo condicional: adicione conteúdo condicional para adaptar o conteúdo do componente aos perfis direcionados. Saiba mais sobre conteúdo dinâmico
    • Duplicar: adicione uma cópia do seu componente de texto.
    • Excluir: exclua o componente de texto selecionado do seu email.

  3. Ajuste os outros atributos de estilo, como cor do texto, família da fonte, borda, preenchimento, margem, etc., na guia Estilos.

    Guia Estilos do componente de Texto mostrando opções de fonte e plano de fundo

Divisor divider

Use o componente Divisor para inserir uma linha divisória para organizar o layout e o conteúdo do email.

É possível ajustar atributos de estilo, como cor da linha, estilo e altura, a partir das guias Configurações e Estilos.

Componente de divisão selecionado com suas configurações de estilo no Designer de email

Html Html

Use o componente Html para copiar e colar as diferentes partes do HTML existente. Isso permite que você crie componentes de HTML modulares gratuitos para reutilizar algum conteúdo externo.

  1. Clique no componente recém-adicionado e selecione Mostrar o código-fonte na barra de ferramentas contextual para adicionar o HTML.

    Componente HTML selecionado com a opção Mostrar o código-fonte realçada

  2. Copie e cole o código HTML que deseja adicionar ao seu email e clique em Salvar.

    Caixa de diálogo Editar HTML mostrando o editor de código e a opção Salvar

NOTE
Para tornar de forma simples um conteúdo externo compatível com o Designer de email, a Adobe recomenda criar uma mensagem do zero e copiar o conteúdo do email existente para os componentes.

Modelo do Dynamic Media dynamic-media-template

Use o componente Modelo do Dynamic Media para aproveitar a mídia dinâmica personalizada e interativa em seus emails.

Use esse componente para inserir um Modelo do Dynamic Media do Adobe Experience Manager no conteúdo de email e editá-lo diretamente no Editor de modelo do Dynamic Media, sem sair do Designer de email. Também é possível carregar um arquivo do PSD (Photoshop) e editá-lo de forma semelhante a um Modelo do Dynamic Media. Saiba mais

Componente de Modelo do Dynamic Media realçado com a zona de destino Adicionar Modelo do Dynamic Media no Email Designer

Imagem image

Use o componente Imagem para inserir um arquivo de imagem do seu computador no conteúdo de email.

Componente de imagem adicionado com as opções de Procurar e Importar mídia no Email Designer

  1. Selecione o componente recém-adicionado.

  2. Na guia Configurações, clique em Procurar para escolher um arquivo de imagem de seus ativos ou em Importar mídia para carregar um ativo para a Adobe Experience Manager Assets.

    Para saber mais sobre Adobe Experience Manager Assets, consulte a documentação do Adobe Experience Manager Assets.

    note
    NOTE
    Para garantir que seus links permaneçam ativos e evitar problemas de expiração, recomendamos usar o Adobe Assets em vez de depender de um URL de origem para suas imagens.

  3. Você também pode pesquisar diretamente no Adobe Stock com a opção Localizar fotos do Adobe Stock.

  4. Clique no componente recém-adicionado e configure as propriedades da imagem:

    • Título da imagem permite definir um título para a imagem.
    • Texto alternativo permite definir a legenda vinculada à imagem. Isso corresponde ao atributo HTML alternativo. Saiba mais

    Campos de título de imagem e texto alternativo na guia Configurações do componente Imagem

  5. Você também pode optar por Localizar fotos semelhantes do Stock. Saiba mais

  6. Na guia Estilos, ajuste os outros atributos de estilo, como margem, borda etc., ou adicione um link para redirecionar o público-alvo para outro conteúdo do painel Configurações de componente.

Social social

Use o componente Social para inserir links às páginas de redes sociais no seu conteúdo de email.

  1. Selecione o componente recém-adicionado. No campo Social da guia Configurações, escolha qual rede social deseja adicionar ou remover.

    Lista suspensa de seleção de redes sociais para o componente Social

  2. Escolha o tamanho dos ícones por meio do campo dedicado.

  3. Clique em cada um dos ícones da rede social para configurar a URL para a qual o público-alvo será redirecionado.

    Campos de texto de URL e Alt para um ícone de mídia social no componente de Redes sociais

  4. Você também pode alterar os ícones de cada uma das mídias sociais, se necessário, no Assets.

  5. Ajuste os outros atributos de estilo, como estilo, margem, borda etc., na guia Estilos.

Decisão de oferta offer-decision

Use o componente Offer decision para inserir ofertas em suas mensagens. O mecanismo da gestão de decisões escolherá a melhor oferta para entregar aos seus clientes.

  1. Selecione o componente recém-adicionado e clique em Adicionar para selecionar sua Decisão de oferta.

    Componente do Offer Decision com o botão Adicionar no Designer de email

  2. Na lista suspensa, selecione seus Posicionamentos.

  3. Em seguida, selecione a Decisão de oferta que deseja adicionar ao seu conteúdo e clique em Adicionar.

    Caixa de diálogo Selecionar decisão de oferta com posicionamentos e lista de ofertas

  4. Na guia Offer decision, você pode visualizar ou alterar a Oferta inserida.

Saiba como adicionar ofertas personalizadas a um email em esta seção.

IMPORTANT
Se forem feitas alterações em uma decisão de oferta em uso na mensagem de uma jornada, será necessário desfazer a publicação da jornada e republicá-la. Isso garantirá que as alterações sejam incorporadas à mensagem da jornada e que ela seja consistente com as atualizações mais recentes.

Grade grid

Use o componente Grade para organizar o conteúdo em uma estrutura composta de linhas e colunas, onde cada célula pode conter outros componentes de conteúdo.

Componente de grade adicionado com células vazias prontas para conteúdo no Designer de Email {width="90%"}

  1. Exatamente como o componente Contêiner, arraste e solte outros componentes de conteúdo em cada célula da grade.

    Por exemplo, você pode adicionar um componente Texto, um componente Imagem e dois componentes Botão. Em seguida, é possível adicionar uma imagem e editar o conteúdo de cada componente individualmente.

    Componentes de Texto, Imagem e Botão adicionados dentro de células de grade {width="90%"}

  2. Para ajustar a estrutura da grade, selecione-a e vá para a guia Configurações do painel direito do Email Designer.

    Guia Configurações de Grade mostrando o número de colunas, linhas e opções de espaçamento {width="90%"}

  3. Você pode definir quantas colunas e linhas a grade contém, editar o espaçamento entre colunas e linhas e alterar a largura de cada coluna individual em porcentagem.

    note
    NOTE
    Use a opção Não empilhar colunas em dispositivos móveis para preservar o layout de grade em dispositivos móveis, em vez de empilhar colunas verticalmente.

  4. Solte outros componentes de conteúdo em cada célula, conforme necessário, e ajuste o estilo na guia Estilos para cada componente.

Tabela table

Use o componente Tabela para estruturar o conteúdo em linhas e colunas diretamente no seu email, criando layouts claros e organizados sem depender do HTML personalizado.

Componente de tabela adicionado abaixo de uma imagem no Email Designer {width="90%"}

  1. Depois de adicionado, clique no componente e selecione a guia Configurações do painel direito do Designer de email.

  2. A partir daí, você pode ajustar o número de linhas e colunas para a tabela.

    Guia Configurações de Tabela mostrando opções de colunas, linhas e linhas de cabeçalho

  3. Use a opção Incluir linha de cabeçalho (habilitada por padrão) para adicionar uma linha de cabeçalho à tabela e alterne a opção Linhas de Stripe para aplicar cores de linha alternadas para facilitar a leitura.

  4. Você também pode clicar nas setas correspondentes a uma coluna ou linha diretamente na tabela e usar o menu contextual para adicionar ou excluir uma linha ou coluna.

    Menu contextual para adicionar ou excluir linhas e colunas em uma tabela

  5. Ajuste outros atributos de estilo, como cor da célula, tamanho da fonte, alinhamento do texto ou cor da fonte, na guia Estilos.

recommendation-more-help
journey-optimizer-help