Como Redesenhar um Site WordPress (Sem Interrupção)

Seu site ainda parece com o que era há alguns anos? Um site pode rapidamente parecer desatualizado, e você pode notar que ele não está mais capturando a atenção dos visitantes como antes.

Não se trata apenas de querer um visual novo; você quer que seu site seja uma ferramenta poderosa que impulsione seus negócios.

Um redesenho é um movimento estratégico para atualizar sua presença online e garantir que seu site WordPress esteja trabalhando o máximo para você.

Se feito corretamente, um redesenho pode aumentar o engajamento, as conversões e o reconhecimento da marca. Mas como fazer isso?

Neste tutorial, mostrarei como redesenhar seu site WordPress!

Aqui estão os principais pontos:

• Use sites de staging para redesenhar sem tempo de inatividade: trabalhe no seu redesenho em particular enquanto seu site ativo permanece online
• O staging de um clique do Duplicator Pro simplifica todo o processo: Crie um site de staging diretamente do seu painel a partir de qualquer backup completo do site
• Defina benchmarks de desempenho primeiro: Acompanhe as métricas atuais com MonsterInsights e Google Search Console para medir o sucesso da reformulação
• Sempre crie pontos de recuperação de desastres: faça backup do seu site original antes de publicá-lo para permitir rollbacks instantâneos, se necessário
• Auditorias completas pós-lançamento são essenciais: Verifique links quebrados, redirecionamentos 301, Core Web Vitals, problemas de SEO e problemas de funcionalidade após a reformulação

Resumo Rápido: Como Redesenhar um Site WordPress

Sumário

Por que Redesenhar seu Site WordPress?

Você pode estar adiando o redesenho do seu site porque tem medo de que leve muito tempo ou coloque seu site em modo de manutenção. No entanto, aqui estão algumas situações em que um redesenho seria útil.

• Design Desatualizado

Se o seu site parece desatualizado, carece de recursos modernos ou não atende aos padrões de design atuais, pode ser hora de um redesenho.

Um design de site atualizado pode aprimorar a experiência dos seus visitantes e tornar seu site mais envolvente e profissional.

• Experiência do Usuário Ruim

Se os usuários acharem difícil navegar no seu site ou experimentarem lentidão no carregamento das páginas, isso pode levar a uma alta taxa de rejeição e diminuição das conversões.

Redesenhar seu site WordPress com foco na Experiência do Usuário (UX) pode ajudar a resolver esses problemas e manter seu público engajado.

• Não Responsivo ou Não Amigável para Dispositivos Móveis

Muitas pessoas usam seus dispositivos móveis para navegar na internet. Isso significa que é importante ter um site responsivo que se adapte a diferentes tamanhos de tela.

Se o seu site atual não for amigável para dispositivos móveis ou carecer de responsividade, pode ser hora de redesenhá-lo para maximizar a acessibilidade.

• Mudanças de Marca ou Mensagem

Se sua marca passou por mudanças significativas ou você deseja reformular sua mensagem, um redesenho de site pode dar a você uma nova identidade de marca. Ter essa consistência na marca e na mensagem fortalecerá sua imagem geral e o ajudará a alcançar seu público-alvo.

• Melhorias de Otimização para Mecanismos de Busca (SEO)

Os mecanismos de busca atualizam seus algoritmos com frequência e as melhores práticas de SEO mudam com o tempo. Um redesenho de site oferece uma oportunidade para otimizar a estrutura do seu site, melhorar a velocidade de carregamento das páginas e implementar elementos amigáveis para SEO para aumentar seu tráfego orgânico.

• Novos Recursos

À medida que seu negócio evolui, você pode precisar adicionar uma loja de e-commerce, um blog ou feeds de mídias sociais ao seu site. Com um redesenho, você pode integrar esses novos recursos de forma integrada e garantir que eles se alinhem com o design geral e a experiência do usuário.

O que fazer antes de redesenhar seu site WordPress

Mais tarde, mostraremos como redesenhar completamente seu site WordPress. No entanto, há algumas etapas que você deve seguir antes.

Avalie seu design atual

Antes de redesenhar seu site, considere o design atual. Você vai querer estar ciente de seus bons recursos, bem como de qualquer coisa que gostaria de melhorar.

Certifique-se de anotar o que você gosta em seu site original. À medida que você avança no redesenho, você vai querer manter esses recursos e funcionalidades.

Mas, considerar suas áreas fracas é importante para um bom redesenho. Ao corrigir layouts e paletas de cores ruins, você terá um site que tem um bom desempenho e é agradável de se ver.

Verifique seus benchmarks atuais

Para ver se um redesenho foi eficaz, você precisará conhecer as estatísticas atuais do seu site.

Você pode facilmente verificar seus benchmarks atuais instalando o MonsterInsights. Este é um plugin que conecta o Google Analytics ao seu back-end do WordPress, compilando todos os seus dados de desempenho em um único local.

Depois de adicionar o MonsterInsights ao seu site, encontre o relatório Páginas/Posts Principais. Aqui, você verá quantos visitantes você está recebendo:

Se você quiser salvar quaisquer dados do MonsterInsights, clique no botão Exportar Relatório PDF. Isso baixará um arquivo zip com suas visualizações de página, sessões de usuário, taxa de rejeição e muito mais:

Quer ver o que mais o MonsterInsights pode fazer? Leia nossa análise completa!

Você também deve extrair suas pontuações do Core Web Vitals do Google Search Console. Vá para Experiência » Core Web Vitals e exporte seus relatórios para dispositivos móveis e desktop.

Estas são as métricas de desempenho que o Google usa para avaliar a experiência do usuário, e vale a pena acompanhá-las antes e depois de uma reformulação para confirmar que você melhorou (não prejudicou) seu desempenho de pesquisa.

Ao salvar essas estatísticas, você pode ver facilmente se sua reformulação valeu a pena. Você poderá comparar análises antes e depois que o novo design entrar em vigor.

Tenha metas para o redesenho

Depois de conhecer seus benchmarks de desempenho, você pode definir metas para o redesenho.

Com um bom redesenho, você pode:

• Acelerar o tempo de carregamento
• Aumentar as taxas de conversão
• Reduzir a taxa de rejeição
• Aumentar o tempo médio na página
• Melhorar a experiência do usuário
• E mais!

Você também pode experimentar um rebranding com novas cores, logotipos ou layouts. Certifique-se de registrar seus benchmarks de desempenho antes e depois do redesenho. Essas métricas ajudam você a decidir se o redesenho foi bem-sucedido ou não.

Defina um orçamento

Finalmente, você precisará decidir qual será seu orçamento para o projeto. Alguns custos básicos para um redesenho incluem a compra de um novo tema ou a contratação de um designer profissional de sites.

Se você quiser economizar dinheiro para outras áreas do seu negócio, recomendamos que faça o redesenho você mesmo. Com um bom construtor de temas, você não precisará de nenhuma habilidade de codificação para construir seu novo site.

Como Redesenhar um Site WordPress

Quando você decidir melhorar o design do seu site, talvez não saiba como fazer isso. Não se preocupe, vou guiá-lo em cada etapa do caminho!

• Etapa 1: Instale o Duplicator Pro: Um plugin de backup e migração facilita a migração do seu site para uma área de staging para o redesenho
• Etapa 2: Crie uma Cópia do Seu Site Ativo: Gere um backup completo do seu site atual e baixe-o
• Etapa 3: Crie um site de staging: Use o Duplicator para transformar instantaneamente o backup do seu site ativo em um site de staging
• Etapa 4: Crie seu novo design: Use o SeedProd ou outras ferramentas de design para criar seu site redesenhado
• Etapa 5: Lance seu novo site: Crie pontos de recuperação de desastres e, em seguida, migre sua reformulação concluída para o servidor ativo
• Etapa 6: Audite seu site redesenhado: Verifique erros, links quebrados, problemas de SEO e funcionalidade geral

Etapa 1: Instale o Duplicator Pro

Se você está considerando um redesenho, não vai querer criar uma instalação WordPress totalmente nova do zero. Mesmo que esteja refazendo todo o seu site, é importante manter todas as suas postagens, páginas, plugins e outros detalhes importantes.

Para evitar qualquer perda de dados, recomendo criar uma cópia do seu site ativo e movê-la para um site de staging. Aqui, você pode criar um novo design sem afetar seus usuários ativos.

A melhor ferramenta para este trabalho é o Duplicator. Este plugin do WordPress é um poderoso aliado para backups, migrações e clonagens. Ele baixa todo o seu site como um único arquivo zip, facilitando a movimentação.

Não tem certeza se precisa do Duplicator durante o processo de redesenho? Veja como o Rock Lobster Webdesign aumenta a eficiência do design com o Duplicator!

Primeiro, selecione uma assinatura para o Duplicator Pro. Existe uma versão gratuita disponível, mas o Duplicator Pro vem com migrações de arrastar e soltar. Isso pode ajudar você a colocar seu redesenho em funcionamento rapidamente.

Após concluir sua compra, copie sua chave de licença. Em seguida, abra o painel do seu site WordPress ativo e instale o Duplicator.

Em seguida, vá para Duplicator Pro » Configurações » Geral.

Cole sua chave de licença e clique no botão Ativar. Agora você está pronto para começar o processo de redesenho!

Etapa 2: Crie uma Cópia do seu Site Ativo

Para a próxima etapa, você precisará criar uma cópia (ou backup) do seu site. Backups manuais podem ser trabalhosos, mas o Duplicator torna isso simples para iniciantes.

O Duplicator funciona fazendo backup de todos os seus arquivos do WordPress, temas, plugins e tabelas de banco de dados em um arquivo zip. Assim que você criar um backup, poderá facilmente movê-lo para um servidor totalmente novo.

Primeiro, vá para Backups » Adicionar Novo.

Você pode usar tags dinâmicas para nomear o backup. Em Armazenamento, selecione Local.

Em seu redesenho, você pode querer excluir certas partes do seu site. Nesse caso, você pode personalizar o arquivo de backup. Simplesmente expanda a seção Backup e desmarque quaisquer componentes que você não queira incluir.

Para fazer backup de todo o seu site, não faça nenhuma alteração. Em seguida, clique em Avançar. 

O Duplicator completará uma varredura completa do seu site ativo. Certifique-se de revisar quaisquer avisos antes de criar o backup.

Após a criação do seu backup, você poderá baixá-lo.

Se você planeja usar um ambiente de staging local como o LocalWP, este software geralmente instalará o WordPress para você. Nesse caso, você só precisará baixar o arquivo de backup.

No entanto, para fazer o upload do seu backup diretamente para um servidor com um cliente FTP ou cPanel, certifique-se de salvar o script installer.php também. 

Etapa 3: Crie um Site de Staging

Ao se preparar para uma grande tarefa como um redesenho, é importante ter um site de staging. Esta é uma versão clonada do seu site que você pode usar para testar alterações sem afetar a funcionalidade ou a aparência do seu site ativo. 

Se você redesenhar seu site ativo, poderá publicar acidentalmente falhas para seu público.

Usando um site de staging, você terá um espaço seguro e controlado para garantir que tudo esteja funcionando corretamente antes de publicar. Além disso, você não precisará colocar seu site existente em modo de manutenção enquanto o redesenha. 

Configurar um ambiente de staging costumava ser a parte mais frustrante de uma reformulação. Você tinha que descobrir as ferramentas de staging do seu host, configurar um ambiente de desenvolvimento local como o LocalWP ou copiar manualmente os arquivos para um subdomínio.

O Duplicator Pro remove tudo isso. Com o staging de um clique, você pode criar um site de staging diretamente do seu painel do WordPress.

Vá para Duplicator Pro » Staging e crie seu primeiro site de staging.

Escolha o backup que você criou na etapa anterior. Dê um título ao site e um esquema de cores de administrador personalizado para que seja fácil saber que você está editando seu site de staging, não o ativo.

Assim que a clonagem for concluída, faça login no painel de administração do seu site de staging. Tudo parece e funciona exatamente como seu site ativo. Seu público não vê nada.

Se você é um desenvolvedor que prefere trabalhar localmente, o LocalWP ainda é uma opção sólida. Baixe a versão que corresponde ao seu sistema operacional, adicione um novo site e importe um backup do Duplicator. Mas para a maioria dos proprietários de sites, o staging de um clique é o caminho mais rápido.

Etapa 4: Crie seu novo design

Agora que você tem um site de staging, pode fazer um redesenho completo enquanto seu site original ainda está no ar.

Embora você possa projetar seu site com os editores integrados do WordPress, eles não são muito fáceis de usar ou flexíveis. 

Para projetar facilmente qualquer tipo de site, recomendo o uso do SeedProd. SeedProd é o melhor construtor de sites porque vem com edição de arrastar e soltar, mais de 150 modelos de landing page e até temas de site pré-construídos.

Embora o SeedProd tenha começado como um construtor de landing pages, ele evoluiu para personalizar todas as partes do seu site. Usando seu construtor de temas, você pode facilmente projetar novas páginas, cabeçalhos, rodapés e muito mais.

Para aproveitar todos esses recursos, instale e ative o SeedProd em seu site WordPress local. Em seguida, vá para SeedProd » Theme Builder » Theme Template Kits.

Isso lhe dará muitos kits de temas pré-projetados diferentes para escolher. Em vez de codificar manualmente cada modelo de página do zero, o SeedProd pode acelerar o processo de design.

Você encontrará sites para portfólios, negócios online, blogs e muito mais.

Depois de selecionar um novo tema, você terá modelos para sua página inicial, posts, cabeçalhos e rodapés. Para editar qualquer um deles, clique em Edit Design.

Você pode então usar o construtor de páginas do SeedProd para personalizar totalmente seu tema. Sinta-se à vontade para arrastar e soltar novos blocos na página, editar fontes, atualizar cores padrão e fazer quaisquer outras alterações.

Certifique-se de salvar suas alterações quando terminar. Em seguida, publique cada modelo de tema. Na parte superior da página, ative o novo tema SeedProd.

Se você quiser um guia mais aprofundado sobre como projetar um site com o SeedProd, confira este post sobre como criar um tema WordPress personalizado sem código. 

Etapa 5: Lance seu novo site

Depois de redesenhar completamente seu novo site, é hora de publicar suas alterações!

Com o Duplicator, tudo o que você precisará fazer é criar um backup do site de staging. Em seguida, baixe o arquivo de arquivo do backup.

Antes de importar isso para o seu site ao vivo, considere definir um ponto de recuperação de desastres. Basicamente, isso salvará um backup do seu site logo antes de você atualizar seu design. Se você notar algum erro crítico que perdeu durante o desenvolvimento, pode simplesmente reverter para este backup.

Para fazer isso, crie um backup do seu site original. Certifique-se de selecionar Local como o local de armazenamento.

Continue criando o backup. Assim que terminar, clique no ícone da casa azul.

Clique em Configurar Recuperação de Desastres.

Neste ponto, copie o link de recuperação ou baixe o arquivo do launcher. Se você salvá-los em um local seguro, poderá usá-los para recuperar seu site instantaneamente.

Agora é hora de importar seu redesenho. Para fazer isso, vá para a página Importar Backups e carregue o arquivo zip do seu site de staging. O Duplicator o guiará em como importar seu backup para o site. 

Para mais detalhes, confira nosso tutorial sobre como mover um site WordPress local para um servidor ativo.

Etapa 6: Audite seu site redesenhado

Mesmo que você tenha verificado erros em seu site de staging, pode ter deixado algo passar. Após colocar seu redesenho no ar, é importante revisar completamente seu site para garantir que ele esteja com a aparência e funcionando corretamente.

Para garantir que sua otimização para mecanismos de busca (SEO) esteja em dia, considere fazer uma auditoria completa de SEO. All-in-One SEO é o melhor plugin de SEO para isso, pois oferece uma lista de sugestões de SEO amigável para iniciantes para o seu site.

Eu também recomendaria criar um formulário de ticket de suporte. Dessa forma, seu público poderá relatar quaisquer bugs ou erros 404 que impactem sua experiência em seu site.

Usando um plugin como o WPForms, você pode começar com um modelo de ticket de suporte e editar o formulário de contato para atender às suas necessidades específicas.

Aqui estão algumas outras tarefas que você deve realizar logo após um redesenho:

• Verifique links quebrados e adicione redirecionamentos, se necessário
• Revise suas páginas e posts da web com melhor desempenho novamente
• Certifique-se de que quaisquer títulos, subtítulos e meta descrições permaneceram consistentes antes e depois da migração
• Teste a velocidade de carregamento da sua página
• Exclua plugins que não estão sendo usados ativamente
• Revise seu sitemap XML e corrija quaisquer erros
• Verifique seu site em relação aos padrões básicos de acessibilidade WCAG 2.2
• Compare suas pontuações do Core Web Vitals com os benchmarks que você salvou antes do redesenho. Preste muita atenção ao LCP (velocidade de carregamento), INP (interatividade) e CLS (mudança de layout).
• Teste seu redesenho em diferentes navegadores

Após tudo isso, você terá um redesenho bonito que atrai novos visitantes e os mantém voltando ao seu site repetidamente! 

Perguntas Frequentes (FAQs)

É Hora de Parar de Redesenhar no Seu Site Ativo

A maioria dos proprietários de sites WordPress pula a etapa de staging porque costumava parecer um trabalho extra. Configurar o LocalWP, configurar um subdomínio e transferir arquivos manualmente era atrito suficiente para tornar o pulo razoável.

Essa desculpa acabou. O staging com um clique do Duplicator Pro transforma o que costumava ser uma configuração de 30 minutos em um único clique de botão. Seu site ativo permanece online, seus visitantes não veem nada e você obtém um ambiente privado para quebrar coisas sem consequências.

O lado de SEO de um redesenho ainda requer atenção após o lançamento. Um novo design bonito que quebra seus URLs de melhor desempenho ou afunda suas pontuações do Core Web Vitals pode causar danos reais nos rankings de pesquisa antes que você perceba. Execute uma auditoria antes de considerar o projeto concluído.

Você não precisa gastar muito tempo movendo manualmente seu site de e para uma área de staging. Experimente o staging com um clique do Duplicator Pro a partir de qualquer backup completo do site!

Enquanto você está aqui, você pode gostar destes tutoriais do WordPress e análises de plugins:

• 15 Melhores Temas WordPress para Construir um Site Deslumbrante
• Como Limpar um Site WordPress (11 Dicas de Especialistas)
• Como Mudar seu Tema WordPress
• Como Criar um Backup do WordPress na Nuvem
• 9 Melhores Plugins para Clonar um Site WordPress
• Como Otimizar Seu Banco de Dados WordPress