Funciones

Editor Visual

El Editor Visual de NexFlow

El Editor Visual te deja cambiar colores, textos, imágenes y el orden del contenido directo desde el sitio público, sin entrar a ningún panel — nomás con sesión de administrador iniciada. Pasas el mouse sobre lo que quieres cambiar y aparecen los íconos correspondientes a esa zona.

Esto no es un editor de páginas, es un editor de SITIOS. El sitio sigue siendo completamente navegable mientras el Editor Visual está activo — puedes darle clic a cualquier enlace, moverte a otra página, usar el menú, el buscador, lo que sea. No te saca de "modo edición" ni te regresa a ningún panel. En la página a la que llegues, sin importar cuál sea, el Editor Visual sigue ahí, activo, listo para editar esa página también. No editas un sitio de a una página congelada a la vez — navegas el sitio real, y editas sobre la marcha cualquier página en la que te vayas parando.

Banner

Doble clic sobre el banner abre la Biblioteca de Medios para elegir una imagen nueva. Solo acepta imágenes que midan exactamente 2170×725 — si la que elegiste mide otra cosa, te avisa las medidas detectadas y no cambia nada (una medida distinta descuadra el logo y el menú, que ya están calculados sobre ese tamaño).

Logo

Dos formas de cambiarlo, las dos válidas:

Arrastrarlo a cualquier posición sobre el banner — solo en escritorio (pantallas de más de 768px de ancho; en tablet o celular no se puede arrastrar). Al soltarlo, la posición se guarda como porcentaje del banner, así se adapta sola a cualquier tamaño de pantalla de escritorio.
Doble clic sobre el logo abre la Biblioteca de Medios para cambiar la imagen — mismo patrón que el banner. También se puede cambiar la imagen del logo desde Settings, sin necesidad de pasar por aquí.

Menú

Se arrastra el menú completo y se suelta en una de 3 posiciones: Izquierda, Centro o Derecha. Mientras arrastras, las 3 zonas se marcan en pantalla para que veas dónde vas a soltar.

Bloques

Todo el contenido de las 3 columnas (Izquierda, Contenido, Derecha) es arrastrable entre sí: cualquier Bloque de Contenido, Formulario, o extensión (Reseñas, Artículos Recomendados, lo que sea) se puede mover de arriba a abajo o de abajo a arriba dentro de su columna, o cruzarlo a otra columna distinta. Mientras arrastras, una línea roja horizontal marca en tiempo real exactamente dónde va a caer si sueltas ahí.

Logo, Menú y Footer quedan fuera de este sistema — cada uno tiene su propio comportamiento aislado (ver arriba): el Logo se arrastra libre pero solo sobre el banner, el Menú nomás salta entre 3 posiciones de alineación, y el Footer no se arrastra en absoluto.

Guía de íconos por zona

Referencia completa de cada ícono que aparece al pasar el mouse por una zona editable, agrupados en el mismo orden en que aparecen en pantalla de arriba hacia abajo.

Logo

Ícono	Nombre	Qué controla
	Borde	Color del borde del círculo del logo.
	Sombra	Color del brillo/sombra alrededor del logo.

Menú

Ícono	Nombre	Qué controla
	Texto	Color del texto de los enlaces del menú.
	Fondo	Color de fondo del menú. El hover y el fondo del submenú se recalculan solos, un tono 25% más claro — no tienen ícono propio.

Buscador

Ícono	Nombre	Qué controla
	Texto	Color del texto que escribe el visitante.
	Fondo	Color de fondo de la caja de búsqueda. Esta variable la comparte cualquier campo de texto del sitio (formularios incluidos) — cambiarla aquí también los cambia a ellos.
	Borde	Color del borde de la caja, en reposo.
	Borde al enfocar	Color del borde cuando el visitante le da clic a la caja para escribir.

Breadcrumb

Ícono	Nombre	Qué controla
	Texto	Color del texto de cada tramo del breadcrumb — es la misma variable que usan los botones reales del sitio.
	Fondo	Color de fondo del breadcrumb — también controla los botones reales del sitio y el submenú del breadcrumb. Se copia además, en automático, al color de Marca (siguiente ícono).
	Marca (la gotita)	El color de marca general de todo el sitio — encabezados y enlaces fuera de tarjetas, el borde al enfocar de los campos, y todo el widget flotante de WhatsApp. Es el único ícono con forma de gota, en vez de paleta — cámbialo aquí y se actualiza en cualquiera de esos lugares a la vez.

Fondo de página

Ícono	Nombre	Qué controla
	IA	Genera una imagen de fondo con Inteligencia Artificial, a partir de un título y una descripción. Necesita un token de OpenAI configurado en Conectores — sin él, el botón nomás muestra dónde conseguirlo.
	Imagen	Elige una imagen ya subida a la Biblioteca de Medios y la pone de fondo, tileada (repetida) por toda la página.
	Color	Color o degradado sólido de fondo, para cuando no quieras una imagen. Elegir uno de estos tres borra lo que hubiera puesto el otro — no hay lógica de "cuál gana".

Tarjetas

Aparecen al pasar el mouse sobre cualquier tarjeta de la columna central. Estas variables son compartidas por todas las tarjetas del sitio, centrales y laterales por igual.

Ícono	Nombre	Qué controla
	IA	Genera con IA la imagen de fondo de las tarjetas.
	Imagen	Elige de la Biblioteca de Medios la imagen de fondo de las tarjetas.
	Color	Color o degradado sólido de fondo de las tarjetas.
	Texto (Aa)	Abre un modal compuesto: color del texto, tipo de letra, y tamaño — los tres juntos, un solo Guardar.
	Enlaces	Color de los links dentro de cualquier tarjeta (sin degradado — un enlace degradado no tiene caso).
	Encabezado (H1)	Color y tamaño de los títulos (h1/h2/h3) dentro de tarjetas — independiente del color de texto general y del color de Marca.
	Forma	Qué tan redondeadas se ven las esquinas de tarjetas y botones — afecta a todo el sitio, no solo a la tarjeta donde le diste clic.
	Mensajes	Color de los avisos de error/éxito de formularios de todo el sitio — nomás el color de texto de cada uno, el sistema calcula el fondo y el borde solo.

Footer

Ícono	Nombre	Qué controla
	IA	Genera con IA la imagen de fondo del footer.
	Imagen	Elige de la Biblioteca de Medios la imagen de fondo del footer.
	Color	Color o degradado sólido de fondo del footer — independiente del fondo de página y de las tarjetas, a propósito.
	Texto	Color, tipo de letra y tamaño del texto del footer.
	Enlaces	Color de los enlaces dentro del footer.

Comentarios

Solo aparece en páginas que tienen comentarios activados y al menos un comentario existente.

Ícono	Nombre	Qué controla
	Burbuja raíz	Color de fondo del comentario original (el de primer nivel).
	Respuesta	Color de fondo de las respuestas (segundo nivel).
	Texto	Color de texto de ambos niveles de comentario, el mismo para los dos.

Rendija entre bloques

Aparece al pasar el mouse entre dos bloques (o al principio/final de una columna), con el texto "Soltar aquí". No es color — inserta, quita o reordena contenido.

Ícono	Nombre	Qué hace
	Nuevo bloque	Crea un bloque desde cero (editor completo, en modal) e insértalo aquí mismo al guardar.
	Insertar bloque existente	Lista un bloque, formulario o extensión ya creado antes, para insertarlo aquí sin duplicar nada.
	Insertar separador	Mete una línea divisoria, partiendo la columna en dos tarjetas visuales.
	Quitar separador	Solo aparece en una rendija que ya tiene separador. Lo quita y fusiona las dos tarjetas en una.
	Quitar bloque	Solo aparece si hay un bloque justo después. Lo borra — y si esa rendija tenía separador, se va con él.