Editar con el editor visual

El editor visual no te muestra una lista de bloques que describen tu página: te muestra la página. El menú de arriba, tu contenido en el medio, el pie de página abajo, con las tipografías y los colores del sitio público. Lo que ves ahí es lo que va a ver un visitante.

Se abre desde Configuración → Páginas Web → Editar visual. Si eliges una página de la lista antes de abrirlo, aparece con su contenido, listo para mover y editar.

Una página vieja escrita en HTML entra como un bloque

Algunas páginas antiguas están guardadas como un HTML de una pieza, no como bloques. Al abrirlas, todo ese HTML entra en un solo bloque HTML libre, con su CSS y su JavaScript adentro: no se pierde nada. Puedes moverlo, agregarle bloques alrededor y editarlo por dentro con su editor de código.

Eso sí: si esa página usa una rejilla —secciones que ocupan columnas de distinto ancho— dentro de un solo bloque se verá apilada, porque la rejilla coloca a sus hijos directos y ahora hay uno solo. La página publicada no cambia; lo que se ve raro es el lienzo.

Para eso está la reconstrucción de abajo.

Recuperar los bloques de una página que los perdió

Si la página fue creada con bloques y los perdió, se pueden reconstruir desde su propio HTML: el generador deja marcado el tipo de cada bloque, y con eso el árbol se vuelve a armar. Es una herramienta de línea de comandos, así que la corre quien administra el sistema:

php tools/page-decompile-verify.php web/pages/inicio.php           # revisar
php tools/page-decompile-verify.php web/pages/inicio.php --write   # convertir

Lo primero muestra cuántos bloques reconoció y si la reconstrucción produce exactamente el mismo HTML. Sólo con --write escribe, y sólo si coincide: si no, se niega, porque convertir cambiaría la página. Antes de escribir deja una copia del archivo original al lado.

Lo que no puede reconstruir con exactitud lo deja como HTML libre con ese marcado tal cual. Así que el peor resultado es una página con menos bloques y más grandes — nunca una página distinta.

Lo que hay en pantalla

Zona	Para qué
Rail izquierdo	La lista de elementos que puedes agregar; cuando eliges uno de la página, se convierte en sus ajustes
Centro	La página, tal como se publica
Barra de arriba	Pantalla que estás viendo, deshacer, estructura, vista previa y guardar
Rail derecho	La estructura del documento (se abre con el botón del árbol)

Escribir directamente sobre la página

Haz clic en un título, un párrafo o el texto de un botón y escribe ahí mismo. No hay que buscar el campo correcto en el costado.

• Enter en un título o un botón cierra la edición (esos elementos son de una sola línea).
• En el elemento Texto, una línea en blanco separa párrafos, igual que antes.
• En ese mismo elemento, una línea que empieza con - es una viñeta: varias líneas seguidas así se publican como una lista.
• Escape sale sin seguir escribiendo.

Los datos de una tabla no se escriben encima

Un elemento que muestra una columna de tu tabla (por ejemplo el nombre de un producto) no se edita en el lienzo: su texto viene de los datos. Ahí el lápiz de su barra te lleva a los ajustes, que es donde se elige qué columna mostrar.

La barra de cada elemento

Al pasar el mouse por un elemento aparece su barra, con su nombre y cuatro acciones: agarre para moverlo, ajustes, duplicar y eliminar.

Con el botón derecho sobre cualquier elemento tienes además:

Acción	Atajo	Qué hace
Duplicar	Ctrl + D	Una copia justo debajo
Copiar	Ctrl + C	Lo guarda para pegarlo en otra parte de la página
Pegar	Ctrl + V	Pega la copia después del elemento donde hiciste clic
Pegar estilo	—	Copia sólo la apariencia, no el contenido
Eliminar	—	Lo quita

Pegar estilo es el atajo para que dos elementos se vean igual sin volver a configurar color, tamaño y espaciados uno por uno.

Agregar elementos

Arrastra desde el rail izquierdo al lugar donde lo quieres. Mientras arrastras, una línea azul marca exactamente dónde va a quedar: entre dos elementos, al principio o al final de una columna.

Si prefieres no arrastrar —o estás en una pantalla táctil— cada columna vacía tiene un botón + Agregar aquí, y una página en blanco te invita a poner el primer elemento.

Enlaces que salen de tu sitio

Un Botón —y una Imagen con enlace— trae el interruptor Abrir en otra pestaña, en la solapa Contenido.

Enciéndelo cuando el enlace lleve fuera de tu sitio: WhatsApp, Instagram, Google Maps, un PDF. El visitante abre eso en una pestaña aparte y tu página sigue donde estaba, que es lo que hace que vuelva. Apagado —lo normal para moverse dentro de tu propio sitio— el enlace se abre en la misma pestaña.

Lo que se abre aparte no queda desprotegido

Al abrir en otra pestaña, el sistema agrega solo la protección que corresponde (rel="noopener"). Sin ella, la página que se abre puede cambiar la tuya por otra a sus espaldas. No hay nada que configurar: va siempre.

Deshacer y rehacer

Todo se puede deshacer: agregar, mover, eliminar, duplicar, cambiar un texto o un color.

• Los botones ↺ ↻ de la barra de arriba.
• Ctrl + Z para deshacer, Ctrl + Shift + Z (o Ctrl + Y) para rehacer.

Se guardan al menos los últimos 50 pasos, y guardar la página no borra el historial: si guardaste y después te arrepientes, puedes seguir retrocediendo y volver a guardar.

Escribir cuenta como un solo paso

Cambiar una palabra letra por letra no llena el historial de cincuenta pasos inútiles: mientras escribes seguido, todo el gesto es un deshacer.

Ver la página en cada pantalla

Los tres botones de arriba —escritorio, tableta, celular— cambian el ancho que representa el lienzo. No es una simulación: las columnas se apilan y los textos se reacomodan exactamente como en el teléfono de un visitante.

Al lado de esos botones verás algo como 1400 px · 62%. Significa: el lienzo está dibujando la página como se ve en un monitor de 1400 px, y la muestra al 62% para que te quepa en pantalla.

Por qué importa

Antes el lienzo medía lo que sobrara: en un monitor grande daba unos 1400 px y la página se veía como la ve un visitante, pero en un portátil daban unos 700 — y a 700 px la página entra en su diseño de tableta. El editor te mostraba una página distinta según el computador desde el que estuvieras editando, sin manera de saber cuál de las dos vería tu visitante.

Ahora el ancho es siempre el mismo y sólo cambia el tamaño con que lo ves. El texto se lee más chico en una pantalla pequeña; el diseño es el de verdad.

Al cambiar de pantalla, la pestaña Estilo cambia con él: lo que ajustes mientras miras el celular se guarda sólo para celular. Así nunca estás editando una pantalla mientras mirás otra.

Un elemento que hayas ocultado en esa pantalla no desaparece del lienzo: se muestra atenuado con la etiqueta oculto en esta pantalla, para que puedas seleccionarlo y volver a mostrarlo.

La estructura del documento

El botón del árbol abre el rail derecho con la página como lista: secciones, columnas y elementos, con su nombre. Sirve cuando la página es larga y buscar un elemento a clics se vuelve lento.

• Clic en una fila selecciona ese elemento y el lienzo se desplaza hasta él.
• Arrastrar una fila lo mueve, igual que arrastrarlo en el lienzo.
• El ojo lo oculta o lo muestra en la pantalla que estás viendo.
• El basurero lo elimina.

Todo lo que hagas ahí también se puede deshacer.

CSS propio para un elemento

Cuando los controles no alcanzan, cada elemento tiene su propia caja de CSS en Avanzado → CSS personalizado. Escribe selector donde quieras nombrar este elemento:

selector {
  border: 2px solid #333;
  border-radius: 14px;
}
selector:hover { opacity: .85; }
selector .form-label { text-transform: uppercase; }

selector se reemplaza por el elemento, así que lo que escribas ahí no puede afectar a ningún otro — esa es la diferencia con la caja de CSS de toda la página. Se aplica después de los controles, o sea que tu regla gana.

Para una pantalla en particular

Esta caja es una sola, no una por dispositivo: escribe tú la consulta.

@media (max-width: 575.98px) { selector { font-size: 12px; } }

El bloque HTML libre: escribir código de verdad

Cuando quieres pegar algo que no existe como elemento —el reproductor de una radio, un mapa, una tarjeta que armaste tú— arrastra el bloque HTML libre (está en la categoría Avanzado) y pulsa Abrir el editor de código.

Se abre una ventana a pantalla completa con tres editores, uno por lenguaje:

Pestaña	Qué escribes ahí	Dónde termina
HTML	El marcado del bloque, tal cual	En el lugar de la página donde pusiste el bloque
CSS	Los estilos de ese marcado	En la hoja de estilos de la página, acotado a este bloque
JavaScript	El comportamiento	En un <script> al final de la página

Cada editor tiene numeración de líneas, colores por lenguaje, cierre automático de etiquetas y comillas y autocompletado (empieza a escribir, o pulsa Ctrl + Espacio). Ctrl + S aplica los cambios sin usar el mouse.

Un punto verde en la pestaña avisa cuál de los tres ya tiene algo escrito, así no se te olvida que el CSS estaba en la otra pestaña.

Insertar los datos de tu tabla

Primero hay que conectar la página a una tabla

Los campos salen de la tabla a la que la página está atada, y eso se elige en la barra de arriba del editor visual, en el selector que por defecto dice «Página en blanco (sin tabla)». Mientras diga eso, el editor de código te lo recuerda y te lleva hasta ahí sin perder lo que llevas escrito.

Un header o un footer no se conectan a ninguna tabla: se muestran en todas las páginas, así que no hay un registro del que sacar datos.

Con la tabla elegida, a la izquierda del editor aparece la lista de sus campos. Un clic inserta el campo donde tengas el cursor, ya con la etiqueta que le corresponde:

El campo es…	Lo que se inserta	Por qué
Texto, número	{{name_producto}}	Imprime el valor
Foto	<img src="{{img foto_producto}}" alt="">	Una imagen no se imprime como texto
Varias fotos	{{#imagenes galeria}}<img src="{{url}}">{{/imagenes}}	Recorre todas las de ese campo
Precio	{{money precio_producto}}	Con separador de miles y símbolo
Fecha	{{fecha fecha_producto}}	En formato legible, no el de la base

El botón pequeño de la derecha de cada campo ofrece la otra forma de insertarlo: el valor tal cual cuando por defecto sale con formato, o como precio cuando es un número suelto.

Abajo, en Estructura:

• Repetir por cada registro envuelve lo que tengas seleccionado en {{#cada}}…{{/cada}}, que es lo que dibuja una tarjeta por cada fila de la tabla. Si el bloque ya está dentro de una Lista de registros no aparece: ahí ya se repite y anidarlo no funcionaría.
• Mostrar sólo si tiene valor envuelve en {{#si campo}}…{{/si}}, para que una etiqueta vacía no deje un hueco raro en la página.

Las etiquetas sólo valen en el HTML

En el CSS y el JavaScript del bloque se publican tal cual: si escribes {{color_producto}} en el CSS, el visitante ve esas llaves. Para llevar un dato al estilo, ponlo en el HTML —por ejemplo en un style="…"— o dale una clase.

Todas estas etiquetas están explicadas una por una en Insertar datos de tus tablas.

Ver el resultado mientras escribes

A la derecha, Ver el resultado dibuja el bloque funcionando: con sus estilos aplicados y su JavaScript corriendo. Es el único lugar del panel donde el código se ejecuta de verdad mientras lo escribes.

Abajo, la barra de estado muestra en qué línea vas y los errores del JavaScript: si te equivocaste en un nombre, lo dice ahí en rojo en vez de dejarte adivinar por qué no pasa nada.

Cuando la página está conectada a una tabla, el resultado además trae los datos: en vez de {{title_producto}} ves el título del primer registro, con sus precios y sus fechas ya formateados. Arriba del panel se dice de qué tabla salieron.

Dos casos en que verás las etiquetas escritas tal cual, y el panel te dice cuál es:

• La tabla todavía no tiene registros — resolver dejaría todo en blanco y la tarjeta se vería rota sin estarlo.
• La página no está conectada a ninguna tabla.

Para ver la página entera con sus datos —no sólo este bloque— usa Vista previa en la barra del editor visual.

El CSS no puede desordenar el resto de la página

Igual que en el CSS de un elemento, escribe selector donde quieras nombrar este bloque:

selector .promo {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}
selector .promo > h3 { margin-top: 0; }

Si prefieres reglas para toda la página, escribe la clase directamente y no uses selector.

Lo que escribas se publica sin revisar

Este bloque existe para pegar código, así que nadie lo corrige por ti: un <div> sin cerrar puede descuadrar la página entera y un JavaScript con un error puede detener otros. Usa Ver el resultado antes de guardar.

En el lienzo no vas a ver el JavaScript funcionando

El lienzo es la superficie donde editas, y ahí los scripts están apagados a propósito (si no, no podrías seleccionar ni arrastrar el bloque). Se ven corriendo en Ver el resultado del editor de código y en Vista previa.

Un bloque puede llevar sólo CSS o sólo JavaScript, sin marcado: sirve para un fragmento de analítica o para una regla suelta. En el lienzo se muestra diciendo qué lleva, para que no parezca vacío.

Los widgets de tus módulos se ven

Un formulario insertado desde De tus módulos se dibuja en el lienzo con sus campos reales, no como un espacio en blanco: así puedes verlo y darle estilo como a cualquier otro elemento (incluido su CSS propio). En el editor los campos están desactivados —es un retrato del formulario, no el formulario—; en la página publicada funciona de verdad y las respuestas llegan a Formularios → Respuestas.

Como el retrato usa las mismas clases que el formulario real (fb-embed, fb-field, form-label), el CSS que escribas mirándolo sigue valiendo cuando publiques.

Estilos propios del formulario

Al seleccionarlo, la pestaña Estilo no ofrece los ajustes de una caja cualquiera: ofrece los del formulario, por partes.

Sección	Qué cambia
Tarjeta del formulario	Fondo, relleno, esquinas, borde y sombra del recuadro
Título y descripción	Color y tamaño del título, color de la descripción
Etiquetas de los campos	Color, tamaño, grosor y mayúsculas
Campos	Fondo, color del texto, borde, esquinas, relleno y separación entre campos
Botón de enviar	Fondo, texto, borde, esquinas, relleno, ancho y alineación

Todos funcionan como el resto del editor: por pantalla (lo que ajustes mirando el celular vale sólo ahí) y varios también al pasar el mouse.

Cada módulo trae los suyos

No es una lista fija del editor: cada módulo declara qué se le puede cambiar a su widget. Uno que no declare nada seguirá ofreciendo los ajustes generales —fondo, borde, espaciado— más su CSS personalizado.

Los datos se ven de verdad

Si la página está enlazada a una tabla, el lienzo muestra registros reales, no las etiquetas {{...}}. Si la tabla todavía no tiene registros, el elemento lo dice en su lugar (sin registros aún) y la página se sigue armando normalmente.

Guardar

El botón Guardar escribe la página. Si otra persona la guardó mientras editabas, el editor te avisa antes de sobrescribir y decide usted: nunca se pisa el trabajo de otro en silencio.

Si cierras el editor con cambios sin guardar, también te pregunta primero.

¿Qué sigue?

• Header y footer del sitio — editarlos con estas mismas herramientas y elegir dónde se muestra cada uno.
• Insertar datos de tus tablas — todas las etiquetas con ejemplos.
• Cómo funciona el generador — la idea general y los ajustes de una página.
• Llevar páginas a otro sitio — pasar a producción lo que armaste acá, con sus imágenes.