DocumentaciónEdición y publicaciónGuía de personalización

Guía de Personalización

Aprenda a editar, estilizar y extender su sitio Draftly sin tocar código.

Cómo Funciona la Personalización

Draftly le ofrece tres formas de personalizar su sitio después de la generación:

1. Clic para Editar (Edición en Línea) — Active Edit en la barra de herramientas de vista previa, luego haga clic en cualquier texto o elemento. El inspector muestra controles de tipografía, espaciado, colores y animación. Los cambios se aplican en vivo.

2. Chat para Modificar — Escriba una instrucción enfocada por mensaje (ej. "cambiar el fondo del héroe a azul marino oscuro", "añadir una sección de precios"). Draftly solo parchea las partes relevantes — típicamente 0.5 créditos por edición.

3. Regenerar Interfaz del Sitio Web — Haga clic en ↺ Regenerate Website para ejecutar un nuevo pase de diseño de IA mientras mantiene su video, imágenes y marcos de desplazamiento.

Opcional: cambie a una plantilla preestablecida desde el selector de plantillas para un intercambio de diseño más rápido.

Flujo de Trabajo de Personalización Recomendado

Para la experiencia más fluida, siga este orden:

1.Vista previa en nueva pestaña — verifique el movimiento de desplazamiento y el diseño sin la interfaz del constructor
2.Edición en línea — corrija el texto exacto, las etiquetas de los botones y los colores haciendo clic en los elementos
3.Chat — un cambio por mensaje para secciones, cambios de tema o reescrituras
4.Integraciones (pestaña Ship) — GA4, formulario de contacto, scripts de encabezado personalizados
5.Volver a publicar después de las ediciones para que la URL en vivo coincida con la vista previa

Evite: solicitudes vagas como "hazlo mejor" — especifique qué cambiar. Use Guide (encabezado) o pregunte en el chat: "¿Cómo personalizo el texto?"

Editar Texto y Colores

Para editar cualquier elemento en línea:

1.Asegúrese de estar en la pestaña Preview en el constructor.
2.Haga clic en cualquier texto, encabezado o bloque de color en la vista previa.
3.La superposición de Inline Edit se abre a la derecha con:
• - Texto — edite el contenido directamente
• - Color — entrada hexadecimal o selector de color
• - Familia de Fuente — desplegable con 26 tipografías
• - Tamaño de Fuente — deslizador de rango
• - Grosor de Fuente — 8 opciones de Fino a Negro
4.Haga clic en Save para aplicar, o Cancel para revertir.

También puede hacer clic en AI Rewrite para que Draftly reescriba el texto seleccionado con un tono mejor, o en Replace Image para cambiar una imagen de fondo o de producto.

Uso de Presets de Diseño

Los Presets de Diseño le permiten cambiar todo el estilo visual de su sitio con un solo clic.

1.Haga clic en el botón Styles en la barra de herramientas del constructor.
2.El panel de Presets se abre con tres pestañas:
• - Vertical — 25 presets de industria (Restaurante, SaaS, Bienes Raíces, Moda, etc.) — cada uno aplica una paleta de colores, combinación de fuentes y estilo de diseño curados.
• - Colores — 12 muestras de acento + entrada hexadecimal personalizada para cambiar el color de acento principal.
• - Estilo — 5 estilos de navegación, 5 diseños de héroe y 5 presets de animación.
3.Haga clic en cualquier preset para previsualizarlo, luego haga clic en Apply para regenerar su sitio con el nuevo estilo.

Los presets se combinan con su contenido — su texto, secciones y nombre de marca permanecen igual; solo cambia el sistema visual.

Chat para Modificar

Chat-to-modify es la forma más rápida de realizar cambios estructurales sin una regeneración completa.

Cómo funciona: Escriba cualquier instrucción en la barra de chat mientras su sitio está cargado. Ejemplos: - *"Cambia el titular principal por algo más emocionante"* - *"Añade una sección de preguntas frecuentes entre precios y contacto"* - *"Haz que la combinación de colores sea más oscura y profesional"* - *"Reescribe la sección 'Acerca de' para que sea más personal"* - *"Reemplaza el texto del botón CTA principal por 'Obtener un Presupuesto Gratuito'"*

Draftly envía solo la sección relevante del HTML de su sitio a la IA — no la página completa — por lo que las ediciones son rápidas y cuestan 0.5 créditos en lugar del costo de regeneración completa.

Consejos: - Sea específico: "cambiar el fondo de la navegación a negro" funciona mejor que "hacerlo más oscuro" - Referencie las secciones por su nombre: "la sección de servicios", "el pie de página" - Puede encadenar ediciones — cada mensaje de chat es un nuevo parche dirigido

Añadir Analíticas y Seguimiento

Conecte Google Analytics, Google Tag Manager, Facebook Pixel o cualquier script de seguimiento personalizado a su sitio — no se requiere código.

1.Haga clic en el botón Integraciones (icono de enchufe) en la barra de herramientas del constructor.
2.Se abre el panel de Integraciones con campos para:
• - Google Analytics 4 — pegue su ID de Medición (formato: G-XXXXXXXXXX). Encuéntrelo en GA4 → Administrar → Flujos de datos.
• - Google Tag Manager — pegue su ID de Contenedor (formato: GTM-XXXXXXX). Encuéntrelo en GTM → Administrar → ID de Contenedor.
• - Facebook Pixel — pegue su ID de Píxel de 15 dígitos. Encuéntrelo en Meta Events Manager.
• - Script de Encabezado Personalizado — pegue cualquier bloque <script> para inyectar en <head> (solo fuentes HTTPS).
3.Haga clic en Guardar Integraciones.
4.La próxima vez que genere o regenere su sitio, los scripts de seguimiento se inyectarán automáticamente.

Todos los scripts se inyectan en el <head> del HTML de su sitio publicado. GTM también inyecta el iframe <noscript> requerido después de <body>.

Añadir un Formulario de Contacto

Cada sitio de Draftly puede incluir un formulario de contacto funcional que envía las solicitudes directamente a su bandeja de entrada de Draftly y le envía una notificación por correo electrónico.

1.Haga clic en el botón Integraciones en la barra de herramientas del constructor.
2.Active la opción Habilitar formulario de contacto (habilitada por defecto para sitios nuevos).
3.Haga clic en Guardar Integraciones.
4.Genere o regenere su sitio — se añadirá automáticamente un formulario de contacto al sitio.

Cómo funciona: - Si su sitio generado ya tiene un elemento <form> (común en sitios con una sección de Contacto), Draftly lo parchea para que envíe los datos al backend de Draftly. - Si no existe ningún formulario, Draftly inyecta una sección de formulario con estilo antes del pie de página. - Las solicitudes se almacenan en su cuenta de Draftly bajo la pestaña Solicitudes del sitio. - Recibirá una notificación por correo electrónico por cada nueva solicitud con el nombre, correo electrónico y mensaje del visitante.

Todos los datos permanecen dentro de Draftly — no se requieren servicios de formularios de terceros.

AnteriorEdición de tu sitioSiguienteGuía de SEO