El Editor con vista previa es una forma alternativa de editar tu Página Web: te muestra tu home en vivo a la izquierda y el formulario de edición a la derecha, con un menú para saltar entre pantallas. Al guardar cualquier cambio, la vista previa se recarga automáticamente y ves el resultado al instante. Es la forma rápida de iterar textos cortos y ajustes finos. Entre los dos editores cambias con el toggle «Editor Backend» / «Editor con vista previa» (arriba a la derecha), que conserva la sección en la que estás.

Al entrar, aterrizas en Contenido principal › Portada — la primera pantalla del menú, que es lo primero que se edita.

La filosofía del editor es misma data, otra forma de editar. Cualquier cambio que hagas desde la vista previa también se guarda igual que en el editor backend — es la misma información, solo cambia la experiencia: en lugar de navegar entre pantallas separadas, ves el contexto visual mientras editas.

Tiene un truco potente: edit-in-place en la vista previa. Al pasar el mouse sobre una sección de tu home aparece una pastilla «✎ Editar»; al hacer click, el formulario de la derecha salta automáticamente a la pantalla correcta. Esto funciona en las 12 plantillas y cada pastilla lleva a su pantalla exacta (Portada, Sobre mí, Servicios, Marca, Contacto, etc.), sin callejones sin salida.

El editor también tiene, dentro del menú «⋯» (Opciones del editor) arriba a la derecha, el botón «Restablecer plantilla a valores originales» que devuelve todos los textos propios de tu plantilla (el texto pequeño sobre el título, los títulos de sección y los slogans del diseño) a sus valores originales. No toca tus servicios, equipo, contacto ni imágenes. Útil cuando experimentaste mucho con textos y quieres volver a los defaults sensatos. Ojo: es una acción irreversible.

Manual completo

Cómo acceder al editor

Estando en cualquier pantalla de Página Web, usa el toggle «Editor Backend» / «Editor con vista previa» (arriba a la derecha de la banda de Página Web) y elige «Editor con vista previa». El toggle conserva la sección en la que estabas, así que no pierdes el contexto al cambiar de editor.

Cómo funciona el menú del editor

A la derecha, arriba del formulario, el menú tiene dos niveles con bandas de color (igual que el editor backend):

• Banda navy (arriba): los grupos — Contenido principal · Contenido secundario · Diseño y estructura.
• Banda pastel (debajo): las pantallas del grupo activo — al elegir un grupo, aparecen sus pantallas.

Los grupos y las pantallas que ves:

Grupo	Pantallas
Contenido principal	Portada · Sobre mí · Servicios · Productos · Equipo · Proceso
Contenido secundario	Aviso destacado (Promo) · Clientes · Por qué elegirnos (Beneficios) · Contacto
Diseño y estructura	Marca · Diseño · Tu sub-rubro · Menú y secciones

El menú solo muestra las pantallas que tu plantilla soporta. Si tu plantilla no tiene «Aviso destacado», esa pantalla no aparece. Dominio no está en la vista previa (se edita solo desde el editor backend). El catálogo (productos, categorías, pedidos) y las reservas tampoco se editan desde aquí — viven en sus propios buckets.

Edit-in-place desde la vista previa

Cuando estás en el editor con vista previa, al pasar el mouse sobre una sección de tu home aparece una pastilla «✎ Editar». Esto funciona en las 12 plantillas.

Al hacer click en una:

1. El formulario de la derecha salta a la pantalla correcta automáticamente.
2. Se carga con tus datos actuales.
3. Editas → guardas → la vista previa se refresca → ves el cambio.

Es la forma más natural de editar: «veo algo en el sitio que quiero cambiar → click → estoy en el formulario correcto». Cada pastilla lleva a su pantalla exacta, sin llevarte a un lugar equivocado.

Atajos especiales de la vista previa

Algunos clicks tienen comportamiento extra:

• Click en el logo del header → abre Marca › Identidad.
• Click en los colores de un botón → abre Marca › Colores.
• Click en el bloque de SEO/Google (no visible al cliente) → abre Marca › SEO.
• Click en datos de contacto del header → abre Contacto.
• Click en la sección de productos del catálogo → no hace nada aquí (el catálogo se edita en su propio bucket, no desde el editor).

El preview se recarga automáticamente

Al guardar un cambio en el sidebar derecho:

1. MYPES guarda el cambio.
2. Le avisa al preview que hubo una actualización.
3. El iframe se recarga solo.
4. Ves la home actualizada con tu cambio.

Si por alguna razón el preview no se actualiza automáticamente, presiona F5 dentro del iframe o el botón de recarga del navegador.

Sincronización con la URL

El editor recuerda en qué sección estás dentro de la propia dirección. Si refrescas la página o compartes el enlace, vuelves a la misma sección.

Por ejemplo, si guardas o compartes el enlace del editor con la sección Portada abierta, al volver se abre directo en Portada.

Restablecer plantilla a valores originales

Está dentro del menú «⋯» (Opciones del editor) arriba a la derecha: «Restablecer plantilla a valores originales». Te pide confirmar antes de aplicar.

Lo que hace:

• Borra todos los textos propios de la plantilla (el texto pequeño sobre el título, los títulos de sección, los slogans del diseño, etc.) que editaste o generaste con IA.
• Vuelve a generar los textos por defecto sensatos para tu rubro y plantilla actual (los mismos que tenías al crear el sitio).

Lo que NO toca:

• Tus secciones Sobre mí, Servicios, Equipo, Proceso, Clientes, Contacto (ese contenido es tuyo, no del template).
• Tus fotos del hero / sobre mí / promo.
• Tu marca (logo, colores, SEO).
• Tu menú y visibilidad de secciones.

Útil cuando:

• Experimentaste mucho con textos y se ven feos.
• Generaste con IA pero no te convencieron los resultados.
• Quieres volver a empezar con los textos de la plantilla y ajustar solo lo que importa.

Cuándo usar cada editor

Caso	Mejor en
Quiero ver cómo se ve mientras edito	Editor con vista previa
Voy a editar 1 sección rápido	Editor con vista previa
Voy a editar muchas secciones de corrido	Editor Backend (más espacio)
Quiero ajustar textos finos	Editor con vista previa
Voy a subir/elegir fotos	Cualquiera (el flujo es igual)
Edito desde mobile	Editor Backend (la vista previa es pesada en mobile)
Quiero ver el cambio de color en vivo	Editor con vista previa

Limitaciones del editor

• No edita catálogo: los productos, categorías, stock y pedidos no se editan desde aquí. Click en la sección de productos te avisa que vayas al bucket Catálogo.
• No edita reservas: si tienes reservas activas, su configuración vive en el bucket Reservas, no en el editor de página web.
• No incluye Dominio: la pantalla Dominio propio se edita solo desde el Editor Backend.
• Mobile no ideal: la vista partida funciona bien en pantallas 1280+. En tablet es ajustada, en mobile no es práctica.
• Algunos cambios requieren recarga manual: cambios profundos de plantilla (cambiar de plantilla, activar/desactivar catálogo) pueden requerir recargar la vista previa manualmente.

Cómo se ve el modo edición en la vista previa

Cuando entras al editor con vista previa, tu home se carga en modo edición. Este modo activa:

• La pastilla «✎ Editar» al pasar el mouse sobre cada sección.
• Un realce (borde de color) en las secciones al pasar el mouse.

El cliente normal NO ve estos elementos cuando visita tu sitio en mypes.pe/{tu-slug}. Son exclusivos del editor del panel.

Refrescar el preview manualmente

A veces el iframe no se refresca solo (cache del navegador agresivo, error de red, etc.). Para forzar:

1. Click en el iframe (foco dentro).
2. Presiona F5 o Ctrl+R.
3. El iframe se recarga.

Si persiste el problema, cierra el editor y vuelve a abrirlo.

FAQ

¿El editor con vista previa reemplaza al Editor Backend? No. Conviven. Algunos prefieren la vista previa (más visual), otros el Editor Backend (más espacio). Cambias entre ambos con el toggle de arriba a la derecha, sin perder la sección.

¿Puedo editar el HTML/CSS de mi sitio desde el editor? No. El editor edita los textos y datos de las secciones, no el código de la plantilla. Las plantillas son rígidas por diseño.

¿Los cambios que hago en el editor se guardan en tiempo real? No automáticamente. Tienes que presionar «Guardar» en cada formulario. Lo que sí se actualiza al instante después de guardar es la vista previa.

¿Por qué no veo el botón «Restablecer plantilla»? Está dentro del menú «⋯» (Opciones del editor) arriba a la derecha, no suelto en el menú. Ábrelo y verás «Restablecer plantilla a valores originales».

¿Restablecer plantilla borra mi sección Sobre mí? No. Afecta solo a los textos propios de la plantilla (los del diseño). Tu Sobre mí, Servicios, Equipo y demás secciones quedan intactas.

¿El edit-in-place funciona en mobile? Limitadamente. Las pastillas «✎ Editar» aparecen, pero el formulario al lado no tiene espacio. Mejor usa el Editor Backend en mobile.

¿Puedo previsualizar cómo se ve en mobile sin salir del editor? Hoy no. La vista previa usa el ancho disponible. Si quieres ver mobile, abre tu sitio en otra pestaña y reduce el ancho del navegador (o usa las herramientas de desarrollo del navegador en modo responsive).