FalaÊ Incuber beleza? Seja muito bem-vindo à mais um tutorial do Blog Nano Academy.
Aqui é o Paulo Felipe e nesse tutorial eu vou te ensinar Como Importar Arquivos CSS e JS Corretamente no WordPress, utilizando um Hook do WordPress no arquivo functions.php.

É muito importante conhecer como que o WordPress pode nos ajudar a fazer tarefas mais rápidas, melhores e com as práticas corretas. Aqui você vai conhecer como que o WordPress nos ajuda a importar arquivos externos corretamente.

Pegue o seu café, retire as distrações ao seu redor, coloque o seu fone e "vamo que vamo" com foco total!

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Código de exemplo para importar arquivos css e js no WordPress

Segue modelo para ser inserido no arquivo functions.php do seu tema. *Lembre-se de alterar os caminhos dos arquivos.

function importar_arquivos_customizados() {
        //Arquivos CSS exemplo
	wp_enqueue_style('CSS-Form', get_template_directory_uri() . '/css/SEU-ARQUIVO.css');

	//Arquivos JS exemplo
	wp_enqueue_script( 'js-customizado-nano-academy', get_template_directory_uri() . '/js/custom-js/SEU-ARQUIVO.js');
 }
 add_action('wp_enqueue_scripts', 'importar_arquivos_customizados');

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre importar arquivos css e js no WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você sobre o plugin de WordPress Contact Form 7, nesse tutorial você aprenderá como fazer um redirecionamento de página com base na opção que o usuário escolheu no select.

Para contextualizar melhor, imagine que temos um formulário no qual há um select com as opções "Startups", "WordPress" e "Desenvolvimento" e cada opção dessa levará o usuário após enviar o formulário para uma página de obrigado diferente, assim você tem a liberdade de levar o seu usuário para uma página de obrigado específica para cada serviço ou produto.

Pegue o seu café, retire as distrações ao seu redor, coloque o seu fone e "vamo que vamo" com foco total!

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Snipets utilizados para realizar o processo de redirecionamento de página com base na opção do select no Contact Form 7.

O shortcode abaixo será utilizado para criar o campo de select no seu formulário. Esse cara é inserido no corpo do seu form, basta copiar e adequar os nomes para a sua realidade.

[select* interesse id:op-interesse include_blank "Startups" "WordPress" "Desenvolvimento"]

Maravilha, antes de continuarmos, faça o teste para ver se está tudo funcionando como deveria em seu site, você deve obter um resultado parecido com o da imagem abaixo:

Segue abaixo o snipet para ser inserido dentro do arquivo main.js ou footer.php, basta apenas seguir um dos processos ensinados no vídeo.

//Se for colocar o códio no main.js, lembre-se de retirar as tags <script>
<script>
    document.addEventListener('wpcf7mailsent', function (Event) {
        // Altere o 136 pelo ID do seu formulário.
        if ('136' == event.detail.contactFormId) {
            
            // se for mudar o nome da variável 'opinteresse' lembre-se de mudar em todos os lugares que ela aparece
            var opinteresse = document.getElementById("op-interesse").value;

            // Mude os nomes dos values para os nomes que estão no seu select.
            // Mude o link para qual cada opção levará o usuário após enviar o formulário.
            if (opinteresse == "Startups") {
                location = 'https://www.youtube.com/channel/UChy3qxl2x92wkBJxJ2n895A';

            } else if (opinteresse == "WordPress") {
                location = 'https://academy.nanoincub.com.br';

            } else if (opinteresse == "Desenvolvimento") {
                location = 'http://nanoincub.com.br';
            }
        }
    }, false)
</script>

Depois de seguir o que foi ensinado no tutorial, basta você testar e ver se tudo deu certo como deveria.

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Faça como o Thiago Salgueiro e interaja com a gente, gostamos que de ajudar! Compartilhe suas dúvidas, experiências e resultados.

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre como deixar o layout de um formulário com Contact Form 7 em duas colunas.

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7
Como deixar Contact Form 7 em duas colunas

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você sobre o plugin de WordPress Contact Form 7, dessa vez iremos sanar a dúvida do Thiago Salgueiro um dos Incubers que nos acompanha que é a seguinte "Como deixar Contact Form 7 em duas colunas".

O Processo é bem tranquilo e envolve HTML e CSS, mas não se assuste por não ter conhecimento sobre essas linguagens, eu vou te ajudar do começo ao fim para garantir que tudo sairá como deve ser. Vale ressaltar também que esse post é pra resolver uma dúvida pontual e não explicar detalhadamente sobre HTML e CSS, caso esse conhecimento lhe interesse deixe nos comentários que o seu pedido pode ser atendido e a gente comece uma série de vídeos sobre o assunto.

Todo o procedimento pode ser realizado através do painel do WordPress a partir da versão 5 que conta com um editor CSS maneiro para fazer pequenas alterações nos estilos do seu tema ou se você já conhece do assunto pode utilizar a sua IDE favorita.

Veja o resultado que iremos obter ao final do tutorial

Como deixar contact form 7 em duas colunas

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Snipets utilizados no processo para deixar formulário CF7 em 2 colunas

O pedaço de código abaixo é a estrutura do formulário, você tem total liberdade para alterar os textos e os campos do Formulário que ficam entre colchetes [].

As DIV's com a classe "formulario-item-50" deixará o campo com 50% de largura e a classe "formulario-item-100" deixará o campo com 100% de largura e isso será configurado via CSS posteriormente.

<div class="envelopa-formulario">
    <div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

<div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

    <div class="formulario-item-100">
        Assunto
        [text your-subject]
    </div>

    <div class="formulario-item-100">
        Sua mensagem
        [textarea your-message]
    </div>

[submit "Enviar"]

</div>

Depois criar a estrutura HTML do seu formulário é hora de inserirmos o CSS da "bagaça".

O pedaço de código abaixo será inserido no editor de CSS do WordPress que fica em Aparência > CSS adicional.

//Estilizando a classe para deixar os campos com 50% de largura
.formulario-item-50 {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
//Estilizando os campos que vão receber o conteúdo (inputs)
.formulario-item-50 input {
  width: 100%;
  float: left;
}

//Estilizando a classe item-esquerda para dar um espaço na direita entre os campos
.formulario-item-50.item-esquerda {
  padding-right: 15px;
}

//Configurando o comportamento dos campos no mobile
@media only screen and (max-width: 767px) {
  .formulario-item-50 {
    width: 100%
  }

  //Retirando o espaçamento da direita no mobile para alinhar os campos
  .formulario-item-50.item-esquerda {
    padding-right: 0;
  }
}

.formulario-item-100 {
  width: 100%;
  margin-bottom: 20px;
}

.formulario-item-100 input {
  width: 100%;
}

.formulario-item-100 textarea {
  width: 100%;
}

Agora é só acompanhar o procedimento ensinado no vídeo e testar!

E aqui finalizamos mais um tutorial que dessa vez foi a pedido de um Incuber. Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Faça como o Thiago Salgueiro e interaja com a gente, gostamos que de ajudar! Compartilhe suas dúvidas, experiências e resultados.

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre como deixar o layout de um formulário com Contact Form 7 em duas colunas.

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais um assunto muito interessante sobre o mundo de websites para você, dessa vez vamos conhecer e aprender a utilizar o principais recurso do JivoChat - Como instalar, configurar, inserir e gerenciar contatos para que assim você consiga em poucos minutos inserir um chat online em seu site WordPress, Wix, Loja Virtual entre diversas outras plataformas online para divulgação e venda de produtos e/ou serviços e melhorar o seu atendimento aos clientes.

Vou compartilhar com você rapidamente como está sendo a nossa experiência aqui na Nano Incub com o JivoChat. Estamos usando a ferramente de chat a mais de 2 anos e de lá pra cá nós só temos que elogiá-la, ajuda muito a passar uma boa impressão para o cliente e mostrar que a empresa está disposta a ajudar ele, mata objeções e aconcelhá-lo durante o processo de compra de um produto ou contratação de um serviço. Nosso time comercial investe bastante energia no JivoChat e os resultados conversão só melhoram. Nós indicamos essa ferramenta =D

Adquira a versão PRO

Mas afinal o que é o JivoChat e como funciona esse trêm?

O JivoChat é uma ferramenta online de chat que pode ser integrada com com seu site, blog, loja virtual, catálogo online e plataforma web de maneira fácil e rápida sem precisar instalar nenhum plugin, biblioteca de script ou qualquer recurso adicional em seu site, você insere um pequeno código e tudo funciona.

Vamos conhecer na teoria como o processo para inserir o JivoChat em seu site funciona, primeiramente você se cadastra na plataforma, recebe o seu código de vinculação e depois é só inserir no seu meio de comunicação online, feito isso você pode instalar o aplicativo do JivoChat em seu computador, celular, tablet ou pode utilizá-lo em seu navegador para começar a conversar com os futuros clientes que estão navegando pelo seu site.

Apenas para frisar, o JivoChat funciona de maneira totalmente independente da sua aplicação, ele apenas cria uma caixa de diálogo em seu site para permitir que conversem com você em tempo real, porém toda a iteração com as pessoas, configurações e tudo mais é feito tudo na plataforma, assim como todos os contatos e conversas ficam armazenadas no banco de dados do JivoChat.

Você deve estar pensando “Beleza, Paulo. Eu já estou teoricamente craque no JivoChat, agora como que eu faço a parada acontecer?”. Pois bem, chegou a hora de ação!

Pegue o seu café, coloque uma música da sua preferência, tome uma respiração profunda e vamos ao processo.

JivoChat como instalar e configurar em seu site

Muito bom!! agora que tudo está funcionando perfeitamente em seu site é hora aprendermos a gerenciar a "bagaça"

Como gerenciar contatos através do JivoChat

E aqui finalizamos mais um tutorial, porém, por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre a ferramenta de chat online JivoChat

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você, dessa vez iremos aprender a inserir placeholder nos campos de um formulário utilizando o Contact Form 7 no WordPress. Em poucos minutos você aprenderá como deixar o formulário do site mais claro para o entendimento do usuário e assim terá contatos mais assertivos.

Antes de começarmos eu vou fazer uma breve introdução sobre placeholder para que você entenda o que realmente esse atributo faz. Então pegue o seu café, coloque uma música da sua preferência, tome uma respiração profunda e vamos ao processo.

O que é um placeholder?

A palavra Placeholder vem do que inglês place (lugar) + hold (segurar/reservar).

Embrasileirando e deixando mais fluído significa "reservado com um propósito específico", ou seja o placeholder em HTML é aquele texto que te ajuda a entender melhor sobre o campo do de um formulário, ele mostra qual o propósito específico daquele campo.

O Placeholer é uma tag HTML5 que mostra uma dica, um texto guia, uma breve especificação da informação que precisa ser inserida naquele campo do formulário. Eu gostaria de deixar um adendo aqui, o placeholder não substitui o label do formulário ele apenas leva mais clareza para o campo, os labels são os títulos dos campos do formulário e são muito importantes, então não use somente o placeholder dando um display:none na label.

Veja a seguir alguns exemplos de formulários que utilizam placeholder:

Bom demais! Espero ter te ajudado a entender um pouco mais sobre placeholder na teoria, porque agora chegou a hora da prática meu "pácero".

Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito

Como inserir Placeholder nos campos do Contact Form 7

Acesse o painel de edição dos campos do seu formulário e em seguida vá até a tag do campo que você deseja inserir o placeholder.
No final da tag antes de fechar o ] insira o atributo responsável pelo placeholder.

placeholder "Texto para o usuário"

Feito isso é só salvar o seu formulário de contato e testar.

Vou deixar um Bônus aqui pra você.

Como mudar a cor do placeholder no Contact Form 7

O processo de mudar a cor do placeholder envolve um pouco de código, mas fique tranquilão que eu vou te ajudar, é bem sussa.

A primeira coisa que precisamos fazer é criar uma div para envelopar o nosso formulário de contato fazendo que com as alterações sejam inseridas apenas nos formulários que conterem a nossa div.

Na edição da estrutura do formulário insira a tag antes dos campos do formulário

<div class="c-form-contato">

e depois a tag

</div>

no final dos campos. Veja o meu exemplo:

Maravilha, agora você só precisa colocar o código abaixo no topo do formulário e alterar para a sua cor desejada:

<style>
 .c-form-contato input::-webkit-input-placeholder { /* WebKit browsers */
   color: #ccc!important;
   opacity: 1;
 }
.c-form-contato input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc !important;
  opacity: 1;
}
.c-form-contato input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc!important;
  opacity: 1;
}
.c-form-contato input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  opacity: 1;
}
</style>

Veja abaixo como ficou no meu exemplo:

*Coloque o código acima da div que criamos.

Salve o formulário e veja se deu certo!

E aqui finalizamos mais um tutorial, espero que você tenha obtido mais clareza e aprendido a trabalhar com placeholder no Contact Form 7 e se ficou alguma dúvida é só deixar nos comentários que eu terei o maior prazer em ajudar!

Assista ao vídeo do processo no topo desse tutorial para fixar ainda mais o aprendizado.

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais um tutorial pra você, dessa vez iremos aprender a inserir um formulário para coleta de depoimentos no WordPress utilizando o plugin Strong Testimonials.

Para facilitar no processo de coleta de depoimentos, o Strong Testimonials permite com que criemos um formulário no nosso site onde o próprio usuário pode preencher com o seu depoimento e esse depoimento pode ser inserido automaticamente no site ou pode ser sujeito a pré-aprovação. O legal é que você terá um link apenas para coleta de depoimento e poderá enviá-lo para todos os seus clientes sem precisar enviar um doc. ou pedir por WhatsApp para a coleta, por exemplo (fiz muito isso).

Se você está chegando agora e ainda não tem muito claro como criar Depoimentos no WordPress com Strong Testimonials é só clicar no link e conferir o tutorial no qual eu ensino o processo completo para inserir depoimentos de clientes no seu site, então se tiver alguma dúvida consulte o tutorial que tenho certeza que irá te ajudar com os princípios básicos do plugin.

O que você aprenderá sobre o formulário de depoimentos do Strong Testimonials

Gerenciar campos;
Principais configurações;
Criar view,
Inserir no site. 

Agora que você já viu um geralzão do que vamos aprender, pegue o seu café, coloque uma música da sua preferência, tome uma respiração profunda e vamos ao processo.

Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito

E aqui finalizamos mais um tutorial, porém, por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de ter um formulário de coleta de depoimentos no seu site.

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais um tutorial pra você, dessa vez iremos aprender a inserir depoimentos no WordPress.

Como dizia Philip Kotler - "A melhor propaganda é aquela feita por clientes satisfeitos."  Eu acredito que seja pelo fato de que clientes satisfeitos falam bem do produto ou serviço que ela adquiriu para outras pessoas e assim gera novos clientes e consequentemente mais vendas.

Com o objetivo de te ensinar a mostrar os depoimentos de seus clientes satisfeitos em seu site, aumentar a autoridade dos seus produtos ou serviços e ajudar no processo de prospecção de novos clientes, nós do Nano Academy preparamos um passo a passo detalhado sobre os principais recursos do plugin Strong Testimonials no qual possibilita inserir Depoimentos no WordPress de uma maneira muito simples utilizando um painel administrativo e shortcodes.

O que você aprenderá

Instalação do plugin Strong Testimonials;
Criar Categorias de depoimentos;
Criar e configurar uma view para mostrar os seus depoimentos;
Gerenciar seus depoimentos (Inserir, editar, mudar categoria, excluir),
Mostrar depoimentos em seu site.

Strong Testimonials WordPress

Eu considero o Strong Testimonial o melhor plugin para depoimentos de clientes do WordPress, a versão gratuita supre muito bem as necessidades de um site institucional em processo de crescimento ou se você já tem um site grande e tem a necessidade de gerenciar de uma maneira mais "modularizada" os seus depoimentos a versão PRO irá te ajudar muito.

Falarei apenas da versão Free em todo o tutorial.

O plugin oferece a possibilidade de criar categorias de depoimentos, quantidade de depoimentos que será mostrado por página, se o depoimento será fixo, randômico ou em slide com possibilidade de escolher o número de itens que aparecerá em cada slide e muito mais. Venha comigo que você sairá daqui praticamente um Jedi (em aprendizagem haahahah) do Strong Testimonials.

Vamos conhecer um pouco sobre o que a versão gratuita e premium possibilita fazer.

Free

Templates pre-definidos - O plugin oferece alguns modelos de listagens de poimentos fixos, randômicos, slides entre outros.

Documentação - Você encontra a documentação do plugin Aqui caso queira estudar mais a fundo.

Painel administrativo - A versão gratuita oferece um ótimo painel administrativo com diversas opções de customizações para o layout dos seus depoimentos.

Formulário de coleta de depoimento - Você pode ter uma página com um formulário que ao ser enviado é inserido automaticamente ou por pre-aprovação o depoimento de um cliente.

Premium

SEO para os seus depoimentos - Tire o máximo proveito de seus depoimentos a extensão de marcação Schema.org.

Configurações de Views avançadas - Leve seus depoimentos para além das classificações por estrelas e personalize os depoimentos ainda mais.

Múltiplos Formulários de Envio - Colete facilmente depoimentos de clientes criando e personalizando vários formulários de uma só vez.

Campos de formulário personalizados - Melhore seus formulários de envio para coletar e exibir informações adicionais.

Propriedades personalizadas - Alterar as propriedades do tipo de testimonial: rótulos, estrutura de permalink, opções de administração e recursos do editor de postagem.

Conheça os planos aqui 

Maravilha, agora que já estamos na mesma página sobre o que iremos encontrar daqui pra frente, tome uma respiração profunda, pegue o seu café e vamos ao que realmente interessa.