Editar a configuração de componentes da landing page

Visão geral

Neste tutorial você aprenderá como editar as configurações dos elementos em sua landing page:

Você também aprenderá a editar configurações de componentes específicos:

No lado esquerdo do construtor de páginas, a aba Administrar layout permite que você rearrume os itens em uma página.

Se você clicar na engrenagem, uma barra lateral aparecerá na direita para que você edite as configurações.

Dica: Landing pages estão disponíveis para planos Premium e superiores.

Texto

Tipografia do seu texto

modify-1.png

  • Estilo da fonte: o estilo da fonte definido em Etapa 1 - Configuração, sob Estilos de fontes será exibido aqui. Você pode alterar o Estilo, a Família e o Tamanho da fonte do seu texto para adequar às suas necessidades.
  • Estilo de lista
    • Tópicos: adicione uma lista por tópicos
    • Numeração: adicione uma lista numerada
  • Hyperlink: se quiser redirecionar para um link, adicione uma URL aqui.
  • Formatação modify-2.png
    • 1. Seu texto aparecerá em negrito: exemplo.
    • 2. Seu texto aparecerá em itálico: exemplo.
    • 3. Seu texto aparecerá sublinhado: exemplo.
    • 4. Seu texto aparecerá riscado: exemplo.
    • 5. Remover formatação do seu texto.

Imagem, Imagem de fundo e Logotipo

Para adicionar uma imagem, digite sua URL ou clique em ADICIONAR (ou SUBSTITUIR) na barra lateral direita. Um gerenciador de arquivo na forma de pop up surgirá.

  • Importe um arquivo do seu computador.
  • Escolha a partir da galeria de imagem: à esquerda do edtor, aparecerá um menu para você procurar por imagens gratuitas. Você pode procurar por categoria (negócios, coaching, consultoria, fitness, marketing, escritório, serviços).
  • Busque por imagens da empresa.

Uma vez selecionada a sua imagem, você tem diferentes opções:

  • Redimensionar: escolha o tamanho em que sua imagem é exibida.
  • ALT: adicione uma tag alt para dar uma descrição sobre sua imagem.
  • Link: adicione um link de redirecionamento.

Estilo da sua imagem

  • Sombreamento: adicione uma sombra à sua imagem.
  • Bordas arredondadas: define o nível de arredondamento das bordas de sua imagem.

Cor de fundo

Clique em Cor de fundo para exibir as configurações de cor de fundo.

g0i5SBDqluzl2JxLrW89UADCVJgyNJTCKq2SxkDPt--7-kY5pbeSyorGO-hQ9L2V1FIdTR0NOmscLPGCYcXXgswZUEfesHPGoRppvUYAobSCZPbH35GpB8buPryjzCtnsBazWDzr.png

Você pode escolher uma cor presente, remover a cor, ou adicionar uma nova cor.

Transparência permite que você personalize o nível de transparência da cor de fundo.

Dica: a cor do seu texto mudará automaticamente dependendo da cor de fundo.

Botão

Propriedades de seu botão

  • Texto: digite o texto que deseja que seja exibido em seu botão de ação.
  • Ação: escolha entre as três ações: link para uma url, ancorar para uma seção ou Link para uma página neste funil.

modify-3.png

Se escolher Link para uma URL, defina:

  • Abrir: na janela atual ou em uma nova aba.
  • URL (link): adicione uma URL aqui.

Se Ancorar para uma seção, selecione na lista suspensa a qual seção ele vai estar ancorado.

Se escolher Link para uma página neste funil, selecione na lista suspensa, para qual página será feito o link.

Estilo do botão

Clique em Estilo para alterar o estilo do botão.

modify-4.png

  • Largura total: define se a largura do botão é a da coluna inteira ou não.
  • Preenchido: escolha se seu botão é Cheio ou Vazio.
  • Tamanho: o tamanho que você quer que o seu botão tenha.
  • Forma: escolha se seu botão é Quadrado, Redondo ou em formato de Cápsula.
  • Sombra: adicione uma sombra clara ou escura.

Divisor

Sob a aba Estilo, escolha a espessura do seu divisor: Fino, Grosso ou Mais Grosso

modify-5.png

Dica: apenas um divisor horizontal pode ser adicionado.

Ícone

Configurações do seu ícone

modify-6.png

  • Redimensionar: você pode redimensionar o ícone da maneira que quiser.
  • Link: adicione uma URL aqui.
  • Substituir ícone: se você clicar no ícone ou no botão substituir, um pop up com o ícone biblioteca será exibido. Existem mais de 1.400 ícones diferentes que você pode escolher. Você pode procurar ícones por nome, graças à barra de busca. Você também pode filtrar por conjunto.

Vídeo

Sob a aba URL, adicione um link para o seu vídeo aqui. Você pode usar um vídeo hospedado no YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku, e Coub.

Código

Adicione o seu próprio código HTML. O código inserido aqui no editor pode ser testado apenas nas páginas "preview" e "publicado".

Espaçamento

Clique em Espaçamento para exibir e editar as configurações de espaçamento.

modify-7.png

Primeiro, escolha se deseja editar preenchimento e margem Vertical ou Horizontal.

Uma margem é o espaço fora de algo, enquanto que o preenchimento é o espaço dentro de algo.

  • Margem: cria espaço ao redor do seu componente, fora de quaisquer bordas definidas.
  • Preenchimento: cria espaço dentro do seu componente, entre o ícone e a borda.

Alinhamento

Clique em Alinhamento para alinhar seu componente à esquerda, centralizá-lo ou alinhá-lo à direita.

2UILG1N-0oN_k6yWWufaBxJuu8HQgJdZqWH8MEriepEgXxr-JO8DJ95lhdH4JK8zoqdkRVGQVSN7rAQDAX1pQgcR3FkjKerba3xT_ScfCeD27bvfTqpiTwP3DpO_H7eiffckZmkV.png

Editar as configurações para uma seção

Propriedades de sua seção

Nomeie sua seção para ajudá-lo a navegar entre todas as seções.

Estilo

Clique em Estilo para exibir as configurações de estilo.

7x3BOrBtX428orO22CVh2OHuDPEapkyjdnWnFDbi_MTjIadSc9q8Up1yPzoDVL4kG7JXd3ZFizTm74AmI7CkTlemQcgXvSRlltK-F3JPbPxBuHxN-PkMFsCFVQi3QlAY8Yu5JQOe.png

  • Canto a canto: afeta o espaçamento horizontal nos lados da seção.
  • Altura total: exibe a imagem como imagem inteira.
  • Oculto no tablet: para cada seção de sua landing page, você pode controlar sua visibilidade por dispositivo dentro da seção editar. Veja Personalizar exibição móvel no tutorial Usando o editor de landing page.
  • Oculto no celular: para cada seção de sua landing page, você pode controlar sua visibilidade por dispositivo dentro da seção editar. Veja Personalizar exibição móvel no tutorial Usando o editor de landing page.
  • Background Parallax: Parallax scrolling é uma técnica onde a imagem de fundo rola  mais lentamente que o conteúdo de frente.
    • Quando o background Parallax está ATIVADO
    • Quando o background Parallax está DESATIVADO

Editar as configurações de uma linha

Configurações avançadas de sua linha

Clique em Avançado para exibir as configurações avançadas.

  • Ocultar as calhas entre as colunas: ajusta o tamanho do espaço (calhas) entre as colunas de suas linhas.
  • Arredondamento da borda: permite que você arredonde os cantos de sua linta.

Editar as configurações de uma coluna

Sob a aba Estilo, você será capaz de:

  • Redimensionar: escolha o tamanho de sua coluna.
  • Tamanho no celular: escolha o tamanho de sua coluna no celular.
  • Editar arredondamento das bordas: permite que você arredonde os cantos de sua coluna.