Criação de fragmentos

Última atualização: 6 de março de 2025

Depois de criar um fragmento, use o editor visual para criar os componentes estruturais e de conteúdo no fragmento.

Adicionar estrutura e conteúdo

  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.

    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

    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 elementos forem necessários em um ou mais componentes da estrutura.

    Arraste um elemento de conteúdo para a tela e ajuste as configurações

  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 ativos

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

  • 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

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 designer visual, pode acessar as camadas/containers e elementos usando a árvore Navegação. Clique no ícone Navegação para exibir a árvore à esquerda da tela.

Acessar as camadas de conteúdo

O exemplo a seguir descreve as etapas para ajustar o preenchimento e o alinhamento vertical dentro de um componente de estrutura composto por 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

  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

  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 duplas {}. É possível adicionar várias expressões no mesmo conteúdo ou campo sem restrições.

Exemplos:

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

Ao processar o conteúdo, o Journey Optimizer B2B edition substitui a expressão pelos dados contidos no banco de dados 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

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

  2. Clique em + ou … para adicionar um token ao espaço em branco.

    Construir texto personalizado usando tokens

  3. Clique em Salvar.

Habilitar campos personalizados

Quando um autor de email ou de modelo de email adiciona o fragmento, o conteúdo do fragmento é bloqueado por padrão. Quaisquer alterações no fragmento publicado são propagadas automaticamente para todos os ativos de conteúdo nos quais o fragmento é usado. Quando você designa um parâmetro para um componente no fragmento como editável, o autor do email ou modelo pode especificar um valor de campo personalizado específico para suas necessidades. Esse sinalizador de personalização é limitado aos componentes visuais de imagem, texto e botão.

Por exemplo, se você criar um banner reutilizável que inclua um botão clicável, poderá designar o parâmetro de URL do botão como editável. Os autores de email podem usar um URL mais específico para a campanha de email. Com esses campos personalizáveis, os profissionais de marketing podem gerenciar e personalizar o conteúdo sem a necessidade de criar blocos de conteúdo totalmente novos ou interromper as atualizações herdadas do fragmento original.

  1. No editor de conteúdo visual, selecione a imagem, o texto ou o elemento de botão no qual deseja habilitar a personalização.

  2. Nos detalhes do componente à direita, selecione a guia Campos editáveis.

  3. Clique na opção Habilitar edição e defina os campos editáveis.

    Habilitar campos editáveis para um componente de imagem de fragmento

    Você pode ativar a personalização para os campos exibidos, que dependem do tipo de componente e dos parâmetros definidos no fragmento.

    Altere a alternância para um estado ativado para cada campo onde deseja permitir a personalização.

  4. Clique em Visão geral para revisar todos os campos editáveis e seus valores padrão.

    Revisar os campos editáveis e seus valores padrão

  5. Salve as alterações.