Os sites permitem que você crie páginas da web voltadas para clientes dentro do Avantto. Crie aquela página inicial perfeita para o seu negócio. Monte uma landing page para capturar mais leads. As possibilidades são infinitas.
Dentro do Avantto, temos dois tipos de Construtores de Sites; embora sejam semelhantes, possuem funcionalidades diferentes. Vamos revisar cada tipo de Site.
Funis - Em geral, funis têm uma sequência muito direta de páginas, por isso oferecemos teste A/B apenas em funis. Funis são uma série de páginas da web em etapas, geralmente usadas para um propósito específico, como capturar leads ou agendar compromissos.
Sites - Um lugar para criar páginas da web para qualquer caso de uso, como uma página inicial para o seu negócio. Não há geralmente um caminho de progressão pelo qual os contatos são guiados, e é por isso que não oferecemos teste A/B em sites.
Embora você possa usar Sites pelos mesmos motivos que os funis, sites são diferentes em alguns pequenos aspectos.
Em praticamente todos os aspectos, Funnels (Funis) e Websites (Sites) são iguais. Ambos contêm um grupo de páginas e podem ser usados para vários propósitos, independentemente de qual você escolha. O que importa é se você quer usar o recurso de Teste A/B em uma página e a interface de exibição de páginas.
Quais são as principais diferenças entre funnels e websites?
Teste A/B em Funnels - Você pode fazer Testes A/B apenas em Funnels. Teste A/B nos Funnels é quando você cria uma variação de uma página para ver qual funciona melhor.
eCommerce (Loja Online) - Apenas websites podem criar e usar o recurso de eCommerce (Loja Online).
Interface de Exibição de Páginas - A interface de exibição de páginas é diferente dependendo se você está na visão de funnel ou website.
Quando você for criar um novo site, terá a opção de escolher entre centenas de templates. Depois de selecionar um template, você pode editar todas ou algumas partes dele. Nós encorajamos você a conferir todos eles!
Depois de selecionar o template, ele será carregado. Se você ainda não estiver, navegue para uma das páginas clicando em “Editar” na página para abrir o construtor de sites e editar uma página específica.
A mesma funcionalidade e hierarquia de elementos existem tanto no Funnel quanto no Site Builder. Vamos dar uma olhada e conferir nosso Site Builder e como você pode usá-lo para criar sites.
Barra de Navegação do Site Builder
A barra de navegação do site builder fica no topo do builder e permite alternar entre todos os recursos disponíveis. Vamos revisar cada uma dessas abas abaixo.
Linhas e colunas são os blocos de construção do seu site e são usados para abrigar elementos. Para adicionar um elemento, como uma imagem, você precisa de pelo menos uma seção, uma linha e uma coluna. Depois disso, você será solicitado a adicionar um elemento. Existem muitos elementos e cada um deles é único.
Agora vamos adicionar um elemento ao seu site. No canto superior direito do editor do site, você pode selecionar "adicionar elemento" para ver suas opções do que pode ser adicionado ao seu site. Depois de escolher o elemento que você deseja adicionar, clique e arraste o elemento para a área que preferir.
Todo elemento em uma página da web requer uma seção. Dentro dessa seção, você precisa ter pelo menos uma linha. Essa linha precisa ter pelo menos uma coluna. Adicionando todos os três (Seção > Coluna > Linha), podemos então adicionar um elemento na barra "+Adicionar Elemento".
Do maior para o menor, temos:
Seções (Verde) > Linhas (Azul) > Colunas (Rosa) > Elementos (Laranja)
Sobre seções, linhas e colunas...
Você não pode adicionar uma seção dentro de outra seção. Também não pode adicionar uma linha dentro de outra linha ou uma coluna dentro de outra coluna. Além disso, você não pode adicionar um elemento dentro de outro elemento.
Você pode adicionar várias linhas dentro de uma seção. Dentro de uma linha, você pode adicionar várias colunas. Dentro de uma coluna, você pode adicionar vários elementos.
Você precisa de pelo menos uma seção, uma linha e uma coluna para adicionar um elemento.
Para editar uma seção, linha, coluna ou elemento específico, passe o mouse sobre o elemento e clique no ícone de engrenagem que aparece. Além disso, clicar em qualquer parte do elemento também abrirá automaticamente o menu de configurações lateral à direita.
Dentro dessas configurações, você pode adicionar padding, margem, alterar a visibilidade e muito mais. Além disso, observe as guias "Geral" e "Avançado", que oferecem mais configurações que você pode usar para deixar seu site incrível.
Quando você quiser mover ou criar espaço entre um elemento na sua página da web - você estará ajustando o Padding ou a Margem. Isso é feito nas configurações do objeto, clicando no objeto vai abrir este menu de configurações à direita.
Padding - Isso adiciona espaço DENTRO de uma seção, linha, coluna ou elemento. O Padding acrescenta espaço da borda externa do objeto para dentro.
Margem - Isso adiciona distância FORA de uma seção, linha, coluna ou elemento. Criando espaço entre outros objetos.
Você pode mover um objeto usando as setas para cima ou para baixo que aparecem ao passar o mouse sobre o objeto. Isso deslocará o elemento para cima ou para baixo com base nos elementos ao redor. Além disso, você pode mover um objeto ao passar o mouse sobre ele e, em seguida, clicar e segurar o ícone de movimentação. Isso permitirá que você mova o objeto. Solte o clique para deixá-lo no novo lugar.
Opção 1: Setas para Cima/Baixo – vai mover o objeto para cima ou para baixo com base nos objetos ao redor.
Opção 2: Clicar e Arrastar – vai permitir que você clique e arraste para onde quiser.
Passar o mouse sobre qualquer objeto permitirá que você clone esse objeto e tudo dentro dele. Todas as configurações e objetos dentro da seção clonada serão duplicados e depois adicionados abaixo. Isso é ótimo quando você tem um formato ou objeto que quer usar novamente ou em outro lugar na página do site.
Se você precisar deletar ou remover um objeto, passe o mouse sobre o objeto e selecione o símbolo da lixeira. Isso irá deletar o objeto. Você pode usar a função Desfazer/Refazer para adicioná-lo de volta, caso precise.
Camadas ajudam você a visualizar todos os vários objetos e como eles estão organizados dentro da Hierarquia de Objetos do Site. Útil quando você perdeu um objeto ou o escondeu tanto na visualização mobile quanto na de desktop.
Visualize e navegue para outras páginas do seu Funnel ou Site a partir da aba de páginas. Isso te dá a capacidade de mover rapidamente entre páginas enquanto edita múltiplas páginas. Você pode acessar essa aba tanto pela barra de navegação direita quanto pela do meio no construtor de sites.
Caso você queira adicionar um código de rastreamento ao cabeçalho ou rodapé do seu site, você pode fazer isso a partir desta página de Código de Rastreamento.
Se você quiser adicionar CSS personalizado ao seu site, você pode usar a aba de CSS personalizado. Você pode consultar um desenvolvedor para aprender como usar ou criar um código para suas necessidades específicas.
Você pode alterar a fonte padrão para os títulos e o conteúdo do seu site, assim como as cores do texto e dos links na seção de tipografia.
Para mudar a imagem ou cor de fundo padrão da sua página, você pode selecionar a aba Plano de Fundo. Isso adicionará um fundo atrás das suas seções. Se você tiver uma imagem ou cor de fundo configurada em uma seção, linha, coluna ou elemento, ela ficará atrás deste.
A maioria dos usuários não gosta de pop-ups, mas a verdade é que eles ainda convertem bem, mesmo com a má reputação que têm. Quando você quiser adicionar um pop-up, pode fazer isso na seção Pop-Up. Depois de selecioná-la, você usará o menu de configurações no lado direito para editar as propriedades.
Você pode exibir um pop-up adicionando um botão e, em seguida, configurando a ação do botão para abrir o pop-up. Você também pode usar as configurações do pop-up para “Mostrar pop-up ao” Sair ou após atrasos de tempo - selecione o pop-up e veja as configurações no lado direito.
Aqui, você pode editar os metadados de SEO, que aparecerão nos resultados do mecanismo de busca quando pesquisados. Além disso, eles aparecerão nas configurações da aba do seu navegador, quando você compartilhar o link do seu site e mais. Pode parecer pequeno, mas configurar suas opções de SEO é importante - isso ajuda os mecanismos de busca a encontrar seu site e, ao compartilhar um link, ajuda os usuários a confiarem no link.
Se você tem um código personalizado no seu site e ele foi instalado com sucesso, este botão carrega o código personalizado para que você possa vê-lo no construtor. Outra opção é visualizar a página. Se o seu código personalizado não está funcionando como o planejado, consulte um desenvolvedor.
Quando você estiver usando o construtor, pode optar por ter o painel da direita sobreposto à página da web ou configurá-lo no modo de duas colunas, que divide a página em duas colunas. A primeira coluna é a página da web, e a segunda é o painel de configurações que aparece à direita.
Quando você abre e começa a editar seu site, pode sentir a necessidade de desfazer uma alteração que fez. Você pode desfazer ou refazer suas ações no canto superior direito da barra de navegação do construtor do site.
*Isso só funcionará para sua sessão atual, ou seja, ao recarregar ou sair da página, pode não ser possível desfazer ou refazer, pois uma nova sessão irá começar. As versões, descritas abaixo, são ótimas para restaurar versões anteriores do site.
No canto superior direito do construtor do site, você encontrará os botões de versões, pré-visualizar e salvar. Vamos dar uma olhada em cada um deles abaixo.
Versões - selecionar versões levará você para versões salvas anteriormente do seu site. Útil quando você quer visualizar ou reverter para versões salvas do seu site.
Pré-visualização - crie uma versão de pré-visualização da página do seu site para você ver como se fosse um site ao vivo. Ótimo para testar e ver como suas edições recentes ficam para um visitante.
Salvar - você pode clicar no botão de salvar para guardar uma versão não publicada do seu site. Esta mesma versão será sobrescrita a cada salvamento. Isso é diferente da versão publicada ao vivo do seu site. Isso significa que os visitantes do seu site não verão as alterações feitas nesta versão até que sejam publicadas.
Publicar - Publicar ativará a versão salva atual do seu site para ser exibida ao vivo na internet. Agora o visitante do site verá a versão mais recente publicada do seu site.
Tour do Construtor de Sites Concluído!
Agora que terminamos de explorar todas as partes do nosso construtor de sites, vamos aprender como editar a versão mobile do nosso site.
Todo criador de sites tem tanto uma visualização mobile quanto uma de desktop. A menos que você edite um objeto, as visualizações de desktop e mobile serão idênticas. Ao revisar a visualização mobile do seu site, é provável que você encontre aspectos que deseja mudar ou ajustar para os visitantes mobile. Isso faz sentido, já que as telas de dispositivos móveis e desktops têm tamanhos diferentes. Assim, será necessário ajustar a aparência da visualização mobile para atender melhor seu público. Vamos aprender como editar sua visualização mobile abaixo.
No topo do editor, você verá um botão para o Modo Desktop e outro chamado Modo Mobile. Selecionar o "Modo Mobile" abrirá o editor na visualização mobile do seu site.
Todos os objetos do site, por padrão, são visíveis tanto no mobile quanto no desktop. No entanto, você pode alterar isso, o que pode ser extremamente útil em algumas situações.
Mais provavelmente, você vai perceber que precisa criar uma seção, linha, coluna ou elemento único somente para visualização móvel. Você pode editar a visibilidade dos seus elementos com a configuração de visibilidade. Selecione qualquer objeto, vá para configurações e depois para configurações avançadas. Isso é muito útil na hora de otimizar o visual e sensação das versões de desktop ou móvel do seu site.
Depois de alternar, só será possível ver os elementos com base em como você configurou a alternância. Então, se você removeu o Desktop, só verá o elemento na visualização móvel do editor e na visualização móvel ao vivo de um site.
Dentro das configurações do seu objeto, você verá alternâncias de responsividade para dispositivos móveis que permitem editar as configurações de um objeto de forma única para o desktop ou o mobile. Por exemplo, a imagem abaixo mostra as configurações de alinhamento de um elemento de imagem. Isso significa que você pode alterar como esse elemento aparece na visualização desktop, então alternar para a visualização móvel e editar as configurações móveis de forma que sejam diferentes das configurações desktop.
Você encontrará configurações responsivas para mobile como essa em várias configurações de objetos. Estamos sempre trabalhando para adicionar mais.
Há várias dicas e truques para aprender ao editar seu site mobile, vamos conferir algumas:
Conclua o Modo Desktop Primeiro
Na maioria das vezes, completar uma versão completa da visualização desktop do seu site facilita a edição da versão móvel. Então, deixe a visualização desktop impecável e DEPOIS comece a trabalhar na versão móvel assim que a versão desktop estiver do jeito que você gosta.
Menus de Navegação no Celular
Se você tem um menu de navegação no site, crie uma Seção Global com visibilidade apenas para celular. Isso pode ser adicionado à versão móvel de cada uma das suas páginas para ter um visual limpo e consistente. Você pode fazer o mesmo para o menu de navegação do Desktop.
Duplique um Objeto e Altere a Visibilidade
Se você não conseguir fazer uma seção ou objeto ficar legal no celular sem editar a visualização para desktop, crie uma seção específica para celular. Isso pode ser feito facilmente usando a função “duplicar”, que cria uma cópia do objeto. Depois, você pode alterar a visibilidade de um para apenas desktop e o novo para apenas celular. Agora, podemos editar o do celular sem bagunçar o do desktop. Isso é ótimo para imagens.
Visualização Mobile Completa!
Agora que temos uma visualização matadora para desktop e celular, é hora de finalizar algumas configurações de backend e IR AO VIVO!
Agora que seu site está pronto, vamos revisar as configurações do back-end do nosso site. Vamos passar por cada uma das configurações do back-end juntos.
Aqui ficam todas as páginas ou etapas do seu site. Você pode editar ou visualizar uma página a partir daqui. Nós chegamos aqui antes de entrar no Construtor de Sites. Ao sair do Construtor de Sites, também voltamos para cá.
Para usar formulários de pedido no seu site, você precisa anexar um produto que criou no Avantto à página específica. Os produtos precisam ser adicionados à página que o visitante usará para finalizar a compra do seu produto.
Em sites, você clica nos três pontinhos no canto superior direito da página e seleciona produtos. Para funis, selecione o passo e, em seguida, produtos na guia no canto superior direito.
Depois de entrar na aba Produtos de uma página, será necessário adicionar o Produto Avantto. Se ele não estiver criado na sua sub-conta, será preciso criar um.
As estatísticas te dão insights sobre o número de visualizações de página e opt-ins que seu site teve. Além disso, você pode ver o número de vendas e até ganhos. Saiba mais sobre estatísticas e o que elas contam aqui: Understanding Stats.
Mostra cada transação que ocorreu nos seus sites. Para sites da Versão 2, movemos isso para a guia Pagamentos > depois selecione as guias de Pedidos e Transações.
As configurações do site dão a você a habilidade de conectar seu domínio, atualizar o caminho padrão, adicionar um favicon e muito mais! Vamos explorar cada uma dessas juntas.
Name - é o nome que você dá ao seu site. Isso não aparece para os seus clientes, é apenas para uso interno.
Domain - é o domínio que você escolhe atribuir ao seu site. Por exemplo: avantto.com é o nosso domínio vinculado ao site. Sem um domínio, as pessoas não poderão visitar seu site. A menos que você use um link de pré-visualização, mas esses não são customizáveis e não são recomendados.
Path - é o caminho padrão ou extensão do seu site. Ele aparece assim quando usado, avantto.com/about → o “/about” é o caminho. Cada página em um funil ou site terá seu próprio caminho, e nenhuma página pode ser direcionada para o mesmo caminho.
Favicon - é o pequeno ícone que aparece no topo das abas do navegador quando alguém abre e visualiza seu site. Você precisa adicionar uma URL de imagem compartilhável aqui. Depois de adicionada, ela carregará o favicon para todas as páginas do seu site.
Head tracking code - instala um código de rastreamento no cabeçalho do site.
Body tracking code - instala um código de rastreamento no corpo do site.
Payment mode - se você tiver produtos vinculados ao seu site, poderá alternar automaticamente o modo de pagamento para teste ou ativo. O modo de teste permite usar cartões de teste do Stripe para preencher o formulário e realizar um teste. Ótimo para testar seu funil. No entanto, à medida que se aproxima do lançamento, é incentivado fazer compras reais – mas você sempre pode se reembolsar.
Image Optimization - ajustará automaticamente suas imagens para carregar mais rápido. Esta função está ativada por padrão e geralmente não se recomenda desativar, pois tempos mais rápidos de carregamento proporcionam uma experiência superior para os espectadores da página.
Optimise Javascript - Javascript é um código personalizado que você pode instalar para executar operações especiais em seus sites. Frequentemente, o JavaScript pode impactar a velocidade de carregamento; habilitar isso ajudará no carregamento da página. O Javascript externo será carregado de forma lenta para melhor desempenho na página.
GDPR Complaint Fonts - dependendo das suas necessidades legais, fontes compatíveis com GDPR podem ser ativadas, removendo todas as fontes para que seu site fique mais compatível com as leis e regulamentos. Sempre consulte um advogado para garantir plena conformidade.
Chat Widget - Seu widget de chat pode ser configurado e personalizado em Sites > Chat Widget. Habilitar essa opção implantará o widget de chat em todos os seus sites. Para implantá-lo em páginas específicas, mantenha essa opção desativada e copie o código para as páginas desejadas.
Para mudar o nome de uma etapa ou site, bem como o caminho ou extensão… No construtor do site, você pode clicar nos três pontinhos e depois selecionar configurações. Dentro dos funis, você seleciona a etapa do funil e depois seleciona a aba “Publicação”.
A partir daqui, você pode editar o nome da etapa/site, bem como o caminho. O caminho para uma página/site vai no final de um URL. Por exemplo: avantto.com/about → o “/about” é o caminho. Você pode definir esses caminhos, caso contrário, nós forneceremos um aleatório. Se o caminho já existir ou estiver sendo usado no seu domínio, números serão adicionados, já que não é possível ter caminhos repetidos.
Agora estamos prontos para publicar e usar nosso site! Ótimo trabalho!
Agora que construímos nossos sites e atualizamos todas as configurações, estamos prontos para usá-los e dar um LevelUp no nosso negócio!
As seções globais são seções salvas que você pode usar em várias páginas. Elas são únicas porque você pode usar a mesma seção em várias páginas. Além disso, ao fazer qualquer alteração em uma seção global após salvá-la, ela será automaticamente atualizada em todas as páginas onde a Seção Global foi utilizada. Um ótimo exemplo de quando usar uma seção global seria o Cabeçalho/Rodapé do seu site. Usar uma Seção Global como rodapé ou cabeçalho permite que você tenha o mesmo cabeçalho em todas as suas páginas.
Tudo o que precisamos fazer é ter uma seção que gostemos, como um cabeçalho para nossa página, então passar o mouse sobre o objeto, clicar no Ícone de Salvar, dar um nome, selecionar “Seção Global” e, por fim, clicar em Salvar. Agora podemos adicionar essa mesma seção global em todas as nossas páginas.
Lembre-se, qualquer alteração feita nessa Seção Global, após salvá-la, irá atualizar essa seção em todas as páginas onde ela foi usada. Além disso, as seções globais não são colocadas automaticamente; é necessário adicioná-las.
Para adicionar uma seção Global, clique no ícone “+Adicionar Elemento” no canto superior direito do seu construtor. Em seguida, selecione > Seção Global > Selecione sua seção global.
Semelhante a uma Seção Global (veja acima), uma Seção de Template pode ser salva e adicionada mais tarde dentro da mesma página ou em outra página. Alterações feitas nessas seções salvas no Template em uso não atualizarão os templates ou outros lugares onde o template foi adicionado.
O termo funil em marketing significa uma série de sites usados para capturar leads. Funis têm “etapas” que permitem visualizar uma série de sites que um cliente potencial visitará. Por exemplo, em um funil de agendamento, eu poderia ter 3 Etapas do Funil.
Passo 1: Página de Captura - onde você pode oferecer algo para os contatos baixarem em troca das informações de contato deles.
Passo 2: Página de Agendamento - Após o contato preencher um formulário, você vai querer agradecê-lo e agendar uma ligação com ele. Então, você terá seu calendário de agendamento nesta etapa.
Passo 3: Página de Agradecimento pelo Agendamento - Após o cliente agendar a ligação, ele será direcionado para esta página, que mostrará os próximos passos e agradecerá pelo agendamento.
Os funis geralmente têm um propósito específico, como oferecer um ímã de leads ou agendar uma reunião. Existem muitos casos de uso para criar funis. Seja qual for o motivo, os funis são uma forma útil de criar uma série de sites pelos quais os contatos navegam.
