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.

OBSERVAÇÃO

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:

OBSERVAÇÃO

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.

IMPORTANTE

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.

OBSERVAÇÃ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.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free