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:
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 uma dica rápida pra você, dessa vez iremos aprender a como inserir efeito lightbox nas imagens do site com WP Featherlight no WordPress. Essa é uma dica bem simples, porém muito importante para que o seu site forneça uma melhor experiência para o usuário.
Quando inserimos uma imagem com link para ela mesma em nosso site WordPress por padrão ao clicar na imagem o usuário será direcionado para o link da imagem do servidor perdendo totalmente o acesso ao site, o efeito lightbox faz com que a imagem seja mostrada em tamanho maior, porém sem sair do site e se for uma galeria de fotos você já terá os botões de navegações sem precisar configurar nada.
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
Efeito lightbox nas imagens do site com WP Featherlight no WordPress
Instalando o plugin WP Featherlight
O plugin WP Featherlight será o nosso escolhido para inserir o efeito lightbox em nosso site, eu gosto bastante desse plugin por ele ser bem leve, simples, não faz requisições no banco de dados e faz o que tem que fazer de uma maneira bem objetiva.
Acesse o painel administrativo do seu site, vá no menu Plugins e em seguida clique em Adicionar novo, na barra de pesquisa digite WP Featherlight, agora é só clicar em Instalar e depois em Ativar.
Maravilha, agora que o seu plugin está instalado e ativado, navegue no seu painel administrativo até a página que você deseja inserir uma foto/galeria e vamos fazer as configurações necessárias. No meu exemplo eu vou criar uma galeria de fotos, porém funciona também apenas com uma foto.
Criando uma galeria de fotos e configurando o Efeito Lightbox
Agora meu “pácero” vamos criar uma galeria de fotos simples utilizando o editor padrão do WordPress.
No seu editor clique em Adicionar mídia e siga o processo abaixo:
1 – Clique em adicionar galeria
2 – Selecione as imagens que você deseja inserir em sua galeria
3 – Clique em Criar uma nova galeria
Nesse momento será mostrada a janela para configurarmos a galeria:
1 – Para o efeito funcionar perfeitamente o apontamento de TODAS as imagens do site devem estar para Arquivo de mídia, conforme mostrado na imagem acima;
2 – Defina a quantidade de itens por linha da sua galeria de fotos;
3 – Clique em inserir galeria e em seguida Salve sua página e vamos ver o resultado
Veja abaixo como ficou o efeito no meu projeto:
E aqui finalizamos mais um tutorial, espero que você tenha obtido mais clareza e aprendido a fazer o processo de inserir efeito lightbox nas imagens do site com WP Featherlight no WordPress 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 ????
Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de criar redirecionamento de página no Contact Form 7
Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você, dessa vez iremos aprender a Criar redirecionamento de página no Contact Form 7 após o envio da mensagem do usuário.
Esse recurso é muito utilizado quando você tem uma página customizada para mostrar algo ao usuário depois que ele enviou um contato. Por exemplo: Quem nunca preencheu um formulário de contato de algum empreendedor digital e após o envio do formulário foi redirecionado para uma página na qual é mostrado um “Conteúdo secreto” somente para a lista vip de contatos? =D
Agora que você já sabe do que vamos falar nesse post, vamos ao que interessa.
Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito
Como criar redirecionamento de página no Contact Form 7
Com base na imagem acima, você irá acessar o formulário do Contact Form 7 que deseja inserir e redirecionamento, depois na aba Formulário você irá inserir o script abaixo no topo do editor de campos do CF7 :
Agora é só substituir o link de exemplo pelo seu link oficial, salvar, inserir o shortcode do seu formulário na página que deseja, testar e VRAU!
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 criar redirecionamento de página no Contact Form 7
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
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
Como gerenciar os campos do formulário?
A primeira etapa consiste em gerenciar os campos que vão aparecer no formulário para o usuário preencher.
Visão geral
Descrição dos itens destacados:
1 - Clique no submenu “Campos” do menu “Strong Testimonials”;
2 - Campos padrões do formulário,
3 - Preview do formulário de depoimento.
Como Editar um campo
Ao clicar em um campo ele irá expandir e você verá a tela mostrada na imagem acima, observe a imagem e veja os principais campos pra você pode editar e o efeito que ele causa na visão do usuário.
Caso você pense que tenha campos demais, é só excluir os que não fazem sentido pra você clicando no botão destacado acima.
Inserindo um novo campo
Caso os campos padrões não supram as suas necessidades, você pode criar novos campos para completarem o seu formulário:
Descrição dos itens acima:
*O tipo do campo determina o que será mostrado no campo, por exemplo, se você escolher o tipo Star rating, aparecerá para o usuário um campo para ele avaliar a empresa, e assim por diante.
1 - Clique no botão Add Novo Campo;
2 - Opções para você estilizar o conteúdo do seu campo, use o tipo de campo text para o usuário preencher novas informações. *caso tenha dúvida sobre o que preencher em cada campo revisite a imagem da seção visão geral desse tópico.
Ótimo! Agora é só você editar, inserir e excluir os campos para deixar o formulário de depoimento com os campos que você precisa.
Principais configurações do formulário de depoimento
Depois de definirmos quais os campos que vão compor o nosso formulário, é hora de fazermos as configurações dos principais comportamentos do formulário como, por exemplo, qual será o e-mail que irá receber a notificação de um novo depoimento, quais mensagens vão aparecer para o usuário quando der certo e quando der errado o envio entre outras ações.
Descrição das etapas destacadas acima:
1 - Acesse o menu Configurações para ver as configurações gerais do plugin;
2 - Acesse a aba Formulários para ter acesso às configurações gerais do formulário;
A partir daqui vamos conhecer os principais blocos de configurações de formulário e o que cada item impacta no funcionamento geral do form.
3 - Seção Forms Labels e Messages
O item 3 configura os textos gerais do form
Required - Se você marcar essa opção, aparecerá no topo do formulário a mensagem que você escrever para destacar quais campos são obrigatórios.
Captcha - Mensagem que irá aparecer caso você opte por utilizar o reCaptcha do google. *Falaremos disse mais adiante.
Submit Button - Mensagem que aparecerá no botão de enviar.
Submission Error - Mensagem que aparecerá caso dê algum erro ao enviar o formulário.
Submission Success - Mensagem que aparecerá se o formulário for enviado com sucesso.
Seção Form Actions
Vamos conhecer agora a seção Form Actions, aqui iremos configurar os principais comportamentos do formulário quando o depoimento for enviado.
Descrição dos passos destacados acima.
1 - Upon Successful Submission
Nessa seção nós iremos configurar o que irá acontecer quando o formulário for enviado.
Display message - Essa opção irá mostrar a mensagem de obrigado que você configurou na seção Form Labels & Messages no item Submission Success.
Redirect to a page - Você pode escolher uma página específica do site para que o usuário seja redirecionado depois de enviar o depoimento.
Redirect to a URL - Você pode escolher uma URL externa para redirecionar o usuário depois de enviar o depoimento.
2 - Posts Status
Aqui definimos se o depoimento será enviado direto para o site (Publicado) ou se será sujeito a aprovação (Pendente). Eu prefiro usar o Pendente para evitar depoimento malicioso ou algo do tipo.
3 - Notification Email
Nesse ponto vamos configurar como que o dono do site irá receber a notificação via e-mail de um novo depoimento.
A melhor opção para essa etapa é a Send an email upon new testimonial submission.
Nela você pode escolher se o e-mail será enviado para o e-mail de administrador cadastrado na instalação do WordPress ou se será enviado para um e-mail diferente, além de ter a possibilidade de montar um e-mail personalizado para o seu cliente (se você estiver desenvolvendo um site pra alguém) para avisar do novo depoimento.
No campo Subject você coloca o assunto e no campo Message você escreve a mensagem, você pode utilizar as tags para montar um e-mail dinâmico onde cada tag será substituída pela informação que o usuário preencher no formulário.
Seção Form Spam Control
A última etapa das configurações é aonde iremos deixar o nosso formulário mais seguro e protegido contra Spans e boots que estão por toda a internet enviando milhares de e-mails maliciosos através de formulários desprotegidos. Para evitar isso vamos então adicionar uma ou duas camadas de segurança.
Marque a opção Honeypot como Antes para que o Strong testimonials possa adicionar um campo do formulário escondido aos olhos humano, porém, visto e preenchido pelos boots, assim é validado se o campo foi preenchido ou não. Se for preenchido será interpretado como um boot e não será enviado, caso ao contrário será enviado.
A opção Captcha é muito interessante também, caso você queira adicionar mais essa camada de segurança basta clicar na opção Google Captcha by BestWebSoft e configurar as keys do google. Não sabe como fazer isso? eu escrevi um tutorial ensinando como utilizar o plugin de captcha e como gerar as keys do google . O processo é bem simples e rápido, depois de gerar as keys e instalar o plugin, basta clicar em configurações, inserir as suas keys e VRAU!
Agora é só salvar as suas alterações.
Finalizamos aqui então as configurações principais do formulário para coleta de depoimentos de clientes. Vamos avançar para a próxima etapa!
Criando a View para o Formulário
Citei anteriormente que este tutorial é a continuação do tutorial de como criar depoimentos de clientes com o Strong Testimonials e lá eu explico detalhadamente sobre as views, sendo assim vou apenas dar uma passada rápida nas principais configurações da view do nosso formulário.
Acesse o menu Views do Strong Testimonial, clique em Add new, informe um nome para a sua view e escolha o mode formulário.
Mais abaixo você encontra a seção Actions e nela iremos definir qual Categoria receberá o depoimento enviado pelo formulário. O processo é bem simples, basta você clicar em cima da(s) categoria(s) desejadas.
Maravilha, agora vamos definir os estilos básicos do nosso formulário, eu deixei o meu com as configurações padrões, mas você pode escolher e testar os estilos que mais se adequam à seu projeto.
Depois de ter feito as configurações da sua view só largar o click no Salvar alterações e continuar seguindo o tutorial, pois, agora iremos abordar o último tópico para finalizar o processo.
Inserindo o formulário no site
Por último e não menos importante é hora de inserirmos o formulário efetivamente no nosso site, até o momento fizemos todas as configurações necessárias para que o formulário de comporte do jeito que queremos e chegou a hora de colocar o “trêm” pra rodar.
Depois de ter salvo as alterações, ainda na mesma tela será criado no topo da página um campo chamado Shortcode, basta copiar o conteúdo deste campo e colar no editor de texto da página que você deseja que o formulário apareça.
Segue abaixo um print do meu formulário já no site:
Agora é só testar o envio e ver se ele vai se comportar da maneira esperada. Se você seguiu todos os passos certinho é pra dar tudo certo, caso algo não saia como esperado deixe aí nos comentários que eu terei o maior prazer em ajudar.
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.
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.
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.
Instalação do plugin Strong Testimonials para depoimentos no WordPress
A primeira etapa para inserir depoimentos é você instalar o plugin no seu site, para isso vá no menu Plugin / Adicionar Novo, na barra de pesquisa escreva "Strong testimonials". Clique em instalar e depois em ativar no plugin.
Depois de instalar e ativar o plugin, será criado um item no menu principal do painel chamado "Testimonials".
Lindo de bonito, agora o plugin está instalado e podemos partir pra ação. Ao longo do tutorial iremos passar pelos principais itens do menu mostrado acima.
Criar Categorias de depoimentos no WordPress
Particularmente eu gosto de começar o processo criando as categorias principais dos meus depoimentos. As categorias te ajudam a organizar os seus depoimentos e mostrar eles de maneira mais assertiva, por exemplo: Se você vende o Serviço X, é interessante que na página de venda desse produto tenha os depoimentos apenas sobre ele. Isso é possível somente com as categorias.
Descrevendo o processo acima
1 - Clique no menu Categorias do Strong Testimonial;
2 - Insira o nome da sua Categoria;
3 - O slug é nome da sua categoria sem assentos, espaço ou caracteres especiais, esse nome aparece na "url" do site,
4 - Clique em adicionar nova categoria.
Para editar ou excluir uma categoria, basta passar o mouse em cima do item na listagem de categorias e escolher a opção desejada.
Boa pácero, agora é só você criar quantas categorias desejar, nesse meu exemplo eu vou criar apenas uma com o nome Slide de depoimentos gerais, pois no tutorial iremos aprender a inserir os depoimentos em formato de slides.
Criar e configurar uma view para mostrar os seus depoimentos
Após criar a categoria, eu continuo o processo criando a view mais indicada para o projeto que estou desenvolvendo.
Uma view é o modelo geral de todos os depoimentos que fazem parte dela, por exemplo: Eu posso ter uma view para mostrar os depoimentos em formato de slide, outra pra mostrar apenas 3 depoimentos e outra view que será o formulário para o usuário enviar um depoimento. Ou seja podemos ter diversos estilos para mostrar nossos depoimentos e o melhor de tudo, segmentados =D
Vamos ao processo:
Descrição dos passos acima:
1 - Clique no item Views no submenu do Testimonials;
2 - Clique em Add New para adicionar uma nova view;
3 - Informe um nome para sua view;
4 - Escolha um tipo para sua view;
Um pouco sobre os tipos de viewDisplay - Mostra seus depoimentos em cards, um ao lado do outro;
Slideshow - Cria um Slideshow para exibir os depoimentos (usarei esse);
Formulário - Cria um formulário para o usuário inserir um depoimento;
Single Template PRO - Se adquirir a versão PRO, você tem acesso à um acervo com diversos templates prontos criados pela equipe que desenvolveu o plugin.
Nessa etapa temos que configurar alguns "Grupos" responsáveis pelo funcionamento da view.
Query
No primeiro grupo nós temos a Query, que é responsável por fazer a consulta nos depoimentos cadastrados com base nas condições dos campos e trazer depoimentos específicos para essa view.
Um pouco sobre cada campo:
Categorias - Para mostrar depoimentos de uma ou mais categorias específicas, basta escolher a opção select do menu para ter acesso a todas as categorias criadas. *É por esse motivo que eu começo criando as categorias, pois na hora de criar a view eu já escolho a categoria certa.
Ordenar - Para ordem aleatória, escolha "Random", para a ordem ser com base no número definido na hora de cadastrar o depoimento, escolha "Menu order", para mostrar os depoimentos recentes primeiro, escolha "Newerest first" e para mostrar os mais antigos primeiro, escolha "Oldest first".
Quantity - Permite você limitar a quantidade de depoimentos que será mostrado nessa view
Slideshow
Nesse grupo iremos fazer as configurações gerais de nosso Slideshow.
Um pouco sobre os itens da imagem acima (as configurações acima são as que eu fiz no meu projeto)
Show - Aqui nós configuramos como os itens serão mostrados no slide, se você escolher a opção "Single" será mostrados apenas 1 depoimento por slide, caso você queira assim como eu, 3 depoimentos por slide é só escolher a opção "Multiple".
A opção Multiple mostra uma caixa para você configurar a quantidade de depoimentos mostrados por slide em cada dispositivo. *se você entende de media query fique a vontade para fazer suas alterações nos breakpoints, caso ao contrário deixe as configurações padrões e só mude a quantidade na coluna "Show" da tabela.
Transition - Configura o tempo em que slide ficará parado na tela, qual será animação de transição e quanto tempo ela levará até chegar os novos depoimentos.
Behavior - Esse item configura os principais comportamentos do slide e dos controles de navegações
- Start automatically - Inicia o slide automaticamente;
- Pausa em foco - Pausa a contagem do tempo da transição do slide quando o mouse está em cima de um depoimento;
- Stop on interaction - Pausa a contagem do tempo da transição do slide quando há qualquer iteração com o slide;
Abaixo dos cheks tem uma opção muito interessante, ela nos permite definir se os "box" onde fica cada depoimento serão da mesma altura ou não.
Navigation - Nos permite escolher se queremos que mostre as setas de navegação e se terá paginação. (faça o teste com os estilos para ver qual fica mais legal no seu contexto).
Campos
Nesse grupo nós vamos configurar como e quais informações do nosso cliente será mostrada no depoimento.
Vamos conhecer um pouco sobre cada opção desse grupo:
Título - Define se irá aparecer no depoimento o título que você inserir na hora de cadastrar um depoimento. *Eu prefiro não colocar pois eu uso os campos personalizados pra isso.
Imagem em destaque - Marque esse item se você pretende pedir uma foto para a pessoa que lhe enviar o depoimento. Se você escolher por usar a foto em destaque você pode:
- Escolher o tamanho que a imagem será exibida;
- Escolher se ao clicar na imagem, ela será exibida em um lightbox ou não;
- Escolher a ação caso não tenha foto para algum depoimento.
Content - Aqui configuramos o que será exibido sobre o depoimento na listagem
- Entire content - Mostra na listagem todo o conteúdo que for cadastrado no depoimento. (se tiver mil linhas, nas listagem aparecerá às mil.)
- Automatic excerpt - Pega o começo do depoimento e insere como um resumo na listagem.
- Manual excerpt - Permite você criar um resumo manual do depoimento do cliente (caso você tenha uma página de detalhes para o depoimento).
* Normalmente eu trabalho com depoimentos pequenos em sites que não tem um página de detalhe do depoimento, eu uso a opção Entire content sabendo que tenho que ter discernimento na hora inserir um depoimento.
Campos personalizados - Aqui nós definimos quais informações iremos querer sobre a pessoa que enviar o depoimento, você pode clicar em "Add Field" e conferir as opções de campos que você tem. *Essas opções aparecem na hora de cadastrar um depoimento para a categoria escolhida na view.
Style
No grupo Style nós podemos configurar um pouco da aparência do nosso slideshow.
Eu recomendo você testar os itens desse grupo para ver qual modelo pre-pronto mais te agrada.
Vou falar um pouco sobre os itens do style:
Template - Permite você escolher um dos modelos pre-prontos do plugin ou se manjar de CSS, escolha o template Unstyled para ter mais liberdade de edição;
Background - Permite você escolher uma cor de fundo para o item de depoimento. Eu gosto do single color e um cinza bem clarinho #f4f4f4;
Font Color - A opção custom, permite você colocar uma cor personalizada para o depoimento, senão será pego a cor padrão do site.
Css Classes - Pra quem conhece de CSS é só você inserir uma classe aqui e poderá estilizar os depoimentos tendo essa classe como "pai".
Depois de fazer todas suas configurações é só clicar em Salvar Alterações.
Gerenciar depoimentos
Depois de criarmos as categorias, as views, é hora de aprendermos a gerenciar os nossos depoimentos, nesse tópico iremos passar por inserir, editar e excluir um item de depoimento.
Como cadastrar novo depoimento, editar e excluir um já existente
Descrição dos itens acima:
1 - Item do menu que mostra uma visão geral de todos os depoimentos;
2 - Botão para Adicionar um novo depoimento;
3 - Ao passar o mouse em cima de um item cadastrado você terá a opção de Editar e Excluir o item em questão, basta clicar na opção desejada.
Como cadastrar / editar conteúdo do depoimento
Quando você seleciona cadastrar ou editar um item, o processo de criação de conteúdo é o mesmo a diferença é bem simples "um cadastra um novo e outro edita um conteúdo já existente"
Vamos conhecer o processo:
Descrição dos itens destacados na imagem:
1- Informe um nome para o seu depoimento (No meu caso ele não vai aparecer, pois eu defini lá na view para ocultar o título e mostrar somente os campos personalizados);
2 - Escreva o conteúdo do depoimento. (Atente-se ao modo que você definiu na view para mostrar o conteúdo na listagem, eu defini para mostrar tudo o que for escrito aqui);
3 - Informe as informações que você julgou necessárias na hora de criar a sua view;
4 - Marque em qual categoria esse depoimento está inserido;
5 - Insira uma imagem para o depoimento caso você tenha escolhido um template que permite foto (eu costumo usar o tamanho de 250x250px);
Depois de realizar o processo acima é só clicar em Publicar / Atualizar e o seu depoimento estará publicado.
Como mostrar depoimentos na página do seu site
Primeiramente parabéns por ter chego até aqui, você é F#&*@!. Chegamos na reta final do processo de inserir depoimentos no WordPress.
Depois que você já criou sua categoria, sua view e cadastrou seus depoimentos, é hora de mostrarmos eles na página do seu site.
Vamos ao processo:
Clique no menu Views no submenu do menu Testimonials e na listagem que aparecerá copie o conteúdo da coluna Shortcode.
Acesse a página em que deseja inserir os depoimentos e cole o Shortode em um bloco de texto. *Esse ponto varia de qual editor de texto ou pageBuilder você usa, eu utilizo o PageBuilder da SiteOrigin e insiro o código no widget de código HTML.
Confira o resultado do meu exemplo:
Agora eu te convido a testar os outros templates que o plugin oferece e definir qual fica melhor em seu site. Se você quiser aprender a customizar os depoimentos via CSS e assim ter mais liberdade para deixar o layout exclusivo mudando cores, fontes etc... é só deixar nos comentários e quem sabe o seu pedido é atendido =D
Veja um layout que fiz apenas customizando CSS, codificar pode assustar no começo, mas rapidinho você já consegue fazer coisas bem legais com muito mais liberdade:
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 mais tutoriais como esse? Se inscreva no nosso canal do youtube e em nossa newsletter no blog,
Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????
Espero que esse post te ajuda a ter mais clareza sobre como inserir depoimentos no WordPress.
Quer continuar sua evolução com o Strong Testimonials?
Fala Incuber beleza? Aqui é o Paulo Felipe com mais um tutorial pra você.
Se você está interessado em envolver os visitantes do seu site WordPress com apresentações de slides que contenham imagens, textos e vídeos. Então este Tutorial é para você!
A partir de agora você irá aprender como criar um slide com o Revolution Slider no WordPress e cativar os visitantes do seu site de uma maneira simples, prática e funcional.
Essa série será um projeto prático com o Revolution Slider composto por 4 vídeos nos quais aprenderemos a:
Criar um slider e sua principais configurações;
Criar um slide com imagens, textos, animações, timeline da animação e movimentos parallax;
Criar um slide com vídeo de background, textos e botão de ação;
Utilizar o recurso de transições de slides;
Como configurar e ajustar o slide em notebooks, tablets e celulares.
Para agilizar o seu aprendizado e proporcionar mais proveito no que interessa, eu preparei um pacote com algumas imagens entre backgrounds e elementos em png para você treinar e seguir esse tutorial com mais facilidade. Clique no botão abaixo e receba o seu material exclusivo.
Agora que você já baixou as suas imagens, abra o seu painel do WordPress, instale o seu Revolution Slider e vamos começar!!
Parte 01 – Configurações gerais de um slider – Revolution Slider
Nesse primeiro vídeo nós iremos passar pelas principais configurações de um slider deixando-o estruturado e pronto para receber os slides com imagens, textos, animações e vídeos.
Principais pontos abordados nesse vídeo:
Conhecendo os tipos de sliders;
Aprendendo a definir o tamanho do slider em todos os dispositivos;
Como fazer as configurações padrões dos slides como por exemplo: Duração, transição, background e progress bar;
Como configurar os controles de navegações do slider;
Como ativar o parallax para criar efeitos de movimentos nos elementos,
Inserindo o slider em páginas do site.
Parte 02 – Como criar um slide com o Revolution Slider que tenha elementos animados, transições e parallax
Agora que já definimos as configurações gerais do Slider é hora de criarmos o nosso primeiro slide. Essa parte é muito legal, pois aqui você aprenderá a dar vida para o seu slide e fazer as coisas acontecerem.
Ao final dessa segunda parte você aprenderá:
Como criar um slide;
Como inserir elementos no slide (imagens e textos);
Como animar entrada e saída dos elementos no slide;
Como criar um parallax em um elemento que se move de acordo com o mouse,
Como trabalhar com a timeline do Revolution Slider.
Maravilha, espero que você esteja gostando e entendendo os vídeos até aqui. Lembre-se, caso você esteja com alguma dúvida deixe nos comentários que eu responderei o mais rápido possível! Te desejo foco para continuar e vamos nessa, estou com você!
Parte 03 – Como criar um slide com vídeo background, textos animados e botões – Revolution Slider
Depois de aprender a trabalhar com elementos e criar um slide bem legal é hora de subir um nível, vamos aprender a como inserir um vídeo de background em seu slide e colocar texto e botão com link sob o vídeo para assim causar um impacto visual enorme no visitante do seu site.
Nessa terceira parte você aprenderá:
Como inserir um vídeo de background no slide;
Como criar um botão,
Como inserir links.
Muito bem, agora vamos para a última parte do nosso projeto.
Parte 4 – Como configurar os slides em notebooks, tablets e celulares (mobile) – Revolution Slider
Nos dias de hoje, de nada adianta você ter um slide muito legal com animações vídeos e tudo mais se ele não for responsivo. Nessa última parte do nosso projeto vamos aprender como configurar os elementos dos slides no mobile.
É isso ai querido Incuber, chegamos ao fim de mais um projeto prático, e como você pode notar projetos assim mesmo que simples demandam planejamento e tempo para serem criados, e para saber se estamos no caminho certo, o seu feedback é muito importante para nós. Deixe o seu comentário sobre o que você achou do projeto, suas dúvidas e sugestões, somente assim conseguiremos melhorar cada vez mais a qualidade dos artigos aqui no blog.
Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe 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 com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.
O reCAPTCHA é um recurso para proteger o seu site dos boots que ficam tentando acessar suas informações sem sua permissão e também que ficam enviando spans para o seu site. O Google desenvolveu seu próprio reCAPTCHA e que na minha opinião é o mais seguro e eficiente, além de ser muito simples de utilizar.
Para deixar o processo mais completo eu criei um breve vídeo para mostrar como gerar o Google reCAPTCHA key.
Primeiramente é necessário criar uma conta no www.google.com/recaptcha com uma conta do gmail.
– Clique em My reCaptcha no canto superior da tela;
– Coloque o e-mail e senha do seu e-mail;
Configurando o domínio do seu site para receber o Google reCaptcha
– Preencha os campos seguindo o exemplo da imagem abaixo;
– O domínio deve ser inserido sem o http//www. ou seja somente o domínio.com.br sem / no final;
Pegar a chave gerada pelo Google reCAPTCHA
A próxima tela irá mostrar a chave gerada pelo Google e também algumas maneiras de você inserir o reCAPTCHA em seu site através do código.
Para ficar mais sussa vamos utilizar um plugin simples para funcionar nosso reCAPTCHA sem precisar mexer no código, assim vamos utilizar somente o site key e a secret key.
Deixe a tela Google reCAPTCHA aberta, pois utilizaremos ela em breve.
Agora que você gerou a sua chave, vamos aprender como utilizá-la em seu site.
Como inserir o Google reCAPTCHA sem plugin
Inserir o Google reCAPTCHA sem nenhum plugin do WordPress com certeza é a melhor opção em termos de performance.
Dentro da Nano Incub temos a política de utilizar o mínimo de plugins possível, pois os plugins necessitam de atualizações de geralmente vem com muitas coisas que não utilizamos e isso acaba atrasando o carregamento do site.
E como fazer isso?
É bem simples. O WordPress por padrão já possui uma opção de integração externa.
Vá até a aba > CONTATO >> INTEGRAÇÃO.
Integração do Google reCAPTCHA com WordPress sem plugin
Agora é só clicar em CONFIGURAR CHAVES e inserir os dados do reCAPTHCA Key que você captou acima.
Muito simples não é mesmo?
Como inserir Google reCAPTCHA na tela de login do WordPress.
Para deixar o processo mais completo eu criei um breve vídeo para mostrar como inserir o reCAPTCHA na tela de login do WordPress.
Para fazer esse processo iremos utilizar o plugin “Google Captcha (reCAPTCHA) by BestWebSoft” que em minha opinião é o melhor, ou pelo menos o mais utilizado, tendo hoje mais de 100K de instalações ativas.
Instale e ative o plugin no seu WordPress.
Depois de ativar clique no novo item do menu que foi criado pelo plugin:
Preencha os campos conforme mostrado na imagem abaixo:
No card do WordPress default, marque em quais formulários de login e registro você deseja colocar o reCAPTCHA, o mais importante para esse tutorial é o Login form.
Você pode expandir o card de External Plugins e instalar o plugin da Bestwebsoft para contact form 7, eu particularmente prefiro instalar o plugin de reCAPTCHA do próprio CF7 que será o próximo processo.
*É apenas uma questão de gosto, fique a vontade para escolher entre usar o plugin da Bestwebsoft para CF7 ou continue comigo para ver como utilizar o plugin feito pela equipe do CF7.
Se você passar pelas opções contidas nessa tela, verá que é possível esconder o reCAPTCHA para usuários específicos, mudar o tema e colocar uma mensagem customizada para Whitelist Notivication.
Agora é só salvar as alterações.
Faça o logout no seu site e veja se deu tudo certo.
Maravilha, agora se você quiser inserir o reCAPTCHA no CF7 é só continuar aqui comigo.
Como inserir reCAPTCHA no Contact Form 7 – (Atualizado)
O Contact form 7 assim como todo Pokémon evoluiu (atualizou), antes ele aceitava o Google reCAPTCHA V2 (usado no tutorial) e hoje (11/19) ele não aceita mais o V2, somente o V3 e isso gerou diversos comentários no vídeo antigo de que não estava dando certo, acompanhe o vídeo atualizado “Como inserir reCAPTCHA V3 no Contact Form 7” a aprenda a fazer o processo atualizado.
Já que estou atualizando o processo no Contact Form 7, vamos iniciar o tutorial após você fazer o login na sua conta do Google reCaptcha.
O Processo é bem parecido com o do V2, o que muda é que temos que marcar a opção reCAPTCHA V3.
Depois é só inserir o domínio do seu site, aceitar os termos e clicar em Enviar.
Após isso, será mostrada a tela com as suas chaves:
Agora vá no seu painel do WordPress e siga os passos destacados na imagem abaixo para chegar até o local de inserir as chaves do reCAPTCHA no Contact Form 7.
Após clicar em Definir Integração, aparecerá a tela para você inserir as chaves geradas.
Maravilha, agora é só clicar em Salvar alterações e ver o resultado em seu site.
Se tudo correu como o esperado é pra aparacer um ícone semelhante ao da imagem abaixo no canto inferior direito do seu site:
É isso ai Incuber, espero que esse post tenha ajudado a esclarecer suas dúvidas sobre Inserir google reCAPTCHA no WordPress, caso você tenha ficado alguma dúvida, se você tiver alguma sugestão ou opinião, deixe ai nos comentários, pois sua participação é o que nos move a produzir conteúdos cada vez mais elaborados e assertivos.
Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe 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 com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.
Neste tutorial eu vou ensinar como salvar contatos enviados pelo Contact form 7 no WordPress de uma maneira bem simples e rápida, esse recurso é excelente pra você que gosta de ter as informações do seu site centralizadas no WordPress.
Pegue o seu café, aperte o play e bons estudos!
Tutorial Salvar contatos enviados pelo Contact form 7 no WordPress
Fala galera beleza? Aqui é o Paulo Felipe trazendo mais um tutorial pra vocês.
Dessa vez iremos companhar um tutorial do Duplicator, um plugin para WordPress que te possibilita fazer o backup do seu site ou colocar um projeto online depois de ter sido desenvolvido no localhost.
Vamos começar com a instalação do plugin Duplicator.
No menu esquerdo do painel, pare o mouse na opção “Plugins” e clique em “Adicionar novo“, digite na pesquisa do lado direito “Duplicator“.
Clique em “Instalar” e depois em “Ativar“. Maravilha o plugin foi instalado.
Gerando pacote do Duplicator (criando cópia/backup do site)
Depois de instalar o plugin você terá a opção Duplicator no menu esquerdo, pare o mouse em cima dela e clique em “Packages”
Agora nós iremos criar um pacote e configurar a nossa cópia do projeto, clique no botão “Create new” do lado direito da tela, assim nós iremos criar uma nova cópia.
Hora de fazer as configurações principais do Duplicator.
Informe um nome para a sua cópia, no meu exemplo eu coloquei – copia_exemplo_duplicator;
Muitas vezes temos em nossa pasta raiz do servidor arquivos que o site não depende deles para funcionar, o Duplicator nos permite inserir filtros de arquivos para que seja compactado somente os arquivos necessários.
Em “Archive” clique na opção “Enable File Filters” depois clique em “root path” e na frente do caminho digite “/wp-snapshots” para que a pasta wp-snapshos não seja compactada, essa pasta guarda outros backups do site feito pelo duplicator e não é necessária em uma cópia. Depois é só clicar em “Next“.
Nesse momento o Duplicator irá escanear o seu projeto para ver se o projeto é compatível, entre outras validações. Aguarde!
Após o escaneamento, o Duplicator irá mostrar o resumo e se tudo ocorreu bem, caso tenha algum Warning de Open Base dir, pode ignorar a mensagem. Depois é só clicar em “Build”
Quando você clicou em “Build” o Duplicator começou a construir o pacote do seu site, onde ele irá compactar todos arquivos, exportar o banco de dados e tudo o que for necessário, depois disso será disponível a opção para você fazer o download dos arquivos.
Agora é só fazer o download dos arquivos e você terá o backup do site.
*Salve o arquivo “installer.php” e o arquivo .zip em uma pasta para ter como backup!
Muito bem, o processo parar criar um backup do site é esse, mas se você quer aprender a como colocar o backup online continue comigo neste tutorial!
Como migrar site em WordPress
Agora que já temos o nosso backup, vamos aprender a colocar esse backup em produção novamente, esse processo ajuda muito quando finalizamos o desenvolvimento de um projeto em WordPress desenvolvido no localhost e precisamos colocar esse projeto online para o cliente aprovar ou quando vamos lançar o site oficialmente no domínio do cliente.
Nesse exemplo nós iremos colocar o site em uma hospedagem na internet, para isso você precisará:
Ter instalado em seu computador o Filezilla (download) para acessar o FTP da hospedagem;
Ter os dados de acesso da sua hospedagem.
A primeira coisa que vamos fazer é criar um banco de dados para que o WordPress funcione. O processo para criar o Banco de Dados variaria de acordo com a sua hospedagem, eu vou mostrar o processo no phpMyAdmin pois é nele que configuro os Bancos de Dados da minha hospedagem.
Segue abaixo uma lista de links para como criar um banco de dados nas principais hospedagens:
Preencha corretamente os campos no Filezilla e clique em “Conectar”
Modelo de configurações de FTP no Filezilla
Agora que você está acessando a sua hospedagem via FTP navegue até a pasta que você deseja instalar o seu site, no meu caso eu criei uma pasta chamada tutorial, depois coloque os 2 arquivos gerados pelo Duplicator no local da instalação no FTP:
Muito bem! finalizamos a primeira parte do processo.
Como instalar um site com o Duplicator no WordPress
Depois de colocar o seu projeto no ftp vá até o seu navegador e digite na url o endereço em que os arquivos do site estão e chame o installer.php, no meu caso ficou assim: 3w.nanolab..com..br/tutoriais/installer.php
Depois de apertar “Enter” se deu tudo certo você verá a tela de apresentação do resumo da instalação, nessa tela é só aceitar os termos e clicar em “Next“.
Nesse momento você precisa informar os dados do seu Baco de Dados para que o duplicator possa instalar o banco de dados do site.
A opção “Connect and Remove All Data” irá apagar tudo o que tiver no banco de dados e substituir pelos novos arquivos.
O Host você encontra dentro do painel da sua hospedagem, qualquer dúvida é só perguntar no suporte, mas é bem simples encontrar.
Depois de colocar os dados corretamente, clique em “Test Data Base“, se você configurou certo irá aparecer a seguinte mensagem:
Agora é só clicar em “Next“.
Confira os dados, e depois clique em “Next”
Se tudo ocorreu bem você verá a seguinte tela:
Clique em “Site Login” e acesse o seu site para ver se tudo ocorreu bem!
Veja o meu projeto rodando agora na hospedagem:
*Provavelmente esse endereço não existe mais.
Agora para deixar tudo redondo na instalação do seu site, é preciso mandar o Duplicator apagar os arquivos desnecessários daqui para frente, é muito importante excluir esses arquivos pois eles deixam o site pesado e com arquivos que facilitam a invasão do seu site!
Clique em “Remove Installation Files Now!” para excluir todos os arquivos!
É isso ai pessoal, espero que este tutorial tenha te ajudado a conhecer o Duplicator, fazer o backup do seu site e também a migrar o seu site feito com WordPress!.
Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe 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 ????
