Searching for

Estrutura e componentes

O editor de páginas drag-and-drop permite a total customização de landing pages e outras páginas, de forma simplificada e ágil. Com ele, você pode sair da fórmula pronta que muitas outras empresas estão utilizando e usar sua criatividade, sempre com foco na eficiência.

Sabendo disso, o Pipz foi criado para dar liberdade na criação de páginas, onde o usuário pode montar a estrutura de sua página e adicionar os componentes individualmente de acordo com o resultado esperado.

Como acessar o editor drag-and-drop

O editor drag-and-drop de uma página pode ser facilmente acessado de duas formas:

  1. Navegue até o menu principal Pages
  2. Na listagem geral, clique na página desejada
  3. Após isso, vá até a aba Design para acessar o editor

Você pode acessar o editor da página diretamente, clicando sobre o Ícone de Design direto na listagem de páginas.

Estrutura de uma página

Quando criadas no editor drag-and-drop, as páginas são organizadas por linhas e colunas. Não existe limite no número de linhas, nem no tamanho das linhas, mas a colunagem é restrita a quatro colunas de tamanhos variados.

Para acessar as opções de estrutura que podem ser adicionadas às suas páginas, vá até a aba Design da página selecionada. Lá, você vai encontrar três categorias de opções: Components, Structure e Global. Para opções de estrutura, clique em Structure:

Menu Structure do Construtor de Landing Pages

Para adicionar um estilo de estrutura para sua página, basta clicar, arrastar para o local desejado e soltar o botão do mouse. Antes de soltar, o sistema já mostra uma prévia de onde a estrutura será colocada.

Além da escolha do modelo de colunagem, é possível ainda personalizar o tamanho das colunas desta estrutura isoladamente. Basta clicar no campo para ativar as configurações da estrutura selecionada no Row Settings. Procure pela opção Columns para personalizar medidas, cor de fundo e espaçamento de cada coluna individualmente.

Menu Collumns do Construtor de Landing Pages

Componentes de uma página

Para acessar as opções de componentes disponíveis para páginas, vá até a aba Design da página selecionada. Depois, clique em Components:

Menu Components do Construtor de Landing Pages

  • Texto: possivelmente o principal componente de uma landing page, é o responsável por atrair e convencer o seu lead a converter. Ao abrir uma caixa de texto, você poderá torná-lo título, parágrafo simples ou ajustar o tamanho manualmente;
  • Imagem: adicione imagens sem padrão de tamanho, conforme a sua necessidade;
  • Vídeo: adicione vídeos hospedados no YouTube, apenas utilizando o link de acesso;
  • Formulário: converta seus leads adicionando formulários totalmente personalizados à sua página;
  • Botão: adiciona um botão onde cores, efeitos, texto e links são personalizáveis;
  • Social: adicione links para as suas redes sociais e aumente o alcance e a viralização das ações de marketing;
  • Espaço ou espaçamento: deixe a página exatamente como quiser, torne o visual mais atrativo e a leitura mais simples com espaços customizados.
  • Divisor: separe os diferentes conteúdos da sua página para melhorar a organização;
  • Código: adicione código diretamente à página para facilitar a inclusão de algum elemento externo ou desenvolvido através de HTML.

Desktop vs Mobile

O design responsivo é essencial para uma boa experiência do cliente, e sua existência e bom funcionamento é fator para o bom ranqueamento de uma página nos mecanismos de busca.

O editor da plataforma Pipz permite a personalização de exibição de certos componentes para aparecere, apenas em desktop ou no mobile. Dessa forma, ficam minimizados os possíveis problemas de transposição da página.

Para escolher em que tipo de dispositivo o componente ou estrutura deverá ser exibida, clique no Ícone de Visualização Botão de Preview e escolha a opção desejada - exibição apenas em dispositivos móveis, desktop, ou exibição em todos os dispositivos:

Mudar a visibilidade de um item em diferentes dispositivos

Por isso, o editor drag-and-drop possui a opção de preview de todo o conteúdo em mobile, para simplificar ainda mais a edição. Basta selecione, no canto inferior direito do menu de edição o botão Mobile.

Escolher o modo de visualização da página

Próximos passos