Usando o editor e todas as funcionalidades de cada elemento você pode construir o site que deseja em poucos minutos. Você também pode usar os painéis prontos para criar seu site ainda mais rápido.
Vamos ver as configurações gerais e a função de cada elemento disponível no nosso painel de edição do construtor. Aqui você vai entender como todo o editor funciona.
Visão geral do editor #
Editando a versão móvel #
Adicionar elementos #
Crie sites e páginas com o máximo de desempenho e design, acesse diversos recursos que auxiliam na construção do seu site de forma fácil e rápida e com uma tecnologia responsiva para dispositivos móveis, tudo isso com o mais avançado construtor de sites, o Builderall Builder.
Para iniciar sua jornada utilizando o Builderall Builder, aprenda neste tutorial quais são os recursos disponíveis na interface do construtor ao realizar o primeiro acessa a área de edição da sua página
Ao acessar a área de edição da sua página no Builderall Builder, é possível visualizar dois menus: o menu da barra superior e o menu lateral direito.
Menu da Barra Superior #
A barra de menu no topo do construtor contém opções de configurações, visualizações e elementos, vamos analisar cada opção disponível individualmente:
Descrição dos ícones da esquerda para a direita.
Home: selecione para retornar a página principal do seu site no Builderall Builder;
Desktop, Tablet e Mobile: selecione entre as opções para alterar entre os editores de computadores e dispositivos móveis
Menu de Páginas: navegue entre as páginas do seu site para edição;
Fundo da Página: configure cores ou imagens de fundo para o seu site (a configuração de fundo é fixa e permanece atrás dos painéis do site).
Fontes do site: personalize as fontes pré-existes no Builderall Builder ou envie sua própria fonte para as edições de texto.
Régua: selecione para adicionar uma régua horizontal ao longo do topo e da lateral esquerda do site. As réguas ajudam a posicionar os elementos em seu site, uma vez que mostram a posição exata em pixels, e são úteis para alinhar elementos, mantendo a posição exata dos elementos em todas as páginas ou painéis;
Alterar ordem dos painéis: mova a posição dos painéis adicionados na página;
Ocultar elementos: selecione para visualizar os elementos ocultos do seu site; ocultar não é sinônimo de deletar o seu elemento, elementos ocultos constam no carregamento da página e podem ser adicionados novamente ao site quando desejar;
Pré-visualização: Pré-visualize as configurações realizadas em sua página antes de publicá-las;
Salvar: Salve as últimas alterações da página.
#
Menu Lateral Direito #
O menu localizado na lateral direita do construtor contém todos os recursos necessários, entre layouts e elementos, para a construção da sua página, vamos analisar cada opção disponível individualmente:
• Adicionar: selecione a aba para adicionar: na opção “Painel“; novos painéis em branco ou layouts pré-pontos de painéis segmentados em diferentes conteúdos para a sua página. Na opção “Elementos“; diferentes elementos para a sua página disponíveis no Builderall Builder.
• Configurações: nessa aba irão aparecer todas as opções de edição de um determinado elemento selecionado; as opções de edições variam entre cada elemento.
• Pessoal: selecione para acessar elementos ou painéis salvos como “Elementos Pessoais”.
#
Menu dos Elementos #
Ao selecionar qualquer elemento adicionado no Construtor de Sites Builderall Builder, é indicado um menu com diferentes opções de configurações para o elemento, as opções indicadas variam entre cada elemento e suas funções.
Configurando as âncoras #
O que são âncoras e como elas podem auxiliar na navegação do seu site? #
Facilitar a navegação do usuário ao seu novo site, com certeza, é uma das suas prioridades; um site com boa navegabilidade permite que o consumidor encontre facilmente elementos e informações que deseja em seu site/página através de poucos ou cliques certeiros; pensando nisso, a âncora aparece como um dos principais recursos para facilitar a navegação em sites.
Chamamos de âncora qualquer elemento que, ao ser selecionado, leve automaticamente e quase instantaneamente o usuário a um ponto-chave da sua página, por esse motivo, a ação recebe o nome de “âncora”, pois o objetivo principal dessa configuração em um elemento é de “puxar” o usuário até outro elemento em sua página.
Vamos aprender no tutorial a seguir a como configurar a função “âncora” em um botão do seu site:
Acompanhe no vídeo abaixo a configuração que iremos aprender neste tutorial:
No Construtor de Sites Builderall Builder é possível configurar âncoras vinculadas aos painéis do site, vamos iniciar o nosso tutorial aprendendo a como salvar seu painel como uma âncora:
Passo 1 – Acesse as configurações do painel em sua página que deseja aplicar a âncora:
Passo 2 – Localize a opção de “Âncora” no menu de configurações e selecione a caixa de “Ativo”; após ativar sua âncora, nomeie a âncora que será vinculada ao painel escolhido.
Dica! Escolha nomes fáceis para as âncoras vinculadas aos painéis e facilite a identificação nos próximos passos!
Os passos para salvar a âncora em um painel estão completos; feche a aba de configurações do painel e siga os próximos passos! Agora, vamos aprender a como vincular o botão do nosso site a âncora criada:
Passo 1 – Adicione o elemento do Botão em um dos painéis do site e o configure como desejar.
Elementos textos #
Os textos são parte essencial de um site, textos coerentes, objetivos e bem expressivos trazem confiança e credibilidade para o site e criam um bom relacionamento com os seus vistantes. Aprenda nesse tutorial a como adicionar e configurar textos no Construtor de Sites Builderall Builder.
Como adicionar um Texto?
#
Passo 1 – Acesse o site e a página que deseja adicionar o Texto no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Textos“.
Passo 4 – O Builderall Builder oferece 7 tipos de textos diferentes, 6 são títulos com Heading Tags diferentes, da H1 a H6; o 7° tipo de texto é para textos grandes/parágrafos. Após escolher o texto desejado, clique no texto escolhido e arraste até o local do painel desejado.
Dica! As Heading Tags (H1, H2, H3…) são um recurso de programação HTML utilizados para destacar títulos e subtítulos de forma hierárquica, indicando ao usuário e ao Google quais são os títulos mais importantes do site, ou seja, utilizar as Heading Tags corretamente é um ótimo recurso para o SEO deu um site.
Como editar o Botão escolhido? #
Antes de aprendermos as opções de configurações, vamos conhecer os dois submenus indicados ao selecionar o texto.
Ao selecionar uma única vez o texto adicionado:
Salvar elemento – selecione para salvar o elemento criado como um “elemento pessoal” e utilizá-lo em outros sites e páginas sem a necessidade de repetir todas as configurações.
Camada abaixo/acima – selecione para mover o elemento entre as camadas do painel e ajustar a sobreposição dos elementos.
Elemento central – selecione para ajustar automaticamente o elemento no centro do painel/caixa que ele foi adicionado.
Edição de textos longos – selecione para abrir uma área de edição idêntica a que será indicada abaixo, porém, para textos longos.
Elemento clone – selecione para duplicar o texto criado.
Ocultar elemento – selecione para adicionar o elemento na parte de “ocultados” do site, ocultar não é sinônimo de deletar o seu elemento, elementos ocultos constam no carregamento da página e podem ser adicionados novamente ao site quando desejar.
Excluir – selecione para deletar o texto criado.
Editar elemento – selecione para acessar o menu de opções de configurações externas do elemento.
Ao selecionar duas vezes o texto adicionado:
Ao selecionar o texto adicionado duas vezes, o menu de edição do texto altera para um novo menu de aparência próxima a de editores de texto, nesse novo menu é possível realizar as seguintes configurações:
Cortar/apagar;
Copiar;
Colar;
Colar como texto simples;
Colar do Word;
Desfazer e refazer ação;
Inserir tópicos de: números; símbolos;
Opções de alinhamento do texto;
Inserir: tabela; emojis; caracteres especiais; linha para quebra de página;
Mover o texto para: direita; esquerda;
Inserir linha horizontal;
Adicionar link;
Alterar direção do texto: da esquerda para a direita; da direita para a esquerda;
Alterar opções de: Heading Tag; fonte do texto; tamanho do texto;
Espaçamento entre linhas;
Opções de: negrito; itálico; grifado; tachado; subscrito; sobrescrito;
Remover formatação;
Configurações de cor: cor da fonte; cor de fundo;
Inserir ícone;
Adicionar sombra;
Inserir tags;
A última opção de inserir tags refere-se a configuração das Smarts Tags do Construtor de Sites Builderall Builder.
Elementos acordeón #
Elementos animados #
Com o “Elemento Animado” do Construtor de Sites Builderall Builder, você consegue adicionar contadores e barras de progresso animadas, deixe sua tela mais dinâmica e chame a atenção do visitantes enquanto navegam pelo seu site!
Como adicionar um Elemento Animado?
#
Passo 1 – Acesse o site e a página que deseja adicionar o Elemento Animado no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção adicionar e clique na área de elementos; selecione a opção “Elementos Animados“.
Passo 4 – Selecione um entre os três tipos de elementos animados disponíveis no construtor de sites e arraste até o painel desejado.
Elementos Big Menu (Mega Menu) #
Elementos booking #
Elementos botões #
Adicionar botões em seu site são sempre uma boa forma de guiar os seus visitantes e leads a completarem uma ação específica que você pretende, exemplos: se inscrever em um formulário, baixar um ebook, visitar outras páginas do site, entre outros. Além de atrativos, incentivam o visitante ao clique no local. Aprenda neste tutorial a como criar botões personalizados no Construtor de Sites Builderall Builder.
Como adicionar um Botão?
#
Passo 1 – Acesse o site e a página que deseja adicionar o Botão no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Botão“.
Passo 4 – Escolha um, entre os modelos de botões que irão aparacer; clique no botão escolhido e arraste até o local do painel desejado.
Elementos caixas #
Com o elemento Caixa do Construtor de Sites Builderall Builder é possível agrupar diferentes elementos, como textos, imagens, botões, entre outros, em um único elemento, além de permitir a configuração de imagens. Facilite a configuração dos elementos e crie uma aparência original para a sua página.
Como adicionar uma Caixa?
#
Passo 1 – Acesse o site e a página que deseja adicionar a Caixa no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Caixa“.
Passo 4 – Escolha um modelo de caixa, entre as 26 opções que irão aparacer; clique na caixa escolhida e arraste até o local do painel desejado.
OBS: Para adicionar e fixar diferentes elementos, como: texto, botão, iframe, imagem, entre outros, na caixa criada, basta adicionar os elementos normalmente ao painel da página e arrastá-los para dentro da caixa criada. Após os elementos serem adicionados a caixa é possível, movê-los individualmente, selecionando um por vez ou movimentar toda a composição dos elementos arrastando o próprio elemento de caixa.
Elementos supercheckout #
O que é o checkout em uma página? #
O termo “checkout” advém da língua inglesa e significa a finalização de um processo de compra ou hospedagem; em uma espaço de vendas online, o checkout refere-se a página final para a concretização de uma compra e o momento em que o cliente: confere os itens que serão comprados, digita suas informações pessoais, confirma o valor do produto, escolhe a forma de pagamento, efetua a compra em si e por último recebe a confirmação de processamento do pedido.
Criar uma página de checkout que deixe os clientes seguros e confiantes de finalizar a compra é fundamental para evitar o abandono de carrinho e aumentar as taxas de conversão de um negócio. Aprenda neste tutorial a como adicionar o elemento do Supercheckout em uma página no Construtor de Sites Builderall Builder e crie páginas de checkout de pagamento que tragam confiança para a sua marca.
Como adicionar o supercheckout a página?
#
Passo 1 – Acesse o site e a página que deseja adicionar o checkout do produto no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Supercheckout“.
Passo 4 – Selecione o ícone do checkout e arraste até o local do painel desejado.
Passo 5 – Selecione um produto já criado na ferramenta do Supercheckout, todos os produtos criados são indicados na área “Selecione um produto“; ou crie um novo produto na opção “Criar produto“.
Passo 6 – Configure o tema (2step ou 3step) e os textos dos campos do checkout que será adicionado a página.
Elementos formulário de contato #
Abra o menu lateral; selecione a opção de “Adicionar”; escolha a opção de “Elementos”:
Localize o elemento com o nome “Formulário de E-mail Marketing“; selecione um dos layouts de formulário oferecidos; clique e arraste para o seu painel no local que desejar:
Selecione a lista (a aba de listas é carregada automaticamente ao adicionar o formulário ao painel) criada no MailingBoss 5.0 para a captura dos leads ou crie uma nova lista que será vinculada ao formulário:
Elementos galerias #
Aprenda neste tutorial a como inserir uma Galeria de Imagens interativa no seu site através do Construtor de Sites Builderall Builder, adicione imagens importantes para o conteúdo da sua página e chame a atenção dos seus visitantes de forma fácil e rápida.
Como adicionar uma Galeria?
#
Passo 1 – Acesse o site e a página que deseja adicionar a Galeria no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Galerias”.
Passo 4 – Escolha um dos modelos de galerias disponíveis para utilizar; clique no botão escolhido e arraste até o local do painel desejado.
Há dois tipos de galeria disponíveis: a Galeria Slider (primeira opção entre os modelos, possui apenas 1 modelo, permite adicionar fotos individualmente e arrastar para o lado para conferir todas as imagens adicionadas); Galeria (6 modelos diferentes, permite adicionar mais de uma imagem por aba criando composição de fotos, diferentes tipo de ícones para conferir mais fotos).
Elementos GetResponse #
Acesse o Construtor e clique em elementos, Get Response.
2. Arraste e solte o formulário para o painel.
3. Acesse a sua conta no site Get Response para copiar a API Token. Para ajudar, clique na frase “obter meu token de API”, você será direcionado para a página correta.
4. Dentro do site Get Response, clique no menu superior e em seguida clique na opção “Integrações & API”.
5. Clique em API e “Gerar chave de API”.
6. Escreva um nome e clique em “Gerar”.
7. Clique em “Copiar”.
8. Clique em “Verificar” e clique em “Selecione”, após preencher as informações da sua lista de contatos, clique em “Concluído”.
9. Inserir um número no “Dia do Ciclo”, pois é o dia que as mensagens do autoresponder começam. Sugerimos inserir o número 0, que é o dia que o contato cadastrou.
10. Para editar a configuração do formulário Get Response, clique no ícone de engrenagem.
Elementos iframe #
Um iFrame é um código em HTML que permite que um elemento seja exibido dentro de outro elemento.
Adicionando Conteúdo HTML #
- Clique em Adicionar no lado direito.
- Clique em Elementos.
- Role para baixo até a seção iFrame.
- Arraste a caixa HTML iframe para o local relevante na sua página e solte.
Para configurar o iFrame #
- Clique no ícone Editar elemento.
- Selecione a opção Configurações Gerais para inserir o código.
- Existem duas formas de inserir o seu conteúdo:
- Incorporar documento: Adicione o seu código HTML e clique em aplicar.
- Incorporar URL: Adicione a URL externa, exemplo: https://www.google.com e clique em aplicar.
Elementos imagem #
As imagens de um site compõe o que chamamos de Marketing Visual, ao adicionar uma imagem em um site podemos: transmitir uma mensagem de forma objetiva, chamar a atenção dos visitantes do site, levar ao engajamento com o conteúdo da imagem; sendo assim, as imagens são um elemento essencial para o seu site. Aprenda neste tutorial a como adicionar imagens em suas páginas no Construtor de Sites Builderall Builder.
Como adicionar uma Imagem?
#
Passo 1 – Acesse o site e a página que deseja adicionar a Imagem no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Imagem”.
Passo 4 – Escolha um dos modelos de imagens disponíveis para utilizar; clique no botão escolhido e arraste até o local do painel desejado.
Elementos menu #
Elementos barras de redes sociais #
Com o elemento “Barra de Redes Sociais” do Construtor de Sites Builderall Builder, é possível configurar através de um único elemento os links para as principais redes sociais da sua empresa; adicione links para suas páginas no Facebook, Twitter, Instagram ou qualquer outra plataforma relevante para os seu negócios e incentive seus visitantes a engajarem em suas principais redes sociais.
Como adicionar a Barra de Redes Sociais?
#
Passo 1 – Acesse o site e a página que deseja adicionar a Barra de Redes Sociais no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Barra de Redes Sociais”.
Passo 4 – Selecione o ícone Barra de Redes Sociais e arraste até o local do painel desejado.
Elementos temporizadores #
Os temporizadores e cronômetros são dispositivos capazes de medir o tempo com alta precisão e são normalmente utilizados para controlar a sequência de um evento ou processo; com o elemento “Temporizadores” do Construtor de Sites Builderall Builder é possível adicionar diferentes tipos de contadores em uma página, além da opção de configurar diferentes tipos de ação ao zerar o tempo do contador adicionado. Aprenda neste tutorial a como adicionar temporizadores personalizados no Construtor de Sites Builderall Builder.
Passo 1 – Acesse o site e a página que deseja adicionar o temporizador no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Temporizadores“.
Passo 4 – Escolha um, entre os 6 modelos de temporizadores que irão aparacer; clique no temporizador escolhido e arraste até o local do painel desejado.
Elementos vídeos #
Os vídeos são formas fáceis e rápidas de consumir conteúdo. Vídeos curtos e interativos possuem grande importância no Marketing de Conteúdo, por levarem menos tempo para serem consumidos e possibilitar que informações sejam absorvidas mais facilmente do que um texto. Aprenda neste tutorial a como adicionar vídeos de diferentes plataformas em seu site no Construtor de Sites Builderall Builder.
Como adicionar um Vídeo?
#
Passo 1 – Acesse o site e a página que deseja adicionar o Vídeo no Construtor de Sites Builderall Builder.
Passo 2 – Escolha um painel em sua página ou adicione um novo para a configuração do elemento.
Passo 3 – Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção “Textos“.
O construtor de sites Builderall Builder permite adicionar vídeos de 6 plataformas diferentes, elas são:
YouTube, Vimeo Vídeo, Builderall Video Hosting, Vidello, Wistia e Panda video.
Passo 4 – Clique na plataforma escolhida e arraste até o local do painel desejado para adicionar o elemento.
Como adicionar o meu vídeo?
#
Para as plataformas do YouTube, Vimeo Vídeo, Wistia e Vidello, o link do vídeo que será adicionado a página do site é inserido na área de “Configurações gerais” das opções de edição dos elementos.
Para a plataforma de vídeo Builderall Video Hosting, o vídeo será selecionado na área de “Vídeo” das opções de edição do elemento.
Para a plataforma de vídeo Panda Videos, o vídeo será configurado na área de “Configurações” no menu do elemento após adicionar a chave API para a integração com a plataforma externa.
Como editar o Vídeo adicionado? #
Antes de aprendermos as opções de configurações, vamos conhecer o submenu indicado ao selecionar o elemento de vídeo.
Todas as plataformas de vídeo existentes indicam o mesmo submenu, exceto a plataforma Panda Videos que indica além das opções que serão mostradas, a opção de “Configurações” para a integração mencionada anteriormente.
