Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como visualizar seu site WordPress antes de colocá-lo no ar

Como visualizar seu site WordPress antes de colocá-lo no ar 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Quer saber como visualizar seu site WordPress antes de colocá-lo no ar?

Depois de atualizar seu website, a última coisa que você quer é clicar em publicar e perceber que algo não está certo. É por isso que é importante visualizar suas alterações antes de entrar no ar.

Neste artigo, mostraremos a você como visualizar seu site WordPress e garantir que tudo funcione corretamente antes de colocá-lo no ar para o público.

Antes de começarmos, vamos ver por que é essencial verificar as alterações do seu site antes de divulgá-las aos visitantes do site.

Por que você deve visualizar seu site antes de publicá-lo

Antes de publicar qualquer alteração no WordPress, é importante verificá-la. Isso permite que você procure por problemas de design, problemas de plug-in e até mesmo erros de ortografia e gramática.

A visualização prévia do seu site WordPress também permite que você veja se ele é exibido corretamente em dispositivos móveis. Se isso não acontecer, você corre o risco de perder tráfego, leads e vendas valiosos.

O mesmo se aplica a desenvolvedores e web designers. Em algum momento, você precisará de uma maneira fácil de fornecer aos clientes uma prévia do site antes de colocá-lo no ar. Dessa forma, eles poderão avaliar seu trabalho, solicitar alterações e, finalmente, aprovar o projeto.

Então, como você visualiza as alterações no WordPress antes de publicá-las? Continue lendo para descobrir.

Como visualizar seu site WordPress antes de colocá-lo no ar

Abaixo, compartilhamos várias maneiras de visualizar um site WordPress antes de colocá-lo no ar. Algumas usam os recursos padrão do WordPress, enquanto outras exigem a ajuda de um plug-in do WordPress e de um provedor de hospedagem do WordPress.

Dito isso, começaremos com a solução mais fácil primeiro. Vamos nos aprofundar.

1. Visualizar publicações e páginas com o editor do WordPress

O WordPress tem muitos recursos úteis que são fáceis de não serem percebidos pelo usuário comum, mesmo que estejam bem na sua frente. Um deles é a configuração de visualização do site.

Quando estiver criando ou atualizando um novo post ou página no WordPress, não vá direto para o botão Publicar. Em vez disso, selecione o link Visualizar na parte superior do editor do WordPress.

Visualize as postagens e páginas do seu site WordPress com o link de visualização

Ao clicar nesse link, você poderá visualizar o conteúdo do WordPress:

  • Desktop
  • Tablet
  • Celular
Opções de visualização no editor de blocos do WordPress

Você pode até mesmo visualizar seu site WordPress em uma nova guia do navegador.

Você pode visualizar o conteúdo do WordPress em uma nova guia

Se não estiver satisfeito com as alterações, você pode clicar no botão Desfazer na barra de ferramentas.

Desfazer alterações no WordPress

Ou você pode clicar na opção Revisões no painel direito para comparar diferentes versões do seu conteúdo.

Clique na configuração de revisões do WordPress

A partir daí, você pode restaurar uma versão anterior e clicar em publicar.

Restaurar versões anteriores de seus posts e páginas do WordPress

Essas opções do WordPress são inestimáveis quando você sabe onde elas estão. Mas, como mencionamos anteriormente, elas nem sempre são óbvias de imediato.

2. Visualizar um tema do WordPress com o Live Preview

Às vezes, não é o conteúdo que você deseja alterar no WordPress, mas todo o tema do WordPress. Pode ser que seu tema atual esteja desatualizado ou que você queira um novo visual para seu site.

Seja qual for o motivo, você precisará de uma maneira de visualizar seu novo tema do WordPress antes de ativá-lo em seu site. Caso contrário, será difícil saber se o design tem a aparência e funciona adequadamente com seu conteúdo específico e as configurações do WordPress.

Para visualizar um tema no WordPress, navegue até Appearance " Themes na área de administração do WordPress. Isso mostrará todos os temas que você tem instalados no momento.

visualizar seus temas do WordPress atualmente instalados

Para ver a aparência de um tema diferente, passe o mouse sobre a miniatura do tema e clique no botão Live Preview.

Clique na opção de visualização ao vivo do tema do WordPress

Em seguida, o WordPress abrirá uma visualização do seu site como ele ficaria com o novo tema.

Visualize seu tema no personalizador do WordPess

A partir daí, você pode examinar as diferentes configurações do tema (falaremos mais sobre isso posteriormente) e clicar no botão Activate & Publish para ativar o tema em seu site.

Se não gostar da visualização, você sempre poderá clicar no botão Alterar no painel esquerdo.

Clique no botão Alterar para alterar a visualização do tema

Isso permite que você escolha um tema diferente para visualizar entre todos os temas instalados em seu site.

Visualizar seus temas do WordPress instalados

Como alternativa, você pode clicar na opção WordPress.org para ver centenas de temas gratuitos do WordPress disponíveis no repositório de temas do WordPress.

Visualizar temas do WordPress.org

Dentro desse painel, você pode instalar qualquer tema e seguir as etapas acima para visualizá-lo em seu site.

3. Visualização de configurações e widgets com o Live Customizer

Digamos que você esteja satisfeito com o tema do WordPress, mas queira alterar algumas coisas para tornar o site mais fácil de usar. Talvez você queira adicionar alguns widgets à barra lateral ou mostrar somente as publicações do blog na página inicial.

Normalmente, você precisaria alterar manualmente essas configurações acessando Configurações " Leitura no painel do WordPress.

Configurações de leitura do WordPress

Ou Appearance " Widgets para adicionar widgets à sua barra lateral.

Configurações do widget do WordPress

Mas há uma maneira mais fácil de alterar essas configurações e ver uma prévia de suas alterações em tempo real. É o chamado WordPress Customizer.

Você pode acessar o Customizer de qualquer lugar do seu site WordPress. Se estiver visualizando a parte frontal do seu site, basta clicar em Personalizar na barra de ferramentas superior.

E se você estiver no back-end do seu site, poderá navegar até Appearance " Customize.

Depois de clicar na opção Personalizar, a versão atual do seu site será aberta em uma nova tela.

Personalizador ao vivo do WordPress com visualização do site

No painel esquerdo estão todas as diferentes configurações do site, incluindo:

  • Identidade do site
  • Aparência
  • Cabeçalho
  • Menus
  • Widgets
  • Configurações da página inicial
  • CSS adicional
  • E mais

E, à direita, há uma visualização ao vivo de seu site. Você pode ver todas as alterações feitas nas configurações do site em sua visualização em tempo real.

Por exemplo, para adicionar um novo widget ao seu site, clique no título Widgets e escolha uma barra lateral à qual adicionar seu widget.

Clique no cabeçalho do widget para visualizar suas barras laterais

Em seguida, clique no botão Add a Widget para escolher entre os widgets disponíveis em seu site.

Escolha um widget para adicionar à barra lateral

Depois de clicar para escolher um widget, ele aparecerá instantaneamente no painel de widgets e na visualização do site.

Visualize seu widget no personalizador do WordPress em tempo real

Todo esse processo permite que você personalize e visualize seu site WordPress antes de publicar as alterações e entrar no ar. Lembre-se apenas de clicar em Publicar quando estiver satisfeito com a aparência de tudo.

4. Visualizar páginas de destino do WordPress com o SeedProd

Muitos proprietários de sites querem aumentar os leads e as vendas de seus negócios. E a melhor maneira de fazer isso é com uma ótima estratégia de marketing digital e páginas de destino de alta conversão.

No entanto, muitos plug-ins de página de destino não oferecem uma maneira fácil de visualizar seus designs antes de colocá-los no ar. Ou, se oferecem, não têm recursos essenciais, como visualizações móveis e edição ao vivo.

Se você quiser criar páginas de destino bem-sucedidas no WordPress e ver facilmente uma demonstração instantânea ao vivo, sugerimos usar o SeedProd.

SeedProd, o melhor plugin de página de destino do WordPress

O SeedProd é o melhor construtor de páginas de destino do WordPress com funcionalidade de criação de temas, em breve e em modo de manutenção. Seu construtor de páginas de arrastar e soltar permite que você crie qualquer página de destino sem contratar um desenvolvedor.

Com vários modelos de página de destino multiuso, você pode começar a trabalhar rapidamente. E você pode personalizar cada elemento da página para obter o máximo de leads para sua empresa.

O SeedProd tem tudo o que você precisa para criar páginas de destino de alto desempenho, incluindo:

Siga este guia para saber como criar uma página de destino com o SeedProd.

Quando terminar de criar sua página de destino, clique no ícone Mobile Preview (Visualização móvel ) na parte inferior da tela.

Clique no ícone de visualização móvel

Isso abre uma demonstração ao vivo de sua landing page no celular. A partir daí, você pode visualizar a versão móvel da sua landing page e fazer alterações até que ela tenha a aparência desejada.

Visualize sua página de destino do WordPress no celular antes de colocá-la no ar

Para voltar à visualização da área de trabalho, basta clicar no mesmo ícone.

Visualize sua landing page do WordPress no desktop antes de colocá-la no ar

Você também pode visualizar toda a sua landing page em uma nova guia do navegador. Primeiro, clique no botão verde Save (Salvar ) para armazenar suas alterações mais recentes e, em seguida, clique no botão Preview (Visualizar ).

Visualize sua página de destino do WordPress em uma nova guia do navegador

A visualização da sua landing page será aberta em uma nova guia para que você possa ver como ela está.

Visualização da página de destino em uma nova guia do navegador

5. Visualize seu tema do WordPress com o SeedProd

Além de criar páginas de destino, o SeedProd também inclui um poderoso construtor de temas do WordPress. Ele usa a mesma funcionalidade de arrastar e soltar do construtor de páginas, permitindo que você crie temas personalizados do WordPress sem escrever código ou contratar um desenvolvedor.

Isso também significa que você não precisará fazer upload e instalar arquivos de temas do WordPress separados: você pode fazer tudo isso com um plano SeedProd Pro.

Você pode criar todas as partes que compõem o layout de um tema do WordPress com o SeedProd. Basta escolher um modelo de tema predefinido na biblioteca.

modelos de temas do wordpres seedprod

Em seguida, você pode editar as condições de exibição e as partes do tema para atender às necessidades do seu site.

Criador do tema Seedprod

A partir daí, você pode personalizar cada seção do seu tema no editor visual, como fez com a sua página de destino.

Personalizar a página inicial do tema do WordPress

Quando estiver satisfeito com o design e o layout do seu tema, você poderá visualizar o visual no visualizador de sites para celular e desktop do SeedProd.

Visualizador de site móvel com tema WordPress

Assim como o construtor de páginas, você pode desativar a visibilidade de diferentes elementos para layouts móveis e de desktop.

6. Visualização do trabalho de desenvolvimento com ambientes de preparação

Os métodos acima são uma ótima maneira de visualizar pequenas alterações em seu site WordPress. Mas se estiver planejando algumas atualizações importantes ou trabalhando em um projeto de desenvolvimento para um cliente, precisará de algo um pouco mais avançado.

Nessa situação, sugerimos o uso de um site de teste, também conhecido como site de desenvolvimento.

Um site de teste é um clone do site ativo em que você está trabalhando. Ele permite testar quaisquer novas alterações em um ambiente seguro antes de publicá-las em seu site de produção (site ativo).

Muitos hosts da Web oferecem ambientes de preparação e produção como parte de seus pacotes de hospedagem. A opção mais popular é a Bluehost.

bluehost melhor solução de hospedagem WordPress

O Bluehost é o melhor provedor de hospedagem gerenciada para WordPress do mercado e é oficialmente recomendado pelo WordPress.org. Ele oferece uma ampla variedade de planos de hospedagem para iniciantes e empresas de médio a grande porte com suporte ao cliente 24 horas por dia, 7 dias por semana.

Todos os planos de hospedagem WordPress gerenciada da Bluehost também oferecem ambientes de teste integrados, para que você possa testar novos recursos antes de colocá-los em seu site ativo. Confira esta análise da Bluehost para saber todos os detalhes sobre por que ela é a melhor opção para sites WordPress em crescimento.

Agora, vamos dar uma olhada em como configurar um ambiente de teste com a Bluehost.

Primeiro, faça login na área de administração do seu site WordPress e navegue até Bluehost " Staging. Isso o levará a uma tela que explica o que é um site de teste e o URL do seu site de produção.

Crie um site de teste para visualizar o site do WordPress antes de colocá-lo no ar

Para criar seu ambiente de teste, clique no botão Create Staging Site (Criar site de teste ).

Em seguida, a Bluehost preparará o ambiente de teste para o seu site. Quando terminar, será exibida uma tela com a opção de visitar o site de preparação ou de produção.

Escolha a opção de site de teste da bluehost

Clique na opção Staging Site (Site de teste) para acessar a área de administração de seu site de teste do WordPress. Você verá um botão vermelho na parte superior da barra de administração para mostrar que está trabalhando em um ambiente de teste.

O rótulo vermelho indica que você está usando seu ambiente de preparação

Agora, você pode continuar trabalhando no seu site sem se preocupar se isso afetará o site ativo.

Quando estiver pronto para publicar suas alterações no site ativo, clique na seta para baixo ao lado do botão Deploy All Changes (Implantar todas as alterações ).

Implemente suas alterações em seu site de produção ao vivo

Você verá três opções de implementação:

  • Implantar todas as alterações
  • Implantar somente arquivos
  • Implantar banco de dados

Se não tiver certeza, clique no botão Deploy All Changes (Implantar todas as alterações ) para enviar todas as alterações do ambiente de preparação para o site ativo do WordPress.

7. Permita que os clientes visualizem o site antes de colocá-lo no ar

Ter um ambiente seguro para desenvolver e testar alterações em um site WordPress é uma boa ideia para todos os proprietários de sites WordPress. Mas se você for um web designer ou desenvolvedor de WordPress, é provável que queira permitir que os clientes visualizem o site WordPress deles antes de confirmar as alterações.

Claro, você poderia enviar a eles um link para seu site de teste. Mas se eles usarem um host da Web que não ofereça esse recurso, você não poderá fazê-lo.

É por isso que sugerimos a instalação do plug-in da página de destino SeedProd. Ele inclui controles de acesso avançados que permitem ocultar do público o processo de construção de um site.

Por exemplo, se você estiver criando um novo site para um cliente, poderá ocultá-lo por trás de uma página "Em breve". Em seguida, pode usar os controles de acesso para enviar um link ao cliente da Web para que ele possa visualizar o seu trabalho.

Veja como mostrar aos clientes uma prévia de seu site antes de entrar em operação com o SeedProd.

Primeiro, siga estas instruções para criar uma página de informações em breve no WordPress.

Em seguida, navegue até SeedProd " Pages para ver os diferentes modos de página de destino.

Ativar o modo "Em breve" do WordPress

No cabeçalho Coming Soon Mode (Modo em breve ), alterne de inativo para ativo. Isso habilita uma página de "Em breve" para todo o seu site WordPress.

Em seguida, clique no botão Edit Page (Editar página ) para iniciar o construtor de arrastar e soltar do SeedProd e clique na guia Page Settings (Configurações da página ) na parte superior da tela.

Entre na área de configurações da página do SeedProd

Agora, clique no título Controle de acesso para ver todas as diferentes maneiras de permitir que os clientes visualizem o site.

A maneira mais fácil de fazer isso é usar a opção Bypass URL . Você pode digitar uma frase nessa área e fornecer aos seus clientes um URL secreto que ignora sua página de lançamento em breve.

Use a URL de desvio para permitir que os clientes visualizem o site do WordPress antes de colocá-lo no ar

Como resultado, eles podem visualizar o progresso do site antes de revelá-lo ao público.

E aí está!

Esperamos que este artigo tenha ajudado você a aprender como visualizar seu site WordPress antes de colocá-lo no ar. Você também pode gostar deste guia sobre os problemas mais comuns do WordPress e como corrigi-los.

Se você gostou deste artigo, siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para ajudar a expandir seus negócios.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.