Plugins

Como adicionar o plugin Mailing Boss WP no Wordpress Pro

Após instalar o plugin Mailing Boss WP ao Wordpress, para a configuração do formulário de e-mail marketing à página desejada, selecione a opção “adicionar bloco” e após, o ícone do “Mailing Boss Forms” no editor Wordpress:

   

 

     

1° campo - Seleção de qual lista será vinculada ao formulário
2°campo -  Título do formulário
3° campo - Configuração da “label” do formulário
4° campo - Alteração do estilo do botão do formulário



Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall

Como alterar o idioma do campo do formulário Mailing Boss?

O texto do formulário é incluído automaticamente pelo plugin do Mailing boss, porém nas últimas versões a tradução parou de funcionar.
 
Sendo assim, você precisa atualizar o plugin atual para a versão 1.0.11 e automaticamente os campos aparecerão em português. 

Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall

 

Como configurar disparo de e-mails (SMTP) no Wordpress

O que é um plugin SMTP?

Um plugin de SMTP (Protocolo Simples de Transferência de Email) permite configurar um servidor externo para disparar os e-mails do site Wordpress.

Exemplos de quando o site wordpress dispara um e-mail

Configuração WordPress 

Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall

Como configurar o Browser Notification no WordPress

Para que o browser notification funcione corretamente em um site externo, solicitamos que utilize plugin FTP para criar diretórios/pastas na raiz de seu site.

Crie uma pasta chamada "bn" e dentro desta pasta crie uma outra pasta com o nome "notification".

Dentro da pasta notification carregue o arquivo sw.js, conseguirá esse arquivo na campanha criada no browser notification. 

Para criar uma campanha no browser notification, clique aqui. 

Instale o script no header do site, utilize o WP File Manager no Wordpress ou outro plugin que preferir.

Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall

 

 

 

 

Como inserir Mapa de Cliques no WordPress?

Acesse o seu site no WordPress, clique em Plugins e adicionar novo plugin. 

Pesquise o Plugin Insert Headers and Footers. 

Clique em Instalar agora. 

Ative o Plugin. 

Clique em configurações e depois clique no plugin Insert Headers and Footers.

Cole o Script do Mapa de Cliques neste campo Scripts in Header e salve a configuração. 

Dica: saiba como pegar o script do mapa de cliques, clique aqui. 

Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall

 

 

Exportar site do Wordpress da Builderall para uma hospedagem externa

O usuário precisa acessar a área administrativa do Wordpress e através dela, fazer o download dos arquivos e do banco de dados através do plugin de backup que deixamos pré-instalado ou então utilizar algum outro plugin de backup.

Esse é o plugin que já deixamos pré-instalado para o usuário baixar seus arquivos. 

Escolha qual arquivo você fará o backup como: plugins, temas, uploads e quaisquer outros diretórios.

Clique no botão backup now e aguarde o processamento do backup.

Caso deseje apontar o domínio também, é importante apontar após ter feito o backup. Pois caso contrário perderá acesso ao ADM se o seu domínio estiver sem o apontamento. 

Após realizar o backup verifique como restaurar o mesmo com a hospedagem externa, procure o suporte da hospedagem para auxiliá-lo nesta etapa.

Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall

Como migrar seu site WordPress para o WordPress Builderall

Exportando seu Site do WordPress:

Passo 1

Passo 2

Passo 3


Passo 4


Passo 5


Importando o seu site WordPress para o Wordpress Builderall

Atenção! Antes de importar seu site externo para a Builderall, é importante entender os seguintes pontos:

• Não é possível importar sites WordPress para o Construtor de Sites Cheetah, devido à incompatibilidade dos construtores. 

• É obrigatório a contratação de um Cloud para a criação de sites e/ou a importação de sites externos no WordPress Builderall. 

É possível realizar a contratação do Cloud de duas formas: Contratar o Cloud desejado individualmente ou integrado ao seu plano ao adquirir um plano Builderall WP. Clique aqui e acesse nosso tutorial para aprender a como contratar o seu Cloud individualmente! Ou acesse nossa página de planos WordPress e realize o upgrade do seu plano! Acessar Planos WordPress.


Passo 1 

Passo 2

Passo 3 

O plugin indicado permite importar gratuitamente arquivos com o tamanho máximo de 256 MB.

Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall

Como alterar as configurações de um formulário do Mailingboss 5.0 via código

Neste tutorial, iremos aprender a estrutura básica do formulário de captura do MailingBoss 5.0 em linguagem HTML e como personalizar o formulário através de alguns princípios do CSS aplicados a elementos HTML. As configurações a seguir são voltadas para todos os usuários que desejam alterar o formulário do MailingBoss 5.0 para utilizar em sites externos, porém, o conhecimento prévio em princípios básicos de programação pode facilitar o entendimento e permitir realizar configurações mais avançadas para o formulário. 


Código HTML Padrão

<form action="https://app.mailingboss.com/lists/636e7552a66ad/subscribe" method="post">
	<div class="form-group">
		<label for="FNAME" style="">Name</label>
		<input class="form-control"  placeholder="Name" style="" name="FNAME" type="text" id="FNAME">
	</div>
	<div class="form-group">
		<label for="EMAIL" style="">E-mail</label>
		<input class="form-control" required placeholder="E-mail" style="" name="EMAIL" type="email" id="EMAIL">
	</div>
	<input type="submit" class="btn btn-default" value="Inscrever">
</form>

O código HTML do formulário de inscrição vinculado a lista criada no MailingBoss 5.0 é encontrado na área de "Formulários" > "Incorporar". O código HTML copiado do MailingBoss 5.0 é dividido em 3 partes: 

'Serão utilizados no tutorial as linguagens HTML e CSS para alteração das configurações do formulário de captura, porém, é possível utilizar outros metódos e linguagens, exemplo: JavaScript, normalmente no código HTML do formulário para as alterações desejadas.


Parte 1 - URL, ID da lista e ação de inscrição; 

<form action="https://app.mailingboss.com/lists/636e7552a66ad/subscribe" method="post"> 

Na primeira linha do código HTML copiado diretamente da sua lista no MailingBoss 5.0 são indicados: a URL de redirecionamento das informações para o MailingBoss 5.0 - https://app.mailingboss.com/lists/ - o ID do formulário que os leads serão cadastrados ao preencherem o formulário - <FORM UID> - e a ação de inscrever o lead ao adicionar os dados e selecionar a opção enviar - /subscribe. 


Parte 2:  Campos do formulário;

<div class="form-group">
		<label for="FNAME" style="">Name</label>
		<input class="form-control"  placeholder="Name" style="" name="FNAME" type="text" id="FNAME">
	</div>
	<div class="form-group">
		<label for="EMAIL" style="">E-mail</label>
		<input class="form-control" required placeholder="E-mail" style="" name="EMAIL" type="email" id="EMAIL">
	</div>

Serão indicados todos os campos criados na área de "Campos" da lista: Altere os nomes dos campos do formulário na tag label - >Name</label> (exemplo: >Nome completo</label>); altere os textos localizados dentro das áreas dos campos (placeholder) no atributo - placeholder="Name" (exemplo: placeholder="Digite seu nome completo sem abreviações); Para alterar as opções de estética dos campos, adicione as opções de edição no atributo - style="" 

Também é possível adicionar novos campos diretamente pelo código, lembrando que, é obrigatório manter no código: o campo de e-mail e os demais campos que estão como obrigatórios na área de "Campos" do MailingBoss 5.0 com as suas respectivas tags no atributo - name="FNAME" (exemplo). 

Para o envio dos dados do cadastro para o MailingBoss 5.0 funcionar corretamente é necessário permanecer no código: o link de inscrição, o campo de email e os demais campos obrigatórios configurados. Campos adicionais serão desconsiderados pelo MailingBoss durante o envio das informações e não alteram o envio. 


Parte 3 - Configurações do botão; 

	<input type="submit" class="btn btn-default" value="Inscrever">

Serão indicadas as opções para alterações estéticas no botão do formulário de inscrição. Por padrão, para configurações de estética, os códigos dos formulário do MailingBoss 5.0 vem apenas com a classe definida (class="btn btn-default"), utilizada normalmente para a padronização de parâmetros, evita a necessidade de repetir as configurações desejadas  em diferentes elementos, sendo possível configurar uma única classe e apenas adicioná-la na área de classe dos elementos. 

Também é possível alterar as configurações estéticas do botão do formulário, adicionando o atributo - style="" + as opções desejadas. Não é necessário retirar o atributo class ao configurar o style, pois, todas as opções adicionadas ao segundo atributo irão prevalecer sobre o class.  

Altere o texto do botão no atributo valor - value="Inscrever" (exemplo). 

Dica! O atributo - class="btn btn-default" é padrão da ferramenta externa Bootstrap e outros frameworks de frontend. Saiba mais sobre como usar Bootstrap para personalizar o botão do seu formulário sem precisar utilizar o atributo style: Clique Aqui!  


Opções comuns de CSS para configurações externas: 


• background-color: define a cor de fundo do botão;
• color: define a cor do texto dentro do botão;
• padding: define o espaço entre o conteúdo do botão e a borda do botão;
• border: define a largura, estilo e cor da borda do botão;
• border-radius: define o raio da borda do botão, permitindo que você crie botões com bordas arredondadas;
• font-size: define o tamanho da fonte do texto dentro do botão;
• text-align: define o alinhamento horizontal do texto dentro do botão;
• cursor: define o estilo do cursor quando o mouse está sobre o botão.

Confira mais detalhes e outras opções para configurar seu formulário de captura acessando o site da W3C (World Wide Web Consortium), comunidade internacional responsável por desenvolver os padrões utilizados na World Wide Web (WWW). Clique Aqui!


Como adicionar uma classe ao código HTML: 


Para criar uma classe de configurações para o seu formulário, inicie adicionando a classe ao elemento '<form>' + o nome descritivo (exemplo: form-inscrever) para a classe que será criada: 

<form class="form-inscrever" action="https://app.mailingboss.com/lists/636e7552a66ad/subscribe" method="post">

Em seguida, crie ou abra (externamente) um arquivo CSS, onde serão adicionadas as regras de estilo e adicione as regras para a classe "form-inscrever"; salve o arquivo CSS

Exemplo de configuração CSS: 

Essa configuração fará com que o formulário fique com uma borda cinza, uma margem de 20 pixels acima e abaixo e 20 pixels à esquerda e à direita, e um preenchimento interno de 20 pixels.

.form-inscrever {
  border: 1px solid gray;
  padding: 20px;
  margin: 20px 0;
}

Por fim, adicione o arquivo CSS à sua página HTML usando o elemento <link> no <head> da página. Por exemplo:


Como configurar o atributo style nos elementos: 


Para configurar as opções exteriores nos elementos separados do código HTML, altere ou adicione o atributo - style="" - e dentro, configure as propriedades CSS separadas por ponto-e-virgula (;). Cada propriedade CSS terá um valor correspondente, os valores podem ser: uma palavra-chave, um valor numérico, uma string, ou uma combinação desses.

Exemplo de configuração de style no elemento botão: 

<input type="button" value="Clique aqui!" style="background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; text-align: center; cursor: pointer;">

Nesse exemplo o botão terá: um fundo azul, texto branco, 10 pixels de preenchimento na vertical e 20 pixels de preenchimento na horizontal, nenhuma borda visível, bordas arredondadas com um raio de 5 pixels, fonte de tamanho 16 pixels, texto centralizado e o cursor se transformará em uma mão quando o mouse estiver sobre o botão (indicando que ele pode ser clicado).

Cada elemento do formulário terá sua própria customização, ou seja, cada um dos elementos terá o atributo "style" próprio. 


Copie e cole! 

Facilite a configuração do seu formulário! Copie e cole o código abaixo e utilize um formulário que já deixamos prontinho para você!

Formulário: 


Código do Formulário: 

<form action="https://app.mailingboss.com/lists/636e7552a66ad/subscribe" method="post"  style="width: 500px; height: auto; border: 1px solid #eee; box-shadow: 5px 5px 5px #eee; border-radius: 4px; padding: 0 20px 60px 20px; margin: 20px">
	<h1 style="color: #0080fc;" >Formulário MalingBoss</h1>
	<div class="form-group" style="padding-bottom:25px">
		<label for="FNAME" style="color: #0080fc; font-size: 22px; font-weight: bold;">Nome</label>
		<br>
		<input class="form-control" required placeholder="Digite seu nome" style="padding: 10px; font-size: 16px; font-family: Helvetica; background-color: white; border: 1px solid #ccc; border-radius: 5px; width: 100%;" name="FNAME" type="text" id="FNAME">
	</div>
	<div class="form-group" style="padding-bottom:25px">
		<label for="EMAIL" style="color: #0080fc; font-size: 22px; font-weight: bold;">E-mail</label>
		<br>
		<input class="form-control" required placeholder="Digite seu e-mail" style="padding: 10px; font-size: 16px; font-family: Helvetica; background-color: white; border: 1px solid #ccc; border-radius: 5px; width: 100%;" name="EMAIL" type="email" id="EMAIL">
	</div>
	<div class="form-group" >
		<input type="button" class="btn btn-default" style= "width: 100px; background-color: green ; color: white; padding: 10px; 
	border: none; border-radius: 4px; font-size: 16px; text-align: center; cursor: pointer; font-family: Helvetica; box-shadow: 5px 5px 5px #eee; float:left" value="Voltar" onclick="history.back()">
		<input type="submit" class="btn btn-default" style= "width: 100px; background-color: #0080fc ; color: white; padding: 10px; 
	border: none; border-radius: 4px; font-size: 16px; text-align: center; cursor: pointer; font-family: Helvetica; box-shadow: 5px 5px 5px #eee; float:right;" value="Inscrever">
	</div>
</form>

É possível realizar alterações no código do formulário normalmente!   

Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall