Como Visualizar seu Site WordPress Antes de Publicar

Uma coisa que dizemos aos nossos leitores é: sempre visualize antes de publicar. Ao longo dos anos, criamos e atualizamos milhares de páginas e posts do WordPress, e 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 para seus visitantes — 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 visualizar seu site WordPress antes de publicá-lo. Dessa forma, você pode ter certeza 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

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, então é sempre recomendado ativar o modo "em breve" enquanto você trabalha no seu site.

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

A melhor parte é que você poderá pré-visualizar seu site e fazer 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 realmente usam o SeedProd para construir seus sites. Vimos em primeira mão o quão bem funcionou para elas, 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.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin 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.

Ao escolher um modelo, a interface do construtor de páginas do SeedProd será aberta na tela.

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 o design da 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 interruptor sob a caixa da página 'Em Breve' para 'Ativo'. Isso garantirá que todos os visitantes do seu site 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 no modo Anônimo.

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ê está trabalhando em sites de clientes, existem várias maneiras de permitir facilmente que os clientes visualizem as alterações em um site WordPress antes de publicá-lo.

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 a duração da expiração da URL. Não se esqueça de salvar suas alterações.

Seus clientes agora podem usar o URL secreto para contornar a página 'Em Breve' e visualizar o site.

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 principal, dando a você a vantagem de testar e visualizar suas 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. 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 Bluehost, poderá fazer login no painel de controle da sua conta de hospedagem Bluehost e clicar 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.

Depois de ter certeza de que o plugin Bluehost está instalado, você está 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évia 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 ‘Implantar Todas as Alterações’ e clique no botão de atualização para tornar 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, ele pode não dar uma ideia clara de como uma postagem ou página pode ficar em seu site com seus cabeçalhos, barras laterais e todo o resto da página.

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 Desktop, Tablet e Mobile, mas estas apenas mostrarão a pré-visualização dentro do editor de conteúdo.

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.

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 Temas.

Aqui, você verá uma prévia ao vivo do tema com 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 ficariam no seu site ativo?

O WordPress oferece diferentes maneiras de visualizar seu tema do WordPress antes de aplicar essas alterações.

Para a maioria dos temas do WordPress, você pode visualizar suas alterações usando o personalizador de temas. 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ê visualize as alterações do tema sem realmente aplicá-las ao seu site.

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.

Agora, este método pode não estar disponível para os temas de bloco do WordPress que usam o Editor de Site Completo.

Nesse caso, você pode iniciar o editor acessando 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 visualização ao vivo do seu site.

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

No entanto, ao contrário do Personalizador de Tema, você não poderá salvar suas alterações como rascunho. Essas alterações entrarão em vigor quando você salvar suas alterações 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 visualização ao vivo?

SeedProd é o melhor construtor de temas WordPress que permite criar um tema WordPress personalizado usando uma interface de arrastar e soltar com uma visualização 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.

SeedProd vem com um monte de temas bonitos 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.

SeedProd vem com 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 visualizar seu tema para 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

Páginas de destino são páginas especializadas usadas em campanhas de marketing. Essas páginas 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 altamente otimizados 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 projetar sua página com uma pré-visualização 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 capturar problemas de design que muitas vezes passam despercebidos pelo olho humano. Isso inclui mudanças de layout, falhas de fonte, inconsistências de cores ou problemas de espaçamento que aparecem apenas 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 — sem necessidade de codificação.

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

Esperamos que este artigo tenha ajudado você a aprender como visualizar seu site WordPress antes de publicá-lo. Você também pode querer ver nossas dicas de especialistas para criar um plano de recuperação de desastres do WordPress e nosso guia definitivo de manutenção do 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.