Centro de Documentación y Soporte Técnico
Bienvenido al centro integral de aprendizaje y resolución de incidencias del Creador de Sitios Profesional. Diseñado tanto para usuarios que desean maquetar sitios web modernos de alto impacto como para agentes de soporte técnico que brindan asistencia en hosting, configuración de dominios, SEO y publicación.
1. Interfaz y Área de Trabajo
El entorno de trabajo ofrece una experiencia visual intuitiva estilo cinta de herramientas (Ribbon), diseñada para permitir una maquetación ágil mediante arrastrar y soltar sin escribir una sola línea de código. La pantalla principal integra todos los comandos esenciales en zonas de fácil alcance.
Barra Superior (Top Bar)
Contiene el logotipo de marca, los botones de acción rápida Guardar borrador (Ctrl+S), Publicar sitio vía FTP, Avance / Vista Previa en vivo, historial de Deshacer / Rehacer y el selector de Nuevo/Reiniciar plantilla.
Cinta de Herramientas (Ribbon Bar)
Organizada en cuatro pestañas maestras: Inicio (herramientas de tipografía y portapapeles), Insertar (catálogo de bloques y componentes), Páginas (administración de páginas del sitio) y Configuración (ajustes generales, SEO, FTP e inyecciones).
Selector Responsive Multi-Dispositivo
Permite alternar al instante entre tres modos de visualización: Escritorio (100% ancho), Tableta (768 px) y Móvil (375 px) para verificar la adaptabilidad del diseño antes de publicar.
Barra de Alineación y Distribución
Permite ajustar con un clic la alineación horizontal (izquierda, centro, derecha) y vertical de los elementos seleccionados, garantizando simetría matemática en el diseño.
Modo Legacy (Hasta 01/01/2027)
Proporciona un puente de acceso temporal al editor clásico para usuarios en período de transición. Al presionarlo se despliega una advertencia institucional en la propia interfaz que recuerda la fecha de discontinuación definitiva (01/01/2027) y previene sobre los riesgos del uso alternado (posibles inconsistencias y desconfiguraciones). La redirección se realiza de forma segura mediante el panel de control sin exponer credenciales en el navegador.
Ctrl + S en cualquier momento para salvar el estado de tu borrador sin interrumpir tu flujo de diseño.
2. Catálogo de Bloques, Elementos y Drag & Drop Híbrido
El constructor combina lo mejor de dos mundos en una modalidad híbrida de edición: la velocidad y estabilidad de los bloques prediseñados profesionales, junto con la libertad de arrastrar y soltar (Drag & Drop) para reorganizar bloques completos o elementos individuales dentro de cada sección, además de poder insertar nuevos elementos sueltos a medida.
Abrir el Modal de Inserción de Bloques
Haz clic en la pestaña Insertar de la cinta superior o en el botón flotante "+" ubicado entre secciones del lienzo.
Filtrar por Categoría o Usar la Cinta Superior
Selecciona entre Héroe / Cabeceras, Características, Galerías, Testimonios, Contacto, Comercio y Tienda (con Tarjeta de Producto Mercado Pago y Carrito Flotante) o Componentes Interactivos. También puedes pulsar directamente el botón "Tienda/Carro" (🛒) de la cinta superior.
Añadir Bloque al Lienzo
Haz clic sobre la tarjeta deseada. La sección se insertará automáticamente en el lienzo lista para editar textos, imágenes y colores.
Reordenamiento de Bloques Completos por Drag & Drop (Nivel Macro)
Puedes reordenar bloques completos dentro de la página de dos formas ágiles y directas:
- Desde el Lienzo: Al pasar el cursor sobre cualquier sección, utiliza la manija flotante superior «⋮⋮ Mover» para arrastrar el bloque hacia arriba o hacia abajo hasta la posición deseada. También dispones de las flechas rápidas (▲ / ▼) para desplazarlo con un clic.
- Desde el Panel Lateral de Capas: En la pestaña Estructura / Capas del panel izquierdo, arrastra los bloques verticalmente en el árbol de capas para reposicionarlos en tiempo real.
Inserción de Nuevos Elementos Sueltos al Bloque (+ Elemento)
Para enriquecer o personalizar un bloque existente con contenido adicional sin alterar su estructura base, cada bloque dispone en su barra de herramientas flotante del botón «+ Elemento».
Al hacer clic se despliega la paleta de elementos disponibles para incorporar con un solo clic:
- Título (H2): Encabezado destacado con tipografía y jerarquía visual armónica.
- Párrafo de Texto: Bloque de texto descriptivo completamente editable en línea.
- Botón de Acción (CTA): Botón estilizado con enlace configurable a URLs, páginas o anclas.
- Imagen: Contenedor fotográfico con selector de medios locales y ajuste de tamaño.
- Formulario de Contacto: Campos de Nombre, Email, Mensaje y botón de envío listos para recibir consultas.
- Línea Divisoria: Separador visual elegante para estructurar el contenido.
El nuevo elemento se inserta directamente dentro del contenedor del bloque e inmediatamente se integra a la grilla inteligente del mismo.
3. Inspector de Propiedades, Posicionamiento Libre 2D & Grilla Inteligente
Al seleccionar cualquier elemento del lienzo (bloque, título, botón, tarjeta, imagen o formulario), el constructor activa una experiencia visual de edición libre: despliega la Barra Flotante Contextual (Floating Toolbar) con 6 acciones inmediatas, enmarca el elemento en una Caja Delimitadora (Bounding Box) con tiradores de redimensión y rotación, y abre en el lateral derecho el Inspector de Propiedades con la tarjeta especializada «📍 Posición Libre & Capas (2D)» junto a la Grilla Inteligente Responsive.
Tipografía y Alineación
Selector de familia de fuentes locales (Inter, Roboto, Playfair, Montserrat), tamaño en píxeles, peso tipográfico (Light, Regular, Bold, ExtraBold) y alineación del texto.
Color y Fondo
Controles independientes de color de texto, color de fondo sólido, gradientes lineales modernos o asignación de imagen de fondo.
Espaciado (Padding & Margin)
Deslizadores y casillas numéricas para calibrar el relleno superior e inferior (Padding Y) y lateral (Padding X) asegurando proporciones estéticas.
Bordes, Sombras y Enlaces
Radio de curvatura (Border Radius), grosor de borde, sombras predefinidas (Elevation) y campo de destino del enlace (URL externa, página interna o ancla #seccion).
Barra Flotante Contextual de Acciones (Floating Toolbar)
Al seleccionar cualquier elemento o bloque en el lienzo, aparece una barra flotante contextual con 6 herramientas esenciales:
- ✥ Mover: Permite reposicionar libremente el elemento o bloque mediante Drag & Drop a cualquier coordenada del lienzo, respetando al milímetro la ubicación elegida.
- 📋 Duplicar: Clona instantáneamente el elemento o bloque completo con todas sus configuraciones, estilos y dimensiones (o mediante el atajo Ctrl + D).
- 🔓/🔒 Bloquear / Desbloquear: Fija el elemento para protegerlo contra movimientos, redimensiones o rotaciones accidentales. Muestra el distintivo visual
🔒 Bloqueadoe inhabilita las manijas de transformación. - 📑 Copiar: Copia el elemento completo junto con sus propiedades y estilos al portapapeles del editor (o mediante el atajo Ctrl + C).
- 📋 Pegar: Inserta una copia exacta del elemento previamente copiado, ubicándola con un ligero desplazamiento para fácil manipulación. Este botón solo se muestra o habilita cuando existe un elemento copiado en memoria (o mediante el atajo Ctrl + V).
- 🗑️ Eliminar: Suprime el elemento o bloque seleccionado de manera instantánea (o mediante las teclas Supr / Backspace).
Tirador Visible de Arrastre (Drag Handle) y Movimiento Libre 2D
Al seleccionar cualquier elemento (imagen, bloque de texto, botón, tarjeta o formulario), se visualiza un tirador de arrastre destacado (pastilla flotante superior y botón «Mover» de la barra contextual):
- Arrastre directo: Puedes hacer clic sostenido en el tirador para reposicionar el elemento en cualquier lugar de la pantalla.
- Ubicación fija sin auto-reacomodamiento: La posición elegida queda fija permanentemente y no se reacomoda ni se fuerza al flujo original al soltar (por ejemplo, desplazar un texto 213 px hacia la izquierda y 59 px hacia arriba se preserva exactamente:
X: -213px Y: -59px). - Superposición libre: Permite encimar elementos intencionalmente (textos sobre imágenes, insignias sobre tarjetas, botones flotantes sobre bloques).
Caja Delimitadora de Selección (Bounding Box) y Controles Visuales Avanzados
Al seleccionar un elemento, se proyecta un marco delimitador con controles interactivos profesionales:
- 8 Tiradores Perimetrales de Redimensión: Puntos interactivos en esquinas y bordes (
nw,n,ne,e,se,s,sw,w) para calibrar ancho y alto visualmente. - Tirador Superior de Rotación: Vástago vertical y tirador circular para girar el elemento en 360°. Manteniendo pulsada la tecla Shift, el giro se ajusta magnéticamente a múltiplos de 15°.
- Indicador Dinámico de Grados: Muestra en pantalla el ángulo exacto durante el giro (ej.
45°). - Tooltip de Coordenadas y Dimensiones: Telemetría flotante en tiempo real con la posición relativa y tamaño actual (ej.
X: -213px Y: -59px | W: 320px H: 180px | 45°).
Seguridad y Bloqueo: Al activar el botón «Bloquear», el marco muestra el distintivo 🔒 Bloqueado y desactiva todos los tiradores para evitar cualquier movimiento accidental.
Panel Lateral: «📍 Posición Libre & Capas (2D)»
Para un control milimétrico y ajuste bidireccional, el Inspector de Propiedades incluye una tarjeta especializada de diseño 2D:
- Coordenadas X e Y: Casillas numéricas en píxeles y botones de paso rápido (- / +) para desplazar el elemento con precisión exacta.
- Ancho (W) y Alto (H): Ajuste numérico de las dimensiones en píxeles.
- Rotación Angular: Deslizador y casilla numérica de grados (-180° a 180°).
- Jerarquía de Capas (Z-Index): Controles para traer al frente (▲ Capa Superior) o enviar al fondo (▼ Capa Inferior), definiendo qué elemento se dibuja por encima de otro en casos de superposición.
- Estado de Bloqueo: Botón toggle para conmutar entre Bloqueado y Desbloqueado.
- Restablecer Posición Original: Botón que remueve el desplazamiento manual y devuelve el elemento a su alineación original dentro de la grilla si el usuario desea descartar el movimiento 2D.
Atajos de Teclado Universales para Diseño Rápido
Acelera tu flujo de trabajo utilizando los siguientes atajos de teclado mientras tengas seleccionado cualquier elemento:
Grilla Inteligente Responsive de 12 Columnas
Para diagramaciones estructuradas que no requieran posicionamiento libre manual, el Inspector incorpora el módulo «📐 Grilla Inteligente» para todos los elementos internos.
Permite seleccionar el ancho exacto que ocupa el elemento en la grilla del bloque:
- 100% (12 cols): Ocupa el ancho completo del bloque (ideal para encabezados, banners o párrafos destacados).
- 66% (8 cols): Dos tercios del ancho total (ideal para columnas principales de contenido).
- 50% (6 cols): Mitad de columna exacta (diseño balanceado a dos columnas).
- 33% (4 cols): Un tercio del ancho (diseño en tríptico a tres columnas).
- 25% (3 cols): Un cuarto del ancho (cuatro columnas de tarjetas o características).
- Auto: Ajuste flexible según el contenido natural del elemento.
Cero superposiciones involuntarias: El sistema de grilla calcula automáticamente los espacios y fluidos CSS, manteniendo el diseño prolijo en modo modular.
Colapso Móvil Automático a 1 Columna (≤ 768px)
El comportamiento responsive es transparente: en pantallas móviles y tablets (ancho menor o igual a 768px), los elementos en grilla se apilan automáticamente a 1 sola columna ordenada verticalmente al 100% de ancho.
Esto asegura que el usuario no deba diseñar dos veces su sitio ni lidiar con maquetaciones rotas en teléfonos celulares.
Reorganización Interna de Elementos (Micro Drag & Drop)
Para reorganizar los elementos dentro de una misma sección sin alterar su confinamiento estructural, cada elemento editable cuenta con una manija superior izquierda «⋮⋮ Arrastrar».
- Al hacer clic sostenido en la manija y mover el mouse, se proyecta una línea guía cian indicando el punto de destino exacto antes o después de cualquier elemento vecino.
- Al soltar, el elemento ocupa su nueva posición y la grilla reajusta su flujo al instante.
- Los elementos permanecen confinados de forma segura dentro de su bloque padre, garantizando que el diseño nunca pierda su encapsulamiento ni su fondo temático.
preview.php) o descargar el sitio compilado en ZIP estático, el motor remueve automáticamente todas las manijas, cajas delimitadoras (bbox), tiradores de arrastre y atributos temporales de edición, pero conserva con exactitud matemática las coordenadas de desplazamiento libre, rotaciones y niveles de capa (position: relative; left: ...; top: ...; transform: ...; z-index: ...;), garantizando que el sitio publicado refleje exactamente lo diseñado en el lienzo.
4. Gestor de Medios e Imágenes Locales
El sistema integra un repositorio de imágenes locales de alta calidad almacenadas directamente en el servidor. Todas las imágenes se cargan con rutas locales relativas, eliminando por completo cualquier enlace a servidores externos o CDNs que pudieran romperse o ralentizar el sitio.
Hacer Clic en Cualquier Imagen del Lienzo
Al seleccionar una imagen, pulsa el botón "Cambiar Imagen" en la barra de herramientas contextual o en el Inspector.
Seleccionar desde la Biblioteca Local
Explora la galería preinstalada con fotografías profesionales optimizadas para negocios, tecnología, gastronomía, arquitectura y comercio.
O Subir Archivos Propios
Arrastra o selecciona archivos desde tu dispositivo (JPG, PNG, WebP, SVG). La imagen se sube de inmediato a la carpeta /img de tu proyecto.
/img relativo. Si un usuario reporta que una imagen no sube, verificar que los permisos de carpeta en el servidor sean 755 y que el archivo no supere el límite PHP upload_max_filesize.
5. Gestión de Sitios Multilenguaje
Permite crear sitios web con múltiples versiones idiomáticas. Cada idioma cuenta con su propio árbol de páginas y contenidos independientes, garantizando control total sin depender forzosamente de servicios de traducción externos.
Habilitar Idiomas Adicionales
En Configuración > Idiomas, marca las casillas de los idiomas requeridos (por ejemplo: Español, Inglés, Portugués, Francés).
Inserción del Selector Visual en el Menú
El selector de idiomas se inserta automáticamente en la barra de navegación del sitio con banderas de identificación y menú desplegable.
Edición Manual o Asistida por IA
Modo Manual: El usuario cambia al idioma deseado en la barra superior y edita los textos directamente. Modo IA: El motor traduce los bloques conservando el formato y diseño visual.
/en/, /pt/). Cada una contiene su propio index.html estructurado, lo que evita errores de servidor y optimiza el indexado internacional (SEO hreflang).
6. Gestor de Páginas y Navegación Oculta
Permite agregar, renombrar, duplicar y eliminar páginas del proyecto. Además, incluye la función clave de Ocultar del Menú, permitiendo crear páginas de aterrizaje (landing pages), páginas de agradecimiento o políticas legales que permanecen activas pero sin saturar la barra de navegación principal.
Abrir el Gestor de Páginas
Dirígete a la pestaña Páginas en la cinta Ribbon superior y haz clic en "Gestionar Páginas".
Controlar Visibilidad con "Ocultar / Mostrar"
Haz clic en el botón con el ícono del ojo (👁️ Mostrar / 🙈 Ocultar) junto a cualquier página. Las páginas marcadas recibirán la etiqueta "Oculta del Menú".
Enlazar Páginas Ocultas
Aunque no figuren en la barra de menú superior, puedes vincularlas desde cualquier botón, banner o enlace del pie de página seleccionando su URL amigable (ej. /gracias o /landing-promo).
7. Página de Error 404 Personalizada
Evita que los visitantes vean la pantalla de error genérica del servidor web cuando acceden a una URL inexistente o enlace roto. El constructor incluye una plantilla 404 prediseñada con diseño coherente y botón de regreso a la página principal.
Crear la Página 404
En Páginas > Añadir Página, selecciona la plantilla "Página de Error 404". Se creará automáticamente con el slug 404.html.
Personalizar Contenido
Adapta el mensaje corporativo, añade un buscador o modifica el botón para dirigir a tus usuarios a la página de inicio o soporte.
.htaccess con la directiva:
ErrorDocument 404 /404.html
AllowOverride All para que Apache procese el archivo .htaccess.
8. Servidor FTP y Publicación en Vivo
Permite conectar el constructor directamente con la cuenta de alojamiento web del cliente. Los archivos compilados se transfieren por protocolo FTP seguro sin necesidad de usar clientes externos como FileZilla.
Autenticación Segura y Automática (Single Sign-On)
Al acceder desde tu panel de control de hosting, el constructor pre-autentica tu cuenta automáticamente. Por estrictas normas de seguridad y privacidad, la contraseña FTP se gestiona exclusivamente en la sesión protegida del servidor y se muestra enmascarada (••••••••••••), impidiendo que pueda ser interceptada o leída desde el código fuente HTML o las herramientas del navegador.
Probar Conexión Antes de Publicar
Haz clic en el botón "Probar Conexión". El sistema verificará de inmediato si el usuario, la contraseña y la ruta remota son correctos, mostrando un mensaje verde de éxito.
Publicar el Sitio en Vivo
Pulsa el botón "Publicar" en la barra superior. El constructor compilará el HTML, optimizará estilos y transferirá los archivos a la carpeta del hosting.
/public_html. En Plesk suele ser /httpdocs. En cuentas FTP dedicadas configuradas directamente en la raíz del dominio, se debe ingresar /.
9. SEO, Favicon y Redes Sociales (Open Graph)
Configura la visibilidad orgánica en Google y el aspecto visual al compartir enlaces en WhatsApp, Facebook, LinkedIn o Twitter mediante metaetiquetas Open Graph con previsualizador interactivo.
Metadatos SEO
Título del Sitio: Aparece en la pestaña del navegador y como encabezado en los resultados de búsqueda de Google.
Meta Descripción: Resumen de 150-160 caracteres que incita a hacer clic.
Favicon Personalizado
Sube un archivo PNG, ICO o SVG cuadrado (mínimo 32x32 px). El simulador te muestra exactamente cómo lucirá la pestaña del navegador con tu icono.
Tarjeta Social Open Graph (og:image)
Selecciona una imagen de alta resolución (1200x630 px recomendada). La tarjeta de previsualización simula cómo se verá el link cuando un cliente lo envíe por WhatsApp o lo publique en redes.
10. Inyección de Código y Analítica Web
Permite insertar fragmentos de código HTML/JavaScript en áreas estratégicas del documento sin alterar el diseño visual. Cuenta con editores de código independientes para la cabecera (<head>) y para el pie antes del cierre de (</body>).
Código en la Cabecera (<head>)
Ideal para Google Tag Manager, Google Analytics 4 (gtag.js), Meta Pixel de Facebook o etiquetas de verificación de Google Search Console.
Código al Cierre del Cuerpo (</body>)
Recomendado para widgets de chat en vivo (ej. WhatsApp, Crisp, Tawk.to, Zendesk) y librerías que no deben bloquear el renderizado inicial del sitio.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
Además de las inyecciones globales, el constructor permite insertar bloques de código HTML libre en cualquier lugar del diseño, combinándolos sin restricciones con los bloques visuales convencionales (portadas, galerías, tarjetas de productos o formularios).
- Inserción Rápida: Presiona el botón "Código HTML" en la cinta Ribbon superior o añádelo desde "+ Añadir Bloque > Código HTML y Avanzado".
- Editor de Código Integrado: Al seleccionar el bloque, el panel de propiedades ofrece tanto edición rápida directa como el "Editor de Código Completo" con estilo IDE oscuro, soporte para tabulaciones, contador de caracteres y plantillas rápidas para botones, iframes, tarjetas y scripts.
- Restauración desde Modo Clásico: Si tienes un sitio web diseñado previamente en la versión clásica, puedes reimportarlo con 1 clic desde "Nuevo/Rein. > Restaurar Sitio Previo" o desde los ajustes de conexión FTP sin perder tus archivos originales.
11. Copias de Seguridad y Revisiones (Snapshots)
El sistema de revisiones permite crear copias de seguridad de todo el estado del proyecto con nombres descriptivos. Si un cambio no resulta como se esperaba o se borró información por descuido, es posible regresar a cualquier versión previa al instante.
Crear una Copia Manual
En Configuración > Copias de Seguridad, ingresa un nombre para la versión (ej. "Antes de cambiar precios") y presiona "Crear Snapshot".
Restaurar una Versión Anterior
En el historial cronológico, localiza la versión deseada y haz clic en "Restaurar". El editor recargará el diseño exacto de ese momento sin perder tus imágenes.
Exportar Copia en Archivo JSON
Puedes descargar un archivo .json a tu computadora para tener un respaldo local independiente del servidor.
• En el servidor FTP del cliente: Toda la información del proyecto y el historial completo de copias de seguridad (Snapshots) se transfieren y resguardan en su cuenta de hosting en el archivo
builder_project.json. De este modo, si el usuario cambia de computadora, limpia la caché del navegador o ingresa desde otro dispositivo, todas sus revisiones siguen disponibles.• En la memoria del navegador (localStorage): Para garantizar una navegación fluida e instantánea mientras se maqueta.
• En archivo descargable: Mediante el botón de descarga externa en formato JSON para archivos locales de respaldo.
builder_project.json se sincroniza automáticamente en la raíz remota del FTP configurado al hacer clic en "Guardar" (Ctrl+S), "Publicar" o al crear un Snapshot. Si un cliente necesita recuperar su trabajo en un equipo nuevo, el constructor descarga automáticamente este archivo desde su hosting al autenticarse.
12. Componentes Especiales e Interactivos
Para enriquecer la experiencia del usuario y aumentar la tasa de conversión, el constructor incluye una suite de widgets interactivos preprogramados que funcionan sin dependencias de librerías externas pesadas.
Slider / Carrusel de Imágenes y Texto
Diapositivas animadas con flechas de navegación previa/siguiente y puntos indicadores inferiores. Ideal para promociones y banners principales.
Acordeón Plegable (FAQ)
Permite organizar preguntas frecuentes en paneles colapsables que se despliegan suavemente al hacer clic, ahorrando espacio en pantallas móviles.
Pestañas de Contenido (Tabs)
Organiza información en pestañas temáticas (ej. "Características", "Especificaciones", "Garantía") con transición instantánea.
Contador Regresivo (Countdown Timer)
Reloj dinámico de cuenta atrás en tiempo real (Días, Horas, Minutos, Segundos) para lanzamientos de productos, promociones o eventos.
Carrito de Compras Flotante (E-commerce)
Botón flotante con contador de artículos y panel lateral deslizable (Slide-over drawer) con subtotal calculado automáticamente y botón de pedido por WhatsApp o pasarela.
13. Asistente Inteligente con IA
Integrado en la barra lateral, el asistente inteligente te ayuda a redactar titulares persuasivos, párrafos comerciales, llamados a la acción (CTA) y descripciones de servicios en cuestión de segundos mediante lenguaje natural.
Abrir la Pestaña Asistente IA
Haz clic en el ícono de la varita mágica o robot en el panel lateral derecho del constructor.
Escribir la Solicitud (Prompt)
Describe brevemente tu negocio y lo que necesitas (ej. "Redacta tres ventajas competitivas para una empresa de energía solar").
Insertar con un Clic
El texto generado puede copiarse directamente o insertarse en el bloque de texto seleccionado en el lienzo.
14. Tienda Online, Carrito de Compras y Mercado Pago
Convierte cualquier sitio web en una tienda de comercio electrónico completamente operativa en minutos. El creador incluye catálogo visual de productos, carrito de compras flotante con panel lateral desplegable (slide-over drawer), pedidos directos a WhatsApp y cobros online automatizados mediante la API oficial de Mercado Pago sin depender de plataformas de terceros ni pagar comisiones adicionales.
Acceso en la Barra de Herramientas
En la cinta superior de 16 herramientas encontrarás el botón "Tienda/Carro" (icono 🛒). Al pulsarlo (o desde el botón "Bloques" > categoría "Comercio y Tienda"), accedes de inmediato a los bloques comerciales especializados.
Tarjeta de Producto con Mercado Pago (mercadoPagoCard)
Inserta tarjetas individuales o en cuadrícula responsiva que incluyen:
• Imagen del Producto: Fotografía con ajuste de encuadre proporcional (object-fit: contain).
• Título y Descripción: Detalles comerciales y especificaciones claras del producto.
• Precio y Moneda: Formato numérico automático en moneda local (ARS $, USD, etc.).
• Botón "💳 Comprar con Mercado Pago": Conecta directamente con la pasarela de pagos oficial.
• Botón "🛒 Añadir al Carrito": Suma el producto al carrito interactivo al instante.
Configuración de Mercado Pago (Link de Pago o API Oficial)
Al seleccionar una tarjeta de producto en el Inspector de Propiedades, puedes configurar el cobro de dos formas:
• Modo Rápido (Link de Pago): Pega un enlace de pago creado desde tu cuenta de Mercado Pago en el campo "Enlace de Pago o Client ID".
• Modo Checkout API (Avanzado): Completa los campos con tu Access Token oficial (ej. APP_USR-...) o tus credenciales OAuth Client ID y Secret ID.
Carrito de Compras Flotante (storeCart)
Añade un botón flotante y disparador de cabecera con contador en vivo 🛒 Carrito (N). Al hacer clic, se abre un panel lateral deslizante (slide-over drawer) donde el cliente puede:
• Modificar cantidades (+ / -) con actualización instantánea de subtotales.
• Vaciar o eliminar artículos del pedido.
• Enviar pedido por WhatsApp: Envía automáticamente un mensaje preformateado con el detalle del pedido, cantidades y precio total al WhatsApp del negocio.
• Pagar con Mercado Pago: Redirige al checkout seguro para pagar con tarjeta de crédito, débito o dinero en cuenta.
Generación Automática del Backend de Pago (checkout.php)
Al publicar el sitio por FTP, el Creador compila y sube automáticamente a la raíz de tu hosting el archivo checkout.php. Este script se conecta de servidor a servidor vía cURL con la API oficial de Mercado Pago (https://api.mercadopago.com/checkout/preferences), garantizando máxima seguridad ya que tus credenciales nunca quedan expuestas en el código fuente visible de la web.
Migración Transparente desde Sitios del Creador Legacy
Si estás migrando un sitio preexistente creado en la versión anterior:
• El migrador detecta de forma automática la base de datos de la tienda anterior (store.dat).
• Extrae todos los productos existentes, sus precios, fotos y categorías (incluso catálogo raíz).
• Recupera las credenciales de Mercado Pago guardadas en las pasarelas de pago anteriores.
• Sustituye los scripts antiguos dependientes del backend anterior por componentes estáticos nativos ultrarrápidos.
• Configura redirecciones 301 en .htaccess para que las URLs antiguas de productos (ej. /PRODUCTOS/...) sigan funcionando y lleven directamente al catálogo.
builder_project.json bajo theme.mercadoPago.• Archivo checkout.php: Verifica que en el hosting del cliente exista el archivo
checkout.php con permisos de lectura para el usuario web (755 o 644). Requiere PHP con extensión curl habilitada.• Error "collector_does_not_comply_with_current_regulation": Si la API de Mercado Pago responde con este error, significa que la cuenta de Mercado Pago del comerciante requiere validar su CUIT/AFIP o aceptar los términos y condiciones vigentes directamente en mercadopago.com.ar.
• Requisito HTTPS: Mercado Pago exige que las URLs de retorno (back_urls) operen bajo protocolo seguro HTTPS. Comprueba que el dominio tenga su certificado SSL activo en el hosting.
15. Publicación y Exportación Estática
Además de la publicación por FTP, el constructor cuenta con un motor de compilación que genera un paquete ZIP estático descargable. Este archivo contiene todo el sitio web optimizado, listo para ser alojado en cualquier servidor web sin requerir bases de datos MySQL.
Estructura del Paquete ZIP Generado
• index.html (Página principal en HTML5 semántico)
• styles.css (Hoja de estilos minificada y limpia)
• Carpeta /img (Todas las imágenes del sitio organizadas localmente)
• sitemap.xml (Mapa del sitio para motores de búsqueda)
• robots.txt (Reglas de rastreo para Googlebot)
• contact.php (Procesador de formulario de contacto con token CSRF y HoneyPot anti-spam)
Independencia de Servidor
El paquete puede descomprimirse en cualquier hosting Linux o Windows (cPanel, DirectAdmin, Apache, Nginx, LiteSpeed, Amazon S3, Cloudflare Pages o GitHub Pages).
16. Guía de Soporte Técnico y Resolución de Incidencias
Esta sección compila las preguntas más habituales de los clientes y los procedimientos técnicos paso a paso para que los agentes de soporte puedan resolver cualquier consulta de manera rápida y efectiva.
| Síntoma Reportado | Causa Técnica Común | Procedimiento de Solución |
|---|---|---|
|
Error FTP "Falla al conectar al servidor FTP" o Timeout al publicar. |
1. Usuario o contraseña incorrectos. 2. Host FTP inaccesible por bloqueo de puerto 21. 3. El directorio remoto no existe. |
1. Solicitar al usuario que use el botón "Probar Conexión". 2. Verificar que el host sea la IP del servidor o ftp.tudominio.com.3. Probar cambiar el directorio remoto a /public_html o /.
|
|
Caché "Publiqué los cambios pero sigo viendo la versión anterior". |
La memoria caché del navegador del cliente o de un proxy/CDN (como Cloudflare) almacena los archivos viejos. |
1. Indicar al cliente que presione Ctrl + F5 (Windows) o Cmd + Shift + R (Mac).2. Si usa Cloudflare, purgar la caché desde el panel de DNS. 3. Abrir el sitio en una ventana de incógnito. |
|
Error 404 "Al hacer clic en un idioma secundario sale error 404". |
El sitio aún no se ha publicado tras activar el nuevo idioma, o el servidor Apache no permite reescrituras .htaccess.
|
1. Realizar una publicación completa presionando el botón "Publicar". 2. Comprobar que en el hosting se hayan creado las subcarpetas de idiomas (ej. /en/ o /pt/).
|
|
Formularios "No me llegan los correos del formulario de contacto". |
1. Email de destino no configurado o mal escrito. 2. El servidor no tiene habilitada la función mail() de PHP o los correos van a Spam.
|
1. En las propiedades del formulario, verificar el campo "Correo de destino". 2. Revisar la carpeta de correo no deseado (Spam). 3. Configurar registros SPF y DKIM en el panel de hosting para autenticar los envíos. |
|
Imágenes "Error al subir una imagen propia". |
Permisos insuficientes en la carpeta del servidor o archivo que supera el peso máximo permitido en PHP. |
1. Verificar que la carpeta /img o /uploads tenga permisos 755.2. Recomendar usar formato JPG o WebP con peso inferior a 2 MB para rendimiento web óptimo. |
|
Tienda / Carrito "No encuentro el carrito de compras o la integración de Mercado Pago". |
En la cinta superior de herramientas, el botón está rotulado como "Tienda/Carro" (icono 🛒). También se encuentra en Bloques > Comercio y Tienda. |
1. Indicar al usuario que haga clic en "Tienda/Carro" en la barra superior. 2. Para catálogo: insertar "Tarjeta de Producto Mercado Pago". 3. Para carrito flotante con drawer lateral: insertar "Carrito de Compras Flotante (E-Commerce)". |
|
Mercado Pago "Al hacer clic en Comprar con Mercado Pago aparece un error de validación o no abre la pasarela". |
1. Credenciales vacías o incorrectas. 2. La cuenta de Mercado Pago del vendedor tiene pendiente la validación de CUIT/AFIP ante normativas fiscales ( collector_does_not_comply_with_current_regulation).3. El sitio no tiene certificado SSL (HTTPS). |
1. En las propiedades del producto, verificar el Access Token o Client ID y Secret ID. 2. Si el mensaje indica validación de cuenta, solicitar al titular que ingrese a mercadopago.com.ar para completar sus datos fiscales.3. Comprobar que el dominio cargue con https:// y que el archivo checkout.php exista en la raíz del hosting.
|
|
Migración Legacy "Sitio migrado del creador anterior muestra enlaces rotos o páginas en blanco en los productos". |
El sitio antiguo dependía del backend dinámico del creador anterior (sitepro/index.php) que requería conexión con un servidor de licencias externo.
|
1. Abrir el sitio en el Creador: el migrador convierte automáticamente la tienda a componentes nativos estáticos. 2. Hacer clic en "Publicar" para regenerar el catálogo, inyectar el nuevo carrito interactivo y escribir las redirecciones 301 en .htaccess.
|
|
Modo Legacy "Cliente consulta por el Modo Legacy o pregunta por qué será retirado el 01/01/2027". |
El editor anterior se encuentra en proceso de discontinuación programada para el 1 de enero de 2027 (01/01/2027) para evitar fallas e incompatibilidades técnicas. |
1. Explicar que el nuevo Creador genera código HTML5 moderno, autónomo y con rendimiento superior. 2. Advertencia preventiva: Remarcar que el uso alternado de ambos creadores puede provocar incompatibilidades severas y desconfigurar el diseño. 3. Orientar al cliente a continuar todas sus ediciones directamente en la nueva interfaz. |
|
Previsualización "¿La función de Avance muestra el sitio idéntico a cómo se publicará?". |
La función Avance compila el HTML en vivo, incrusta el CSS compilado y resuelve mediante <base href> todas las imágenes, tipografías y reproductores de medios.
|
El cliente puede confiar al 100% en la vista previa generada en preview.php. Refleja con total exactitud la apariencia final sin necesidad de subir cambios a producción.
|
|
Edición Híbrida "¿Cómo reorganizo elementos dentro de un bloque o cambio su ancho?" |
El usuario desea mover textos, botones o imágenes dentro de una sección o ajustar su distribución en columnas sin romper el diseño responsive. |
1. Mover elementos: Arrastrar el elemento desde su manija «⋮⋮ Arrastrar» y soltarlo en la guía cian. El movimiento está confinado al mismo bloque para preservar los estilos. 2. Cambiar ancho: Seleccionar el elemento y en el Inspector > Grilla Inteligente elegir el ancho deseado (100%, 66%, 50%, 33%, 25% o Auto). No habrá solapamiento. 3. Añadir elementos sueltos: Usar el botón «+ Elemento» en la barra flotante del bloque. 4. Vista en celulares: En pantallas móviles (≤ 768px) la grilla colapsa automáticamente a 1 columna ordenada. |
|
Drag & Drop Macro "¿Cómo cambio el orden de las secciones o bloques completos en la página?" |
Necesidad de mover una sección completa hacia arriba o hacia abajo en el lienzo. |
1. En el Lienzo: Pasar el cursor sobre el bloque y arrastrar desde el botón flotante «⋮⋮ Mover», o pulsar las flechas ▲ / ▼. 2. En el Panel Lateral: Ir a la pestaña Estructura / Capas y arrastrar el bloque arriba o abajo en la lista para reordenarlo al instante. |
|
Posicionamiento 2D "¿Cómo muevo un elemento a cualquier lugar libremente o lo superpongo sobre otro?" |
El usuario necesita desplazar textos, fotos o botones a coordenadas arbitrarias fuera de la grilla o encimarlos sobre otros elementos (ej. colocar texto sobre una imagen o botón flotante). |
1. Tirador de arrastre: Seleccionar el elemento y arrastrarlo directamente desde la manija superior (pastilla) o pulsar «Mover» en la barra flotante. La posición queda fija y no se reacomoda al soltar. 2. Ajuste milimétrico: En el Inspector > «📍 Posición Libre & Capas (2D)», escribir o ajustar las coordenadas X e Y en píxeles (ej. -213px X, -59px Y). 3. Superposición (Z-Index): Usar los botones ▲ (Traer al frente) o ▼ (Enviar al fondo) para decidir qué elemento queda por encima. La posición exacta y el orden de capas se conservan al 100% en la previsualización y en el sitio final publicado. |
|
Elemento Bloqueado "¿Por qué un elemento no se puede mover, redimensionar ni rotar?" |
El elemento fue bloqueado para proteger su ubicación y dimensiones contra modificaciones o giros accidentales. |
1. Comprobar si sobre el elemento se muestra el distintivo 🔒 Bloqueado.2. En la barra flotante contextual o en el Inspector > Posición Libre & Capas (2D), hacer clic en el botón «🔒 Desbloquear». 3. Inmediatamente se reactivarán los 8 tiradores perimetrales de redimensión y el vástago superior de rotación angular. |
|
Portapapeles "¿Por qué el botón 'Pegar' de la barra flotante aparece oculto o inactivo?" |
El portapapeles del constructor aún no contiene ningún elemento copiado en memoria. |
1. Seleccionar el elemento o bloque de origen y pulsar «Copiar» en la barra flotante (o presionar Ctrl + C). 2. Al copiarlo, el botón «Pegar» se mostrará y habilitará al instante en la barra contextual. 3. Hacer clic en «Pegar» (o presionar Ctrl + V) para insertar una copia idéntica con estilos, rotación y dimensiones intactas. |
17. Checklist de Verificación Pre-Publicación
Utiliza esta lista de verificación interactiva para asegurar que el sitio cumpla con todos los estándares de usabilidad, rendimiento y posicionamiento en buscadores antes de su lanzamiento formal.