Show Menu
TÓPICOS×

Design de uma landing page

Sobre o design de conteúdo de uma página de aterrissagem

Páginas de aterrissagem são criadas como qualquer atividade de marketing .
Ao criar uma página de aterrissagem, é necessário definir o conteúdo da própria página, a página de confirmação e a página de erro. Use o alternador na barra de ações para exibir e configurar cada uma dessas páginas.
O conteúdo da página de aterrissagem é projetado por meio do editor de conteúdo do Campaign.
Se sua instância foi instalada antes da versão 19.0 do Adobe Campaign Standard, você ainda terá acesso ao editor herdado de conteúdo de email. A interface, os princípios de uso e a configuração são os mesmos descritos abaixo para páginas de aterrissagem. No entanto, todos os recursos podem não estar disponíveis ou mantidos no editor herdado de conteúdo de email, que foi substituído a partir da versão 19.0. Para editar rapidamente o conteúdo de email por meio de uma interface de arrastar e soltar com funcionalidades estendidas, use o Designer de email .
Esta página descreve as especificidades do editor de conteúdo das páginas de aterrissagem. Para mais informações sobre as ações comuns a uma ou mais atividades de marketing, consulte estas seções do guia Criação do conteúdo de email l:
Se você tiver uma página de aterrissagem que já esteja predefinida no formato HTML, poderá importá-la diretamente usando o botão Change content .
Antes de importar uma página HTML no Adobe Campaign, confirme que ela seja aberta e exibida corretamente nos diversos navegadores. Se a página HTML contiver scripts JavaScript, eles precisarão executar sem erros fora do editor. Em geral, evite usar scripts no conteúdo da mensagem para garantir que ele seja processado corretamente pelos clientes de email.

Interface do editor de conteúdo de páginas de aterrissagem

O editor de conteúdo de páginas de aterrissagem permite que você defina, modifique e personalize facilmente o conteúdo no Adobe Campaign. Para acessá-lo, clique no bloco Content no painel de uma página de aterrissagem.
O editor de conteúdo é organizado em três seções diferentes. Estas seções permitem que você exiba e edite o conteúdo.
  1. A paleta no lado esquerdo da tela permite modificar as opções gerais vinculadas a um bloco selecionado. As opções que podem ser modificadas são: cor do plano de fundo, borda, alinhamento do texto, condição de visibilidade etc. Consulte Inserção de um campo de personalização .
  2. A barra de ação contém as opções gerais da página. Você pode selecionar um modelo e alterar o modo de exibição.
  3. A zona de edição principal permite interagir diretamente com o conteúdo usando a barra de ferramentas contextual: insira um link em uma imagem, altere a fonte, exclua um campo etc.
A barra de ação contém botões diferentes que permitem a interação com o conteúdo que está sendo criado.
Ícone Nome do botão Canal Descrição
Alterar conteúdo Página de aterrissagem e email Permite que você selecione conteúdo pronto para uso ou importe seu próprio conteúdo HTML. Consulte Carregamento de um conteúdo existente .
Desfazer Todos Cancela a última ação realizada.
Refazer Todos Refaz a última ação que você cancelou.
Mostrar blocos Página de aterrissagem e email Permite que você mostre as caixas ao redor dos blocos de conteúdo (corresponde à tag HTML <div> ).
Mostrar origem Página de aterrissagem e email Permite que você mostre o código fonte HTML da página.
A barra de ferramentas é um elemento contextual da interface do editor que oferece várias funcionalidades dependendo da zona selecionada. Ele contém botões de ação e botões que permitem alterar o estilo do texto. As modificações efetuadas aplicam-se sempre à zona selecionada. Após selecionar um bloco, você pode excluí-lo ou duplicá-lo, por exemplo. Após selecionar o texto dentro de um bloco, você pode transformá-lo em um link ou deixá-lo em negrito.
Certas funções de barra de ferramentas permitem formatar o conteúdo HTML. No entanto, se a página contiver uma folha de estilos CSS, as instruções da folha de estilos podem provar ter prioridade sobre as instruções especificadas pela barra de ferramentas.
Ícone Nome do botão Contexto Descrição
Link para um URL externo Qualquer elemento Permite adicionar um link a um URL. Detalhes de como configurar um link são apresentados na seção Inserção de um link .
Link para uma página de aterrissagem Qualquer elemento Permite acesso a uma página de aterrissagem do Adobe Campaign. Detalhes de como configurar um link são apresentados na seção Inserção de um link .
Link de assinatura Qualquer elemento Permite inserir um link de assinatura de serviço. Detalhes de como configurar um link são apresentados na seção Inserção de um link .
Link de cancelamento de assinatura . Qualquer elemento Permite inserir um link de cancelamento de assinatura de serviço. Detalhes de como configurar um link são apresentados na seção Inserção de um link .
Remover link Link Permite que você exclua o link, bem como todas as configurações vinculadas a ele após a confirmação.
Inserir um campo de personalização Elemento de texto Permite adicionar um campo do banco de dados ao conteúdo. Consulte Inserção de um campo de personalização .
Inserir um bloco de conteúdo Elemento de texto Permite adicionar um bloco de personalização ao conteúdo. Consulte Inclusão de um bloco de conteúdo .
Ativar conteúdo dinâmico Elemento de texto Permite inserir conteúdo dinâmico no conteúdo. Consulte Definição de conteúdo dinâmico .
Desativar conteúdo dinâmico Elemento de texto Permite excluir conteúdo dinâmico.
Ampliar fonte Elemento de texto Aumenta o tamanho do texto selecionado (adiciona <span style="font-size:"> ).
Reduzir fonte Elemento de texto Reduz o tamanho do texto selecionado (adiciona <span style="font-size:"> ).
Negrito Elemento de texto Adiciona o estilo em negrito ao texto selecionado (envolve o texto com as tags <strong> </strong> ).
Itálico Elemento de texto Adiciona o estilo em itálico ao texto selecionado (envolve o texto com as tags <em> </em> ).
Sublinhado Elemento de texto Sublinha o texto selecionado (envolve o texto selecionado com a tag <span style="text-decoration: underline;"> ).
Alterar cor de plano de fundo Elemento de texto Permite alterar a cor de plano de fundo do bloco selecionado (adiciona style="background-color: rgba(170, 86, 255, 0,87)).
Alterar cor da fonte Elemento de texto Permite alterar a cor de todo o texto do bloco ou apenas o texto selecionado no bloco ( <span style="color: #56ff56;"> ).
Imagem Bloco que contém uma imagem Permite inserir uma imagem de um arquivo salvo localmente.
Excluir Qualquer bloco Exclui o bloco e seu conteúdo.
Duplicar Qualquer bloco Duplica o bloco, incluindo todos os estilos vinculados a ele.

Gerenciamento da estrutura e do estilo da página de aterrissagem

Gerenciamento de blocos no editor de conteúdo

Os diferentes elementos de conteúdo HTML são exibidos na página de aterrissagem como blocos, correspondendo à tag <div> </div> . Selecione um bloco para interagir com ele. Ele então será cercado por uma caixa azul.
Se um bloco for selecionado, os objetos principais do elemento HTML correspondente serão exibidos em uma navegação estrutural localizada na parte inferior da zona de edição.
Quando o mouse passa sobre um dos elementos da navegação estrutural, o elemento em questão é realçado. Portanto, você pode navegar facilmente entre os diferentes blocos e selecionar exatamente o elemento HTML que deseja modificar.
Use as opções da paleta e da barra de ferramentas contextual para modificar, excluir ou duplicar o bloco.
Para os blocos que contêm texto, clique novamente no bloco para ativar o modo de edição de texto. O quadro ao redor do bloco passa a ser verde. Em seguida, você pode selecionar ou inserir texto. Use as opções da paleta e da barra de ferramentas contextual para adicionar um link ou modificar a formatação do texto.
Os parâmetros definidos para um elemento em um bloco (links, campos de personalização, blocos de conteúdo etc.) podem ser modificados a qualquer momento a partir da paleta.

Inclusão de uma borda e de um plano de fundo no editor de conteúdo

Você também pode definir uma cor de plano de fundo selecionando uma cor no gráfico. Essa cor é aplicada ao bloco selecionado.
Você pode adicionar uma borda ao bloco selecionado.

Alteração do estilo do texto no editor de conteúdo

Para alterar o estilo do texto, é necessário clicar dentro de um bloco de texto.
Para alterar o alinhamento do texto, selecione um dos três ícones a seguir na paleta à esquerda:
  • Alinhar à esquerda : alinha o texto à esquerda do bloco selecionado (adiciona style="text-align: left;").
  • Centralizar : centraliza o texto no bloco selecionado (adiciona style="text-align: center;").
  • Alinhar à direita : alinha o texto à direita do bloco selecionado (adiciona style="text-align: right;").
Você também pode usar a barra de ferramentas para alterar os atributos da fonte: adapte o tamanho da fonte, deixe o texto em negrito ou itálico, sublinhe ou altere a cor do texto. Consulte esta seção .

Inserir imagens em uma página de aterrissagem

  1. Em um conteúdo de página de aterrissagem, selecione um bloco que contenha uma imagem.
  2. Selecione o botão Insert .
  3. Escolha Local image na barra de ferramentas contextual.
  4. Selecione um arquivo.
  5. Ajuste as propriedades da imagem conforme necessário.

Definição de conteúdo dinâmico em uma página de aterrissagem

Para definir o conteúdo dinâmico em uma página de aterrissagem, selecione um bloco usando a navegação estrutural ou clicando diretamente em um elemento.
Determinados blocos, como imagens, não podem ser selecionados diretamente. Nesse caso, selecione o bloco principal usando a navegação estrutural. Em seguida, você pode modificar todos os elementos incluídos nesse elemento principal, incluindo imagens. A condição será aplicada a todos os elementos secundários dentro do bloco principal.
A navegação estrutural é apresentada na seção Gerenciamento de blocos .
As próximas etapas para definir o conteúdo dinâmico em uma página de aterrissagem são semelhantes às etapas a seguir para um email. Consulte esta seção .
Se um elemento de variante for contornado em vermelho, significa que uma expressão ainda não foi definida.
É possível navegar entre os diferentes conteúdos dinâmicos de um bloco. Para fazer isso:
  1. Selecione o bloco.
    Setas são exibidas nos lados direito e esquerdo da imagem.
  2. Clique na seta direita para navegar pelos conteúdos dinâmicos disponíveis.
    As setas em cada lado escurecem conforme você atinge o último ou o primeiro conteúdo dinâmico disponível.
  3. Para excluir todas as condições aplicadas a um bloco, selecione esse bloco e clique no ícone Disable dynamic content .
  4. Selecione o conteúdo dinâmico que deseja manter.
Na paleta:
  • Os conteúdos que têm uma expressão inserida não são mais contornados em vermelho, mas são mostrados em cinza.
  • O conteúdo atualmente selecionado aparece em azul.