El editor

El editor es donde cambias todo lo que ven los visitantes: textos, imágenes, secciones, páginas, popups, colores y fuentes. Ábrelo desde el menú de tu web (Editor) o con Editar en la tarjeta de una web en Mis webs.

El editor funciona mejor en un ordenador. En el móvil o la tableta muestra un panel cada vez: cambia con Estructura, Vista previa y Editar en la parte inferior de la pantalla. Al elegir una sección o un elemento se abre Editar solo, y Publicar (el cohete, cuarto botón abajo) funciona desde cualquiera de ellos.

Con la IA activada, al tocar un texto en el teléfono la vista previa sigue abierta y aparece el campo de IA debajo del texto; toca Editar texto en él para escribir tú mismo.

Los tres paneles

El editor tiene tres columnas.

Izquierda: estructura y ajustes de toda la web

Arriba hay cuatro pestañas:

Centro: la vista previa en vivo

En el centro ves tu web exactamente como la verán los visitantes, y se actualiza mientras escribes. Encima está la barra de herramientas (la explicamos más abajo).

• Haz clic en un texto de la vista previa para saltar directamente a su campo a la derecha.
• Con la IA activada, también se abre un pequeño campo de IA justo encima del texto pulsado (ver IA en un solo texto más abajo). Haz clic en otro sitio o pulsa Esc para cerrarlo.
• Haz clic en un elemento (un botón, una imagen, una tarjeta) para seleccionar solo ese elemento.
• Haz clic en el fondo de una sección para seleccionar la sección entera.
• Los enlaces y formularios no hacen nada dentro de la vista previa, así que puedes hacer clic sin miedo.

Derecha: Editar y Añadir

El panel derecho tiene dos pestañas:

• Editar muestra los ajustes de lo que tengas seleccionado. Si no hay nada seleccionado, verás Nada seleccionado y un botón Añadir un elemento.
• Añadir es la biblioteca: elementos que puedes arrastrar a la vista previa, formularios, popups y secciones prediseñadas. Consulta Secciones y elementos.

Cuando hay una sección seleccionada, Editar tiene dos subpestañas:

• Contenido: textos, imágenes, enlaces y listas.
• Apariencia: el aspecto de la sección (fondo, espaciado, alineación, imagen de fondo) y su ID de la sección.
• Las secciones, columnas y elementos también tienen un panel Tamaño y espaciado (ancho, altura, margen y relleno). Ver Secciones y elementos.

El interruptor de arriba a la derecha de una sección seleccionada la activa o la desactiva en la web.

Editar textos e imágenes

1. Haz clic en el texto en la vista previa (o selecciona la sección y busca el campo a la derecha).
2. Escribe en el campo. La vista previa se actualiza al instante.
3. En un Título o un Titular principal, al pulsar Intro se añade un salto de línea.

Imágenes: haz clic en un campo de imagen para abrir Elige una imagen. Arrastra imágenes a la ventana o haz clic en Subir (JPG, PNG, WebP, AVIF o GIF, hasta 10 MB cada una) y luego haz clic en la imagen que quieras. También puedes pegar la dirección de una imagen que empiece por https:// en O introduce la dirección de una imagen y hacer clic en Usar.

Iconos: haz clic en un campo de icono para abrir el selector de iconos. Busca en inglés (video, camera, star…) o haz clic en una de las etiquetas rápidas.

Enlaces: los campos de enlace te ofrecen una lista de tus secciones, páginas y popups. Elige uno o pega un enlace como https://…, mailto: o tel:. Para enlazar un producto de tu tienda, escribe la dirección de su página, por ejemplo /product/mi-ebook.

Listas (enlaces del menú, preguntas frecuentes, servicios, testimonios…): haz clic en Añadir elemento para añadir uno, arrastra el asa para cambiar el orden y usa Duplicar, Ocultar o Eliminar en cada elemento.

Idiomas en los campos

Si tu web tiene más de un idioma, cada campo de texto muestra un pequeño código de idioma (por ejemplo EN). Los campos siempre editan el idioma que se ve en ese momento en la vista previa. Haz clic en el código, o en los botones de idioma de la barra de herramientas, para cambiar. Un campo al que le falta la traducción muestra Falta la traducción: los visitantes ven el texto en el idioma principal. Consulta Idiomas.

IA en un solo texto

Cuando la IA de la plataforma está activada, al hacer clic en un texto de la vista previa (un título, un párrafo, el texto de un botón, el de una tarjeta, una cita…) se abre un pequeño campo de IA justo encima, de aproximadamente la mitad del ancho de la vista previa. En el teléfono se abre debajo del texto, a todo el ancho.

1. Escribe lo que quieres, por ejemplo más cercano o menciona el envío gratis. El campo crece mientras escribes. Pulsa Intro para enviar (Mayús+Intro para una nueva línea) o haz clic en un botón rápido: Más corto, Más largo, Más persuasivo, Más sencillo, Corregir gramática o Traducir: … (uno por cada otro idioma del sitio).
2. Mientras la IA escribe, una línea fina recorre la parte superior del campo. Solo cambia este texto; el resto de la página queda igual.
3. El texto nuevo aparece en la vista previa y en su campo a la derecha. Haz clic en Deshacer para recuperar el texto anterior o en Mantener para cerrar el campo. Ctrl+Z también lo deshace más tarde.

El texto se reescribe en el idioma que muestra la vista previa; los demás idiomas del sitio que ya tienen este texto se actualizan para decir lo mismo, y las traducciones vacías siguen vacías (rellénalas con Traducir: …). Cada petición usa unos pocos créditos de IA, como cualquier edición con IA. Cuando se agotan los créditos, el campo lo indica y ofrece Conseguir créditos de IA. Ver Asistente de IA.

El campo se cierra al pulsar Esc, hacer clic fuera o seleccionar otra cosa. Para abrirlo de nuevo en un elemento seleccionado, haz clic en ✦ AI en la barra de herramientas del elemento.

Guardado: borradores automáticos

Nunca tienes que pulsar "guardar". Cada cambio se guarda automáticamente como borrador más o menos un segundo después de que dejes de escribir.

El punto de la barra de herramientas muestra el estado (pasa el ratón por encima para leerlo):

• verde: Guardado
• amarillo: Cambios… o Guardando…
• rojo: Error al guardar (revisa tu conexión a internet; un mensaje te explica qué ha fallado)

Pulsa Ctrl+S (Cmd+S en Mac) para guardar al momento. Si intentas cerrar la pestaña mientras todavía se está guardando un cambio, el navegador te pide que esperes.

Borrador o publicado

El borrador es solo para ti. Los visitantes siguen viendo la última versión publicada hasta que haces clic en Publicar.

Para publicar:

1. Haz clic en Publicar (arriba a la derecha). Un puntito en el botón indica que hay cambios sin publicar.
2. Si quieres, escribe una Nota breve, por ejemplo Precios nuevos. Te ayudará a encontrar esta versión más tarde.
3. Haz clic en Publicar ahora. Los visitantes ven la nueva versión al instante.

El menú ⋮ junto al punto de guardado tiene tres acciones más:

• Abrir el sitio publicado: abre la página actual de la web publicada en una pestaña nueva.
• Historial de publicaciones: todas las versiones que has publicado. Haz clic en Restaurar en una anterior para copiarla al borrador, revisarla en el editor y volver a publicarla.
• Descartar cambios sin publicar: tira el borrador y recupera la versión publicada.

En Mis webs, la etiqueta Sin publicar te recuerda que una web tiene cambios en borrador que nadie ve todavía.

Deshacer y rehacer

• Usa los botones de flecha de la barra de herramientas, o pulsa Ctrl+Z para deshacer y Ctrl+Mayús+Z (o Ctrl+Y) para rehacer. En Mac usa Cmd.
• Deshacer funciona con todo: secciones, páginas y popups eliminados, cambios hechos con IA.
• Mientras el cursor está en un campo de texto, Ctrl+Z deshace lo que has escrito en ese campo, como siempre.

Atajos de teclado

Revisar móviles y tabletas

Usa los tres iconos de la izquierda de la barra de herramientas para ver la web como Escritorio, Tableta o Teléfono. Todas las webs se adaptan solas a las pantallas pequeñas; aun así, vale la pena revisar los titulares largos y las imágenes en Teléfono.

La barra de herramientas de un vistazo

De izquierda a derecha:

1. Vista previa Escritorio / Tableta / Teléfono.
2. Botones de idioma (solo con más de un idioma) y Traducción con IA cuando ves un idioma distinto del principal.
3. Deshacer y Rehacer.
4. IA: pide a la IA que cambie la sección seleccionada o la página entera. Muestra los créditos que ha usado cada edición. Consulta Asistente de IA.
5. El punto del estado de guardado.
6. Menú ⋮: abrir el sitio publicado, historial de publicaciones, descartar cambios.
7. Publicar.

Consejos

• Trabaja en pasos pequeños y publica a menudo; cada publicación se guarda en el Historial, así que siempre puedes volver atrás.
• Si algo se ve mal después de un cambio grande, pulsa Ctrl+Z unas cuantas veces o usa Descartar cambios sin publicar.
• Si tu plan o tu prueba ha terminado, el editor queda bloqueado hasta que elijas un plan. No se pierde nada.