Mês: maio 2018

Fala galera beleza? Aqui é o Paulo Felipe trazendo mais um tutorial pra vocês. Nessa postagem você vai começar a aprender a Como instalar e configurar o plugin Contact form 7 no WordPress.

Nessa primeira parte nós vamos aprender:

• Instalar o plugin contact form 7;
• Criar o formulário;
• Configurar campos do formulário;
• Configurar o corpo do e-mail enviado pelo formulário;
• Configurar resposta automática para o usuário,
• Modificar mensagens de erros.

O Contact form 7 é um plugin gratuito para WordPress que possibilita criar formulários de contato de uma maneira muito simples e funcional, ele conta com diversas opções que lhe permite criar campos dos mais variáveis tipos como “text”, “email”, “tel”, “menu suspenso” entre muitos outros.

O plugin  permite criar um e-mail automático (auto responder) para cada formulário, além de aceitar html, css e o framework bootstrap para customizar os seus formulários além de muitas outras funcionalidades.

Aperte o play e bons estudos!

Como instalar e configurar o plugin Contact form 7 no WordPress – Tutorial

Confira também um tutorial em texto completo para te auxiliar em Como instalar e configurar o plugin Contact form 7 no WordPress.

Instalando o plugin Contact Form 7

A primeira coisa a ser feita é instalar o plugin no seu wordpress, acesse o link de download (Baixar plugin Contact Form 7) ou se preferir acesse o menu “Plugin” em seu WordPress, clique em “Adicionar novo” e pesquise por Contact form 7, agora é só instalar e ativar o plugin.

Adicionando um novo formulário no Contact Form 7

Com o plugin instalado basta parar o mouse em cima da opção “Form contato” localizada no menu principal do WordPress e clique na opção “Adicionar novo”.

Tela principal CF7

Bem vindo a tela principal do Contact form 7, a imagem a seguir explica um pouco sobre as opções principais do plugin.

Como configurar campos do form no Contact Form 7

Agora que você já conhece um pouco das configurações gerais do Contact form 7, vamos definir os nomes e tipos de cada campo que irão compor o nosso formulário.

O form conterá sete campos que serão:

• “Nome” (tipo texto);
• “E-mail” (tipo email);
• “Telefone” (tipo tel);
• “Estado” (tipo menu suspenso);
• “Foto” (tipo arquivo);
• “Assunto” (tipo texto),
• e “Mensagem” (tipo textarea).

Na aba “Formulário” apague todo o conteúdo do formulário padrão deixando apenas o botão de enviar [submit “enviar”].

Vamos começar criando os títulos de cada campo.

Para criar os títulos, basta um inserir um “label”  para cada campo da seguinte forma.

<label>Nome</label>

<label>E-mail</label>

<label>Telefone</label>

<label>Estado</label>

<label>Foto</label>

<label>Assunto</label>

<label>Mensagem</label>

Depois de definir os títulos é hora de definir o tipo de cada campo. Para isso basta você escolher o tipo de cada campo na lista de tipo de campos. Para deixar o tutorial mais simples, vamos configurar apenas o nome do campo e se ele será obrigatório ou não.

É muito importante definir os tipos corretos para campo pois assim o próprio plugin insere algumas validações como por exemplo se o email não conter @ ou . (ponto) quando o usuário enviar o formulário irá aparecer uma mensagem informando que o campo não foi preenchido corretamente.

Os campos nome, email, telefone, assunto e mensagem seguirão a mesma formatação. Fica a seu critério definir quais campos serão obrigatórios ou não.

O campo Estado que será do tipo “Menu suspenso” terá a seguinte formatação:

O campo de foto terá a seguinte configuração:

Depois dos campos inseridos, a sua tela de configuração de formulário estará parecida com a da imagem abaixo.

*Lembrando que os campos com um asterisco * informam para o Contact form 7 que esse campo é obrigatório. Caso ele fique em branco, uma mensagem é exibida para o usuário. Para melhor identificação do usuário insira um * na frente do título de cada campo obrigatório.

A estrutura do seu form ficará assim:

<label>Nome
[text* nome]
</label>

<label>E-mail
[email* email]
</label>

<label>Telefone
[tel telefone]
</label>

<label>Estado
[select* estado "UF" "MG" "RJ" "SC" "SP"]
</label>

<label>Foto
[file foto limit:2mb filetypes:jpg|png]
</label>

<label>Assunto
[text* assunto]
</label>

<label>Mensagem
[textarea* mensagem]
</label>

[submit "Enviar"]

Finalizamos aqui a configuração dos campos do nosso formulário, agora clique em “Salvar”

Configurando destinatário e corpo do e-mail enviado pelo formulário Contact form 7

Nesse momento vamos configurar o e-mail, a forma como o formulário será mostrado para o destinatário e criar um e-mail automático para ser enviado ao remetente confirmando que o e-mail foi enviado com sucesso.

Para deixar o tutorial mais real eu irei utilizar o meu e-mail para mostrar como funciona o recebimento do e-mail. Sinta-se a vontade para me enviar um e-mail caso tenha alguma dúvida, terei o maior prazer em ajudar.

A imagem abaixo mostra a função dos quatro primeiros campos de configurações do e-mail que será entregue para o destinatário.

Agora vamos configurar o corpo do e-mail que será entregue ao destinatário. A imagem a seguir mostra um exemplo de layout:

Agora é inserir o nome do campo que queremos anexar arquivos no e-mail no bloco “Anexo” conforme imagem abaixo:

Muito bem, o e-mail que será enviado para o destinatário já está configurado, agora é só salvar o formulário.

Vamos agora para a última ação dessa primeira parte do tutorial de Como criar um formulário com o Contact form 7

Como configurar resposta automática no Contact form 7

Chegou a hora de configurar a resposta automática que será enviada para o e-mail do usuário.

Marque a opção Mail (2)  e vamos começar a terceira etapa do tutorial.

A imagem a seguir mostra um exemplo de como configurar uma resposta automática com o Contact form 7.

Lembre-se marcar a opção “Usar tipo de conteúdo HTML”

Clique em Salvar.

Caso apareça a mensagem “Este endereço de e-mail não pertence ao mesmo domínio do site“, ignore-a.

Clique na aba “Mensagens“. Nessa aba você pode substituir as mensagens que vem por padrão, por mensagens personalizadas. Não vou aprofundar nessa parte porque é bem intuitiva. Segue imagem:

É isso galera, a primeira parte desse tutorial vem até aqui, na continuação desse tutorial você aprenderá:

• Como configurar SMTP no Worpress;
• Testar para ver se tudo está ok.

Aprenda a configurar o plugin Easy WP SMTP no WordPress na parte 2

• 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 ????

Um Abraço.

Fala galera beleza? Nessa postagem você vai aprender a duplicar páginas, posts e postagens customizadas no WordPress  utilizando um plugin muito útil chamado Duplicate post.

Quando estamos desenvolvendo um site que tenha páginas de detalhes para cada serviço por exemplo, elas seguem o mesmo layout e o que muda são as informações, neste caso criar uma página de modelo e duplica-la para cada serviço irá economizar muito o seu tempo e facilitar a sua vida, o processo é bem simples porém muito útil.

Aperte o play e bons estudos!

Como duplicar páginas, posts e postagens customizadas no WordPress – Tutorial

Acompanhe o tutorial em texto que escrevi para te ajudar a entender 100% o processo para duplicar posts, páginas e postagens customizadas no WordPress.

1º – Acesse o painel administrativo do WordPress;

2º – No menu esquerdo pare o mouse em cima do item “Plugins” e em seguida clique em “Adicionar novo”;

3º – Na barra de pesquisa do lado direito digite “Duplicate post”;

4º – Clique no botão “Instalar” relacionado ao plugin com a imagem acima;

5º – Depois de instalado clique em “Ativar”;

Maravilha, o plugin está instalado, agora é hora de testar o plugin, o processo de duplicar é igual para páginas, posts e postagens customizadas, vou ensinar como duplicar uma página e você faz onde precisar.

6º – No menu esquerdo clique em “Páginas”;

7º – Na listagem de páginas, pare o mouse em cima de uma página e depois clique na opção “Clonar”;

Perfeito, página duplicada, agora é só acessar a página clonada que vem por padrão como rascunho, dentro da página é só mudar o nome, url e conteúdo, depois é só clicar em publicar e tudo está certo.

Para duplicar postagens customizadas é necessário acessar as configurações do plugin para dar permissão às postagens customizadas:

8º – No menu esquerdo pare o mouse na opção “Configurações” e clique na opção “Duplicate post”;

9º – Clique na aba “Permissões”;

10º – Agora é só marcar quais postagens customizadas você deseja duplicar itens e depois salvar a página;

• 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 ????

Um Abraço e até o próximo post.

Fala galera beleza? Confira agora o tutorial em vídeo no qual você irá aprender a como criar menus personalizados no WordPress. 

Os menus são os guias de um site, eles que permitem o usuário navegar pelo seu site e encontrar aquilo que o interessa. Eles são um ponto importantíssimo do site e devem ser inseridos com bastante atenção e alinhados com as práticas UX (Experiência do usuário no site) para ficarem em lugares de fácil acesso e permitir uma experiência de navegabilidade simples e prática para o usuário.

Aperte o play e bons estudos!

Como criar menus personalizados no WordPress – Tutorial

Nesse breve passo-a-passo vou ensinar como criar um menu principal e um menu dentro de uma posição para widget no site:

1º Acesse o painel administrativo do WordPress;

2º Pare o mouse na opção “Aparência” localizada no menu ao lado esquerdo e depois clique na opção “Menus”;

3º Dê um nome para o seu menu no campo “Nome do menu” localizado na parte superior da página (no meu caso eu coloquei o nome “Principal”);

4º Insira as páginas que desejar no menu:

*Por padrão do WordPress todas as páginas já criadas no site serão inseridas no menu;

*Para excluir um item do menu basta clicar no item para ele expandir e é só clicar na opção “Remover”;

5º Clique em “Criar menu”;

6º Marque a opção “Primary Menu” para dizer ao WordPress que este menu será o principal menu do site e ele irá aparecer no topo da página.

7º Abra o site e veja o resultado!

Agora que já aprendemos a criar um menu e colocar ele como principal, vamos criar outro menu e colocar em uma posição diferente do site.

1º Ainda na página de menu do WordPress clique na opção “Crie um novo menu”;

2º Dê uma nome para o menu (no meu caso eu coloquei o nome “Rodapé”);

3º Clique em “Criar menu”;

4º Na coluna à esquerda marque as página que deseja colocar nesse menu e clique em “Adicionar ao menu”;

• Caso queira criar um link personalizado é só clicar na aba “Links personalizado” agora insira o link que desejar e dê um nome para esse item.
• Para fazer o link abrir em uma nova aba navegue até o topo da página e clique em “Opções de tela” e marque a opção “Destino do link”;

5º Salve o menu.

Agora que já criamos o nosso menu personalizado vamos inseri-lo em uma posição do site, nesse tutorial vou inserir um menu no rodapé.

Inserir um menu em uma posição do site

1º No menu a esquerda pare o mouse em “Aparência” e clique na opção “Widgets”;

2º Como você pode conferir no vídeo, o tema que eu estou usando fornece uma posição chamada “Footer 1”, clique nessa posição para expandi-la;

3º Na lista de widgets a esquerda, clique e arraste o widget “Menu” para a posição “Footer 1”;

4º Expanda o widget menu e dê um nome para o menu. (esse nome será o exibido no site antes da listagem dos itens do menu;

5º Clique em “Selecionar” e escolha o menu criado anteriormente (no meu caso é o “Rodapé”) e clique em “Salvar”;

6º Vá até o site e veja o resultado. Conforme mostrado no vídeo o menu foi criado no rodapé do site;

Agora é só criar os seus menus e fornecer mais facilidade para o usuário encontrar os itens mais importantes do seu site!

• 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 ????

Um abraço e até o próximo post!

Fala galera beleza? Confira agora o tutorial em vídeo no qual você irá aprender a como criar páginas no wordpress. 

As páginas dão vida e riqueza ao site, são elas que mostram o que a empresa é, seus valores, clientes, como podem melhorar a vida das pessoas com seus produtos e/ou serviços etc..

Aperte o play e bons estudos!

Como criar páginas no WordPress – Tutorial

Aprenda nesse tutorial como é simples e rápido criar uma página no wordpress.

1º Faça login no painel administrativo do seu site;

2º No menu do lado esquerdo cline na opção “ Páginas”;

3º Essa tela é o local onde suas páginas ficarão armazenadas, clique no menu na parte superior da página “Adicionar nova”;

4º  No campo “Adicionar uma nova página” informe o nome da sua página, eu vou utilizar nome “Home”;

5º Insira o conteúdo que deseja no campo do “Editor”;

*Uma particularidade do Tema que estou usando o “Sydney” é que para deixar o layout com o estilo de página “Full width” e não como um blog com sidebar, é preciso clicar na caixa seleção “Modelos” e escolher a opção “Front Page“.

6º Agora clique em “Publicar”;

Tudo certo! Agora é só repetir o processo para quantas páginas você precisar.

Para completar esse vídeo eu fiz um tutorial de “Como criar menus personalizados no WordPress “, caso queira continuar expandindo os seus conhecimentos, segue o link: LINK

• 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 ????

Abraços!

Sugestão