Si publicas cambios en WordPress sin previsualizarlos, corres un gran riesgo. Un diseño defectuoso o un error tipográfico pueden afectar negativamente a la visualización de tu sitio.
Siempre hago una vista previa de las actualizaciones antes de publicarlas, ya sea un pequeño cambio de texto o un rediseño completo del tema. Solo lleva un minuto y me ha salvado de cometer errores más veces de las que puedo contar.
En esta guía, te mostraré las formas más rápidas de previsualizar tu sitio de WordPress para que puedas lanzarlo con confianza.
- 1. Previsualice WordPress antes de su lanzamiento con el modo Coming Soon
- 2. Deje que los clientes previsualicen su sitio web antes de ponerlo en marcha
- 3. Vista previa de entradas y páginas con el editor de WordPress
- 4. Vista previa de un tema de WordPress con Live Preview
- 5. Vista previa de las personalizaciones con Live Customizer
- 6. Vista previa de las páginas de destino de WordPress con SeedProd
- 7. Previsualice su tema de WordPress con SeedProd
- 8. Vista previa del trabajo de desarrollo con entornos de puesta en escena
1. Previsualice WordPress antes de su lanzamiento con el modo Coming Soon
Si estás construyendo un sitio nuevo, habilita una página de "Próximamente" para que los visitantes vean un marcador de posición pulido mientras trabajas. Podrás iniciar sesión, previsualizar los cambios y probarlo todo antes de ponerlo en marcha.
Para hacer esto de la manera fácil, utilice SeedProd. Es el mejor constructor de sitios web de WordPress que te permite crear una hermosa página próximamente y mantener tu sitio real privado hasta el lanzamiento.
En primer lugar, instale y active SeedProd en su sitio web WordPress. Si utiliza la versión Pro, introduzca su clave de licencia en SeedProd " Configuración.
A continuación, vaya a SeedProd " Páginas de destino y haga clic en Configurar una página Coming Soon.
A partir de ahí, elija una plantilla que le guste y personalícela con su logotipo, mensaje y extras como un formulario de suscripción por correo electrónico o enlaces a redes sociales.
También puede conectar su proveedor de correo electrónico en la pestaña Conectar para poder empezar a recopilar suscriptores antes del lanzamiento.
Guarde y publique su página Coming Soon, luego de vuelta en la pantalla de Páginas de Aterrizaje, cambie el conmutador del modo Coming Soon a Activo.
A partir de ahora, los visitantes verán tu página "Próximamente". Los administradores conectados ven el sitio real y pueden previsualizar los cambios en el escritorio y el móvil.
Cuando esté listo para el lanzamiento, sólo tiene que volver a SeedProd y apagar el interruptor. Su sitio va en vivo al instante.
Si necesitas más detalles, aquí tienes la guía completa sobre cómo crear una página coming soon en WordPress con SeedProd.
2. Deje que los clientes previsualicen su sitio web antes de ponerlo en marcha
Si estás construyendo un sitio web para un cliente, necesitarás una forma sencilla de compartir los progresos sin hacer público el sitio demasiado pronto.
Algunos planes de alojamiento incluyen enlaces de montaje, pero no todos. Por eso, la opción más sencilla es utilizar SeedProd. Además de ocultar su sitio en curso detrás de una página próximamente, le da potentes controles de acceso para compartir vistas previas privadas.
Por ejemplo, puede crear una página con la marca "Próximamente" para los visitantes y, a continuación, enviar a su cliente un enlace de desvío secreto para que puedan ver el sitio completo mientras usted sigue haciendo cambios.
A continuación se explica cómo configurar vistas previas de clientes en SeedProd.
En primer lugar, siga las instrucciones anteriores para crear una página de Próximamente.
A continuación, haga clic en la pestaña Configuración de la página en la parte superior de la página dentro del editor.
Ahora haga clic en el encabezado Control de acceso para ver todas las diferentes formas de permitir a los clientes obtener una vista previa del sitio web.
La forma más sencilla de hacerlo es utilizar la opción URL de bypass . Puede introducir una frase en esta área y dar a sus clientes una URL secreta que omita su página de Próximamente.
De este modo, pueden previsualizar el progreso de su sitio antes de revelarlo al público.
3. Vista previa de entradas y páginas con el editor de WordPress
WordPress tiene un montón de características útiles que son fáciles de pasar por alto para el usuario medio, incluso si están ahí delante de usted. Una de ellas es la vista previa del sitio.
Cuando crees o actualices una nueva entrada o página en WordPress, no te dirijas directamente al botón Publicar. En su lugar, selecciona el enlace Vista previa en la parte superior del editor de WordPress.
Si hace clic en ese enlace, podrá previsualizar el contenido de WordPress en:
- Escritorio
- Tableta
- Móvil
Incluso puedes previsualizar tu sitio de WordPress en una nueva pestaña del navegador.
Si no estás satisfecho con los cambios, puedes hacer clic en el botón Deshacer de la barra de herramientas.
También puede hacer clic en la opción Revisiones del panel derecho para comparar distintas versiones de su contenido.
Desde ahí, puedes restaurar una versión anterior y hacer clic en publicar.
Estas opciones de WordPress tienen un valor incalculable una vez que se sabe dónde están. Pero, como hemos mencionado antes, no siempre son obvias de inmediato.
4. Vista previa de un tema de WordPress con Live Preview
A veces no es el contenido lo que desea cambiar en WordPress, sino todo el tema de WordPress. Puede que tu tema actual esté obsoleto o que quieras darle un nuevo aspecto a tu sitio web.
Sea cual sea el motivo, necesitarás una forma de previsualizar tu nuevo tema de WordPress antes de activarlo en tu sitio. De lo contrario, es difícil saber si el diseño se ve y funciona correctamente con tu contenido específico y la configuración de WordPress.
Para previsualizar un tema en WordPress, vaya a Apariencia " Temas desde el área de administración de WordPress. Esto le mostrará todos los temas que tiene instalados actualmente.
Para ver cómo quedaría un tema diferente, pase el ratón por encima de la miniatura del tema y haga clic en el botón Vista previa en vivo.
WordPress abrirá una vista previa de su sitio web tal y como se vería con el nuevo tema.
A partir de ahí, puedes echar un vistazo a los diferentes ajustes del tema (más información más adelante) y hacer clic en el botón Activar y publicar para que el tema aparezca en tu sitio web.
Si no te gusta la vista previa, siempre puedes hacer clic en el botón Cambiar del panel izquierdo.
Esto le permite elegir un tema diferente para obtener una vista previa de todos los temas instalados en su sitio web.
También puede hacer clic en la opción WordPress.org para ver cientos de temas de WordPress gratuitos disponibles en el repositorio de temas de WordPress.
Dentro de este panel, puedes instalar cualquier tema y seguir los pasos anteriores para previsualizarlo en tu sitio web.
5. Vista previa de las personalizaciones con Live Customizer
Digamos que estás contento con tu tema de WordPress pero quieres cambiar algunas cosas para que tu sitio sea más fácil de usar. Quizá quieras añadir algunos widgets a la barra lateral o mostrar solo las entradas del blog en la página de inicio.
Normalmente, tendrá que cambiar manualmente estos ajustes dirigiéndose a Ajustes " Lectura desde el panel de control de WordPress.
O Apariencia " Widgets para añadir widgets a tu barra lateral.
Pero hay una manera más fácil de cambiar estos ajustes y ver una vista previa de sus cambios en tiempo real. Y se llama el Personalizador de WordPress.
Puede acceder al Personalizador desde cualquier parte de su sitio WordPress. Si estás viendo la parte frontal de tu sitio web, simplemente haz clic en Personalizar en la barra de herramientas superior.
Y si estás en el backend de tu sitio web, puedes navegar a Apariencia " Personalizar.
Tras hacer clic en la opción Personalizar, la versión actual de su sitio web se abre en una nueva pantalla.
En el panel de la izquierda se encuentran todas las configuraciones de su sitio web, incluyendo:
- Identidad del sitio
- Apariencia
- Cabecera
- Menús
- Widgets
- Configuración de la página de inicio
- CSS adicional
- Y más
Y a la derecha hay una vista previa en vivo de su sitio web. Puedes ver cualquier cambio que hagas en la configuración de tu sitio en tu vista previa en tiempo real.
Por ejemplo, para añadir un nuevo widget a su sitio, haga clic en el encabezado Widgets y elija una barra lateral a la que añadir su widget.
A continuación, haga clic en el botón Añadir un widget para elegir entre los widgets disponibles en su sitio.
Tras hacer clic para elegir un widget, éste aparece instantáneamente en tu panel de widgets y en la vista previa de tu sitio web.
Todo este proceso te permite personalizar y previsualizar tu sitio WordPress antes de publicar los cambios y ponerlo en marcha. Solo tienes que hacer clic en Publicar cuando estés satisfecho con el aspecto.
6. Vista previa de las páginas de destino de WordPress con SeedProd
Muchos propietarios de sitios web desean aumentar los clientes potenciales y las ventas de su negocio. Y la mejor manera de hacerlo es con una gran estrategia de marketing digital y páginas de destino de alta conversión.
Sin embargo, muchos plugins de páginas de destino no ofrecen una manera fácil de previsualizar sus diseños antes de hacerlos en vivo. O, si lo hacen, carecen de funciones esenciales como la vista previa para móviles y la edición en vivo.
Si desea hacer páginas de destino con éxito en WordPress y ver fácilmente una demostración en vivo al instante, le sugerimos que utilice SeedProd.
Con toneladas de plantillas de páginas de aterrizaje multipropósito, puede comenzar rápidamente. Y puedes personalizar cada elemento de la página para conseguir el máximo de clientes potenciales para tu negocio.
Siga esta guía para aprender a crear una página de aterrizaje con SeedProd.
Una vez que haya terminado de diseñar su página de destino, haga clic en el icono Vista previa para móviles situado en la parte inferior de la pantalla.
Esto abre una demostración en vivo de su página de destino en el móvil. Desde ahí, puedes previsualizar la versión móvil de tu página de destino y hacer cambios hasta que tenga el aspecto que deseas.
Para volver a la vista previa del escritorio, basta con hacer clic en el mismo icono.
También puede previsualizar toda su página de destino en una nueva pestaña del navegador. Primero, haz clic en el botón verde Guardar para almacenar los cambios más recientes y, a continuación, haz clic en el botón Vista previa.
La vista previa de su página de destino se abrirá ahora en una nueva pestaña para que pueda ver su aspecto.
7. Previsualice su tema de WordPress con SeedProd
Además de crear páginas de destino, SeedProd también incluye un potente constructor de temas de WordPress. Utiliza la misma funcionalidad de arrastrar y soltar que el constructor de páginas, lo que le permite crear temas de WordPress personalizados sin escribir código ni contratar a un desarrollador.
También significa que no necesitará cargar e instalar archivos de tema de WordPress por separado: puede hacerlo todo con un plan SeedProd Pro.
Puede crear todas las partes que componen el diseño de un tema de WordPress con SeedProd. Simplemente elija una plantilla de tema prefabricado de la biblioteca.
A continuación, puede editar las condiciones de visualización y las partes temáticas para adaptarlas a las necesidades de su sitio web.
A partir de ahí, puede personalizar cada sección de su tema en el editor visual como lo hizo con su página de destino.
Cuando estés satisfecho con el diseño y la disposición de tu tema, puedes previsualizar su aspecto en el previsualizador de sitios web para móvil y escritorio de SeedProd.
Al igual que el constructor de páginas, puede desactivar la visibilidad de diferentes elementos tanto para diseños móviles como de escritorio.
8. Vista previa del trabajo de desarrollo con entornos de puesta en escena
Los métodos anteriores son una buena forma de previsualizar cambios menores en su sitio WordPress. Pero si estás planeando alguna actualización importante, o trabajando en un proyecto de desarrollo para un cliente, entonces necesitarás algo un poco más avanzado.
En esta situación, sugerimos utilizar un sitio de ensayo, también conocido como sitio de desarrollo.
Un sitio de ensayo es un clon del sitio web en el que está trabajando. Permite probar los cambios en un entorno seguro antes de publicarlos en el sitio de producción (sitio activo).
Muchos proveedores de alojamiento web ofrecen entornos de ensayo y producción como parte de sus paquetes de alojamiento. La opción más popular es Bluehost.
Bluehost es el mejor proveedor de alojamiento gestionado para WordPress del mercado y está recomendado oficialmente por WordPress.org. Ofrece una amplia variedad de planes de alojamiento para principiantes y medianas y grandes empresas con atención al cliente 24/7.
Todos los planes de alojamiento gestionado de WordPress de Bluehost también ofrecen entornos de ensayo integrados, para que pueda probar nuevas funciones antes de implementarlas en su sitio web activo. Echa un vistazo a esta reseña de Bluehost para conocer todos los detalles de por qué son la mejor opción para sitios WordPress en crecimiento.
Ahora, vamos a ver cómo configurar un entorno de ensayo con Bluehost.
En primer lugar, inicie sesión en el área de administración de su sitio WordPress y vaya a Bluehost " Staging. Esto le llevará a una pantalla que explica lo que es un sitio de ensayo y la URL de su sitio de producción.
Para crear su entorno de ensayo, haga clic en el botón Crear sitio de ensayo.
A continuación, Bluehost preparará su entorno de ensayo para su sitio web. Una vez terminado, muestra una pantalla con la opción de visitar su sitio de staging o de producción.
Haga clic en la opción Sitio de ensayo para ir al área de administración de su sitio WordPress de ensayo. Verás un botón rojo en la parte superior de la barra de administración para indicar que estás trabajando en un entorno de ensayo.
Ahora puede seguir trabajando en su sitio web sin preocuparse de que afecte a su sitio activo.
Cuando esté listo para publicar los cambios en su sitio web activo, haga clic en la flecha hacia abajo situada junto al botón Desplegar todos los cambios.
Verás 3 opciones de despliegue:
- Desplegar todos los cambios
- Desplegar sólo archivos
- Desplegar base de datos
Si no está seguro, haga clic en el botón Desplegar todos los cambios para enviar todos los cambios de su entorno de ensayo a su sitio WordPress activo.
Preguntas frecuentes sobre la previsualización de WordPress antes de su publicación
Espero que este artículo te haya ayudado a aprender a previsualizar tu sitio de WordPress antes de lanzarlo. Puede que también te guste esta guía sobre los problemas más comunes de WordPress y cómo solucionarlos.
Si le ha gustado este artículo, síganos en YouTube, Twitter y Facebook para obtener más contenidos útiles que le ayudarán a hacer crecer su negocio.
