3 4 5
Índice Remissivo
Sobre o livro IntroduçãoSobre o livro
Escrever algumas frases que descrevem o que o seu livro é tudo. Você pode entrar em detalhes do prefácio na seção.
Introdução
Olá!
Ansioso para começar a modificar o seu site?!
Na aula anterior fizemos a instalação e reconhecimento do Wordpress no servidor, bem como já puxamos o conteúdo padrão que preparei para você.
Nessa aula, vamos dar o pontapé inicial para a modificação das partes de seu site. Como esse é o primeiro e-book em que vamos de fato colocar a mão na massa, criei um capítulo inicial que se chama
"Conhecendo as ferramentas de trabalho" em que apresento as telas de edição do Wordpress.
Utilize-a sempre que precisar, para consultas. Vamos lá!?
Conhecendo as ferramentas de trabalho
Então vamos lá!
Para modificar as partes de nosso site, vamos precisar conhecer um pouco mais a fundo as ferramentas que o Wordpress oferece para isso. Nesse template escolhido, a página inicial é formada por um conjunto de outras páginas. Cada uma fala sobre uma parte do assunto e são reunidas em um só local.
No painel de controle do Wordpress, clique sobre o menu "Páginas"
A página que abrirá na tela de trabalho contém todas as páginas que estão vinculadas ao seu site.
Antes de mais nada, vamos fazer uma configuração inicial da exibição de páginas para ficar mais fácil lá na frente. Clique sobre o ícone "opções de tela", que fica lá em cima, no canto direito da tela.
Ao clicar, vai abrir um box com algumas opções. Mude o número de páginas exibidas para 100, para evitarmos a paginação (com poucas páginas por tela, fica mais difícil encontrar rapidamente o que
queremos). Veja a figura abaixo:
Agora que você já alterou, note que na parte de baixo existe uma listagem de todas as páginas do seu site.
O arquivo que baixamos na aula passada fez a importação de 13 páginas para nosso site. São 12 que formam a HOMEPAGE do site e mais uma página acessória que se chama "Shortcodes", que inclusive não está publicada (note que está em "Rascunho"). Já, já vamos falar sobre essa página.
Mas antes, veja cada uma das áreas que compõe a nossa HOMEPAGE
Note que a página HOMEPAGE possui 11 sub-páginas. São elas: BLOG, CLÍNICA EXEMPLO, CONTATO, ESTÉTICA, 4 PARTES DE PARALLAX,
PORQUÊ?, SERVIÇOS E SOBRE.
Elas não estão em ordem de aparecimento, mas sim em ordem alfabética.
A primeira sessão que vamos editar é a página "CLÍNICA EXEMPLO". Clique sobre ela.
Ao clicar sobre essa página, o editor de páginas é aberto. Esse é o
padrão que você irá encontrar ao editar todas as páginas. A foto abaixo está com o zoom reduzido, para que você tenha uma visão geral dessa ferramenta:
Conheça-os em detalhe:
1) Título da página: é o campo que define o título dessa sessão. Note que é o mesmo título que apareceu na listagem anterior ("todas as
páginas"). Aqui, escreva o título da forma como preferir. No entanto, não utilize muitos caracteres (máximo 60), pois é esse limite que aparece nas buscas do Google.
2) Link: logo abaixo do título, há um link que corresponde ao link permanente daquela página. Como o arquivo veio importado diretamente do arquivo de exemplo, o link é fixo. Na aula anterior
fizemos as configurações gerais do Wordpress e editamos os permalinks no material "Configuração geral do Wordpress".
Se você ainda não fez o passo-a-passo daquele arquivo, volte lá antes de prosseguir!!
3) Botão de adição de mídia, para colocar IMAGENS. Ao clicar nesse botão, aparece aquele mesmo componente que vimos quando
inserimos o nosso logotipo nas aulas iniciais. Basta fazer o upload da imagem que quiser, alterar os títulos e textos alternativos, e inserir. 4) Ferramentas de texto: o próximo componente é um editor básico de texto. Mais pra frente, vamos aprender a dar uma turbinada nessas opções. Esse componente possui dois tipos de visualização, que podem ser vistas nas abas na parte superior direita do componente (Editor "Visual" e "Texto"). Use sempre na aba "Visual", pois os códigos de programação ficam ocultos.
Geralmente, ele possui duas linhas de ferramentas. Se o seu só está mostrando uma linha, clique sobre o ícone "Alternar barra de
sessão.
5) Logo abaixo da barra de ferramentas, há um espaço que vai ser preenchido com todo o conteúdo daquela página. Algumas páginas possuem um formato padrão que permitem conteúdo, outras não. Todas essas páginas que vamos alterar permitem conteúdo.
6) Abaixo, há um componente que faz as configurações daquela página. As opções incluem:
• Abrir como página separada: ao clicar no menu, abre uma nova página para ela. Como queremos que o usuário navegue sempre na nossa
HOMEPAGE, não vamos selecionar esse campo em nenhuma delas... exceto para o BLOG (QUEREMOS QUE O USUÁRIO VÁ PARA UMA PÁGINA SEPARADA).
• Desabilitar título da página: o título da sessão passa a não aparecer (essa primeira sessão, por padrão, não possui título)
• Título alternativo: para exibir um título diferente àquele que está marcado como principal... Muitas vezes fazemos isso para que seja exibido uma coisa para o usuário, mas o nome é diferente para nossa organização.
• Subtítulo: texto que fica embaixo do título alternativo
• Desabilitar página do Menu: quando selecionado, o menu passa a não exibir aquela sessão.
• Página assinalada como... Por padrão, mantenha como Home Section. • Home Revolution Slider: não utilizaremos esse campo
7) No menu lateral da direita, há um primeiro campo que é o de
publicação. Nele, é possível mudar o status (publicado, rascunho...), a visibilidade ou mesmo agendar a publicação.
Há também um botão para atualizar as informações - clique sobre ele sempre que fizer alguma mudança. Se não o fizer, as informações que você alterou são perdidas.
8) Abaixo, há um campo para atributos. Mantenha como "Modelo Padrão" e defina qual é a página mãe, sempre que ela for uma
subpágina (isso organiza as páginas no seu menu "Todas as páginas"). 9) Imagem destacada: cada tipo de sessão possui uma imagem de destaque que pode ou não ser utilizada. Para algumas sessões e para esse template, as imagens são obrigatórias. Já para outras páginas, podem não ser. Portanto, sugiro que mantenha o padrão e só adicione imagens destacadas nas áreas da HOMEPAGE que já possuem como exemplo. Nos posts, ela deve ser preenchida SEMPRE.
Podem existir outros campos de configuração nessa página, mas não exigem preenchimento.
Vamos continuar?
Vamos até o site para ver a página que vamos configurar (barra superior do Wordpress, no nome do site, depois, em "Visitar site").
Agora, vamos fazer alguns testes para você entender o funcionamento do editor. Vamos voltar até a aba de edição, clicando no menu superior "Editar página", na barra superior do Wordpress. Note que voltamos para o local original.
Agora, faça algumas modificações no conteúdo! Use sua criatividade, só para ver o que acontece...
Modifique as cores, o tamanho da letra, o tamanho do cabeçalho, a posição (direita, centro ou esquerda...)...
Depois que estiver satisfeito, clique em atualizar e volta ao site. Veja as modificações que fiz no meu:
Bacana, né!?
Vamos novamente ao editor... Agora, quero colocar uma imagem ali naquela região...
Vai aparecer um componente mostrando as imagens da biblioteca. Clique na aba enviar arquivos.
Assim que fizer o upload, você vai ser direcionado para a tela de
biblioteca, com sua nova imagem selecionada. Altere o título e o texto alternativo e insira a imagem na página.
Note que a imagem vai diretamente para área de conteúdo do editor de texto:
Para fazer edições, basta clicar sobre a imagem e clicar no submenu superior, na aba de "editar".
Nessa nova tela, é possível alterar o alinhamento, tamanho da imagem e inclusive fazer alterações no arquivo original. Basta seguir o fluxo... é bem intuitivo! Assim que você estiver satisfeito com as edições, tamanho e posição, salve, clicando no botão "atualizar".
Agora, veja o resultado no seu site:
No entanto, veja onde foi parar o meu cabeçalho... Olha que confusão!!! Ele ficou sobreposto com minha imagem de fundo... Portanto,
recomendo que faça uma sincronização perfeita do fundo com o que está no primeiro plano, para evitar esse tipo de problema.
Como as telas dos dispositivos possuem tamanhos diferentes, sugiro que você teste no computador, tablet e telefone o layout que escolher... No meu site, para evitar esse problema e ter um acesso interessante para todos os dispositivos, escolhi um fundo neutro e a minha chamada está em uma imagem.
Para isso, precisei alterar a imagem destacada e preencher o conteúdo com essa outra imagem. Veja como fiz:
Primeiro, adicionei uma imagem com todas as informações que precisava transmitir.
Para chegar até essa imagem, testei pelo menos outras 10. Por incrível que pareça, essa foi a que teve melhor resultado (foi a única que baixou a taxa de rejeição do site). Vamos aprender sobre isso mais pra frente, por enquanto não se preocupe...
Note que essa é a área nobre do site. O paciente quando chega ao seu site, em poucos segundos, toma uma decisão inconsciente que depende de vários fatores para resolver se vai ou não ler o resto do seu conteúdo. Estatísticas e estudos minuciosos sobre esse tema revelam que frases imperativas apresentam melhores resultados.
Desses estudos, definiu-se o que chamamos de CALL TO ACTION (CTA). Em português, algo como CHAMADA PARA A AÇÃO.
Veja de novo o que está escrito no meu site:
• "OFTALMOLOGIA - DR. RAPHAEL TROTTA": identificação • "COLOQUE SEU EXAME EM DIA": CTA 1
• "AGENDE SUA CONSULTA": CTA 2 • "CONHEÇA MAIS": CTA 3
Acredite ou não, suas palavras têm poder!!
Essa área do site serve para você atrair a atenção do seu usuário. O que deu certo para mim pode não dar certo para você, mas de forma geral, é um bom começo...
Sugiro que vá até o Canva.com e crie uma imagem de 800x800 px (em "custom dimensions" ou "Social Media"), com uma identificação breve e
2 ou 3 CTAs curtas.
Uma seta, apontando para baixo (onde está o restante do conteúdo) também ajuda a guiar o usuário.
Ao selecionar o formato que você deseja, vai cair na interface do Canva. Ela também é muito fácil de usar:
Use os modelos da lateral, insira textos e os demais componentes gratuitos que ele te oferece. Se tiver dúvidas, veja novamente a vídeo aula do tutorial. Se quiser usar outra ferramenta, não tem problema
nenhum.
Depois de criada a imagem, lembre-se de remover o fundo (deixar o fundo transparente).
Para isso, gosto de usar a ferramenta do próprio Power Point (existem outros APPs de imagem para isso, se preferir, pode usar...). Vou explicar com ele porque certamente todos vocês o possuem instalado...
Vamos ver como isso funciona. Criei com o Canva uma imagem que quero que apareça nessa região. Ainda não subtraí o fundo branco. Veja o que acontece:
Feio, não é mesmo?
Vamos abrir a imagem no Power Point agora e abrir o componente de edição... Basta clicar 2x sobre ela... Veja:
Clique sobre a opção "REMOVE BACKGROUND" ou algo parecido se sua versão for em portugês, dentro do menu FORMAT PICTURES. Ao fazer isso, vai abrir um editor bem simples:
Ao clicar nesse botão, tudo o que fica marcado em Rosa é subtraído da imagem. Note que no meu caso, as letras "E s s a e C T A" e a linha de divisão foram subtraídas. Para resolver esse problema, basta clicar sobre essas áreas... Note que aparece um ícone "+" se você quiser adicionar alguma área da imagem. Selecione as áreas que você quer que fique e retire as áreas que você quer que saia ("-").
A minha imagem, após essas edições ficou assim:
Observe que todos esses "+" foram áreas que precisei incluir até ficar tudo certo!
Agora, clique com o botão direito do mouse e selecione: Salvar como imagem (ou SAVE AS PICTURE).
Pronto! Agora, vamos voltar no nosso site e adicionar essa imagem novamente!
Viu a diferença!?
Se você preferir, pode usar um fundo único e uma chamada em texto, como estava anteriormente, no site da clínica de estética de exemplo. A outra opção que temos é manter o LOGOTIPO da opção do tema e
aplicar apenas o fundo, com as imagens que quisermos...
Só tome cuidado para que não haja desconfiguração em outros
formatos de aparelhos (tablets e telefones). Teste sempre, até chegar na opção que mais te agrada!
Só para lembrar, veja como configurar o logotipo em formato de texto que já vem no próprio tema... Acesse o menu Aparência >> Theme Options:
Em seguida, acesse o segundo menu da tela, "Home Settings". Lá selecione a caixa "Show Home Logo" e preencha com o "Home Logo Text" ou faça o upload do seu próprio logo. Nesse caso, usei um texto como logo:
Como o texto do logo vai aparecer bem no meio da minha tela inicial, não quero que ele fique novamente sobreposto à imagem que lá estava. Portanto, voltei na página "Clínica Exemplo" e removi a imagem que estava na área de conteúdo. Como também não quero que o logo em texto apareça sem fundo, fui ao Canva e criei uma imagem de fundo... Como optei por isso, coloquei na própria imagem uma CTA na parte inferior (dessa forma, não fica sobreposta com o logo). Veja a edição dessa tela:
Veja que retirei o conteúdo, coloquei uma imagem destacada que possui um texto de CALL TO ACTION na parte inferior. Depois, cliquei em
Profissional, não é mesmo!?
Na seta, apontei o logo que criamos com o editor do tema. Ele tem uma coisa muito legal. Ao clicar sobre ele, a página desce e vai até a próxima sessão! É ótimo para usar como CTA. Algo do tipo: "Marque sua consulta! Veja como clicando aqui!".
Muito bem! A introdução está feita!
Só nessa aula você viu como a mesma estrutura criou 3 capas
completamente diferentes para o nosso negócios! Use a criatividade e crie suas imagens matadoras!
Lembrando que, se você tiver dificuldade com edição de imagens, pode usar o Fiverr.com e pagar $5 por imagem editada! Só lembre de pedir com exatidão que precisa de uma imagem de determinado tamanho (1440x720 para o fundo e 800x800 para a imagem de frente, com fundo transparente).
Como opções, temos os seguintes: • getninjas.com.br
• 99designs.com • freelancer.com • odesk.com • elance.com
Mas acho que você consegue bons resultados fazendo sozinho! Experimente!
