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
• Duplicator Pro simplifica todo o processo: crie backups e migre alterações de e para seu ambiente de staging com facilidade
• Defina benchmarks de desempenho primeiro: acompanhe as métricas atuais com MonsterInsights para medir o sucesso do redesenho
• 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, problemas de SEO e problemas de funcionalidade após o redesenho

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:

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

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

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: Configure um ambiente de teste seguro usando o LocalWP ou as ferramentas de staging do seu provedor de hospedagem
• Etapa 4: Importe Seu Backup: Faça o upload do backup do seu site no ambiente de staging para importar seus dados ativos
• Etapa 5: Crie Seu Novo Design: Use o SeedProd ou outras ferramentas de design para criar seu site redesenhado
• Etapa 6: Lance Seu Novo Site: Crie pontos de recuperação de desastres e, em seguida, migre seu redesenho concluído para o servidor ativo
• Etapa 7: 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. 

Às vezes, seu provedor de hospedagem de sites criará automaticamente uma área de staging para você. No entanto, você também pode criar uma facilmente sozinho ou com um plugin de staging do WordPress.

Para este tutorial, usaremos o LocalWP, que é um software de desenvolvimento local amigável para iniciantes. Ele configurará e hospedará uma instalação do WordPress em seu computador pessoal. Além disso, é gratuito para usar.

Para começar, certifique-se de baixar a versão do LocalWP que corresponde ao sistema operacional do seu computador. Em seguida, adicione um novo site clicando no ícone +.

Em seguida, nomeie seu site de staging. Se você for um desenvolvedor, sinta-se à vontade para configurar uma versão personalizada de PHP, Apache e MySQL. Alternativamente, a opção Preferida irá criar um site WordPress básico.

Como último passo, insira um nome de usuário, senha e endereço de e-mail do WordPress. Você usará essas credenciais para acessar o painel do seu site de staging.

Você pode querer hospedar seu site de staging no mesmo servidor do seu site ativo. Isso garantirá que não haverá erros ao migrar alterações entre os dois sites.

Para ajudá-lo com isso, confira nosso tutorial sobre criação de um site de staging do WordPress. 

Etapa 4: Importe seu Backup

Após o LocalWP criar seu site de staging, ele será uma instalação padrão do WordPress. Para que ele se pareça e funcione como seu site ativo, você pode simplesmente importar seu backup salvo.

No seu aplicativo Local, selecione seu site e clique em WP Admin. Isso abrirá o painel do site local.

Aqui, instale e ative o Duplicator Pro como um plugin. Em seguida, encontre a página Importar Backups e carregue o arquivo de arquivo que você salvou anteriormente.

O Duplicator notificará você quando o backup for carregado. Clique em Continuar para iniciar a instalação.

Na próxima página, clique em Launch Installer.

Após isso, você verá instruções passo a passo para implantar a instalação do seu site.

Aceite os termos e avisos. Em seguida, clique em Próximo.

Finalmente, revise as configurações de instalação. Se parecerem corretas, clique em OK.

O Duplicator substituirá o site local padrão por uma cópia exata do seu site ao vivo! Você pode usar o botão Login do Administrador para acessar seu novo painel. 

Etapa 5: 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 6: 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. Em seguida, o Duplicator o guiará por 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 7: 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
• 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)

Conclusão

É isso! Você aprendeu como redesenhar um site WordPress.

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

Você não precisa gastar muito tempo movendo manualmente seu site de e para uma área de staging. Baixe o Duplicator Pro para começar a usar migrações com arrastar e soltar!