La gran zona central del constructor es una vista previa en directo de la página que estás editando. Los botones de la barra superior cambian cómo la ves.
Desktop, Mobile y Fullscreen
Los botones de vista están al principio de la barra superior:
- Desktop: muestra la página como se ve en un ordenador.
- Mobile: muestra la página con el ancho de un móvil. Revísala a menudo, ya que la mayoría de los compradores usan el móvil.
- Fullscreen: oculta el panel de ajustes para que la vista previa ocupe todo el ancho. Para salir, haz clic en Desktop o Mobile, haz clic en una pestaña de la barra lateral izquierda o selecciona una sección con Inspector.
Solo se muestran los botones que caben en tu ventana. En una ventana pequeña, Fullscreen o Desktop pueden desaparecer, y si solo cabe una vista, los botones se ocultan. Agranda la ventana para recuperarlos. El constructor recuerda tu vista mientras la pestaña del navegador siga abierta. Después de recargar, Fullscreen se abre como Desktop.
Modo Inspector
Inspector es el icono del cursor en la barra superior. Está activado cuando abres el constructor.
- Mientras está activado, al pasar el ratón por la vista previa se resalta la sección o el bloque que hay debajo. Al hacer clic se selecciona y se abren sus ajustes en el panel, y su fila se abre en la pestaña Sections.
- Mientras está activado, la vista previa no reacciona como una tienda real: los enlaces, los botones y los deslizadores no funcionan, porque tu clic sirve para seleccionar.
- Haz clic de nuevo en el icono para desactivarlo. Ahora la vista previa funciona como tu tienda, así que puedes probar menús, deslizadores, el carrito lateral y los formularios.
El asistente de IA también puede activarlo o desactivarlo por ti. Consulta Acciones del asistente de IA en el constructor.
El botón Preview
El botón Preview (icono de ojo, junto a Publish) abre la página en la que estás en tu tienda real, en una pestaña nueva.
- Muestra la versión publicada. Los cambios que no has publicado solo están en el constructor, así que haz clic primero en Publish. Consulta Publicar los cambios del constructor.
- En las páginas Product, Landing, Collection y Policy, abre el producto, la colección o la política que elegiste en el constructor. Funciona aunque ese elemento aún no esté publicado, pero solo para ti.
- Está oculto en las páginas Checkout y Thanks, porque esas páginas necesitan un carrito o un pedido real.
- Si la pestaña de vista previa ya está abierta, recárgala después de publicar para ver la nueva versión.
Constructor claro u oscuro
Toggle theme (el icono de la luna) cambia el propio constructor entre modo claro y oscuro. No cambia tu tienda.
En un móvil o una tableta
En una pantalla estrecha, el panel de ajustes se coloca sobre la vista previa. Arrastra su asa hacia abajo para ver más de la vista previa, y arrástrala hacia arriba o tócala para que vuelvan los ajustes.
Antes de publicar
- Cambia a Mobile y recorre toda la página.
- Comprueba que el texto se lee bien sobre cada fondo.
- Desactiva Inspector y haz clic en tus botones y enlaces del menú para ver adónde llevan.