Passo 1 – Adicionar página em branco #
- Clique no elemento de “página em branco” disponível no menu lateral posicionado na parte central inferior da tela, o elemento é representado por um quadrado com símbolo de “+”.
2. Opções da página → Uma vez adicionada a página contará com algumas opções de configuração dentro do criador de funil, para visualizar as opções passe o mouse em cima da página em questão, abaixo uma lista com as opções da página:
- Excluir página → Exclui a página do seu funil
- Copiar URL da Página → Copia o link para a área de transferência
- Editar Página → Abre configurações de edição e configuração de entrada de leads
Passo 2 – Editar página em branco. #
- Passe o mouse sobre a página e clique na opção “Editar Página”, representada pelo ícone de lápis.
- Em seguida, você será redirecionado para o editor de templates, conforme a imagem abaixo.
No editor, existem três partes fundamentais para a criação de um template:
- Ferramentas de componentes da página — aqui você pode adicionar textos, imagens, formas, formulários, entre outros.
- Visualização de formatos — esse botão permite alternar entre as versões desktop e mobile. É importante lembrar que os ajustes feitos na versão desktop devem ser repetidos na versão mobile.
- Botões de salvar e publicar — utilize o botão Salvar sempre que fizer alterações para não perder seu progresso, e clique em Publicar apenas quando o template estiver totalmente finalizado.
Sumário #
Conhecendo os componentes da página. #
Conheça as principais ferramentas e configurações que o editor da Upfunnels oferece para facilitar a criação dos seus templates.
A. Criar uma nova coluna ou seção #
- Representado pelo símbolo de retângulo, esse recurso serve para criar novas seções na sua página. Ao iniciar um template em branco, você perceberá que existe apenas uma seção disponível. Para adicionar outra, arraste o ícone de retângulo até a parte inferior da seção já existente. Assim, uma nova seção será criada automaticamente.
B. Criar título e parágrafo #
Para criar um espaço de texto, você dispõe de duas funções, representadas pelos símbolos: um “T” para títulos e “Aa” para parágrafos. Esse recurso permite que você adicione texto ao seu template, conforme ilustrado na imagem abaixo:
No quadrado azul, você encontra diversas configurações de fonte.
Estilizando a fonte. #
- Ao clicar no símbolo,
será aberto um menu lateral à direita, onde você poderá personalizar sua fonte da maneira que desejar. O painel é dividido em duas seções: Configurações Básicas e Configurações de Estilo.
- Nas configurações básicas, você pode definir a cor da fonte utilizando um código hexadecimal ou selecionando a cor manualmente.
3. Também é possível ajustar o tamanho, escolher o tipo de letra que melhor representa sua identidade visual e definir a espessura da fonte, deixando o texto com o estilo ideal para sua página.
4. Outras configurações também estão disponíveis, como as opções de decoração, onde você pode deixar o texto em itálico, sublinhado ou até riscado.
5. Além disso, é possível ajustar o alinhamento do texto, deixando-o centralizado, à esquerda, à direita ou justificado.
6. Você também pode controlar o espaçamento do texto, tanto vertical quanto horizontalmente, garantindo uma melhor distribuição e legibilidade dentro da seção.
7. Nas configurações de estilo, você pode personalizar ainda mais a fonte, ajustando a opacidade e adicionando sombra ao texto.A cor da sombra pode ser definida por meio de um código hexadecimal ou escolhida manualmente na paleta de cores.
8. Também é possível ajustar manualmente o comportamento da sombra, controlando sua posição, intensidade e direção, para alcançar o efeito visual desejado.
9. Por fim, você pode definir em qual versão o texto será exibido — desktop, mobile ou ambas.Basta selecionar a opção desejada , conforme a visualização em que o elemento deve aparecer.
C. Criar Formulário #
- Para criar um formulário, arraste o componente para dentro da seção já criada. Ao fazer isso, será exibido um formulário padrão com três campos — Nome, E-mail e WhatsApp — além de um botão de envio.
2. Para estilizar o componente de formulário, clique no ícone de lápis. Um menu lateral será aberto à direita da tela, permitindo que você personalize o formulário conforme desejar.
3. Nesse menu, você encontrará as configurações do botão, onde poderá editar o texto, definir uma URL de redirecionamento e adicionar uma palavra de ancoragem.
4. Nas configurações de visibilidade, você tem a opção de ocultar o campo de e-mail, deixando no formulário apenas os campos Nome e Telefone.
Estilizando Formulário. #
No menu de estilos, você pode personalizar a aparência do seu formulário da seguinte forma:
- Posição dos Títulos: Escolha se os títulos dos campos ficarão dentro ou fora dos campos.
- Altura dos Campos: Ajuste a altura de cada campo usando o controle deslizante.
- Cor dos Campos:
- Cor de fundo do campo: Defina a cor de fundo.
- Cor dos textos: Escolha a cor do texto dentro do campo.
- Cor da borda do campo: Personalize a cor da borda.
- Cor de fundo do campo: Defina a cor de fundo.
Bordas dos Campos: Ajuste a espessura das bordas usando o controle deslizante.
Estilos de Fonte #
- Tamanho da fonte do botão: Defina o tamanho da fonte exibida no botão.
- Tipografia: Escolha o tipo de letra para os textos do formulário.
Cor e Estilo do Botão #
- Cor do botão:
- Cor de fundo do botão: Defina a cor principal do botão.
- Fundo do botão no hover: Escolha a cor de fundo quando o botão estiver com o mouse sobre ele.
- Cor do texto do botão: Defina a cor do texto do botão.
- Cor do texto no hover: Defina a cor do texto quando o botão estiver com o mouse sobre ele.
- Cor de fundo do botão: Defina a cor principal do botão.
- Espessura da fonte do botão: Ajuste a espessura da fonte (Light, Regular, Bold, etc.).
- Decoração do botão: Você pode colocar o texto em itálico, sublinhado ou riscado.
- Efeitos do botão:
- Sombra: Adicione sombra ao botão.
- Borda: Adicione ou personalize a borda do botão.
- Sombra: Adicione sombra ao botão.
- Bordas do botão: Ajuste a espessura da borda usando o controle deslizante.
D. Criar Botão #
- Para criar um Botão, arraste o componente correspondente para dentro da seção já criada. Ao fazer isso, será exibido um botão genérico.
- Para estilizar o componente de formulário, clique no ícone de lápis. Um menu lateral será aberto à direita da tela, permitindo que você personalize o botão conforme desejar.
- Nesse menu, você encontrará as configurações do botão, onde poderá editar o texto, definir uma URL de redirecionamento e adicionar uma palavra de ancoragem.
Estilizar o botão #
- Após configurar o botão, selecione a opção de estilos. Lá você poderá escolher uma cor de fundo para o botão. Você também pode configurar uma opção de cor no hover. O hover é um efeito de estilização que, ao passar o mouse sobre o botão, faz com que ele mude de cor.
- Com a cor da fonte, você pode fazer o mesmo: é possível definir a cor utilizando um código hexadecimal ou selecionando-a manualmente.
4. Outras configurações também estão disponíveis, como as opções de decoração, onde você pode deixar o texto em itálico, sublinhado ou até riscado.
5. Além disso, é possível ajustar o alinhamento do texto, deixando-o centralizado, à esquerda, à direita ou justificado.
6. Você pode adicionar vários efeitos ao botão, como aplicar uma sombra personalizada e ajustar o arredondamento dos cantos.
E. Adicionar forma geométricas #
- O editor da Upfunnels disponibiliza a adição de formas geométricas. Elas são representadas pelos seguintes elementos:
Círculo,
Quadrado,
Traço Vertical e
Traço Horizontal.
- Para estilizar o componente de formulário, clique no símbolo de lápis. Um menu lateral será aberto à direita da tela, permitindo que você personalize o botão conforme desejar.
- Menu lateral: você poderá estilizar a cor de fundo, cor da borda, a largura da borda e outras opções.
F. Adicionar imagem no template. #
- Para você adicionar uma imagem no template, arraste o componente para dentro da seção já criada. Após isso aparecerá um componente conforme a imagem abaixo:
2. Para adicionar uma imagem ao seu template, clique no componente de imagem. Uma janela será aberta, permitindo que você arraste o arquivo ou clique na área destacada para selecionar uma imagem do seu computador.
3. Após escolher a imagem, ela será exibida na janela de seleção. Clique na imagem desejada e ela será inserida no seu template, permitindo que você a arraste para a posição que preferir.
G. Incorporar vídeo do YouTube. #
- Para incorporar um vídeo do YouTube no seu template, arraste o componente representado pelo símbolo
para dentro da seção desejada. Um componente do YouTube será exibido.
- Para adicionar o link do vídeo, clique no ícone de lápis. Um menu lateral será exibido à direita da tela, onde você poderá configurar o vídeo.
- No menu lateral, insira o link do YouTube. O vídeo aparecerá na seção selecionada.
- Você também poderá configurar opções adicionais, como ativar o autoplay e definir se a barra de progresso ficará visível.
5. Nas configurações de estilo, você poderá ajustar a proporção do vídeo, escolhendo entre 16:9 (horizontal, para desktop) ou 9:16 (vertical, para mobile).
H. Inserir código no template. #
- Para adicionar um código ao seu template, arraste o componente representado pelo símbolo para dentro da seção desejada. Esse recurso é muito útil quando você deseja incorporar elementos externos, como um mapa do Google, um chat do WhatsApp, entre outros.
- Ao adicionar o componente, uma janela será aberta para que você insira o seu código HTML. Basta copiar o código e colá-lo nesse espaço.
- Se o código incluir scripts em JavaScript, insira-os entre as tags <script> … </script>.
- Após finalizar, clique em Salvar para aplicar as alterações.
