Editor de páginas

Con el editor cambias una página web viendo exactamente lo que verán sus visitantes: haces clic en un texto y escribes, arrastras bloques, cambias fotos y colores, y guardas cuando estás conforme. No hace falta saber programar. Este manual recorre todas las herramientas con capturas reales del editor.

1Qué es

El editor se abre a pantalla completa con una página cargada en el lienzo, tal cual se publica. Todo lo que hagas se ve al momento, pero nada cambia en la web hasta que pulsas Guardar. Puedes probar, equivocarte y deshacer con total libertad.

Al pulsar Guardar la página queda publicada tal cual la ves: no hay una versión intermedia. Si te arrepientes de algo después de guardar, cámbialo y vuelve a guardar. La vista previa de la ficha de la página y las miniaturas del listado se actualizan solas.

2La pantalla

1. Barra superior: guardar, deshacer, vista de escritorio/tableta/móvil, ayuda, IA y las acciones que añada la aplicación (ver la página, volver…).
2. Carril: cambia el panel de la izquierda entre Bloques, Estructura y Medios.
3. Panel izquierdo: lo que se puede añadir (bloques y fotos) o el árbol de la página (estructura).
4. Lienzo: la página tal cual se ve publicada. Aquí se hace clic, se escribe y se arrastra.
5. Panel derecho: las propiedades de lo que tengas seleccionado: Estilo, Básicos, Atributos y Código.
6. Barra de estado: la ruta del elemento seleccionado (puedes pulsar cualquier tramo para subir de nivel) y el zoom.

La barra superior de cerca

1. Nombre de la página y su idioma.
2. Escritorio · Tableta · Móvil: cambia el ancho del lienzo para ver la página como en cada dispositivo (ver sección 9).
3. Deshacer y rehacer (Ctrl+Z / Ctrl+Y).
4. Estado: Sin cambios o Cambios sin guardar.
5. Ayuda (este manual), Generar página con IA, Ver página (abre la página publicada en otra pestaña) y Volver a la ficha de la página.
6. Guardar (Ctrl+S).

3Seleccionar y moverse por la página

Haz clic sobre cualquier cosa del lienzo para seleccionarla. Aparece un contorno azul con su nombre, una pequeña barra de herramientas y sus propiedades a la derecha.

1. Etiqueta con el nombre del elemento (por ejemplo section#proyectos o Imagen).
2. Barra flotante: seleccionar el padre, mover (arrastra el icono de flechas), subir, bajar, duplicar, editar con IA y eliminar.
3. Ruta en la barra de estado: cada tramo es un contenedor; pulsa uno para seleccionarlo.
4. Panel derecho con las propiedades del elemento.

El árbol de la página

El panel Estructura muestra la página como un árbol. Sirve para llegar a cosas difíciles de pinchar (una sección completa, un contenedor invisible) y para arrastrar bloques de un sitio a otro con precisión.

El menú del botón derecho

Sobre cualquier elemento, el botón derecho abre un menú con todo lo que se puede hacer con él: editar el texto, editar con IA, las acciones del componente (añadir sección, pestaña…), duplicar, copiar, cortar, pegar, seleccionar el padre, mover y eliminar.

4Escribir y dar formato al texto

Haz clic sobre un texto y empieza a escribir: no hay que pulsar nada más. Aparece la barra de texto con las opciones de formato.

1. Barra de texto: tipo de bloque (párrafo, título 1-6, cita), fuente, tamaño, negrita, cursiva, subrayado, tachado, color y resaltado, enlace, listas y limpiar formato.

• Seleccionar texto y pulsar un botón aplica el formato solo a esa parte; sin selección se aplica a todo el bloque.
• Enlaces: el botón de enlace abre un diálogo con dos pestañas: Página del site (elige una de las páginas de la web y el enlace se mantendrá aunque cambie su dirección) o Dirección (cualquier URL).
• Intro crea un párrafo nuevo (en una lista, un elemento nuevo); Mayús+Intro hace un salto de línea.
• Pegar desde Word o de otra web conserva negritas, listas y tablas y limpia lo demás.
• Salir del texto: Esc o un clic fuera. Cada sesión de escritura es un solo paso de deshacer.

5Añadir bloques

El panel Bloques contiene todo lo que puedes añadir: los básicos (contenedor, título, texto, botón, lista, separador, espacio, tabla, HTML) y la biblioteca de MiWebIA, agrupada en Maquetación (1 a 6 columnas), Fotos, vídeo y mapa (foto, carrusel, YouTube, mapa de Google, galería), Tarjetas y artículos, Texto y titulares (hero, titulares, bloques de texto, características, precios, timeline, pestañas, acordeón…) y Formularios (contacto). Al pasar el ratón por un bloque ves una miniatura.

1. Icono Bloques del carril.
2. Buscador: escribe "columnas", "pestañas", "tarjeta"…
3. Un bloque. Arrástralo al lienzo o haz doble clic para insertarlo detrás de lo que tengas seleccionado.

6Copiar, mover, duplicar y eliminar

7Fotos y archivos

El panel Medios es la carpeta de fotos, vídeos y documentos de tu web (la misma en la que se guardaron las fotos del asistente de creación, en files). Desde él subes archivos, creas carpetas y arrastras fotos directamente al lienzo.

1. Subir archivos, nueva carpeta y buscador por nombre.
2. Zona de arrastre: suelta aquí archivos desde tu ordenador.
3. Los archivos. Arrastra una foto al lienzo o haz doble clic para insertarla; la papelera la borra del servidor.

Cuando un componente o un fondo pide una imagen se abre el mismo gestor en una ventana: elige una (o varias, cuando se admiten) y pulsa Insertar. Con Intro confirmas; con el botón de doble marca seleccionas todas las visibles.

8Componentes

Un componente es un bloque "inteligente" que se configura desde un formulario en vez de tocar su interior: imagen, galería, vídeo, mapa, formularios… Cuáles hay depende de la aplicación. Cuando seleccionas uno, la pestaña Básicos del panel derecho muestra sus opciones.

Imagen y otros componentes

1. La etiqueta indica que es un componente.
2. Sus propiedades: imagen, texto alternativo, alineación, tamaño, radio, enlace…

• Un componente se selecciona y se mueve como una sola pieza: dentro no hay textos ni bloques sueltos que editar. Algunos (como los acordeones y las pestañas) sí dejan editar su contenido por dentro.
• Los componentes con lista de fotos (galerías, carruseles) se reordenan arrastrando las miniaturas; "Añadir imagen" abre el gestor en modo múltiple.
• Los bloques dinámicos (el formulario de contacto) se ven como una caja rayada en el editor y funcionan en la web publicada.

Cuando un componente tiene muchos ajustes finos, los agrupa en un subgrupo plegado, por ejemplo Avanzado en la imagen: recorte, sombra, opacidad, filtros…

Acordeón

El acordeón (secciones plegables tipo "preguntas frecuentes") se maneja como un conjunto. Selecciona cualquier sección y el panel derecho muestra, bajo Acordeón, la lista de secciones con la actual resaltada: pulsa una fila para ir a esa sección (en el editor se despliega sola mientras esté seleccionada), usa las flechas de cada fila para reordenar, la aspa para quitarla y Añadir sección al pie para crear otra. Las mismas acciones están en el botón derecho. La sección nueva aparece cerrada, con un título provisional, y ya funciona.

Pestañas

Con las pestañas pasa lo mismo: Añadir pestaña crea a la vez el botón y su contenido, Subir/Bajar mueve los dos y Eliminar esta pestaña quita ambos. Como en el editor solo se ve una pestaña a la vez, el panel derecho muestra bajo Pestañas la lista completa: pulsa una fila para saltar a su contenido (la pestaña seleccionada se muestra aunque esté cerrada). En el botón derecho tienes Ir a esta pestaña.

Botones

Al seleccionar un botón, el grupo Botón permite cambiar el texto (conservando el icono), la variante (principal, secundario, contorno, claro, oscuro, solo texto… según el tema de la web), el tamaño y el icono (de la lista o escribiendo las clases). El enlace se cambia en el grupo Enlace, con la pestaña "Página del site".

Columnas

Selecciona una columna o su fila y aparece Columnas · N: repartos listos para ese número de columnas (iguales, 1/3 · 2/3…), el ancho de cada columna (de 1 a 12) y Añadir columna. El contenido se conserva: solo cambia el reparto. En móvil las columnas se apilan solas.

Tablas

Inserta el bloque Tabla y edita cada celda como un texto. Con el botón derecho sobre una celda tienes insertar y eliminar filas y columnas y activar la fila de cabecera. Las tablas pegadas desde Word se convierten solas.

9Aspecto: colores, espacios y móvil

La pestaña Estilo reúne, por grupos, todo lo visual del elemento seleccionado: disposición, tamaño, espaciado, tipografía, fondo y borde, y otras propiedades. Los grupos están plegados para no abrumar; abre solo el que necesites.

1. Dispositivo y estado: decide si el cambio se aplica siempre, solo en tableta o móvil, o solo al pasar el ratón (:hover).
2. Grupos de propiedades. El número indica cuántas tienen valor propio.

Colores

El selector de color propone la paleta de la web (los colores del tema y los ya usados), colores recientes y un campo para escribir uno a mano.

Sombras y degradados

Los botones Añadir de sombra y de fondo degradado abren un asistente con vista previa y presets: sin escribir CSS.

Ver y ajustar en móvil

Con el botón Móvil de la barra superior el lienzo pasa a 390 px y ves la página como en un teléfono. Si en ese momento cambias un estilo, se guarda solo para móvil (el panel lo indica con una insignia); el escritorio no cambia. Igual con tableta.

1. Dispositivo activo en la barra superior.
2. El mismo dispositivo en el panel Estilo: los cambios van a esa vista.

10Ayuda de la IA

Las dos funciones de IA usan la misma inteligencia artificial que creó tu web. Cada uso consume tokens de tu cuenta, como el asistente de creación.

Cambiar un bloque con IA

Selecciona una sección, tarjeta o párrafo y pulsa la varita (barra flotante o botón derecho › Editar con IA…). Describe el cambio ("ponlo en dos columnas y añade un botón de contacto", "acorta el texto a la mitad", "traduce al inglés") y la IA devuelve el bloque modificado respetando el estilo de la web. Se puede deshacer.

Crear una página nueva con IA

Abre la página en el editor y pulsa Generar página con IA. Es la forma rápida de rellenar una página nueva (Servicios, Sobre nosotros, Cómo llegar…). Si la página ya tiene contenido, el editor avisa de que se sustituirá (siempre puedes deshacer).

1. Describe la página: secciones, tono, qué debe contar.
2. Elige fotos del gestor de medios: la IA usará solo esas.
3. Generar. La página se construye con los colores y las fuentes de tu web, sin cabecera ni pie (los pone la plataforma). Revísala, retoca lo que quieras y guarda.

11Para quien sabe HTML

La pestaña Código muestra el HTML del elemento seleccionado con un editor de código; Aplicar (o Ctrl+Intro) lo sustituye como un paso deshacible. Sin nada seleccionado, muestra el HTML de la página entera y, debajo, cada hoja de estilo <style> que viva en el contenido.

La pestaña Atributos permite cambiar el id, las clases (con sugerencias de las que ya existen en la web) y cualquier atributo. Y el bloque HTML del panel Bloques inserta HTML libre donde quieras.

12Guardar, deshacer y salir

1. El estado pasa a Cambios sin guardar en cuanto tocas algo.
2. Guardar (Ctrl+S) publica la página en el idioma que estás editando. El editor solo da por guardado lo que el servidor confirma.
3. Los demás idiomas de la página no cambian: cada uno se edita y se guarda por separado desde su pestaña en la ficha de la página (o se traduce desde allí con el botón Traducir).

• Deshacer/rehacer funcionan sobre todo lo hecho en la sesión, también después de guardar.
• Ver página abre en otra pestaña la página tal y como está guardada (no lo que aún no has guardado).
• Salir con cambios sin guardar pide confirmación; cerrar la pestaña del navegador también avisa.

13Atajos de teclado

14Preguntas frecuentes

He hecho clic y se ha seleccionado otra cosa. El clic selecciona lo más pequeño que hay bajo el ratón. Pulsa Seleccionar el padre (barra flotante, botón derecho o Alt+↑) o usa la ruta de la barra de estado.

El botón de guardar está apagado. La página no cargó bien (por ejemplo, caducó la sesión). Sal del editor, entra de nuevo en el panel y ábrelo otra vez.

¿Y el editor de antes? Ya no existe: la ficha de la página abre este editor, y la dirección antigua de edición (la página con ?edit=true) también te trae aquí.

Cambio un estilo y no se ve. Comprueba en qué dispositivo y estado estás escribiendo (parte alta de la pestaña Estilo). Si tienes seleccionado un contenedor, quizá el estilo debe ir en el elemento de dentro.

Un carrusel o un mapa no se mueve en el editor. Es normal: en el editor los bloques no ejecutan animaciones ni scripts, para que puedas editarlos con calma. En la web publicada funcionan.

He borrado algo sin querer. Ctrl+Z. Si ya habías guardado y cerrado el editor no hay versiones anteriores: vuelve a añadir el bloque (la biblioteca y la IA lo hacen rápido).

¿Puedo trabajar a la vez con otra persona? No en la misma página: el último que guarde pisará los cambios del otro.