Editar componentes
Cuando seleccionás un componente en el editor, sus propiedades aparecen en el panel derecho. En vez de escribir valores a mano, la mayoría de los campos tienen controles visuales. Cada campo muestra a la izquierda un ícono de tipo que indica qué es (una T para texto, una paleta para color, una regla para dimensión, etc.).
Color (paleta del grupo)
El campo de color te deja elegir entre:
- Los colores de la paleta del grupo (primario, secundario, acento, fondo, texto), que se muestran con su color real.
- Un color propio (hex) con el selector.
- Ninguno (sin color).
Al usar un color de la paleta, si cambiás la paleta del grupo, el componente se actualiza solo.
La paleta del grupo se elige en Configuración del grupo → Paleta de colores: podés usar una de las predefinidas o crear una personalizada con tus propios colores (con vista previa en vivo). Se aplica al dashboard y a tus landings y productos publicados.
Color de fondo de la sección
Varios módulos de sección (Testimonios, Tabla de precios, Equipo, Pestañas, además de Hero, CTA y otros) tienen Color de fondo de la sección y Color del texto. Al elegir un fondo, el módulo suma espaciado interno y esquinas redondeadas automáticamente, para que el contenido no quede pegado al borde del color. Sin fondo, el módulo se ve igual que siempre.
Imagen (URL o multimedia)
Los campos de imagen (la del Hero, los avatares, los logos, la portada de una nota…) muestran una vista previa de lo que hay cargado y te dejan:
- Pegar una URL de cualquier imagen, como siempre.
- Elegir de multimedia: abre tu biblioteca de archivos, con un buscador, y con un clic queda puesta en el campo. Desde ahí también podés subir y usar una imagen nueva sin salir del editor: con el botón Subir y usar o arrastrando el archivo a la ventana.
- Arrastrar una imagen al campo: si la soltás directamente sobre el campo, se sube y queda puesta sin abrir la ventana. Si soltás varias, se toma la primera (el campo lleva una sola imagen); para subir varias de una vez está la sección Multimedia.
El botón de la biblioteca aparece si tu plan incluye multimedia (Basic en adelante) y tenés permiso para verla. Ver Multimedia.
Espaciado (margen y padding)
El campo de espaciado usa un select con presets — Ninguno, Chico, Mediano, Grande — que aplican a los cuatro lados a la vez. Con Personalizado podés ajustar cada lado (arriba, derecha, abajo, izquierda) por separado. Además tenés pestañas por dispositivo (escritorio, tableta, móvil) para un espaciado distinto en cada uno.
Dimensiones (alto y ancho)
En vez de escribir 100vh a mano, el campo de dimensión ofrece un select con opciones claras (Auto, Media pantalla, Pantalla completa, o Personalizado) y un slider con el valor a la derecha, editable si querés una medida exacta (por ejemplo 420px).
Íconos
Los campos de ícono abren un buscador con vista previa: escribís el nombre y elegís el ícono de la grilla, sin tener que conocer el listado completo.
Variables dinámicas ({{…}})
En los campos de texto y enlace, al escribir {{ se abre un menú con las variables disponibles. Al elegir una, se inserta el token; en la página publicada se reemplaza por el valor real.
Variables típicas:
- Usuario:
{{USER_NAME}},{{USER_EMAIL}} - Grupo:
{{GROUP_NAME}},{{GROUP_DESCRIPTION}}y los colores de la paleta - Ruta:
{{CURRENT_PATH}}y cada parámetro dinámico del path (ej. un path/blog/:slughabilita{{SLUG}}) - Producto de la ruta:
{{PRODUCT_TITLE}},{{PRODUCT_DESCRIPTION}},{{PRODUCT_PRICE}},{{PRODUCT_CATEGORY}},{{PRODUCT_IMAGE}} - Nota de la ruta:
{{BLOG_TITLE}},{{BLOG_EXCERPT}},{{BLOG_AUTHOR}},{{BLOG_TAGS}},{{BLOG_COVER}},{{BLOG_DATE}}
Valor por defecto (fallback): si una variable puede no tener valor, agregá un fallback con |. Por ejemplo, {{USER_NAME|Invitado}} muestra el nombre del usuario o, si no hay, "Invitado". Sin fallback, si la variable no tiene valor el texto queda como {{USER_NAME}}.
Variables del producto o la nota de la ruta
Las variables {{PRODUCT_*}} y {{BLOG_*}} se llenan con la entidad de la que habla esa URL. En una landing con un componente de producto (o de nota) atado a un parámetro del path —por ejemplo un path /producto/:id y un componente "Producto completo" con el ID en {{ID}}—, cada dirección resuelve las variables con su producto.
Es lo que hace que una sola landing sirva para todo el catálogo sin repetir textos. Dos detalles:
- El precio sale con el mismo formato que muestra el componente Precio, y la descripción entra como texto simple (sin los asteriscos ni los guiones del formato), que es lo correcto para un texto que va a leer un buscador.
- Si la landing no ata ninguna entidad, o el producto no existe, la variable no resuelve (queda el token, o el fallback que le hayas puesto con
|), igual que{{USER_NAME}}para un visitante anónimo.
Título y descripción para buscadores (SEO)
Los campos Título SEO, Descripción SEO, Keywords e Imagen para compartir (OG) de Configuración de la landing aceptan las mismas variables. En los tres campos de texto tenés el mismo autocompletado que en el editor: escribí {{ y se abre la lista, con las flechas la recorrés y con Enter la insertás. También aparecen los parámetros de las rutas que hayas escrito arriba, aunque todavía no hayas guardado. Es la forma de evitar el problema clásico de una ruta dinámica: decenas de URLs con el mismo título y la misma descripción, que los buscadores tratan como contenido repetido.
Por ejemplo, con el título {{PRODUCT_TITLE}} | Mi Tienda, cada producto se comparte y se indexa con su propio nombre.
Si algo no resuelve, no se publica el token. Cuando el producto no existe, se borró, o el campo está vacío, el campo entero se descarta y se usa el texto por defecto de tu grupo. Nunca vas a ver un {{PRODUCT_TITLE}} literal en Google ni en la vista previa de WhatsApp.
En los enlaces de los listados (grilla de productos, índice de blog) el menú incluye además una variable por tarjeta que se reemplaza con el item de cada card: {{CARD_PRODUCT_ID}} y {{CARD_BLOG_SLUG}}. Por ejemplo, un enlace /blog/{{CARD_BLOG_SLUG}} hace que cada tarjeta lleve al detalle de su nota.
Enlaces a una sección de la misma página
En cualquier campo de enlace, si escribís # como primer caracter aparece la lista
de IDs de los componentes de esa landing para elegir el destino. Elegís uno y el
campo queda como #precios, que lleva a esa sección al hacer clic.
Para que un componente aparezca en esa lista, ponele un valor en su campo ID (opcional). Si todavía ninguno tiene ID, el desplegable te lo avisa.
Otras ayudas del editor
- Buscador de componentes: en el panel izquierdo hay un buscador que filtra los componentes en vivo mientras escribís.
- Vista previa en escritorio: el previewer abre por defecto en escritorio (ancho completo); podés cambiar a tableta o móvil desde la barra superior para ver cómo se adapta.