Redesign de site WordPress: guia completo

O redesign de site WordPress é o processo de renovar a aparência, os recursos e o funcionamento geral de um site para melhorar a experiência do usuário e a usabilidade.

Para alcançar esse objetivo, é importante seguir uma abordagem clara e bem estruturada. As etapas para fazer um redesign de site WordPress geralmente são:

1. Configure um ambiente de staging
2. Faça backup de todo o conteúdo e das configurações do tema
3. Renove o design do seu site WordPress
4. Adicione novos conteúdos ao seu site
5. Instale plugins adicionais para ampliar as funcionalidades
6. Teste o site
7. Publique o novo design

Neste tutorial, vamos explicar cada uma dessas etapas com mais detalhes, além de trazer dicas e pré-requisitos para fazer um redesign de site WordPress. Seja você iniciante ou web designer experiente, este guia vai ajudar a deixar o processo mais simples e organizado.

O que fazer antes de reformular um site existente

Para que tudo corra bem, redesenhar um site WordPress exige planejamento e preparação, assim como acontece ao criar um site pela primeira vez. Veja o que fazer antes de começar a reformulação.

Avalie o desempenho do site

Avaliar o desempenho ajuda você a entender quais áreas do site funcionam bem e devem ser mantidas, além de identificar o que precisa melhorar. Assim, fica mais fácil focar nos pontos certos em vez de refazer o site inteiro.

Aqui, desempenho do site se refere à velocidade de carregamento e à experiência do usuário, dois fatores diretamente ligados. Para medir esse desempenho, use métricas como taxa de rejeição, tempo na página e tempo de carregamento. Esses dados ajudam a definir uma base clara e objetiva para as metas do redesign.

Você pode usar ferramentas como o GTmetrix para medir a velocidade de carregamento. Para avaliar a experiência e a satisfação dos usuários, faça testes de usabilidade no site.

Defina o objetivo do redesign

Definir metas ao redesenhar um site existente é importante porque facilita a avaliação dos resultados. Assim, você consegue entender se a reformulação deu certo e se atende aos seus padrões.

A forma mais simples de fazer isso é definir números com base no desempenho atual do site. Veja alguns exemplos:

• Reduzir o tempo total de carregamento do site para menos de 2,5 segundos.
• Reduzir a taxa de rejeição em 25%.
• Aumentar a duração das sessões dos usuários em 30%.
• Reduzir os erros de envio de formulários para menos de 2%.

Você também pode definir metas não quantitativas, como:

• Alterar todas as imagens do site para a proporção 1:1.
• Adicionar modo noturno ao site.
• Atualizar o esquema de cores do site com uma nova paleta.

Lembre-se de que suas metas precisam ser mensuráveis, mesmo quando não forem quantitativas. Assim, você consegue avaliar com mais clareza se o redesign foi bem-sucedido.

Dependendo da dimensão do redesign, você pode definir quantas metas forem necessárias. Ajustes visuais simples podem ter apenas três objetivos, enquanto uma reformulação completa pode ter 20 ou mais.

Planeje a estrutura do seu novo site

Para finalizar o planejamento, desenhe a nova estrutura do site com base nos seus objetivos. Como na etapa anterior, esse processo vai variar de acordo com o tipo de redesign que você pretende fazer.

Por exemplo, criar um wireframe, ou seja, um esboço da estrutura básica e do layout do site, é essencial se você quiser mudar a proporção das imagens e garantir que tudo fique visualmente equilibrado. Já se a ideia for apenas trocar a paleta de cores, talvez você possa pular essa etapa.

Você pode buscar inspiração para o seu site em plataformas como o Dribbble. Para facilitar o planejamento, crie o novo design usando ferramentas de prototipagem como Figma ou Canva.

Faça backup do seu site

Antes de fazer qualquer alteração, faça backup do seu site WordPress para evitar perda de dados e facilitar a restauração se algo sair diferente do esperado.

Para quem usa a hospedagem WordPress da Hostinger, a forma mais simples de fazer backup do site é usar o recurso integrado do hPanel. Outra opção é usar plugins como UpdraftPlus, Jetpack ou All-in-One WP Migration.

Se você prefere fazer backup manualmente, basta copiar todos os arquivos e pastas para outro local usando o gerenciador de arquivos da sua hospedagem ou um cliente de protocolo de transferência de arquivos (FTP), como o FileZilla.

Para entender melhor o passo a passo, confira nosso artigo sobre como fazer backup de um site WordPress.

Como fazer um redesign de site WordPress

Agora que o planejamento está pronto, siga estas etapas para redesenhar seu site no WordPress.

1. Use um ambiente de staging

Um ambiente de staging é uma cópia idêntica do seu site WordPress que funciona de forma independente e privada. Ele permite testar novos recursos ou layouts em um ambiente realista, sem alterar o site publicado. Isso ajuda a evitar erros e períodos de indisponibilidade.

Existem três formas populares de criar um site de staging no WordPress:

• Usar o recurso da hospedagem: é o método mais simples e confiável, já que normalmente vem integrado ao painel de controle do provedor. Porém, nem todas as hospedagens oferecem essa funcionalidade.
• Usar um plugin: ideal para sites WordPress auto-hospedados ou para quem usa uma hospedagem sem recurso de staging. É relativamente simples, mas pode ser menos confiável por depender de uma extensão de terceiros.
• Criar manualmente com um subdomínio: é a opção mais complexa e demorada. Funciona melhor para desenvolvedores que querem flexibilidade total e personalização no código do ambiente de staging.

Neste tutorial, vamos configurar um ambiente de staging usando o recurso integrado da Hostinger no hPanel. Esse recurso está disponível apenas nos planos Business e Cloud de hospedagem WordPress. Veja como fazer:

1. Abra o hPanel e acesse o painel do seu site WordPress.
2. Acesse a barra lateral → WordPress → Staging.
3. Clique em Criar staging e digite um subdomínio para seu ambiente de staging.

Depois de alguns minutos, seu novo site de staging deve aparecer na lista.

Nesse menu, você pode acessar o painel administrativo do WordPress do ambiente de staging, onde os ajustes do redesign serão feitos. Para isso, clique em Gerenciar ambiente de teste e depois em Painel de administração do ambiente de teste.

2. Faça backup do conteúdo e das configurações personalizadas do tema

Se você já alterou o tema ou as funcionalidades do site com código personalizado, copie essas configurações antes de continuar. Elas podem ser sobrescritas durante o redesign. Mesmo que você já tenha feito backup do site, esse backup nem sempre inclui snippets personalizados.

O código personalizado das funcionalidades e do tema costuma ficar no arquivo functions.php. Para encontrá-lo e fazer backup, acesse o diretório de instalação do WordPress.

Você pode fazer isso usando um cliente FTP ou o gerenciador de arquivos da sua hospedagem. Veja como fazer no Gerenciador de arquivos da Hostinger:

1. Abra o hPanel e acesse o painel de gerenciamento do seu site WordPress.
2. Clique em Gerenciador de arquivos.

3. Acesse o caminho wp-content/themes/your-theme/, em que your-theme é o nome do tema ativo no momento no seu site.
4. Clique com o botão direito em functions.php e selecione Download.

Se você usa um tema filho para modificar o site, faça backup dos arquivos functions.php e style.css desse tema. Eles ficam no caminho wp-content/themes/your-theme-child/.

3. Renove o tema do WordPress

Renovar o tema é uma das partes mais importantes do redesign de site WordPress, já que ele define a aparência geral das páginas. Você pode personalizar o tema atual ou instalar um novo.

Editar o tema atual é uma boa opção para redesigns menores, quando você quer manter a maior parte dos elementos do site.

Se o tema atual não tem os recursos mais recentes, está desatualizado ou exige muitas alterações, instalar um novo tema pode ser a melhor opção. Um tema novo funciona como uma tela em branco e facilita a personalização, já que você não precisa lidar com ajustes antigos.

Veja como encontrar e instalar um tema do WordPress no seu site:

1. Abra o painel de administração do WordPress e, no menu lateral, acesse Aparência → Temas.
2. Clique no botão Adicionar novo tema.
3. No menu Adicionar temas, passe o cursor sobre o tema que você gostou e clique em Instalar. Você também pode visualizá-lo antes.

4. Depois da instalação, clique em Ativar para substituir o tema atual.

Além do painel administrativo do WordPress, você também pode encontrar e comprar temas em lojas online como o ThemeForest. Depois, basta instalá-lo clicando em Enviar tema no menu Adicionar temas.

4. Adicione novos conteúdos

Depois de instalar o novo tema, você pode começar a personalizá-lo alterando o design existente ou adicionando novos conteúdos. Esse processo pode incluir ajustes nas cores, mudanças no espaçamento interno dos elementos ou reorganização do layout da página.

Para ter mais flexibilidade, você pode editar o tema modificando o código nos arquivos style.css e functions.php. Embora esse método funcione em qualquer tema e ofereça muitas possibilidades de personalização, ele pode ser mais difícil para iniciantes.

Para quem não tem familiaridade com programação, plugins de construtores de páginas são uma alternativa mais amigável. Essas ferramentas podem facilitar a criação do layout, mas também podem gerar incompatibilidades. Além disso, precisam continuar ativas para manter as alterações de design. Ao desativar ou desinstalar o plugin, o código do design pode ser removido, e o WordPress pode voltar a exibir o site com uma estrutura básica em HTML.

Outra opção prática é usar temas de blocos com o editor nativo do WordPress. Para acessá-lo, vá até Painel do WordPress → Aparência → Editor de arquivos de tema.

Independentemente da ferramenta escolhida, siga estas boas práticas de web design no WordPress:

• Modifique o tema filho: sempre altere o tema filho em vez do tema principal para preservar as mudanças após atualizações.
• Evite edições diretas no sistema: use uma ferramenta como o VSCode para editar o código do tema. Diferente do editor nativo do WordPress, ele oferece recursos que ajudam a reduzir erros, como destaque de sintaxe e opção de desfazer.
• Use controle de versão: implemente controle de versão no WordPress para acompanhar alterações no código do site e revertê-las com facilidade quando necessário.
• Cuide do código: siga os padrões de codificação do WordPress, use hooks e filters para manter a modularidade e reduza estilos desnecessários para otimizar o desempenho.

5. Adicione plugins extras

Depois de renovar o visual, ajuste as funcionalidades do site. Com base no seu plano de redesign, talvez você só precise atualizar recursos existentes ou adicionar novas funções.

Se você pretende adicionar novos recursos, a forma mais simples é usar um plugin. Em geral, plugins são fáceis de configurar e funcionam de forma modular. Isso significa que você pode desativá-los sem alterar diretamente a estrutura do site.

Veja como encontrar e instalar um plugin do WordPress:

1. No painel administrativo do WordPress, acesse Plugins → Adicionar plugin.
2. Encontre o plugin que você quer instalar digitando o nome ou as tags dele na barra de pesquisa.

3. Clique em Instalar agora para configurar o plugin.
4. Depois da instalação, clique em Ativar.

Pronto! Dependendo do plugin, o recurso só ficará ativo depois que você concluir o assistente de configuração. Normalmente, isso pode ser feito na página de Configurações, dentro do menu de plugins instalados.

Você também pode usar plugins de terceiros e enviá-los para o WordPress. Para reduzir o risco de problemas, escolha apenas opções confiáveis e bem mantidas.

Se você quiser reajustar os recursos dos plugins, acesse Plugins → Editor de arquivos de plugin. Como esse processo envolve código e pode causar erros, siga com atenção.

6. Teste seu site

Teste o novo design e as novas funcionalidades para confirmar se todos os elementos do site funcionam corretamente. Mudanças sem revisão podem trazer bugs ou falhas de segurança que prejudicam a experiência do usuário.

A forma mais simples de verificar se o site está funcionando bem é usá-lo como se você fosse um visitante. Para facilitar, crie uma checklist com os itens que precisam ser testados, como:

• Funcionalidade geral do site: confira se todas as páginas carregam corretamente, se não exibem erros ou avisos e se os links funcionam como esperado.
• Aparência geral: veja se o site está visualmente equilibrado, se todo o conteúdo aparece corretamente e se as cores são exibidas da forma certa.
• Elementos de navegação: valide o funcionamento de menus suspensos, breadcrumbs e links.
• Formulários e itens interativos: teste formulários e outros elementos interativos, como botões, para confirmar se funcionam como deveriam.
• Compatibilidade entre plataformas: confira como o site aparece e funciona em diferentes navegadores e dispositivos móveis.
• Recursos específicos do site: avalie funcionalidades exclusivas, como o checkout de uma loja virtual ou a seção de comentários de um fórum.

Além disso, refaça os testes de usabilidade e o benchmark de desempenho para descobrir se outras áreas ainda precisam de melhorias em relação à base definida no início.

7. Publique o novo design no site

Agora que o novo design foi finalizado e testado, é hora de publicá-lo no site ao vivo. As etapas variam de acordo com a hospedagem e com a forma como o ambiente de staging foi criado.

Como criamos o ambiente de staging com o recurso nativo do hPanel, vamos mostrar como publicar seu site WordPress usando essa ferramenta. Veja o passo a passo:

1. Abra o hPanel e acesse o painel do seu site WordPress.
2. Na barra lateral, acesse WordPress → Staging.
3. Encontre seu site de staging e clique no ícone de três pontos → Publicar.

4. Na janela pop-up, clique em Publicar.

Pronto! Seu novo design já está no ar.

O que fazer depois de um redesign de site WordPress

Depois de fazer um redesign de site WordPress, o próximo passo é avaliar o sucesso da reformulação, verificar se as mudanças funcionam como esperado e identificar se ainda há pontos que podem ser melhorados.

Veja algumas práticas importantes depois de reformular um site:

• Teste novamente o funcionamento do site: verifique de novo todos os recursos e a aparência no ambiente de produção para confirmar se tudo funciona corretamente. Isso é importante porque alguns elementos de design podem mudar ao sair do staging para o site publicado.
• Configure testes A/B: faça testes A/B para comparar o desempenho do novo design com o antigo. Também compare o desempenho atual com a base definida antes do redesign para entender se mais ajustes são necessários.
• Configure o monitoramento: acompanhe regularmente o desempenho do site para ver se as mudanças afetam a velocidade de carregamento ou o uptime. Assim, você consegue identificar problemas rapidamente e agir antes que eles impactem mais visitantes.
• Atualize plugins e temas: manter plugins e temas sempre atualizados ajuda seu site WordPress a continuar seguro e livre de bugs. Você também pode configurar atualizações automáticas se a sua hospedagem oferecer esse recurso.
• Gere novamente o sitemap XML: se você mudou a estrutura do site, atualize e reenvie o sitemap XML aos mecanismos de busca. Isso ajuda o Google e outros buscadores a atualizarem as informações do site para indexação e rastreamento.

Conclusão

Fazer um redesign de site WordPress não é uma ação única. À medida que o site cresce e recebe mais visitantes, otimizações regulares ajudam a manter uma boa experiência para o usuário.

Além disso, redesenhar o site de tempos em tempos ajuda a manter suas páginas alinhadas aos objetivos do negócio e às necessidades do público.

Agora que você já sabe como reformular um site de forma eficiente, é hora de colocar a mão na massa. Se você usa a Hostinger, pode aproveitar nossas ferramentas integradas de backup e staging para deixar o processo de redesign mais simples.

Perguntas frequentes (FAQ) redesign de site WordPress

Todo o conteúdo dos tutoriais deste site segue os rigorosos padrões editoriais e valores da Hostinger.

O autor

Ana Guimarães

Formada em Tradução e Interpretação pela Universidade São Judas Tadeu, deu seus primeiros passos na carreira como estagiária na Livraria Cultura, no coração de São Paulo, há mais de uma década. Desde então, não parou mais. Atualmente, trabalha como tradutora e copywriter na Hostinger, combinando seus conhecimentos técnicos com criatividade para oferecer conteúdo de qualidade.

Mais de Ana Guimarães