Diseñar contenido en modo programador en emailmarketing.com.ar

Actualizado el

😃Este modo te permite diseñar el contenido de tu campaña de Email Marketing a partir de tu propio código HTML.

  1. En la misma pantalla donde completas los datos de tu campaña, selecciona la opción Modo programador.



    Al igual que con las otras opciones, también podés empezar por editar el contenido y después completar todos los datos de la campaña (asunto, remitente, destinatarios, etcétera).
     
  2. Verás la pantalla de Codigo HTML, allí vas a poder escribir el código correspondiente al diseño que querés para tu campaña. 

    codigo html.png
  3. También vas a encontrar el Maquetador, una herramienta que facilita el uso del modo programador y permite ajustar los aspectos visuales del contenido de tu campaña.

    maquetador.png
  4. Una vez que tengas el código escrito y hayas finalizado, hacé clic en el botón Guardar.

  5. Listo! Una vez que hayas guardado y confirmado los cambios, volverás a la pantalla de configuración general de la campaña para que continúes con el envío.

Menú de programador

El modo programador tiene su propio menú.

A continuación, te mostraremos qué podés encontrar en él y cómo funciona:

👉Snippets: Son fragmentos de código que podés reutilizar en cualquier lugar que lo necesites y que suele solventar un problema en específico. Te ayudarán a trabajar más rápidamente, ya que no necesitás escribir nuevamente métodos y etiquetas, sino que los llamas de una fuente externa para luego incrustarlos en tu proyecto. Si no querés trabajar tu código desde cero, podés aprovechar los snippets. Están ubicado en el primer ícono del menú lateral:

Al hacer clic, aparecerá una lista de snippets (códigos pre-armados) para que copies y pegues los que necesites, como Estructura, Contenidos y Campos personalizados.

No es posible utilizar variables en el modo programador, pero podés utilizar campos personalizados.

👉Datos útiles: Haciendo clic en el ícono de información, verás algunos consejos y atajos que te ayudarán con tu código.

👉Contraste: El modo programador trabaja por defecto con un fondo oscuro. Pero si querés trabajar sobre un fondo claro, podés cambiarlo desde este ícono.

Maquetador

Si no tenés conocimientos avanzados en HTML, el Maquetador te ayudará a editar y dar formato a tu campaña de forma sencilla.

Puedes editar el código que ya hayas incorporado, o comenzar desde cero.

maquetador.png

En el menú vas a encontrar distintas opciones para trabajar el contenido:

📝 Editar

Desde esta sección podés:

  • Deshacer y rehacer cambios
  • Copiar y cortar contenido
  • Pegar o pegar como texto plano
  • Seleccionar todo
  • Buscar y reemplazar palabras o frases

➕ Insertar

Te permite agregar elementos a tu campaña, como:

  • Imágenes
  • Enlaces
  • Tablas
  • Caracteres especiales
  • Línea horizontal
  • Fecha y hora

🎨 Formato

Aquí podés modificar la apariencia del texto:

  • Tipo y tamaño de fuente
  • Color de texto
  • Color de fondo
  • Negrita, cursiva y subrayado
  • Alineación del contenido
  • Otras opciones de estilo

📊 Tabla

Desde esta sección podés:

  • Insertar una tabla
  • Ver las propiedades de una celda, combinar y dividir celdas.
  • Agregar, eliminar, copiar y pegar filas y columnas
  • Ajustar propiedades de la tabla
  • Eliminar tabla

Asistente de código con IA - Generar campaña con IA

El Asistente de código con IA te permite crear una campaña de manera rápida y sencilla, generando el código HTML a partir de las indicaciones que le proporciones.

  1. Hacé clic en el botón Asistente de código con IA.

    asistente de codigo.png
  2. Escribe las instrucciones para el código que necesitás y presiona el botón Generar código.

    contenido.png
  3. ¡Listo! El contenido se creará automáticamente y vas a poder editarlo fácilmente utilizando el Maquetador.

    campaña creada.png

Recuerda revisar el código generado ya que la IA puede cometer errores

Importar desde una imagen - Generar campaña con IA desde una imagen

Esta funcionalidad te permite cargar una imagen y, mediante IA, intentar generar automáticamente el código HTML necesario para crear tu campaña.

  1. Hacé clic en el botón Importar desde una imagen.

    importar desde una imagen.png
  2. Adjunta o arrastra la imagen. Puedes seleccionarla desde tu equipo o arrastrarla directamente al área indicada.

    adjuntar imagen.png
  3. Una vez cargada la imagen, presiona el botón Generar código para que la IA procese el diseño y cree el código HTML.

    generar codigo.png
  4. ¡Listo! El contenido se creará automáticamente y vas a poder editarlo fácilmente utilizando el Maquetador.

    campaña.png

Recuerda revisar el código generado ya que la IA puede cometer errores