Resumen del Estudio
El estudio es el creador visual de correos de MailInApp. Cada proyecto de tu panel se abre en él.
Empezar desde un propósito
Los nuevos proyectos pueden empezar desde un propósito: encuesta, promoción, boletín, evento, transaccional, panel de control, clase o equipo deportivo, elegido al crear el proyecto. Elegir uno abre un carrusel con las plantillas iniciales reales de ese tema, cada una una vista previa real y renderizada a gran tamaño, no una maqueta. Recórrelas, elige una, y se inicializa el lienzo con un diseño inicial construido a partir de bloques normales (un bloque de calificación para encuestas, un héroe y un cupón para promociones, y así sucesivamente). No tienen nada especial después de eso: edítalos, elimínalos o agrégales lo que quieras como a cualquier otro bloque. Empezar en blanco se salta esto y abre el lienzo predeterminado sencillo.
Mira la Guía rápida para el selector, Respuestas y webhooks para saber cómo el propósito da forma al panel de respuestas, y Plantillas iniciales y tu propia biblioteca para guardar tus propias plantillas de forma privada o publicarlas en la galería de la comunidad.
El espacio de trabajo
- Lienzo — el centro de la pantalla: una representación en vivo de tu correo. Haz clic en cualquier elemento para seleccionarlo; una barra de ruta muestra el camino desde el cuerpo del correo hasta él, y cada ancestro es clicable.
- Panel izquierdo — cuatro paneles, abiertos uno a la vez al hacer clic en su ícono: Insertar (la biblioteca de bloques — arrastra bloques de diseño como sección, texto, imagen, botón, divisor, espaciador, y bloques interactivos como carrusel, encuesta, formulario, cuenta regresiva, cuestionario al lienzo; un cuadro de búsqueda filtra todo por nombre), Árbol (la estructura completa del correo — reordena bloques, selecciona elementos anidados como una sola diapositiva de un carrusel, colapsa contenedores, oculta un bloque de la salida con su interruptor de ojo sin eliminarlo, o déjate una nota con doble clic para renombrar; cualquier contenedor también lleva un + que abre un selector con búsqueda de exactamente los tipos de hijos que acepta — el de un formulario se expande a las mismas variantes de entrada que la sección Entradas del panel Insertar — así puedes agregar sin arrastrar, y el mismo selector aparece en lugar del marcador "Suelta aquí" de un contenedor vacío en el lienzo), Datos (Fuentes de datos y etiquetas de combinación — conecta fuentes, elige la audiencia, explora campos), y Tema (mira Tematización más abajo).
- Inspector — el panel derecho para lo que esté seleccionado, dividido en cuatro pestañas: Contenido (texto, enlaces, campos específicos del bloque como las opciones de una encuesta), Estilo (colores, espaciado, bordes, CSS personalizado), Lógica (vinculación de repetición, condiciones de visibilidad) y Acciones (mover, duplicar, eliminar, ⧉ Envolver en… — el inverso del + del panel Árbol: coloca la selección actual dentro de una Sección, Columnas, Repetición o elemento HTML nuevo que legalmente pueda contenerla justo donde está, por ejemplo dándole a un botón solitario su propio fondo, o convirtiendo un bloque en un diseño de dos columnas — y Guardar como componente, mira Componentes reutilizables). Un cuadro de búsqueda sobre las pestañas filtra campos en las cuatro a la vez.
Modos de vista previa
Sobre el lienzo, un interruptor Editar / Vista previa controla lo que estás viendo:
- Editar — la estructura de bloques, seleccionable y editable.
- Vista previa resuelve etiquetas de combinación, condiciones de visibilidad y repeticiones contra una fila de destinatario elegida, con un selector de nivel debajo: Vista en vivo (la misma página React a la que llegan los destinatarios), Enviado — moderno y Enviado — Outlook renderizan el HTML compilado real que recibirían las bandejas de entrada de tus destinatarios — el nivel Outlook fuerza las mismas ramas de comentarios condicionales que tomaría un cliente Outlook real, así puedes revisar la alternativa sin tener tu propia copia de Outlook. Un interruptor de modo oscuro simula cómo renderizaría el nivel de vista en vivo el modo oscuro de un cliente de correo.
Un control de zoom (50–150%, o ajustar al ancho) escala el lienzo sin cambiar el diseño subyacente.
Deshacer, rehacer y guardado automático
Cada edición al diseño — arrastrar un bloque, escribir en un campo, cambiar un color — se puede deshacer con Ctrl/Cmd+Z (rehacer: Mayús+Ctrl/Cmd+Z o Ctrl/Cmd+Y), incluso desde dentro de un campo de texto. Las ediciones rápidas (escribir una frase, arrastrar un control deslizante) se combinan en un solo paso de deshacer en lugar de uno por pulsación de tecla.
El estudio guarda automáticamente de forma continua — no hay botón de guardar, y cerrar la pestaña no pierde nada; el proyecto se reabre exactamente donde lo dejaste. Si tú y un compañero de equipo tienen el mismo proyecto abierto a la vez, el segundo guardado muestra un aviso de "Cambiado en otro lugar" en lugar de sobrescribir el primero silenciosamente. Recarga para obtener la última versión, o usa Guardar como copia para conservar tus cambios como un proyecto nuevo.
Tematización
El panel Tema define un puñado de tokens de todo el proyecto (colores de marca, acento, texto, atenuado y fondo, una fuente y el radio de esquina predeterminado del botón), así un cambio de marca es una sola edición en lugar de buscar el campo de color de cada bloque. Un campo de color puede contener una referencia a un token, mostrada como un selector de muestra junto al campo de color habitual, o su propio color literal. Los bloques que vienen con una referencia a un token — botones, íconos sociales, botones de envío de formulario y cuestionario — se restilizan automáticamente cuando cambias el token, mientras que cualquier bloque al que le hayas puesto un color literal lo conserva. Los proyectos sin tema se renderizan exactamente igual que antes; el panel solo hace explícitos los colores de marca en lugar de códigos hexadecimales copiados y pegados.
Biblioteca multimedia
Algunos campos existen solo para contener una imagen: el bloque Imagen, la imagen de portada/carátula de un bloque de Video/Audio, la imagen de una diapositiva de Carrusel, la imagen frontal/trasera de una Tarjeta didáctica, y la foto del bloque Producto. Esos muestran una miniatura y un botón Elegir imagen… en el Inspector en lugar de un cuadro de URL. Al hacer clic se abre una cuadrícula con todo lo que ya subiste a tu cuenta (no solo a este proyecto), con un botón Subir nueva justo ahí para un PNG, JPEG, WebP o GIF de hasta 5 MB. Elige una y se escribe en el campo de inmediato, igual que si hubieras escrito una URL. El selector es solo una conveniencia de creación, así que nada sobre cómo se renderiza el bloque en el correo, la vista en vivo o el lienzo cambia.
Las subidas se comparten entre todos los proyectos de tu cuenta: sube un logo o una foto de producto una vez y reutilízala donde aparezca el selector. La biblioteca completa también se puede explorar desde Multimedia en la navegación del panel, donde puedes subir, ver y eliminar recursos fuera de cualquier proyecto específico. Eliminar un recurso lo quita solo de la biblioteca — un bloque que ya tenía su URL sigue mostrando la imagen hasta que tú mismo la cambies por otra cosa.
El almacenamiento cuenta contra la cuota de tu plan (mira precios), mostrado como un medidor junto a tu otro uso en Configuración. Algunos campos toman un enlace en lugar de una imagen — el enlace opcional de toque de una diapositiva, el src de archivo propio de un bloque de video/audio, la URL de Unirse de un enlace de reunión. Esos siguen siendo simples cuadros de URL: MailInApp solo almacena imágenes, no archivos de video/audio ni páginas arbitrarias.
Componentes reutilizables
¿Construiste algo que vale la pena volver a usar — un encabezado con estilo, una sección de cupón, una fila de producto? Selecciónalo, abre la pestaña Acciones del Inspector, y Guardar como componente. Se guarda en tu cuenta (no solo en este proyecto) y aparece bajo Mis componentes en la parte superior del panel Insertar en todos los proyectos a partir de entonces. Arrastra o haz clic para insertar una copia nueva y totalmente independiente; renombra o elimina el componente guardado desde la misma lista. Esto es distinto de las composiciones integradas de la sección Prediseñado (mira Bloques interactivos): esas vienen con MailInApp para todos, mientras que un componente guardado es tuyo, construido a partir de tus propios diseños.
Vista en vivo
El botón Vista en vivo ↗ de la barra de herramientas abre la versión web alojada del correo — una página totalmente interactiva renderizada a partir de tu diseño actual. Es tanto una herramienta de vista previa para ti como la alternativa universal que reciben los destinatarios cuando su cliente de correo no puede renderizar interactividad. El enlace está firmado y es válido por 30 días; mira Enlaces de vista en vivo.
Texto asistido por IA
¿Atascado con una línea de asunto? Haz clic en ✨ Sugerir junto al campo de asunto en la página de envío. MailInApp redacta algunas opciones basadas en el nombre del proyecto, su propósito, y un breve extracto del texto existente del correo.
Las sugerencias son solo de clic para completar — nada se escribe nunca en tu proyecto automáticamente. Las solicitudes de sugerencias cuentan contra la asignación mensual de tu cuenta (mira precios), compartida entre todos los proyectos y todos los que los editan. Para construir o editar el correo entero — no solo un campo — mira Copiloto de IA.
Presupuesto de tamaño
Gmail recorta los mensajes de más de 102 KB aproximadamente — y un correo recortado pierde su bloque <style>, lo que desactiva silenciosamente toda la interactividad CSS. El estudio rastrea el tamaño compilado de tu correo frente a este presupuesto mientras lo construyes y te avisa antes de que se convierta en un problema. Más en Exportar y enviar.