[Beta]{class="badge informative" title="No momento, esse recurso está em uma versão beta limitada"}
Design de modelo de página de destino
Depois de criar um modelo de página de aterrissagem, use o espaço de design visual para criar os componentes estruturais e de conteúdo no seu modelo de página.
Adicionar estrutura e conteúdo structure-content-landing-page
-
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. 
Cada tamanho de coluna não pode ser menor que 10% da largura total do componente de estrutura. Somente colunas vazias podem ser removidas.
-
Expanda a seção Conteúdo e adicione quantos componentes de conteúdo forem necessários em um ou mais componentes de estrutura.
-
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.
-
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 da página de destino. 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.
-
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.
-
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.
-
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.
Adicionar ativos
No editor de conteúdo visual, selecione o ícone do Marketo Engage 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 clique em Selecionar um ativo nas ferramentas de origem de imagem.
Para obter mais informações sobre o uso de ativos do seu tipo de origem, consulte Usar ativos para criação de conteúdo.
Adicionar formulários
Um formulário é um componente reutilizável que pode ser referenciado por várias páginas de aterrissagem e modelos de página de aterrissagem no Adobe Journey Optimizer B2B edition. É um bloco de campos e um botão de envio que pode ser pré-criado e inserido rapidamente para tornar o design da página mais rápido e consistente.
O exemplo a seguir descreve as etapas para adicionar um formulário à medida que você cria a página.
-
Na seção Conteúdo, arraste o item Formulário e solte-o em um componente estrutural no espaço de design da página.
note tip TIP Para adicionar o formulário de forma que ele ocupe o layout horizontal inteiro no email, adicione uma estrutura de coluna 1:1 e arraste e solte o formulário nele. -
Clique no ícone Formulário na barra de ferramentas do componente ou use as propriedades Incorporar Formulário à direita para selecionar o formulário publicado.
-
Se você deseja substituir o Tipo de acompanhamento padrão do formulário, altere a configuração de acordo com os requisitos da página ou do modelo.
Isso também é conhecido como a página de agradecimento do formulário e essa configuração determina o que acontece quando um visitante envia o formulário:
-
Permanecer na página - Escolha essa opção para manter o visitante na mesma página quando o formulário for enviado.
-
Página de aterrissagem - Escolha essa opção para selecionar qualquer página de aterrissagem do Journey Optimizer B2B edition ou do Marketo Engage como acompanhamento.
-
URL Externa - Escolha esta opção para especificar qualquer URL como página de acompanhamento. Depois que o visitante envia o formulário, o navegador carrega o URL designado.
note tip TIP Se quiser que o use o formulário para baixar um arquivo, você pode especificar uma URL para o arquivo hospedado. Com essa configuração, o botão Submit funciona como um botão de download.
-
-
Se quiser limitar a exibição de formulário por tipo de dispositivo, altere a configuração Opções de Exibição:
- Mostrar apenas em dispositivos desktop
- Mostrar apenas em dispositivos móveis
- Mostrar em todos os dispositivos (padrão)
-
Se necessário, selecione a guia Estilos no painel direito para definir as margens do formulário na página.
Navegar pelas camadas, configurações e estilos
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 (
O exemplo a seguir descreve as etapas para ajustar o preenchimento e o alinhamento vertical dentro de um componente de estrutura com colunas.
-
Selecione a coluna no componente de estrutura diretamente na tela ou usando a Árvore de navegação exibida à esquerda.
-
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.
-
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.
-
-
Se necessário, repita essas etapas para ajustar o alinhamento e o preenchimento das outras colunas no componente.
-
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.
-
Selecione o componente de texto e clique no ícone Adicionar personalização na barra de ferramentas.
Esta ação abre a caixa de diálogo Editar Personalization.
-
Clique em + ou … para adicionar um token ao espaço em branco.
-
Clique em Salvar.
Editar rastreamento de URL vinculado
-
Clique no ícone Links (
-
Se necessário, clique no ícone Editar (
Você também pode adicionar Marcas para um link.
Salve o trabalho
Clique em Salvar a qualquer momento para salvar o modelo de página de destino.
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 Exibir 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 visual, você pode realizar as seguintes ações:
- Redefinir página de aterrissagem - Clique nesta opção para limpar a tela de design visual para uma folha em branco e reiniciar a criação do conteúdo da página.
- Alterar seu design - Retorne à página inicial principal. A partir daí, você pode escolher outro modelo para reiniciar o processo de design ou optar por projetar a página do zero em uma tela em branco.
- Exportar HTML - Baixe o conteúdo na tela visual para o sistema local no formato HTML empacotado como um arquivo zip.