Primeiros passos com o Editor de Landing Pages

• Seção Elementos: esses são os diferentes blocos que podem ser adicionados à página de destino.
• 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, se não houver um elemento selecionad
  

Agora trabalharemos com essas opções.

Passo 3: Selecionando a cor do plano 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 página de destino pode ser escolhida na coluna da direita, na seção Documento e, em seguida, na opção Cor de fundo. Essa seleção irá alterar a cor do plano 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 área superior esquerda, o quarto ícone. Clicar nele nos mostrará uma lista de todos os elementos da landing page organizados de forma hierárquica.

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

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

A estrutura padrão exibida logo após a criação da landing page é a seguinte:

•  Uma coluna principal maior
•  Com outra coluna interna menor

Isso é feito para que a coluna interna permaneça sempre centralizada na tela. É possível ver dois valores na coluna da direita:

•  Conteúdo: Essa seria a largura do conteúdo.
•  Largura : Essa seria 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 estabelecidos, com uma largura um pouco maior do 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.

Ao mover o mouse pela área de conteúdo, você verá uma barra azul, indicando o local pretendido para o conteúdo.

Passo 6: Estruturando o conteúdo

Uma das maneiras mais fáceis de estruturar a página de destino é por meio do uso de colunas:

Uma opção útil é a opção 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 do bloco, teremos o campo Largura vazia. Mas se definirmos aqui uma Largura de 30px, essa coluna será reduzida e poderá funcionar como um separador.

Em seguida, basta clicar no símbolo de mais para dar conteúdo às colunas.

A seleção permite que você escolha entre os blocos disponíveis, neste caso, por exemplo, um parágrafo.

No exemplo, também adicionamos um elemento "Lista" abaixo do parágrafo. É possível continuar adicionando elementos a essa coluna.

Agora adicionaremos um formulário na terceira coluna selecionando essa coluna, clicando em "+" e selecionando Signup form:

Como mencionamos anteriormente, poderemos escolher entre os formulários existentes na conta a partir do menu suspenso que nos permite selecionar um formulário entre os que já criamos (Select a Form):

E ele será incorporado da seguinte forma:

IMPORTANTE: a configuração da cor de fundo do formulário, bem como do restante dos elementos, é feita na própria seção de formulários e não pode ser feita no menu landing page. Qualquer alteração feita no formulário será refletida na landing page.

Passo 7: adicionando imagens

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

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

Podemos usar uma imagem que já tenha sido carregada (Biblioteca de mídia) ou carregar uma de nosso computador (Upload).

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

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

Neste momento, adicionaremos um texto na coluna da direita, clicando em "+" e selecionando Parágrafo e, em seguida, adicionando 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 na cor preta logo abaixo e com o texto Adicionar texto...

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

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

Agora você só precisa clicar em Salvar e sua landing page estará pronta.