Com mais de 1,4 bilhões de websites no mundo em 2018, é bastante normal que haja dificuldades para se destacar rapidamente . É claro que o número não é o único fator a considerar, o senhor precisa ter um website impecável para garantir seu sucesso na Internet . Para isso, o design de cada página de seu site não deve ser tomado de ânimo leve . Os visitantes não passarão necessariamente pela sua página de origem antes de obterem as informações que procuram. Além disso, todas as páginas indexadas de seu website provavelmente se beneficiarão do tráfego direto. O senhor deve, portanto, oferecer uma excelente experiência de usuário na página inicial, bem como em todas as outras páginas. E isso obviamente requer um projeto adequado e responsivo, com informações relevantes. Para isso, vou mostrar-lhe as melhores práticas e os diferentes passos para criar sua primeira página a partir da página inicial. Além disso, convido-o a ver o vídeo que acrescentei a este artigo para acompanhar diretamente o processo.
Criação de uma página no WordPress
Por isso, fiz uma rápida apresentação
, assim em powerpoint, para mostrar-lhe os diferentes elementos que encontrei:Por que é importante que cada página de seu site seja bem desenhada?
A menos que o senhor tenha um site de uma página, tem uma ou mais páginas que acompanham sua página de origem. Estes permitem que o senhor para fornecer muito mais informações sobre seus produtos, serviços ou temas, quando o senhor tem um blog.
E uma vez indexados pelos motores de busca, eles aparecem nos resultados quando as pessoas os procuram.
Portanto, todos eles são portões para seu website e o senhor deve tomar o cuidado de projetar bem cada um deles. Caso contrário, o senhor corre o risco de perder muito tráfego por causa de páginas mal concebidas, especialmente quando seu site começa a ganhar autoridade.
Além disso, tenha em mente que 57% de visitantes que visitam um website com uma página mal desenhada não a recomendarão. Enquanto sua taxa de conversão pode aumentar em até 5.5 com recomendações personalizadas. fusion_menu_anchor name=”2″ class=””][/fusion_menu_anchor] [fusion_menu_anchor name=”2″ class=”][/fusion_menu_anchor]
Portanto, se deseja ganhar rapidamente visibilidade e melhorar o desempenho de seu website, o senhor precisa oferecer um excelente experiência de usuário e algumas práticas podem ajudar o senhor.
Melhores práticas para as melhores páginas da web
Durante a criação de um website, tendemos a nos concentrar em sua estética, enquanto é seu ergonomia que permitirá ao senhor melhorar sua taxa de conversão. Isso significa que sua estrutura e desenho devem ser projetados tendo em mente a experiência do usuário.
Para isso, reuni algumas boas práticas a adotar que provavelmente lhe permitirãotêm as melhores páginastendo em vista o tema de seu website.
Faça uma projeção de suas páginas
O principal conselho que lhe posso dar é que faça um mock-up de seu website. Esse é um passo crucial na criação de seu website, pois permite ao senhor ter tempo para pensar sobre ele e propor o melhor website para seu projeto.
No final, o senhor terá um resultado preciso que lhe permitirá ser muito mais rápido no design de seu website de seu website.
Optar pela simplicidade
Seu projeto não é o elemento que os visitantes de seu site venham a admirar. Eles querem encontrar informações específicas ou, em alguns casos, realizar uma determinada ação. Sugiro, portanto, que o senhor considere a simplicidade como regra de ouro, a fim deoferecer uma navegação fácil e agradável.
Para esse fim, utilizar apenas os elementos que tenham um função real para os usuários e tome cuidado para evitar aqueles que podem tornar seu site muito complexo. Caso contrário, o senhor corre o risco de prejudicar a experiência do usuário, o que provavelmente terá um impacto muito significativo no desempenho de seu website.
Estabelecer uma hierarquia visual
Os diferentes elementos de suas páginas da Internet devem ser bem hierarquizados e organizados visualmente. De fato, os visitantes deveriam automaticamente os elementos mais importantes da página, para que possam encontrar o que procuram de maneira simples e fluida.
Portanto, atue sobre aspectos como tamanho, cores, layout, botões, chamada a ações, etc., para conseguir uma hierarquia e organização bemsucedidas.
Oferecer um sistema de navegação intuitivo
Se o senhor não tiver um website de uma página, convido-o a fazê-lo para que os visitantes possam passar facilmente de uma página para outra. A idéia é que eles possam passar de um ponto para outro sem nenhum esforço e sem se perguntar onde clicar.
Para isso, opte por uma estrutura em árvore muito simples, com um máximo de três níveis, e não hesite em usar o netlinking para vincular as páginas de seu website. Além disso, certifique-se de que seu menu de navegação seja claramente visível e, se possível, integre um menu de navegação no rodapé do seu site.
Seu site deve ser “coerente
Além da fácil navegação, convido o senhor a assegurar-se de que todos os elementos de suas páginas ou de todo seu website sejam consistentes. De fato, o senhor precisa lógica e consistência em cada página, mas também é necessário ao passar de uma página para outra de seu site.
Isto diz respeito principalmente aos elementos gráficos de seu website, a saber
- As fontes utilizadas;
- As cores ;
- As ilustrações ;
- Etc..
Na verdade, não é necessário ter exatamente o mesmo layout em todo o website, especialmente quando o senhor tem um grande número de páginas. O principal é encontrar o equilíbrio certo e não confundir os usuários quando eles deixam uma página para outra.
Otimizar a acessibilidade através de diferentes meios de comunicação
Através de um de seus estudos, Mobify descobriu que 30% dos usuários da Internet abortam uma transação se um website não se ajustar adequadamente ao seu dispositivo móvel. E quando sabemos que esse suporte tecnológico é o primeiro que drena o maior tráfego da Internet com uma parte de 51,6 %é importante examinar esta questão.
De fato, as páginas de seu website devem ser capazes deadaptar-se ao tamanho de todas as telas a fim de oferecer uma experiência ótima para o usuário. Além disso, Google presta muita atenção à capacidade de resposta dos sites, pois classifica em primeiro lugar aqueles que respondem em detrimento daqueles que não respondem.
Se o senhor deseja que seu website responda, confira este artigo o que lhe mostra passo a passo como fazer isso.
Respeitar as convenções ou normas da web
O já estão familiarizados com uma série de com várias convenções de web design e aconselho o senhor a respeitá-las. Estes incluem
- Coloque o logotipo na parte superior esquerda ou no centro da página e acrescente o link para a página inicial;
- Colocar o menu principal de navegação no topo ou no lado esquerdo da página;
- Estabeleça os links para que eles mudem de cor quando os usuários arrastam o mouse sobre eles.
- E assim por diante
Embora às vezes seja tentador querer ser original, não cometa o erro de mudar essas convenções. Alterá-los pode desperdiçar o tempo dos visitantes ou causar confusão, o que pode prejudicar a experiência do usuário.
Criar páginas relevantes
Uma página da Internet é criada para fornecer uma determinada informação e o senhor precisa certificar-se de que ela o faça. De fato, se o senhor planeja acrescentar páginas à página inicial, é provavelmente porque quer dar mais informações sobre seus serviços, seus produtos ou um item em particular. Para fazer isso, o senhor precisa responder a perguntas como
- Relevância da página para seus visitantes;
- O que seus visitantes precisam saber;
- Informações que os farão sentir-se confiantes;
- Informações que os inspirarão a tomar providências.
Colocando-se no lugar de seus visitantes
Porque sentem que os websites não se preocupam com sua experiência, 68% dos visitantes não se convertem, de acordo com Vitamina T. Portanto, quando o senhor estiver pensando no design de seu website, precisará colocar-se no lugar dos visitantes ponha-se no lugar de seus visitantes porque é para eles que o senhor, em última análise, está fazendo.
Nesta lógica, o senhor deve saber primeiro as preferências de seu público-alvo. Mas o senhor pode sempre testar ou pedir feedback para melhorar a experiência do usuário. Para fazer isso :
- Peça a seus amigos e familiares a opinião deles;
- Peça a seus visitantes que lhe enviem um retorno;
- Analisar o comportamento de seus visitantes com ferramentas tais como Ovo Louco ;
- Etc… [fusion_menu_anchor name=”3″ class=””][/fusion_menu_anchor]
Quando o senhor tiver uma idéia clara do aspecto de sua página, poderá agora passar à fase de criação propriamente dita e aqui estão as etapas.
Criação da página da Agência Twaino SEO: Passos para criar sua página de wordpress
Antes de criar a segunda página de meu website da Agência SEO, Twaino.com, eu tive a oportunidade de fazer duas coisas:
- A maquete das páginas do meu site;
- A página inicial do meu site.
Esses dois elementos me permitirão criar rapidamente a segunda página do meu site. E isto, na medida em que o modelo me dá uma idéia precisa do resultado e a home page será usada como modelo ou suporte.
Além disso, uso o tema “Avada”, que me permite ter o plugin “Fusion Builder”, que será útil para modificar a nova página de meu site. Também notei que para este processo, eu contei três passos principais, incluindo :
- Criação de um modelo a partir da página inicial
- Criação dos blocos para exibição em telas médias e grandes
- Criação dos blocos para a exibição de telas pequenas
No entanto, primeiro o senhor precisa entrar no seu Painel de Controle.
Faça o login no painel do seu website
Para criar a segunda página de seu website, o senhor precisa acessar o console do WordPress.
Para fazer isso, simplesmente acrescente “…./wp-admin” à URL do seu site no seu navegador. O meu é “https://twaino.com/wp-admin”.
Na página de conexão, preencha as caixas com seus identificadores e depois valide para acessar o painel de bordo.
1) Criar um modelo a partir da página inicial
Isso implica em duplicar a estrutura de sua página, a fim de usá-la como modelo em uma nova página.
1-1) Acesse os componentes de sua página inicial
Na barra lateral direita de seu Painel, clique no título “Páginas” e depois em “Todas as páginas”. O senhor terá acesso a todas as páginas de seu site, inclusive a que tem o título “Home”: esta é sua página de origem.
Em seguida, clique em “Edit”, que aparece assim que o senhor passa o mouse sobre o título da página.
Na página seguinte, o senhor verá todos os componentes ou blocos de sua página inicial no plug-in “Fusion Builder”.
1-2) Criar um modelo a partir da página inicial
Certifique-se de que a janela do Construtor esteja ativa e clique no terceiro ícone na mesma linha, do lado direito
O senhor terá então cinco janelas nesta nova interface:
- Demos ;
- Modelos ;
- Contêineres ;
- Colunas ;
- Elementos.
Selecione “Modelos” se o senhor ainda não o fez e crie um novo modelo a partir desta página.
Nomeie o modelo na caixa fornecida e clique em “Save Template” (Salvar modelo).
Eu chamo a minha “Twaino Home Page” e salvo.
1-3) Criar uma nova página
Para criar uma nova página, o senhor pode clicar na janela “+ Criar”, no alto, ao lado de “Ver página”.
O senhor também pode criar uma nova página clicando na opção “Adicionar”, na seção “Páginas” da barra lateral esquerda.
Dê um nome à nova página, digitando seu título na primeira caixa logo abaixo de “Acrescentar uma nova página”. Eu chamo a minha de “Agência SEO”.
O senhor vai notar que, por padrão, o “Fusion Builder” não está ativo. Para ativá-lo, clique no botão azul “Edit With Fusion Builder” e suas várias opções aparecerão.
1-4) Carregar o modelo salvo na nova página
Clique no terceiro ícone na mesma linha que a janela “Builder”. Na seção “Modelo”, o senhor tem o modelo que guardou e pressiona a opção “Load”.
Aparece um menu que permite ao senhor escolher como carregar o modelo em questão. Isto é :
- Substituir todo o conteúdo da página: Isso substitui todo o conteúdo que já existe na página;
- Inserir acima do conteúdo atual: Insere o conteúdo acima do conteúdo atual
- Inserir abaixo do conteúdo atual: Inserir conteúdo abaixo do conteúdo atual.
Tomo a primeira opção pelo modelo da “Twaino Home Page”, que substitui todo o conteúdo e me traz todas as partes que tive que criar em minha home page.
Depois a publico para ver como ela se apresenta. Para isso, clique no botão azul “Publicar”, no canto inferior direito, e depois clique em “Pré-visualizar”.
Em meu nível, tenho a página “SEO Agency” com o URL https://www.twaino.com/agence-seo/que se parece exatamente com a página inicial do meu site.
2) Criação de blocos para exibição em telas médias e grandes
“Fusion Builder” tem os diferentes elementos que compõem sua página da internet e à medida que o senhor descer, verá várias linhas em azul. Esses são os diferentes blocos da página e as mudanças que o senhor fizer nesse nível serão levadas em conta na versão final.
Além disso, como o senhor fez uma duplicação, basta fazer mudanças e não criar cada bloco a partir do zero.
Além disso, eu tive a oportunidade de criar a “revolução deslizante” desta nova página e vou simplesmente carregá-la. De fato, essa é a parte de sua página da Internet que se encontra logo abaixo do menu de navegação. Parece que os usuários não têm que descer até o final da página.
Se o senhor quiser fazer isso, pode simplesmente modificá-lo a partir do modelo de sua página inicial. Entretanto, se o senhor não souber como fazer isso, convido-o a verificar a criação do ” Revolução deslizante “. Siga as etapas para criar as suas próprias para cada uma de suas páginas.
2-1) Modificando o primeiro bloco
Há vários blocos nesse modelo, inclusive o bloco de separação que quero manter. Nesse caso, deixo-o e modificarei os outros blocos levando em conta minha disposição.
Desdobro o conteúdo do segundo bloco “Agência”, clicando na pequena seta à direita.
2-1-1) Modificar o texto
Para modificar o texto, clique no ícone de edição que aparece quando o senhor arrasta o cursor sobre a célula de texto.
Se o senhor descer um pouco, verá o campo de texto onde poderá inserir o novo texto e fazer a formatação.
Depois clique em “Salvar” para salvar o novo texto.
2-1-2) Inserir uma imagem
Tive a oportunidade de fazer antecipadamente todas as imagens que vou usar e o senhor pode fazer o mesmo para avançar mais rapidamente.
Clique no ícone de edição que aparece quando o senhor arrasta o cursor sobre a célula da imagem ao lado da célula de texto.
Na interface que aparece, clique no botão “Edit”, logo abaixo da imagem antiga.
O senhor tem então sua “Mediateca”, da qual pode selecionar diretamente uma imagem.
O senhor tem também a opção de importá-los, clicando na janela “Upload Files”, ao lado da “Media Library”.
Pressione o botão “Selecionar Arquivos” e procure em seu computador as imagens desejadas.
Neste momento, renomeie suas imagens, eu nomeio as minhas:
- Twaino, os jardineiros da SEO;
- SEO referência natural ;
- Clientes;
- Perícia do Google ;
- Alexandre MAROTEL ;
- Mariana Seiko Sakurada ;
- Junte-se a nós.
Depois inseri a imagem de “Twaino, os jardineiros da SEO” e a guardei para inserir a segunda imagem na terceira célula da segunda linha
Inseri também o segundo texto “Excelente SEO”, tendo o cuidado de fazer a formatação necessária.
2-1-3) Inserir outras linhas de texto e imagens
No nível do layout, há uma terceira linha contendo uma imagem e um texto. Para economizar tempo nesse nível, duplicar as células anteriores.
Para fazer isso, clique no segundo ícone que segue diretamente o ícone de edição e que aparece quando o senhor arrasta o mouse sobre a célula em questão.
No meu nível, duplico uma célula de texto e outra de imagem, que passo para o fundo. Utilizo o mesmo princípio de antes para mudar o texto e a imagem. Tenho, portanto, a terceira linha que inclui :
- O texto: Uma agência de SEO que escuta seus clientes;
- A imagem correspondente.
Eu crio uma quarta linha com :
- O texto: “Google expertise”;
- A imagem correspondente.
Guarde as mudanças e clique em “Preview” para ver o resultado. A apresentação é boa, exceto pela imagem do “Google”, que é um pouco grande demais.
2-1-4) Ajuste o tamanho de suas imagens
Quando perceber que o tamanho de uma imagem é um pouco grande demais, clique no ícone de edição de sua célula e pressione o botão “Edit”.
Em sua interface “Media Library”, o senhor verá a opção “Size” à direita e logo acima do botão “Insert into Page”. Escolha um item padrão que possa se ajustar ao que o senhor quiser.
No meu nível, escolho o tamanho “400 * 265” de Avada. A prestação é muito melhor e aproveito a oportunidade para centralizar a imagem.
Para essa última ação, clique no ícone de edição e vá até a opção “Alinhar”, depois selecione “Centro” e salve.
Também tenho o cuidado de centralizar todas as outras imagens e reduzir seu tamanho.
2-2) Acrescentar o segundo bloco
Logo abaixo do bloco “Agência”, acrescentarei o bloco “Minha Equipe”. Para isso, renomeio o bloco que se segue para “Nossa Equipe”. Neste bloco, modifico a célula de texto já presente, inserindo o título “Nossa Equipe” com o texto que o acompanha. Mantenho a mesma formatação, pois quero ter o mesmo resultado.
Vou agora inserir as duas imagens que se sucedem verticalmente com seu texto.
2-2-1) Inserir uma imagem
Tomo a cela que vou usar para minha imagem e apago todas as outras celas que não serão usadas.
Em seguida, fixei sua proporção em “1/3”, pressionando o primeiro ícone no canto superior direito da cela.
Para acrescentar a imagem, clique no elemento “+” na célula e, na nova página, procure o elemento “Imagem”. Em seguida, clique no botão “Imagem” que aparecerá e pressione o botão “Selecionar imagem” que aparece na nova interface. A “Biblioteca da mídia” aparecerá e o senhor poderá escolher a imagem que quiser.
2-2-2) Inserir um texto
Para inserir o texto que segue essa imagem, duplicar a célula e dar-lhe a proporção “2/3”. Em seguida clique em “+ Elemento” e procure o botão “Texto” desta vez.
Carregue no elemento e na interface de configuração que se segue, acrescente seu texto e proceda com a formatação do mesmo.
Para a imagem seguinte e seu texto, basta duplicar as anteriores e fazer as mudanças.
Neste momento, eu tenho :
- Minha imagem e um texto que me descreve: “Alexandre MAROTEL, ………”
- A imagem de Mariana e um texto que a descreve: “Mariana Seiko Sakurada,……”.
Guarde as mudanças e faça uma prévia para ver como fica.
2-3) Editar um bloco com uma cor de fundo e um botão
A fim de poupar tempo, convido-o a tomar os blocos antigos que mais se parecem com os que o senhor deseja criar. No meu nível, o bloco “Join Us” que quero criar tem as mesmas características que o “BLOG” do modelo.
Opto, portanto, por modificar o bloco “BLOG” e eliminar os blocos intermediários de que já não preciso. Estes são, por exemplo
- Serviços ;
- Serviços móveis ;
- Separador.
2-3-1) Inserir o texto e a imagem
Para “Junte-se a nós”, há três elementos a serem inseridos:
- Uma imagem ;
- Um texto com um título;
- Um botão.
Em primeiro lugar, apago as celas de que não preciso.
Inseri meu texto, modificando o antigo conteúdo com o mesmo princípio.
Mudo também a imagem e tenho o cuidado de dar a proporção de “½” a cada uma das duas células.
Depois coloquei a célula da imagem à esquerda e a célula do texto à direita.
2-3-2) Inserir um botão
Para inserir o botão, clique em “+ Elemento” localizado na célula de texto e procure o elemento do botão usando a barra de busca. Clique em “Button”, que o leva à interface de configuração.
Por padrão o senhor tem as opções na janela “Geral” e, se já tiver o link para seu botão, pode colocá-lo na caixa reservada para esse fim, na opção “Button URL”.
Digite o texto que será exibido no botão na opção “Button Text” (Texto do botão).
Em “Alinhamento”, selecione “Centro”, para que o texto fique centralizado no botão.
2-3-3) Acrescentar espaço entre o botão e o texto
A distância entre o texto e o botão é muito pequena, por isso vou colocar alguma distância entre eles. Para isso, criarei um separador que será colocado entre esses dois elementos.
Portanto, clique em “+ Elemento” e procure o elemento “Separador”, depois clique em seu botão. Na interface que aparece, selecione o menu “No Style” na janela “General” para a opção “Style”.
Em seguida, selecione a janela “Desenho” e, em “Margem”, defina a distância que deseja. Introduzo um valor de 5% e coloco o separador entre o botão e o texto.
Em seguida, verifico se a apresentação é agradável, clicando em “Preview”, que é o caso.
3) Criação dos blocos para exibição em pequenas telas
Note que a exibição nos computadores nem sempre é otimizada para telefones celulares. Portanto, o senhor precisa criar blocos que sejam dedicados a uma exposição móvel otimizada. O senhor pode fazer uso de meu artigo sobre o assunto o que dá muito mais detalhes.
Para verificar a exibição móvel da página, o senhor pode :
- Use seu telefone celular para ver diretamente como ele se parece;
- Reduza a guia do seu navegador para cerca de “2/3” da largura da tela do seu computador.
3-1) Duplicar e modificar o primeiro bloco
Para ir mais rápido, o senhor só precisa duplicar os blocos que criou para a exibição padrão.
No meu caso, duplico o bloco “Agência” e renomeio o segundo bloco “Agência móvel”. Para esse bloco que acaba de ser criado, modifico-o clicando na pequena seta à direita para exibir seu conteúdo.
Em seguida, reorganizo os textos e as imagens do bloco, separando cada imagem com um texto.
Também clico no ícone de edição das células de texto a fim de diminuir seu tamanho.
Para fazer isso, fixei o tamanho dos títulos em “40 pixels” em vez de “50 pixels”.
3-2) Ativar o visor móvel
Para ver as modificações feitas, o senhor deve ativar o visor móvel. Clique no ícone de edição do bloco e, na janela “Geral”, desça até “Visibilidade do Container” para ver as três opções de exibição:
- Tela pequena: Para exibição em mídia de tela pequena, como telefones;
- Tela média: Para a mídia com telas médias, como as tabletes;
- Tela grande: para meios de comunicação com telas grandes, como computadores.
Selecione o primeiro e tome o cuidado de desmarcar os outros dois. O senhor terá, então, a primeira opção, que ficará azul e as outras duas cinzas.
Essa ação só mostrará essa configuração em telas pequenas, como telefones.
Depois salve e faça uma prévia para ver a apresentação.
3-3) Criar o segundo bloco móvel
Quero criar um novo bloco móvel para “nossa equipe”. Para fazer isso, eu o duplico e o coloco em modo telefônico, usando o mesmo método de antes.
Neste momento, minha imagem já é muito grande para ser exibida por telefone. Para que seja pequeno, vou inseri-lo diretamente na cela do texto que o acompanha.
Portanto, clique no ícone de edição na célula de texto e logo acima do campo de texto pressione o botão “Add Media”.
Em seguida, escolha a imagem que deseja e eu pego minha imagem e a alinho à esquerda, tendo o cuidado de reduzir seu tamanho para “80 pixels”.
No entanto, mova o texto logo abaixo da imagem no campo, para que fique bonito. Faço a mesma coisa com a segunda imagem e seu texto, tendo o cuidado de ativar o display nos telefones celulares.
Além disso, o último bloco “Recrutamento Móvel” já tem um bom layout e eu não preciso mais mudá-lo. Só preciso ativar o visor móvel.
4) Verifique suas mudanças
Depois de fazer todas essas mudanças, dedique algum tempo para verificar como a página é exibida nos diferentes meios de comunicação. Isso permitirá ao senhor detectar quaisquer problemas e fazer as correções necessárias.
E é isso, o senhor acaba de criar a segunda página de seu site.
Conclusão
Depois de criar a home page, o senhor deve geralmente criar as outras páginas de seu website. Essas páginas fornecerão a seus visitantes informações adicionais sobre seus produtos e serviços ou apresentarão suas postagens no blog. E uma vez indexadas pelos motores de busca, essas páginas se tornam portas de entrada para os visitantes. Por essa razão, o senhor precisa assegurar-se de que cada um deles seja bem projetado e ofereça uma experiência ótima para o usuário. Para conseguir isso rapidamente, sugiro que o senhor crie primeiro a homepage perfeita e depois simplesmente a duplique como um modelo.
Até breve para outro artigo!
