Fluxograma — Editor Visual e Componentes

O que é o Fluxograma #

O Fluxograma é o coração do seu funil. Pense nele como um mapa de uma cidade: você desenha os caminhos que seus leads vão percorrer, desde a “porta de entrada” (de onde eles vêm) até o “destino final” (compra ou cadastro).

Você monta tudo arrastando e soltando blocos na tela – não precisa escrever nenhum código, não precisa saber programar. É como montar um quebra-cabeça: pegue as peças certas e encaixe na ordem certa.

Como chegar: Abra um funil → a aba Fluxograma já vem selecionada (é a primeira aba).

Visão Geral do Canvas #

A tela tem 4 áreas:

• Canvas central (área grande e branca no meio) – É a sua “mesa de trabalho”. Começa vazio, esperando você arrastar componentes para cá.
• Barra de componentes (parte inferior) – Uma barra horizontal com 6 peças que você pode arrastar para o canvas. Pense neles como “peças de LEGO”.
• Barra de ferramentas (lateral esquerda) – 4 botões empilhados verticalmente.
• Controles de zoom (abaixo da barra de ferramentas) – 3 botões para aproximar (+), afastar (−) ou ajustar a visão do canvas inteiro.

Os 6 componentes disponíveis:

Barra de Ferramentas e Zoom #

Na lateral esquerda do canvas, você encontra 4 botões (de cima para baixo):

1. Modo Seleção (ícone de cursor/seta) – O modo “normal”. Você clica nas peças para selecionar e arrasta para mover. Pense como o cursor do mouse quando você usa o computador normalmente.
2. Modo Movimentação (ícone de mão) – Permite arrastar o canvas inteiro, como quando você arrasta um mapa no Google Maps. As peças ficam paradas – só a “câmera” se move.
3. Selecionar Template – Abre uma “biblioteca” de modelos prontos de funil. Em vez de montar do zero, você pode usar um modelo e só ajustar.
4. Exportar Funil – Permite salvar o funil como arquivo no seu computador. Como “tirar uma foto” do funil para guardar ou enviar para alguém.

Controles de zoom:

• + – Aproxima (zoom in) , como usar uma lupa
• − – Afasta (zoom out) , como dar um passo para trás para ver o quadro todo
• Ajustar (Fit View) – Automaticamente enquadra todo o fluxo na tela

Componente: Fonte de Tráfego #

O que é: A Fonte de Tráfego é a primeira peça do quebra-cabeça. Ela define de onde vêm as pessoas que vão entrar no seu funil. Sem visitantes, não tem funil , por isso, todo funil começa aqui!

Pense assim: se seu funil é um rio, a Fonte de Tráfego é a nascente – de onde a água (visitantes) começa a correr.

• Orgânico – Visitantes que chegam “naturalmente”, sem você pagar por isso. Exemplos: pesquisa no Google, post no Instagram, indicação de amigo, YouTube. Pense como as pessoas que entram na sua loja porque estavam passando na rua e se interessaram pela vitrine.
• Tráfego Pago – Visitantes que chegam porque você pagou por um anúncio: Facebook Ads, Google Ads, TikTok Ads, YouTube Ads. Pense como as pessoas que vieram à sua loja porque viram um panfleto que você pagou.
• Disparo – Visitantes que chegam porque você enviou uma mensagem diretamente: email marketing, SMS, WhatsApp em massa. Pense como ligar diretamente para o cliente e convidá-lo para ir à loja.

Componente: Criar Página #

O que é: Este componente permite criar uma landing page (página de destino) diretamente dentro do UpFunnels.

O que é uma landing page? É uma página da internet feita com UM único objetivo: fazer o visitante tomar UMA ação específica. Pense na landing page como um cartaz com um formulário colado embaixo. O cartaz convence a pessoa, e o formulário captura o contato dela.

Opção 1: Usar modelo de template (Recomendado para iniciantes!) #

Um template é um modelo pronto. É como comprar uma camisa pronta no shopping em vez de costurar uma do zero – você só troca a estampa (textos e imagens) e está pronto.

Ao clicar nesta opção, abre uma galeria com modelos organizados por tipo:

• Captura – Páginas feitas para pegar o contato do visitante (nome, email, telefone). Ex: “Deixe seu email e receba o ebook grátis!”
• Webnar – Páginas para inscrição em aulas ao vivo ou webinários.
• Vendas – Páginas para apresentar e vender um produto.
• Obrigado – Páginas que aparecem DEPOIS que a pessoa fez a ação.

No topo da galeria há um campo de busca (“Procurar”) para filtrar por nome. A seção “Recomendadas” mostra os templates mais usados – comece por eles! Clique em qualquer template para aplicá-lo.

Opção 2: Criar página nova (Para quem quer personalizar tudo) #

Se você prefere começar do zero, vai abrir o Editor de Páginas – uma ferramenta completa para montar páginas do jeito que quiser. É parecido com Canva, Wix ou WordPress com Elementor: você arrasta blocos, solta na tela e personaliza.

Área 1 – Toolbar superior:

• Voltar – Volta para o fluxograma do funil.
• Toggle Desktop/Mobile – Alterna entre a versão para computador e para celular. MUITO IMPORTANTE: sempre confira como sua página fica no celular!
• Domínio – Escolha em qual endereço a página será publicada.
• Nome “Nova Página” – Clique para renomear sua página.
• Ocultar blocos/estilos – Esconde os painéis laterais para você ver só a página.
• Modo foco – Esconde TUDO menos a página. Como o modo de tela cheia do cinema.
• Desfazer/Refazer – Errou algo? Clique em Desfazer para voltar atrás.
• Pré-visualizar – Mostra exatamente como a página ficará para quem visitar. É como “provar a roupa” antes de comprar.
• Salvar – Salva o que você fez, mas NÃO publica. A página fica guardada como “rascunho”.
• Publicar – Coloca a página no ar para o mundo ver. Só clique quando estiver satisfeito!

Área 2 – Barra lateral esquerda (13 blocos disponíveis):

Área 3 – Painel lateral direito (estilos e configurações):

• Configurar – As opções específicas daquele bloco. No Título, você digita o texto. No Botão, você define o texto e o link. No Forms, você define quais campos pedir.
• Estilizar – TODA a parte visual: dimensões (largura, altura, espaçamento), tipografia (fonte, tamanho, cor), decoração (cor de fundo, borda, sombra), layout, e extra (opacidade, animações).
• SEO Página – Configurações para o Google (título e descrição que aparecem nos resultados de busca).
• Elementos – Lista de TODOS os blocos da página em formato de árvore.

Componente: Página Externa #

O que é: Use este componente quando você já tem uma página pronta em outro lugar (WordPress, Wix, Squarespace, ou qualquer site) e quer incluí-la no fluxo do funil.

Pense assim: se a “Criar Página” é construir uma loja nova, a “Página Externa” é colocar uma placa de sinalização apontando para uma loja que já existe. O UpFunnels não cria a página – ele só rastreia os visitantes que passam por ela.

• Nome da página* – Obrigatório. Um nome só para você lembrar qual página é (ex: “Landing WordPress”, “Página Wix do Curso”). Esse nome NÃO aparece para o visitante.
• URL* – Obrigatório. O endereço completo da página (ex: https://seusite.com/landing).

1. Tipo de integração: Formulário – O UpFunnels gera um código HTML que você cola na sua página (como “colar um adesivo inteligente”). Webhook – Sua página envia os dados diretamente para o UpFunnels via URL.
2. Texto do botão: O texto que aparece no botão do formulário (ex: “Quero Participar!”, “Baixar Ebook Grátis”, “Garantir Minha Vaga”).
3. Página de destino após envio: A URL para onde o visitante vai DEPOIS de preencher o formulário (normalmente uma página de “Obrigado”).
4. Incluir campo de e-mail: Marque esta opção se quiser pedir o email do visitante no formulário. (Recomendado!)
5. Estilização do formulário: Cor do botão, cor da fonte, suavização das arestas (bordas arredondadas). O preview atualiza em tempo real – é como experimentar roupas na frente do espelho.
6. Código do formulário (HTML): O código pronto para copiar e colar na sua página.