Primeiros passos com o Editor de Landing Pages

•  Seção Elementos: são os diferentes blocos que podem ser adicionados à landing page.
•  Conteúdo: essa é uma área de visualização e trabalho em que podemos adicionar conteúdo à landing page.
•  Opções: a coluna da direita mostrará as diferentes opções do elemento selecionado ou da página como um todo, caso nenhum elemento esteja selecionado.

Agora trabalharemos com essas opções.

Passo 3: Selecionando a cor de fundo

Uma das primeiras opções que podemos usar é selecionar a cor de fundo de toda a página:

A cor de fundo da sua landing page pode ser escolhida na coluna da direita, na seção Documento e, em seguida, na opção Cor de fundo. Essa seleção alterará a cor de fundo da landing page.

Passo 4: Selecionando a cor de fundo do contêiner principal

Agora vamos dar uma olhada em outra das principais ferramentas do editor, a Visualização de lista:

A Visualização de lista é exibida ao clicar em um dos ícones na parte superior esquerda, o quarto ícone. Clicar nele mostrará uma lista de todos os elementos da landing page organizados hierarquicamente.

Isso nos permitirá exibir as opções de bloco de cada um dos elementos (na guia Bloco, no lado direito) e até movê-los para que sejam exibidos antes ou depois deles no editor. Agrupá-los, etc.

Depois que o elemento for selecionado, veremos como a coluna da direita mostra as opções desse bloco específico. Por exemplo, podemos selecionar uma cor diferente para o texto (Cor) ou alterar a largura (Dimensões).

A estrutura padrão exibida assim que a landing page é criada é a seguinte

• Uma coluna principal maior
• Com outra coluna interna menor

Isso é feito para que a coluna interna permaneça sempre centralizada na tela. Você pode ver dois valores na coluna da direita:

•  Conteúdo: essa é a largura do conteúdo.
•  Largura: essa é a largura máxima da coluna.

Dessa forma, ao definir uma largura de conteúdo um pouco menor, teríamos uma margem entre a borda do contêiner e o próprio conteúdo.

Na imagem acima, podemos ver como alguns parâmetros e o conteúdo básico foram definidos, com uma largura um pouco maior que a padrão.

Passo 5: arrastando elementos

Agora vamos ver como adicionar novos elementos ao espaço de trabalho:

A primeira coisa a fazer é selecionar o elemento, neste caso um separador, e arrastá-lo com o mouse até o local desejado.

Conforme você move o mouse pela área de conteúdo, verá uma barra azul indicando o local desejado para o conteúdo.

Passo 6: Estruturando o conteúdo

Uma das formas mais fáceis de estruturar a landing page é usando colunas:

Uma opção útil é a de três colunas, pois ela nos permitirá usar a coluna do meio como separador de conteúdo:

Depois de adicionar as colunas, podemos ir para a Visualização de lista e selecionar a coluna do meio; à direita, na coluna de bloco, teremos o campo Vazio de largura. Mas, se definirmos aqui uma Largura de 30px, essa coluna será reduzida e poderá funcionar como separador

Em seguida, clique no símbolo de mais para adicionar conteúdo às colunas.

A seleção permite escolher entre os blocos disponíveis; neste caso, por exemplo, um parágrafo.

No exemplo, também adicionamos um elemento "Lista" abaixo do parágrafo. Você pode continuar adicionando elementos a essa coluna.

Agora vamos adicionar um formulário à terceira coluna selecionando essa coluna, clicando em "+" e selecionando Formulário de assinatura:

Como mencionamos anteriormente, poderemos escolher entre os formulários existentes na conta no menu suspenso que nos permite selecionar um formulário entre os que já criamos (Selecionar um formulário):

E ele será adicionado da seguinte forma:

IMPORTANTE: você não pode alterar a cor de fundo nem qualquer outro aspecto visual do seu formulário de assinatura ao criar uma landing page. Isso deve ser feito ao criar o formulário de assinatura, o que você fez antes de criar a landing page. Qualquer alteração feita no formulário de assinatura será refletida na landing page.

Passo 7: adicionando imagens

Primeiro, adicionaremos mais duas colunas e, depois que forem criadas, podemos clicar em seus respectivos sinais de "+" para adicionar conteúdo a elas. Agora vamos adicionar uma imagem com um texto ao lado.

Usaremos a coluna da esquerda para adicionar uma imagem e a coluna da direita para adicionar um parágrafo.

Você pode usar uma imagem que já tenha sido enviada (Biblioteca de mídia) ou enviar um arquivo do seu computador (Fazer upload).

Quando você clica na imagem, dois círculos são exibidos, permitindo arrastá-la para dar a ela o tamanho desejado.

À direita, nas opções de bloco, você também pode alterar a largura ou definir um atributo de texto alternativo.

Neste ponto, adicionaremos texto à coluna da direita clicando em "+" e selecionando Parágrafo; depois disso, podemos adicionar o texto desejado.

Passo 8: Adicionando um botão

Por fim, adicionaremos um botão logo abaixo das duas colunas. Para isso, clique em Botões (na opção Design) e o botão será exibido em preto logo abaixo, com o texto Adicionar texto...

Clique em Adicionar texto e, logo acima, você verá as opções para modificar o botão, da esquerda para a direita: Selecionar botões, Botão, Arrastar, Alterar justificativa do elemento, Alterar alinhamento vertical, Alinhar, Link, Negrito, Itálico, Mais e Opções.

Você pode fazer as alterações que desejar. No nosso exemplo, alinhamos ao centro, alteramos o texto para Clique para comprar, definimos o texto como preto e o fundo como branco.

Agora, basta clicar em Salvar e sua landing page estará pronta.