Cómo previsualizar tu sitio web de WordPress antes de publicarlo

Algo que les decimos a nuestros lectores es: **siempre** previsualiza antes de publicar. A lo largo de los años, hemos creado y actualizado miles de páginas y publicaciones de WordPress, y previsualizar el contenido antes de que se publique se ha convertido en una parte clave de nuestro proceso editorial.

Omitir este paso puede generar sorpresas para tus visitantes: diseños rotos, imágenes faltantes o errores tipográficos. Nosotros mismos hemos pasado por eso, pero realmente, estos problemas son fáciles de evitar.

En este artículo, te mostraremos formas efectivas de previsualizar tu sitio web de WordPress antes de lanzarlo. De esta manera, podrás tener la confianza de que tu sitio se ve y funciona exactamente como quieres. 🧑‍💻

Aquí tienes un resumen rápido de los temas que cubriremos en esta guía. Siéntete libre de usar los enlaces a continuación para saltar a secciones específicas:

• Previsualiza tu sitio de WordPress antes del lanzamiento con el modo "Próximamente"
• Permite a los clientes previsualizar el sitio de WordPress antes de publicarlo
• Crea un sitio web de staging de WordPress para previsualizar cambios
• Previsualiza publicaciones y páginas de WordPress antes de publicarlas
• Previsualiza un tema de WordPress antes de cambiarlo
• Previsualiza personalizaciones de temas de WordPress
• Previsualiza tu tema personalizado de WordPress
• Previsualiza páginas de destino de WordPress antes del lanzamiento
• Consejo extra 🌟: Detecta problemas de diseño con pruebas de regresión visual

¿Listo? Empecemos.

Previsualiza tu sitio de WordPress antes del lanzamiento con el modo "Próximamente"

Si estás creando un nuevo sitio web de WordPress, entonces siempre se recomienda habilitar el modo "Próximamente" mientras trabajas en tu sitio.

Esto te permite mostrar una página adecuada de "Próximamente" a los visitantes del sitio web. Aún podrás iniciar sesión en el área de administración de WordPress y trabajar en tu sitio web, pero tus visitantes no podrán verlo.

La mejor parte es que podrás previsualizar tu sitio web y hacer todas las pruebas necesarias antes de publicarlo.

Para hacer esto, necesitarás SeedProd. Es el mejor constructor de sitios web de WordPress del mercado y te permite mostrar fácilmente una hermosa página de "próximamente".

Algunas de nuestras marcas asociadas utilizan SeedProd para construir sus sitios web. Hemos visto de primera mano lo bien que les funcionó, y hemos utilizado la herramienta muchas veces al escribir tutoriales para nuestros lectores.

Si deseas obtener más información sobre el plugin, consulta nuestra detallada reseña de SeedProd.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, visita la página SeedProd » Ajustes para introducir tu clave de licencia. Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd.

A continuación, dirígete a la pantalla SeedProd » Landing Pages desde el área de administración de WordPress.

Desde aquí, simplemente haz clic en el botón 'Configurar una página de "próximamente"'.

Después de eso, el plugin te pedirá que elijas una plantilla para tu página de "próximamente".

SeedProd viene con varias plantillas de "próximamente" hermosas y diseñadas profesionalmente para aumentar las conversiones.

Al elegir una plantilla, la interfaz del constructor de páginas de SeedProd se abrirá en la pantalla.

El constructor de páginas es una herramienta de diseño intuitiva. Simplemente puedes hacer clic para editar cualquier elemento o arrastrar y soltar nuevos elementos en tu diseño desde la columna izquierda.

También puedes agregar un formulario de suscripción por correo electrónico y botones de redes sociales a tu página de "próximamente" para que tus usuarios puedan seguir tu marca incluso antes del lanzamiento.

Una vez que hayas terminado con el diseño de la página, cambia a la pestaña "conectar" en la parte superior. Desde aquí, puedes integrar tu servicio de marketing por correo electrónico para hacer crecer tu lista y notificar a las personas cuando tu sitio esté en línea.

Para obtener instrucciones más detalladas, puedes consultar nuestro tutorial sobre cómo crear páginas de próxima apertura atractivas en WordPress con SeedProd.

Una vez que hayas terminado, haz clic en el botón ‘Guardar’ para almacenar tus cambios.

Luego, selecciona ‘Publicar’ para que tu página de próxima apertura esté lista para usar. No te preocupes, aún no está activa en tu sitio web. Haremos eso en el siguiente paso.

Ahora puedes cerrar la interfaz del constructor de páginas, lo que te llevará de regreso a la pantalla de SeedProd » Landing Pages.

Aquí, haz clic en el interruptor debajo del cuadro de la página de próxima apertura para ponerlo en ‘Activo’. Esto asegurará que todos los visitantes de tu sitio web vean tu nueva página de próxima apertura en lugar de tu sitio web real.

Ahora puedes cerrar sesión en el área de administración de WordPress o visitar tu sitio web en modo incógnito.

Verás tu página de próxima apertura en vivo en tu sitio web.

Aún puedes iniciar sesión en tu panel de administración de WordPress y continuar trabajando en tu sitio web.

También podrás previsualizar tu sitio web en vivo cuando hayas iniciado sesión.

Una vez que hayas terminado de trabajar en tu sitio, simplemente puedes ir a la pantalla de SeedProd » Landing Pages para desactivar tu página de próxima apertura.

Aquí, haz clic en el control deslizante ‘Activo’ para volver a ponerlo en inactivo.

Permite a los clientes previsualizar el sitio de WordPress antes de publicarlo

Si estás trabajando en sitios web de clientes, existen varias maneras de permitirles fácilmente previsualizar los cambios en un sitio web de WordPress antes de publicarlo.

Sin embargo, la forma más fácil es usar una página de "Próximamente" creada con SeedProd, como acabamos de mostrar.

Una vez que hayas activado el Modo "Próximamente", necesitas hacer clic en el botón 'Editar Página'.

Esto abrirá el constructor de páginas en tu pantalla, donde deberás cambiar a la pestaña de Configuración de Página.

Luego, haz clic en la sección 'Control de Acceso'.

Desde aquí, puedes crear una URL de Derivación y elegir la duración de la expiración de la URL. No olvides guardar tus cambios.

Tus clientes ahora pueden usar la URL secreta para omitir la página de "Próximamente" y previsualizar el sitio web.

Si tu sitio web ya está publicado y quieres compartir cambios con tus clientes antes de que salgan en vivo, cubriremos eso en el siguiente paso.

Crea un sitio web de staging de WordPress para previsualizar cambios

Es una práctica estándar entre los profesionales web crear un sitio web de staging para poder probar y previsualizar cualquier cambio antes de aplicarlo a un sitio en vivo.

Un sitio web de staging es un clon privado de tu sitio web. Está oculto del público principal, lo que te da la ventaja de probar y previsualizar tus cambios en tu servidor en vivo.

Muchas de las mejores empresas de alojamiento de WordPress ofrecen un sitio web de staging con 1 clic. Simplemente puedes hacer clic en un botón para crear un sitio web de staging y sincronizar fácilmente cualquier cambio que realices con tu sitio en vivo.

Para este artículo, te mostraremos cómo crear un sitio web de staging en Bluehost.

Bluehost es una de las compañías de hosting más grandes del mundo y un proveedor de hosting de WordPress recomendado oficialmente. Ofrecen una función de sitio de staging con un solo clic a todos sus clientes de WordPress.

Primero, debes asegurarte de que el plugin de Bluehost esté instalado y activado en tu sitio web. Si ya está activado, verás un elemento de menú Bluehost en la parte superior del menú de administración de WordPress.

Si no puedes ver el menú de Bluehost, puedes iniciar sesión en el panel de control de tu cuenta de hosting de Bluehost y hacer clic en el botón 'Websites'.

Después de eso, haz clic en 'Settings' en tu sitio web.

En el área de administración del sitio, cambia a la pestaña 'Plugins'.

Luego, activa el plugin de Bluehost.

Una vez que te hayas asegurado de que el plugin de Bluehost está instalado, estarás listo para crear tu sitio de staging.

Desde el área de administración de WordPress, haz clic en la página del plugin Bluehost y cambia a la pestaña 'Staging'.

Después de eso, haz clic en 'Crear sitio de staging'.

El plugin generará tu sitio web de staging.

Una vez terminado, puedes hacer clic en 'No se está editando actualmente' para cambiar al sitio de staging y empezar a trabajar en él.

Ahora puedes trabajar en tu sitio web de staging y ver tus cambios en una vista previa en vivo.

Una vez cambiado, verás un aviso rojo de 'Entorno de Staging' en la barra de administración de WordPress.

Esto es para ayudarte a diferenciarlo de tu sitio en vivo.

Una vez que hayas terminado de previsualizar tus cambios en el sitio web de staging, puedes ir de nuevo a la página del plugin Bluehost y navegar a la pestaña 'Staging'.

Desde aquí, selecciona 'Desplegar todos los cambios' y haz clic en el botón de actualizar para hacer que los cambios sean en vivo.

Para más detalles e instrucciones para otros entornos de hosting, consulta nuestra guía detallada sobre cómo crear un sitio de staging para WordPress.

Previsualiza publicaciones y páginas de WordPress antes de publicarlas

WordPress utiliza un editor de bloques intuitivo que utiliza automáticamente el estilo de tu tema para mostrar una vista previa en vivo de tus publicaciones y páginas.

Sin embargo, puede que no te dé una idea clara de cómo se verá una publicación o página en tu sitio web con tus encabezados, barras laterales y todo lo demás en la página.

Afortunadamente, el editor de bloques también te permite previsualizar una publicación o página sin publicarla.

Simplemente haz clic en el botón 'Vista previa' en la esquina superior derecha.

Puedes elegir entre las opciones de vista previa de Escritorio, Tableta y Móvil, pero estas solo te mostrarán la vista previa dentro del editor de contenido.

Después de elegir un tipo de dispositivo, haz clic en la opción ‘Vista previa en una pestaña nueva’ para ver la vista previa completa en tu sitio web.

WordPress te mostrará entonces una vista previa de tu publicación o página antes de publicarla.

Si deseas permitir que otra persona tenga acceso exclusivo para previsualizar una de tus publicaciones no publicadas, consulta nuestra guía sobre cómo permitir vistas previas públicas de publicaciones en WordPress.

Previsualiza un tema de WordPress antes de cambiarlo

Normalmente, si activas un tema de WordPress, este se publica inmediatamente en tu sitio web.

Si no estás utilizando un sitio web de staging, tus usuarios verán el nuevo tema sin ninguna personalización.

¿No sería genial si pudieras previsualizar un tema de WordPress antes de activarlo en tu sitio web?

Afortunadamente, WordPress te permite previsualizar un tema antes de activarlo.

Simplemente instala el tema de WordPress que deseas previsualizar. Para más detalles, consulta nuestra guía sobre cómo instalar un tema de WordPress.

Después de instalar el tema, haz clic en el enlace ‘Vista previa en vivo’.

Alternativamente, también puedes visitar la página Apariencia » Temas y pasar el mouse sobre un tema instalado.

Verás un botón para iniciar la ‘Vista previa en vivo’.

WordPress iniciará entonces el Personalizador de Temas.

Aquí, verás una vista previa en vivo del tema con tu contenido actual.

El personalizador de temas usará tu contenido existente y el menú de navegación. Puedes probar diferentes configuraciones del tema desde el panel izquierdo.

Puedes salir del personalizador de temas sin activar el tema. Sin embargo, esto no guardará tus personalizaciones.

Si estás satisfecho con el aspecto del tema, puedes proceder a activarlo haciendo clic en el botón 'Activar y publicar' en la parte superior del menú.

¿Necesitas ayuda para cambiar de tema? Consulta nuestro tutorial sobre cómo cambiar correctamente tu tema de WordPress.

Previsualiza personalizaciones de temas de WordPress

¿Quieres hacer cambios en tu tema de WordPress pero no estás seguro de cómo se verían en tu sitio en vivo?

WordPress viene con diferentes formas de previsualizar tu tema de WordPress antes de aplicar esos cambios.

Para la mayoría de los temas de WordPress, puedes previsualizar tus cambios utilizando el personalizador de temas. Simplemente ve a la página Apariencia » Personalizar para iniciarlo.

Desde aquí, puedes probar diferentes opciones de temas, cambiar menús, personalizar widgets, agregar CSS personalizado y más.

Esto te permite previsualizar los cambios del tema sin aplicarlos realmente a tu sitio web.

Una vez que estés satisfecho con los cambios que realizaste, puedes hacer clic en el botón 'Publicar' para aplicar esos cambios. Opcionalmente, también puedes hacer clic en el ícono del engranaje para guardar tus cambios como borrador, programar tus cambios y compartir un enlace de vista previa con los clientes.

Ahora, este método puede no estar disponible para los temas de bloques de WordPress que utilizan el Editor de Sitio Completo.

En ese caso, puedes iniciar el editor visitando el menú Apariencia » Editor.

El editor de sitio completo te permite editar tu tema de WordPress usando bloques. Puedes editar archivos de plantilla individuales con una vista previa en vivo de tu sitio web.

Para más detalles, puedes ver nuestra guía completa sobre la edición completa del sitio en WordPress.

Sin embargo, a diferencia del Personalizador de Temas, no podrás guardar tus cambios como borrador. Estos cambios se publicarán cuando guardes tus cambios o se perderán si sales sin guardar.

Previsualiza tu tema personalizado de WordPress

¿Quieres crear un tema de WordPress completamente personalizado con vista previa en vivo?

SeedProd es el mejor constructor de temas de WordPress que te permite crear un tema de WordPress personalizado utilizando una interfaz de arrastrar y soltar con vista previa en vivo.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, visita la página SeedProd » Ajustes para introducir tu clave de licencia. Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd.

A continuación, necesitas visitar la página SeedProd » Theme Builder.

Desde aquí, haz clic en el botón ‘Temas’.

Esto abrirá una ventana emergente donde puedes elegir un tema para usar como punto de partida.

SeedProd viene con un montón de temas y plantillas hermosas que puedes personalizar.

Simplemente haz clic para seleccionar un tema, y SeedProd generará todos los archivos de plantilla del tema para ti.

Ahora puedes hacer clic en cualquiera de estos archivos de tema para editarlos en el constructor de temas.

SeedProd viene con un constructor intuitivo de arrastrar y soltar que utiliza bloques y secciones para crear diseños hermosos.

Puedes agregar bloques a tu diseño desde la columna izquierda. A tu derecha, verás una vista previa en vivo y editable de tu plantilla de tema.

SeedProd también viene con soporte completo para WooCommerce.

Eso significa que puedes diseñar y previsualizar tu tienda en línea, incluyendo páginas de productos, páginas de pago y más.

¿Quieres previsualizar tu tema para dispositivos móviles?

Simplemente haz clic en el ícono del móvil en la barra inferior, y SeedProd te mostrará la vista previa móvil de tu tema.

Una vez que hayas terminado de editar tu tema, puedes hacer clic en el botón 'Guardar' en la parte superior derecha y salir del constructor. Luego puedes editar otras plantillas si es necesario.

Cuando esté listo para implementar su tema personalizado, simplemente active el interruptor ‘Habilitar tema SeedProd’ en la página del constructor de temas.

Su tema personalizado ahora se publicará. Eso significa que reemplazará su tema de WordPress existente.

Para obtener más información sobre el constructor de temas personalizados de SeedProd, consulte nuestro tutorial sobre cómo crear un tema personalizado de WordPress sin escribir ningún código.

Previsualiza páginas de destino de WordPress antes del lanzamiento

Las páginas de destino son páginas especializadas utilizadas en campañas de marketing. Estas páginas están altamente optimizadas para conversiones y ventas.

Algunos temas de WordPress vienen con plantillas de páginas de destino que puede personalizar utilizando el editor de bloques.

Sin embargo, si necesita más opciones de diseño, entonces necesitará SeedProd. Es el mejor constructor de páginas de destino de WordPress y le permite crear fácilmente páginas de destino atractivas para su sitio web.

SeedProd viene con docenas de plantillas de páginas de destino diseñadas profesionalmente para que comience. Además, sus páginas de destino se verán igual de bien en todos los tamaños de pantalla.

Primero, necesita instalar y activar el complemento SeedProd. Tras la activación, debe visitar la página SeedProd » Configuración para introducir su clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd.

A continuación, diríjase a la pantalla SeedProd » Páginas de destino desde la barra lateral de administración de WordPress.

Para comenzar a diseñar su página, haga clic en el botón ‘Agregar nueva página de destino’.

A continuación, deberá elegir una plantilla.

Hay varias plantillas altamente optimizadas que puede usar como punto de partida, o puede comenzar con una plantilla en blanco.

Esto abrirá una ventana emergente donde deberás ingresar un nombre para tu página de destino y elegir una URL slug.

Luego, haz clic en el botón ‘Guardar y empezar a editar la página’ para continuar.

Esto iniciará la interfaz del constructor de páginas.

Es una herramienta de diseño de arrastrar y soltar donde puedes diseñar tu página con una vista previa en vivo.

Una vez que hayas terminado de editar tu página de destino, puedes hacer clic en el botón ‘Guardar’ y seleccionar ‘Publicar’ para que esté activa en tu sitio web.

Para obtener más información, consulta nuestro tutorial sobre cómo crear páginas de destino en WordPress.

Consejo extra 🌟: Detecta problemas de diseño con pruebas de regresión visual

¿Quieres llevar la gestión de tu sitio un paso más allá? Las pruebas de regresión visual te ayudan a comparar automáticamente capturas de pantalla de tu sitio web antes y después de realizar cambios.

Es una de las mejores maneras de detectar problemas de diseño que a menudo pasan desapercibidos para el ojo humano. Estos incluyen cambios de diseño, fallos en fuentes, discrepancias de color o problemas de espaciado que solo aparecen en ciertas páginas o tamaños de pantalla.

Por ejemplo, incluso algo tan pequeño como una actualización de un plugin puede romper involuntariamente el estilo de un formulario de contacto o desalinear elementos.

Las herramientas de regresión visual resaltan estas diferencias lado a lado, para que puedas detectarlas y corregirlas antes de que tus visitantes se den cuenta.

La forma más fácil de empezar es usando el plugin VRTs para WordPress. Te permite ejecutar pruebas de comparación visual en páginas o plantillas específicas directamente desde tu panel de control, sin necesidad de código.

Incluso puedes usarlo en un sitio de staging para probar actualizaciones de forma segura antes de publicarlas. Para más detalles, consulta nuestra guía completa sobre cómo hacer pruebas de regresión visual.

Esperamos que este artículo te haya ayudado a aprender cómo previsualizar tu sitio web de WordPress antes de publicarlo. También te puede interesar ver nuestros consejos de expertos para crear un plan de recuperación ante desastres de WordPress y nuestra guía definitiva de mantenimiento de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.