Como Visualizar seu Site WordPress Antes de Publicar

Uma coisa que dizemos aos nossos leitores é para **sempre** pré-visualizar antes de publicar. Ao longo dos anos, criamos e atualizamos milhares de páginas e posts do WordPress, e pré-visualizar o conteúdo antes que ele vá ao ar se tornou uma parte fundamental do nosso processo editorial.

Pular esta etapa pode levar a surpresas desagradáveis para seus visitantes, como layouts quebrados, imagens ausentes ou erros de digitação. Nós já passamos por isso, mas realmente, esses problemas são fáceis de evitar.

Neste artigo, vamos guiá-lo por maneiras eficazes de pré-visualizar seu site WordPress antes de publicá-lo, para que você possa ter confiança de que seu site tem a aparência e funciona exatamente como você deseja. 🧑‍💻

Aqui está um breve resumo dos tópicos que abordaremos neste guia. Sinta-se à vontade para usar os links abaixo para pular para seções específicas:

• Visualize o Site WordPress Antes do Lançamento com o Modo Em Breve
• Permita que Clientes Visualizem o Site WordPress Antes de Publicar
• Crie um Site de Staging do WordPress para Visualizar Alterações
• Visualize Posts e Páginas do WordPress Antes de Publicar
• Visualize um Tema do WordPress Antes de Trocar
• Visualize Personalizações de Temas do WordPress
• Visualize Seu Tema Personalizado do WordPress
• Visualize Landing Pages do WordPress Antes do Lançamento
• Dica Bônus 🌟: Identifique Problemas de Design com Testes de Regressão Visual
• FAQ: Pré-visualizar um Site WordPress Antes de Publicar
• Próximos Passos para Melhorar o Gerenciamento do Site WordPress

Pronto? Vamos começar.

Visualize o Site WordPress Antes do Lançamento com o Modo Em Breve

Se você está criando um novo site WordPress, é sempre uma boa ideia ativar o modo "em breve" enquanto você trabalha no seu site.

Isso permite que você exiba uma página profissional de "em breve" para seus visitantes. Você ainda poderá fazer login na área administrativa do WordPress e trabalhar em seu site, mas seus visitantes não poderão vê-lo.

A melhor parte é que você poderá pré-visualizar seu site e executar todos os testes necessários antes de publicá-lo.

Para fazer isso, você precisará do SeedProd. É o melhor construtor de sites WordPress do mercado e permite que você exiba facilmente uma bela página de "em breve".

Algumas de nossas marcas parceiras usam o SeedProd para construir seus sites. Vimos em primeira mão o quão bem funcionou para eles, e usamos a ferramenta muitas vezes ao escrever tutoriais para nossos leitores.

Se você quiser saber mais sobre o plugin, veja nossa análise detalhada do SeedProd.

Para começar, você precisará criar uma conta SeedProd. No site da SeedProd, clique no botão ‘Obter SeedProd Agora’, escolha um plano e finalize o processo de checkout.

Com isso feito, você terá seu próprio painel de conta SeedProd, onde poderá encontrar o arquivo zip e a chave de licença do seu SeedProd Pro.

Em seguida, você precisa instalar e ativar o plugin SeedProd.

No seu painel de administração do WordPress, vamos para Plugins » Adicionar Novo Plugin.

Em seguida, use a barra de pesquisa para encontrar rapidamente o plugin.

No resultado da pesquisa, basta clicar no botão ‘Instalar Agora’ e depois em ‘Ativar’ para habilitá-lo em seu site.

Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, visite a página SeedProd » Configurações para inserir sua chave de licença. Você pode encontrar essas informações em sua conta no site do SeedProd.

Em seguida, acesse a tela SeedProd » Landing Pages na área administrativa do WordPress.

A partir daqui, basta clicar no botão ‘Configurar uma página em breve’.

Depois disso, o plugin pedirá que você escolha um modelo para sua página "Em Breve".

O SeedProd vem com vários belos modelos de 'em breve' que são projetados profissionalmente para aumentar as conversões.

Após escolher um modelo, a interface do construtor de páginas do SeedProd será aberta.

O construtor de páginas é uma ferramenta de design intuitiva. Você pode simplesmente apontar e clicar para editar qualquer item ou arrastar e soltar novos itens em seu layout da coluna esquerda.

Você também pode adicionar um formulário de inscrição por e-mail e botões de mídia social à sua página 'em breve' para que seus usuários possam seguir sua marca mesmo antes do lançamento.

Assim que terminar de projetar a página, mude para a aba ‘Conectar’ no topo. A partir daqui, você pode integrar seu serviço de marketing por e-mail para aumentar sua lista e notificar as pessoas quando seu site for lançado.

Para obter instruções mais detalhadas, você pode consultar nosso tutorial sobre como criar páginas 'Em Breve' no WordPress com SeedProd.

Assim que terminar, clique no botão 'Salvar' para armazenar suas alterações.

Em seguida, selecione 'Publicar' para deixar sua página 'Em Breve' pronta para uso. Não se preocupe, ela ainda não está ativa em seu site. Faremos isso na próxima etapa.

Agora você pode fechar a interface do construtor de páginas, o que o levará de volta à tela SeedProd » Landing Pages.

Aqui, clique no alternador sob a caixa da página em breve para defini-la como ‘Ativa’. Isso garante que todos os seus visitantes vejam sua nova página em breve em vez do seu site real.

Agora você pode sair da área de administração do WordPress ou visitar seu site em uma janela de navegação anônima/privada.

Você verá sua página 'Em Breve' ativa em seu site.

Você ainda pode fazer login no seu painel do WordPress e continuar trabalhando em seu site.

Você também poderá visualizar seu site ativo quando estiver logado.

Assim que terminar de trabalhar em seu site, você pode simplesmente ir para a tela SeedProd » Landing Pages para desativar sua página 'Em Breve'.

Aqui, clique no controle deslizante 'Ativo' para defini-lo de volta como inativo.

Permita que Clientes Visualizem o Site WordPress Antes de Publicar

Se você estiver trabalhando em sites de clientes, existem várias maneiras fáceis de permitir que os clientes visualizem as alterações antes que elas sejam publicadas.

No entanto, a maneira mais fácil é usar uma Página 'Em Breve' criada com SeedProd, como acabamos de mostrar acima.

Assim que você ativar o Modo 'Em Breve', precisará clicar no botão 'Editar Página'.

Isso abrirá o construtor de páginas em sua tela, onde você precisará mudar para a aba Configurações da Página.

Em seguida, clique na seção 'Controle de Acesso'.

A partir daqui, você pode criar uma URL de Bypass e escolher por quanto tempo a URL deve permanecer ativa. Não se esqueça de salvar suas alterações.

Seus clientes agora podem usar o URL secreto para ignorar a página "em breve" e visualizar o site. Isso permite que eles vejam seu progresso sem que você precise criar uma conta de usuário para eles.

Se o seu site já estiver no ar e você quiser compartilhar alterações com seus clientes antes de publicá-las, abordaremos isso na próxima etapa.

Crie um Site de Staging do WordPress para Visualizar Alterações

É uma prática recomendada padrão entre os profissionais da web criar um site de staging para que você possa testar e visualizar quaisquer alterações antes de aplicá-las a um site ativo.

Um site de staging é um clone privado do seu site. Ele fica oculto do público, permitindo que você teste e visualize as alterações em seu servidor ativo.

Muitas das principais empresas de hospedagem WordPress oferecem um site de staging com 1 clique. Você pode simplesmente clicar em um botão para criar um site de staging e sincronizar facilmente quaisquer alterações que fizer com seu site ativo.

Para este artigo, mostraremos como criar um site de staging em Bluehost.

Bluehost é uma das maiores empresas de hospedagem do mundo e um provedor de hospedagem WordPress oficialmente recomendado pelo WordPress.org. Eles oferecem um recurso de site de staging com 1 clique para todos os seus clientes WordPress.

Primeiro, você deve garantir que o plugin Bluehost esteja instalado e ativado em seu site. Se já estiver ativado, você verá um item de menu Bluehost na parte superior do menu de administração do WordPress.

Se você não conseguir ver o menu do Bluehost, poderá fazer login no painel de controle da sua conta de hospedagem Bluehost. A partir daí, clique no botão ‘Websites’.

Depois disso, clique em 'Configurações' em seu site.

Na área de gerenciamento do site, mude para a aba 'Plugins'.

Em seguida, ative o plugin Bluehost.

Assim que você confirmar que o plugin Bluehost está instalado e ativo, estará pronto para criar seu site de staging.

Na área de administração do WordPress, clique na página do plugin Bluehost e vá para a aba ‘Staging’.

Depois disso, clique em ‘Criar site de staging’.

O plugin gerará seu site de staging.

Quando terminar, você pode clicar em ‘Não está editando no momento’ para mudar para o site de staging e começar a trabalhar nele.

Agora você pode trabalhar em seu site de staging e ver suas alterações em uma pré-visualização ao vivo.

Ao mudar, você verá um aviso vermelho ‘Ambiente de Staging’ na barra de administração do WordPress.

Isso é para ajudar você a diferenciar do seu site ativo.

Depois de terminar de visualizar suas alterações no site de staging, você pode ir para a página do plugin Bluehost novamente e navegar até a aba ‘Staging’.

A partir daqui, selecione ‘Deploy All Changes’ e clique no botão de atualização para publicar as alterações ao vivo.

Para mais detalhes e instruções para outros ambientes de hospedagem, veja nosso guia detalhado sobre como criar um site de staging para WordPress.

Visualize Posts e Páginas do WordPress Antes de Publicar

O WordPress usa um editor de blocos intuitivo que usa automaticamente a estilização do seu tema para mostrar uma prévia ao vivo de suas postagens e páginas.

No entanto, isso pode não lhe dar uma ideia clara de como uma postagem ou página ficará em seu site com seus cabeçalhos, barras laterais e outros elementos de layout.

Felizmente, o editor de blocos também permite que você visualize uma postagem ou página sem publicá-la.

Simplesmente clique no botão ‘Pré-visualizar’ no canto superior direito.

Você pode escolher entre as opções de pré-visualização para Desktop, Tablet e Celular. Recomendamos sempre verificar a pré-visualização para Celular para garantir que seu conteúdo fique bom em telas menores.

Após escolher um tipo de dispositivo, clique na opção ‘Visualizar em nova aba’ para ver a visualização completa em seu site.

O WordPress, então, mostrará uma prévia de sua postagem ou página antes de publicá-la.

Se você quiser permitir que outra pessoa tenha acesso exclusivo para visualizar uma de suas postagens não publicadas, consulte nosso guia sobre como permitir prévias públicas de postagens no WordPress.

Visualize um Tema do WordPress Antes de Trocar

Normalmente, se você ativar um tema do WordPress, ele será publicado imediatamente em seu site. Se você não estiver usando um site de staging, seus usuários verão o novo tema sem nenhuma personalização.

Mas não seria bom se você pudesse pré-visualizar um tema do WordPress antes de ativá-lo em seu site?

Felizmente, o WordPress permite que você pré-visualize um tema antes de ativá-lo.

Simplesmente instale o tema do WordPress que você deseja pré-visualizar. Para mais detalhes, consulte nosso guia sobre como instalar um tema do WordPress.

Após instalar o tema, clique no link ‘Visualização ao Vivo’.

Alternativamente, você também pode visitar a página Aparência » Temas e passar o mouse sobre um tema instalado.

Você verá um botão para iniciar a ‘Visualização ao Vivo’.

O WordPress então iniciará o Personalizador de Tema.

Aqui, você verá uma pré-visualização ao vivo do tema usando seu conteúdo atual:

O personalizador de temas usará seu conteúdo existente e menu de navegação. Você pode experimentar diferentes configurações de tema no painel esquerdo.

Você pode sair do personalizador de temas sem ativar o tema. No entanto, isso não salvará suas personalizações.

Se você estiver satisfeito com a aparência do tema, poderá ativá-lo clicando no botão ‘Ativar e Publicar’ na parte superior do menu.

Precisa de ajuda para trocar de tema? Veja nosso tutorial sobre como trocar corretamente seu tema do WordPress.

Visualize Personalizações de Temas do WordPress

Quer fazer alterações no seu tema do WordPress, mas não tem certeza de como elas ficarão em seu site ativo?

O WordPress oferece várias maneiras de pré-visualizar as alterações em seu tema antes de aplicá-las.

Para a maioria dos temas do WordPress, você pode pré-visualizar suas alterações usando o personalizador de tema. Simplesmente vá para a página Aparência » Personalizar para iniciá-lo.

A partir daqui, você pode experimentar diferentes opções de tema, alterar menus, personalizar widgets, adicionar CSS personalizado e muito mais.

Isso permite que você pré-visualize as alterações do tema sem realmente aplicá-las ao seu site ativo.

Assim que estiver satisfeito com as alterações feitas, você pode clicar no botão ‘Publicar’ para aplicá-las. Opcionalmente, você também pode clicar no ícone de engrenagem para salvar suas alterações como rascunho, agendar suas alterações e compartilhar um link de visualização com clientes.

No entanto, observe que o Personalizador de Tema não está disponível para temas de bloco do WordPress.

Se você estiver usando um tema de bloco, poderá iniciar o editor visitando o menu Aparência » Editor.

O Editor de Site Completo permite que você edite seu tema do WordPress usando blocos. Você pode editar arquivos de modelo individuais com uma prévia ao vivo do seu site.

Para mais detalhes, você pode ver nosso guia completo sobre edição completa de site no WordPress.

Apenas lembre-se de que o Editor de Site aplica alterações diretamente ao seu design.

Ao contrário do Personalizador de Tema, não há um botão 'Salvar Rascunho', portanto, suas alterações ficarão ativas em seu site assim que você clicar no botão Salvar (ou serão perdidas se você sair sem salvar).

Visualize Seu Tema Personalizado do WordPress

Você quer criar um tema WordPress completamente personalizado com uma prévia ao vivo, sem escrever código?

SeedProd é o melhor construtor de temas WordPress que permite criar um tema WordPress personalizado usando uma interface visual com uma prévia ao vivo.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, visite a página SeedProd » Configurações para inserir sua chave de licença. Você pode encontrar essas informações em sua conta no site do SeedProd.

Em seguida, você precisa visitar a página SeedProd » Theme Builder.

A partir daqui, clique no botão ‘Temas’.

Isso abrirá um pop-up onde você pode escolher um tema para usar como ponto de partida.

O SeedProd vem com uma coleção de belos temas e modelos que você pode personalizar.

Simplesmente clique para selecionar um tema, e o SeedProd gerará todos os arquivos de modelo de tema para você.

Agora você pode clicar em qualquer um desses arquivos de tema para editá-los no construtor de temas.

O SeedProd inclui um construtor intuitivo de arrastar e soltar que usa blocos e seções para criar layouts bonitos.

Você pode adicionar blocos ao seu design a partir da coluna da esquerda. À sua direita, você verá uma prévia editável em tempo real do seu modelo de tema.

O SeedProd também oferece suporte completo ao WooCommerce.

Isso significa que você pode projetar e visualizar sua loja online, incluindo páginas de produtos, páginas de checkout e muito mais.

Quer ter uma prévia de como seu tema fica em dispositivos móveis?

Basta clicar no ícone de celular na barra inferior, e o SeedProd mostrará a prévia móvel do seu tema.

Assim que terminar de editar seu tema, você pode clicar no botão 'Salvar' no canto superior direito e sair do construtor. Você pode então editar outros modelos, se necessário.

Quando estiver pronto para implantar seu tema personalizado, basta ativar o botão 'Habilitar Tema SeedProd' na página do construtor de temas.

Seu tema personalizado entrará em vigor agora. Isso significa que ele substituirá seu tema WordPress existente.

Para saber mais sobre o construtor de temas personalizados do SeedProd, consulte nosso tutorial sobre como criar um tema WordPress personalizado sem escrever nenhum código.

Visualize Landing Pages do WordPress Antes do Lançamento

Landing pages são páginas especializadas usadas em campanhas de marketing e são altamente otimizadas para conversões e vendas.

Alguns temas do WordPress vêm com modelos de página de destino que você pode personalizar usando o editor de blocos.

No entanto, se você precisar de mais opções de design, precisará do SeedProd. É o melhor construtor de páginas de destino do WordPress e permite que você crie facilmente páginas de destino bonitas para o seu site.

O SeedProd vem com dezenas de modelos de página de destino projetados profissionalmente para você começar. Além disso, suas páginas de destino ficarão igualmente ótimas em todos os tamanhos de tela.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Após a ativação, você precisa visitar a página SeedProd » Configurações para inserir sua chave de licença.

Você pode encontrar essas informações em sua conta no site do SeedProd.

Em seguida, vá para a tela SeedProd » Páginas de Destino na barra lateral de administração do WordPress.

Para começar a projetar sua página, clique no botão 'Adicionar Nova Página de Destino'.

Em seguida, você precisa escolher um modelo.

Existem vários modelos de alta conversão que você pode usar como ponto de partida, ou você pode começar com um modelo em branco.

Isso abrirá um pop-up onde você precisará inserir um nome para sua página de destino e escolher um slug de URL.

Em seguida, clique no botão ‘Salvar e Começar a Editar a Página’ para continuar.

Isso iniciará a interface do construtor de páginas.

É uma ferramenta de design de arrastar e soltar onde você pode construir sua página com uma prévia em tempo real.

Quando terminar de editar sua página de destino, você pode clicar no botão ‘Salvar’ e selecionar ‘Publicar’ para torná-la ativa em seu site.

Para saber mais, veja nosso tutorial sobre como criar páginas de destino no WordPress.

Dica Bônus 🌟: Capture Problemas de Design com Testes de Regressão Visual

Quer levar o gerenciamento do seu site um passo adiante? Testes de regressão visual ajudam você a comparar automaticamente capturas de tela do seu site antes e depois de fazer alterações.

É uma das melhores maneiras de identificar problemas de design que muitas vezes passam despercebidos em revisões manuais. Isso inclui deslocamentos de layout, falhas de fonte, incompatibilidades de cores ou problemas de espaçamento que só aparecem em certas páginas ou tamanhos de tela.

Por exemplo, até mesmo algo tão pequeno quanto uma atualização de plugin pode quebrar inadvertidamente a estilização de um formulário de contato ou desalinhamento de elementos.

Ferramentas de regressão visual destacam essas diferenças lado a lado, para que você possa identificá-las e corrigi-las antes que seus visitantes as notem.

A maneira mais fácil de começar é usando o plugin VRTs para WordPress. Ele permite que você execute testes de comparação visual em páginas ou modelos específicos diretamente do seu painel.

Você pode até usá-lo em um site de staging para testar atualizações com segurança antes de publicar quaisquer alterações. Para mais detalhes, consulte nosso guia completo sobre como fazer testes de regressão visual.

FAQ: Pré-visualizar um Site WordPress Antes de Publicar

Vamos ver algumas respostas rápidas para perguntas comuns que os leitores costumam fazer sobre testar ou criar um site privadamente.

Como testar um tema do WordPress sem publicá-lo?

A maneira mais fácil é usar um site de staging. A maioria dos provedores de hospedagem WordPress oferece staging com um clique, para que você possa instalar temas, personalizar layouts e visualizar alterações sem afetar seu site ativo.

Como trabalhar em um site WordPress sem publicá-lo?

Você tem algumas opções: usar um site de staging para construir, editar e testar privadamente, criar um site local no seu computador, ou colocar seu site em modo de manutenção com um plugin para que os visitantes não vejam páginas inacabadas enquanto você trabalha.

Quanto tempo leva para um site WordPress ser publicado?

Se o seu domínio já estiver conectado à sua conta de hospedagem, um site pode ser publicado quase instantaneamente. Se você estiver atualizando o DNS ou mudando de provedor de hospedagem, pode levar algumas horas (até 24–48 horas) para que as alterações se propaguem completamente pelo mundo.

É possível lançar um site WordPress em 2 horas?

Sim, é possível, especialmente se você estiver usando um tema pronto ou um modelo inicial. Você pode configurar a hospedagem, instalar o WordPress, escolher um tema e publicar um site básico em algumas horas. Pode levar mais tempo se você desejar designs personalizados, recursos avançados ou várias páginas.

Próximos Passos para Melhorar o Gerenciamento do Site WordPress

Esperamos que este artigo tenha ajudado você a aprender como visualizar seu site WordPress antes de publicá-lo.

Você também pode querer ver nossos guias especializados sobre:

• Tipos de Postagem Personalizada Mais Úteis do WordPress
• Como Despublicar uma Página do WordPress (Maneiras Simples)
• Como Adicionar ou Remover Capacidades de Funções de Usuário no WordPress
• Como Criar um Plano de Recuperação de Desastres do WordPress
• Guia Definitivo para Manutenção de WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.