Cómo funciona el generador de páginas
Ya tienes tus tablas cargadas. Ahora quieres mostrarlas al público — un catálogo, un directorio, una landing. El generador de páginas hace exactamente eso: si mañana cambias el precio de un producto en el panel, la página pública lo muestra actualizado.
Está en Configuración → Páginas Web. Cada página que crees queda disponible en tusitio.cl/nombre-de-la-pagina.
La idea central
Armas la página arrastrando bloques y, si quieres, le conectas los datos de
una de tus tablas. Cuando alguien la visita, en el lugar de la columna
nombre_producto ve "Café Americano", y donde va precio_producto ve
"$2.500".
Con datos o sin datos: lo decides mientras la armas
Una página nace en blanco. Si va a mostrar registros —un catálogo, una carta, un listado de propiedades— eliges su tabla en la barra del editor visual, que es donde se arrastran sus columnas.
No se pregunta antes de empezar: se decide cuando hace falta, y se puede cambiar después.
Cómo está repartida la pantalla
De arriba abajo, dos bandas:
- Páginas creadas — todas tus páginas en tarjetas, para elegir cuál editas. Cada una trae su botón para verla en el sitio, tal como la ve un visitante, en otra pestaña.
- Los ajustes de la página — el tipo, la tabla, el título, quién puede entrar, el SEO y si es la portada. El contenido no está acá: se arma en el editor visual, con el botón que hay en esa misma banda.
¿Y dónde veo cómo va quedando?
En el editor visual: el lienzo es la página, con el menú del sitio arriba, tu contenido en el medio, el pie abajo y los datos de tu tabla resueltos. Se dibuja con las mismas hojas de estilo que la página publicada, incluida la que escribiste en CSS y JavaScript del sitio, así que ahí aparecen tus tipografías, tus colores y tu logo. Su botón Vista previa la muestra sin las herramientas de edición encima.
Y para verla de verdad, publicada: el botón Ver de su tarjeta.
Tenía sentido cuando el HTML se escribía acá: cambiabas una etiqueta y la veías. Como el contenido pasó al editor visual, era media pantalla dedicada a mirar algo que no se podía tocar — y lo mismo, en grande y editable, está a un clic.
El editor visual: armar la página sin escribir HTML
El editor visual muestra la página completa — el menú del sitio arriba, tu contenido en el medio, el pie abajo — con las tipografías y los colores del sitio público. Lo que ves en el lienzo es lo que se publica, porque lo dibuja el mismo motor.
Acá va lo esencial de cómo se arma una página; el recorrido completo del editor (escribir sobre el lienzo, deshacer, ver por dispositivo, la estructura) está en Editar con el editor visual.
Armar la estructura
- Arrastra una Sección desde la paleta al lienzo. Nace con dos columnas.
- En Contenido → Distribución de columnas eliges la forma: una sola, dos iguales, un tercio y dos tercios, tres, cuatro.
- Arrastra elementos dentro de las columnas. Si prefieres no arrastrar, cada columna vacía tiene un botón + Columna vacía — agregar.
Al pasar el mouse por un elemento aparece su barra: el agarre para moverlo, sus ajustes, duplicar y eliminar. Con el botón derecho tienes además copiar, pegar y pegar sólo el estilo.
Las tres pestañas de cada elemento
| Pestaña | Qué responde |
|---|---|
| Contenido | Qué dice: el texto, la imagen, el enlace, la columna de la tabla |
| Estilo | Cómo se ve: color, tamaño, tipografía, fondo, borde, sombra |
| Avanzado | Dónde queda: márgenes, relleno, ancho, en qué pantallas se ve, id y clases CSS |
Estilo por pantalla y al pasar el mouse
Arriba de la pestaña Estilo hay dos controles:
- Escritorio / Tablet / Celular — lo que cambies con Tablet elegido vale sólo en tablet; lo que dejes vacío hereda de escritorio. Así un título de 44 px en el computador puede ser de 24 px en el teléfono sin tocar el resto. Al elegir una pantalla acá, el lienzo se angosta a ese ancho, así que siempre estás editando la vista que estás mirando.
- Normal / Al pasar el mouse — el segundo guarda cómo se ve cuando alguien pasa el cursor por encima. Sólo aparecen ahí los ajustes que tienen sentido en ese momento (colores, sombras, opacidad).
Cuando un ajuste está fijado en la capa que estás editando, a su derecha aparece una flecha circular. Pulsarla borra ese valor y devuelve el elemento a lo que heredaba. Es la forma de deshacer un cambio de tablet sin tocar el de escritorio.
Un elemento a medio configurar
Si sueltas un campo de formulario antes de elegir la tabla, ese elemento se pinta en ámbar diciendo qué le falta —y el resto de la página se sigue viendo. Al publicar, un elemento sin configurar no sale: no aparece nada en su lugar.
Cuando ningún elemento sirve: HTML libre
Para pegar algo que no existe como bloque —un mapa, un reproductor, una tarjeta armada a mano— está el elemento HTML libre, en la categoría Avanzado. Al abrirlo tienes una ventana a pantalla completa con un editor para el HTML, otro para el CSS y otro para el JavaScript, con colores por lenguaje, autocompletado y el resultado dibujándose al lado mientras escribes.
El detalle está en Editar con el editor visual → HTML libre.
El panel de widgets
Los módulos que tengas activos aportan piezas terminadas a una página. Se insertan desde el editor visual: Insertar widget… en la paleta, bajo De tus módulos. Se agrega como un bloque más, así que después lo mueves y lo estilas como a cualquier otro.
| Módulo | Qué aporta |
|---|---|
| Formularios | Cada formulario publicado en la web |
| Protección de Datos | El aviso de cookies |
Activo significa que tiene su sección en el panel — la que agregas con Agregar Sección — y que tu suscripción lo incluye. Un módulo que viene con el sistema pero que nunca encendiste no aparece: su bloque apuntaría a algo que no está en marcha y la página quedaría con un hueco.
Si un módulo está activo pero todavía no tiene nada que ofrecer, el panel dice qué falta en vez de mostrarte una lista vacía — por ejemplo, que el formulario existe pero aún no está marcado como público.
La vista previa resuelve las direcciones igual que la página publicada, así que un widget insertado se ve funcionando ahí mismo: el formulario aparece con sus campos y su botón, no como un espacio en blanco.
Un módulo suma lo suyo declarándolo una vez en su propio archivo; el generador no sabe qué es un formulario ni un aviso de cookies, sólo dibuja lo que los módulos declararon.
Llevar lo que armaste a otro sitio
Lo normal es construir la página con calma en un sitio de pruebas y publicarla después donde la va a ver la gente. Exportar guarda en un solo archivo las páginas, headers, footers y el diseño del sitio que marques —con las imágenes adentro— e Importar los recrea del otro lado, avisando antes qué reemplaza y qué le falta a ese sitio para que se vean igual.
El paso a paso está en Llevar páginas a otro sitio.
Páginas ya creadas, header y footer
Arriba del editor tienes la lista de páginas creadas — click en una tarjeta para editarla; la que estás editando se pinta entera.
El header y el footer del sitio se editan visualmente, con los mismos bloques que una página, desde los botones Header y Footer de arriba (o pulsándolos en el lienzo del editor visual). Puedes tener más de uno y decidir en qué páginas se muestra cada uno: todo eso está en Header y footer del sitio.
Es el único lugar donde se editan. Si tu sitio traía uno escrito en HTML de una versión anterior, ya se convirtió solo en un documento visual.
La lista de páginas
Arriba, en Páginas creadas, están todas las páginas de tu sitio, cada una en su tarjeta. Cada una lleva una marca cuando hace falta:
- Portada — es la que ve quien escribe tu dirección a secas. Va primera en la lista, y no se puede eliminar mientras siga siendo la portada.
- Código — se escribió como archivo, no con este editor. Aparece igual, y al hacer clic se abre en tu sitio para que la veas; para cambiarla hay que editar su archivo.
- El nombre de una tabla — la página muestra los datos de esa tabla.
Una página sin tabla no lleva marca: es el caso normal, y una etiqueta repetida en todas las tarjetas no dice nada.
Un nombre largo no estira su tarjeta: se corta con puntos suspensivos y lo lees entero dejando el cursor encima.
La última tarjeta de la lista es Nueva página: empieza una en blanco sin ir a buscar el botón de la barra de arriba.
Dejar la portada en blanco
La portada tiene un botón propio, la goma de borrar, que borra todo su contenido y la deja vacía. La página sigue existiendo, sigue siendo la portada y conserva su nombre, su dirección y sus permisos: lo único que se va es lo que tenía dentro.
Es la forma de rehacer la portada desde cero. Eliminarla no se puede —la raíz de tu dominio quedaría sin nada que mostrar—, así que antes había que borrar su contenido a mano, bloque por bloque.
Vaciar una página borra su HTML, su CSS y su JavaScript sin vuelta atrás. Si puede que la quieras de vuelta, expórtala primero (botón Exportar).
Puede que todas tus páginas salgan marcadas como Código. Es normal: significa que están escritas a mano y que este editor no las puede rehacer. Antes ni siquiera aparecían, y la sección se veía vacía aunque el sitio estuviera publicado y funcionando.
CSS y JavaScript del sitio
El botón CSS y JavaScript del sitio, arriba, abre tres editores: una hoja de
estilos, un script y las etiquetas del <head>, que se cargan en todas tus
páginas públicas.
Es el lugar de lo que se repite: las tipografías, los colores de la marca, la forma de una tarjeta, el comportamiento del menú en el celular. Lo que es de una sola página va en esa página.
| Se carga | Cuándo |
|---|---|
| La hoja del framework | Primero |
| Tu CSS del sitio | Después, así que le gana |
| El CSS de cada página | Al final, es el más específico |
El script va al final de la página, cuando Bootstrap, jQuery y tu contenido ya están cargados.
En el CSS escribe sólo el CSS, sin <style>; en el script, sólo el JavaScript,
sin <script>. El panel te avisa si se cuela algo que no corresponde.
Etiquetas del <head>
El tercer editor es la excepción: acá sí van las etiquetas completas
(<script>, <meta>, <link>), porque lo que se pega ahí es código que Google
u otro servicio te entrega ya escrito. Se imprime dentro del <head> de todas
tus páginas.
Es el lugar de:
- Google Tag Manager y Google Analytics (el «Google tag»,
gtag.js). - La verificación de dominio de Google, Facebook o Pinterest.
- Una tipografía externa o un
<meta>que un servicio te pida.
Enciende el permiso, o no van a correr
Debajo del editor hay un interruptor: Permitir que corran las etiquetas de Google. Tienes que encenderlo.
Por seguridad tu sitio sólo ejecuta código propio, así que un código de Google
pegado arriba se guarda pero el navegador no lo deja correr — y no aparece
ningún aviso: te enteras cuando Analytics no registra ni una visita. Con el
interruptor encendido se permiten sólo los dominios de Google
(googletagmanager.com, google-analytics.com, Ads); todo lo demás sigue
bloqueado.
Al encenderlo, el sistema le pregunta a tu propio sitio y lee la respuesta. Si tu hosting está ignorando el permiso, te lo dice ahí mismo con lo que hay que pedirle a quien lo administra —en vez de dejarte creer que quedó listo—.
<noscript> de Google Tag Manager no va acáGoogle te entrega dos trozos: uno para el <head> y otro que dice «Tags del
BODY», un <noscript> con un <iframe>. Ese segundo va en el encabezado
del sitio (Editar visual → Header, en un bloque de HTML libre), porque tiene
que quedar después de que empieza el cuerpo de la página. Pegarlo en el <head>
no lo hace fallar a la vista, pero lo deja donde el navegador no lo usa.
Si el mismo contenedor se carga dos veces —por ejemplo, pegado en el <head>
y además dentro del encabezado o del script del sitio— cada visita se cuenta
dos veces, y ninguna pantalla te lo avisa: los informes simplemente muestran el
doble de tráfico del que tuviste.
Para revisarlo: abre tu sitio, pulsa Ver código fuente y busca gtm.js.
Tiene que aparecer una sola vez.
Si ves ese aviso al encender el interruptor, tu sitio está funcionando con una versión anterior del sistema: deja correr el contenedor de etiquetas —por eso Analytics informa visitas con normalidad— pero bloquea el aviso de conversión que Google Ads necesita para saber que alguien llamó, escribió o compró.
No se nota mirando: la campaña sigue gastando y las conversiones nunca llegan. Se arregla actualizando el sistema, que trae el permiso nuevo.
Si tu GA4 ya está configurado dentro de Tag Manager, agregar además el
gtag.js en el <head> cuenta cada visita dos veces en Analytics. Elige uno de
los dos caminos: o GA4 vive dentro de GTM, o se carga con su propia etiqueta.
El diseño de un sitio vivía en un archivo que sólo alguien con acceso al servidor podía abrir, así que «cambiar el color de la marca» no era algo que su dueño pudiera hacer. Ahora es un campo.
Con las etiquetas del <head> pasaba algo parecido y peor: no había ningún
campo, así que un código de medición terminaba pegado dentro del encabezado o
del script del sitio —los dos lugares que sí existían—, que se dibujan dentro
del cuerpo de la página. Funcionaba a medias y se duplicaba con facilidad.
Poner tus datos de contacto en una página
Los datos que guardaste en Datos del sitio también se pueden insertar como un bloque, desde Insertar widget… → Datos del sitio:
- Fila de contacto — teléfono, WhatsApp, correo, dirección y horario, los que tengas llenos.
- Redes sociales — un enlace por cada red guardada.
Sirven para armar tu propio pie de página o un bloque de contacto sin escribir el teléfono a mano. Siguen saliendo de un solo lugar: si mañana cambias el número, cambia en todas las páginas que lo muestren.
Datos del sitio
El botón Datos del sitio, arriba, guarda dos cosas: cómo se llama tu sitio y cómo te contacta quien lo visita. El cambio se aplica a todas las páginas al guardar.
Nombre y portada
El nombre cierra el título de todas las páginas, y el título y la descripción se usan cuando una página no trae los suyos. El diálogo muestra cómo se verá la pestaña del navegador mientras escribes. Más detalle en SEO y metadatos.
Contacto y redes sociales
Teléfono, WhatsApp, correo, dirección, horario de atención y el enlace a tu ubicación en el mapa. Debajo, la dirección de cada red social.
Todo esto aparece en el pie de tus páginas. Lo que dejes vacío no se muestra: un negocio sin local no imprime una dirección en blanco.
Escribe https://www.instagram.com/tuempresa/, no www.instagram.com/tuempresa.
Sin el https://, el navegador entiende que es una página de tu propio
sitio y el visitante llega a un error. El diálogo te avisa antes de guardar.
Si armaste tu propio pie con el editor visual, es ése el que se muestra. Estos datos siguen guardados y disponibles, pero tendrás que ponerlos en tu diseño. Ver Header y footer del sitio.
Etiquetas del generador
| Etiqueta | Qué hace |
|---|---|
{{nombre_producto}} | Muestra el valor de esa columna |
{{money precio_producto}} | Lo formatea como dinero: $4.500 |
{{fecha fecha_visita}} | Fecha en formato legible |
{{img imagen_producto}} | La dirección de la imagen, para usar en un <img src=""> |
{{#cada}} ... {{/cada}} | Repite el bloque una vez por registro |
{{#si activo_producto}} ... {{/si}} | Muestra el bloque solo si el campo tiene valor |
{{#imagenes fotos_x}} ... {{/imagenes}} | Recorre una galería multi-imagen |
{{#form}} ... {{/form}} | Formulario que crea un registro en la tabla asociada |
Ver Insertar datos de tus tablas para cada una con ejemplos.
Chips de columnas
Al elegir una tabla, cada columna aparece como un chip en el editor visual. Lo arrastras al lienzo y queda un bloque que muestra ese dato. No hay que memorizar ninguna sintaxis.
Cómo se ve el resultado
Las páginas creadas quedan en web/pages/<nombre>.php y las sirve Apache directamente. Con mod_rewrite (viene configurado) las URLs quedan limpias: tusitio.cl/carta, no tusitio.cl/web/page.php?slug=carta.
Requisitos
- Debe existir
web/config.phpcon la URL de la API. Se crea solo la primera vez que entras a Páginas Web (o consudo ./setup.sh). - La carpeta
web/pages/debe tener permisos de escritura.
Si el sitio muestra datos viejos
Cuando editas una página, los cambios se aplican al instante. Pero si activaste caché de página, puede tardar unos segundos hasta la próxima regeneración.
Solución inmediata: ve a Configuración → Apariencia y presiona Purgar caché. El sitio público vuelve a leer los datos frescos.
¿Qué sigue?
- Crear tu primera página pública — el paso a paso.
- Editar con el editor visual — el lienzo, deshacer, dispositivos y estructura.
- Header y footer del sitio — el menú y el pie, y dónde se muestra cada uno.
- Insertar datos de tus tablas — todas las etiquetas con ejemplos.
- Formularios públicos — captar datos del visitante.
- Poner el sitio en mantenimiento — cerrarlo mientras trabajas en él, sin perder tus resultados en Google.