Usar el creador de campañas con HTML personalizado

Con ActiveCampaign, puedes crear una campaña que use código HTML personalizado. Esta opción es mejor para quienes quieren más control sobre el diseño de su correo electrónico y se sienten cómodos usando HTML.

En este artículo, aprenderás cómo acceder al editor HTML y verás recomendaciones sobre las mejores prácticas de diseño.

Toma nota

• Nuestro equipo de Experiencia del cliente no puede ayudarte a solucionar problemas con código HTML personalizado.
• Las campañas de correo electrónico no admiten iframes.

Crear una campaña de HTML personalizado

1. Ir a Correo electrónico en el menú de la izquierda.
2. Haz clic en “Start from scratch instead.”
3. En la página Tipo de campaña:
   • Escribir un nombre para tu campaña.
   • Seleccionar el tipo de campaña
   • Hacer clic en el botón "Siguiente"
4. En la página de resumen de la campaña, proporciona los detalles de tu campaña. Ten en cuenta que puedes saltar este paso y empezar a crear tu diseño. Sin embargo, necesitas proporcionar los detalles de la campaña antes de enviar tu correo electrónico.
5. Haz clic en la flecha hacia abajo junto al botón "Crear con el editor de correo electrónico". Selecciona "Editor HTML".
6. Seleccionar una plantilla (si aplica) o haz clic en el botón "Comenzar desde cero".
7. Se abrirá el editor HTML. Agrega tu código HTML personalizado en el editor de la izquierda. A medida que agregas código, verás cómo se muestra en la pantalla de vista previa en el panel de la derecha.
8. Para insertar contenido personalizado, contenido condicional, una imagen, una sección de noticias RSS o contenido desde una URL, haz clic en la opción "Insertar" luego selecciona el elemento que quieres agregar. Luego, sigue las indicaciones para agregar ese elemento.
9. Para cambiar al Editor visual, haz clic en el ícono del editor visual.
   
   
    
10. Haz clic en el ícono de configuración (engranaje) para actualizar la línea de asunto, agregar o actualizar el texto de vista previa, actualizar tu información de "De" y "Responder a" y probar tu correo electrónico.
11. Hacer clic en el botón "Siguiente". Se te redirige de nuevo a la página Resumen de campaña.
12. Cuando todo se vea bien, puedes hacer clic en "Send now" para enviar la campaña, hacer clic en el botón "Schedule" para enviar en otra fecha y hora o hacer clic en "Save and Exit" para volver a la campaña más tarde.

Guía de diseño HTML

A continuación, verás una guía general para usar el editor HTML. Como recordatorio, nuestro equipo de Experiencia del cliente no puede ayudarte a solucionar problemas ni a crear ningún código para tu correo electrónico.

Diseño

• Ancho de diseño de 650px o menos
  La regla general para el tamaño del correo electrónico es mantenerlo en 650px o menos de ancho. Esto permite que el correo electrónico se muestre correctamente en la mayoría de los clientes de correo electrónico y configuraciones.
• Los diseños simples funcionan mejor
  En el diseño de correo electrónico, lo simple funciona mejor. Si intentas usar un diseño complicado, tendrás que hacer muchas pruebas y correcciones por problemas con los clientes de correo electrónico. Si quieres crear un diseño más avanzado, prepárate para usar muchas tablas y reservar una cantidad de tiempo razonable para hacer pruebas.
• Usar tablas HTML básicas 
  Necesitas usar tablas HTML estándar para crear el diseño general. Las técnicas de flotado y diseño con CSS no se mostrarán correctamente en todos los clientes de correo electrónico.
• Tener cuidado con el relleno de las celdas de las tablas
  Outlook aplicará el relleno de cualquier celda de una fila a todas las celdas de esa fila. Esto puede generar algunos cambios visuales que no quieres. Lo mejor es que intentes aplicar el mismo relleno a todas las celdas de una fila o que coloques un div interno o una tabla interna (con relleno) dentro de la celda a la que quieres aplicar relleno. (Más información)
• Evitar usar colspans="" en tus tablas
  Algunos clientes de correo electrónico no admiten completamente colspans y otros pueden tener problemas de visualización con las demás celdas.

CSS

• No usar hojas de estilo externas
  Solo funcionarán en unos pocos clientes de correo electrónico y debes incluir todo tu CSS usando CSS en línea dentro de tu HTML.
• No usar clases de CSS, usar siempre CSS en línea 
  Muchos clientes de correo electrónico no admiten clases de CSS. En lugar de declarar clases CSS, debes usar CSS en línea. Un ejemplo sería <div style="color:#cccccc;">contenido</div> en lugar de <div class="cssclassa">contenido</div> 
• No usar atajos de CSS
  CSS normalmente permite configurar propiedades en grupos. Como por ejemplo style=" font: 12px, Arial". En lugar de agrupar estos atributos, debes configurar cada parte por separado. Como por ejemplo style="font-size:12px; font-family:Arial" 
• Evitar usar las opciones float o position de CSS
  Algunos clientes de correo electrónico ignorarán tanto las opciones float como position de CSS. Intenta usar tablas en su lugar.

Imágenes y video

• Usar URLs absolutas como origen de las imágenes 
  En lugar de incluir una imagen como (<img src= "img.gif">) debes incluir la URL absoluta del archivo, como (<img src= "http://site.com/img.gif">) 
• Usar siempre etiquetas alt (<img src="http://site.com/img.gif" alt="Empresa ABC">) 
  La mayoría de los clientes de correo electrónico desactivan las imágenes de forma predeterminada. Si no usas etiquetas alt, tus suscriptores solo verán un recuadro en blanco. Con una etiqueta alt, tus suscriptores verán el texto que pongas en la etiqueta.
• No incrustar videos o Flash
  Incrustar videos directamente o contenido Flash en tu correo electrónico no es una buena idea. Muchos clientes de correo electrónico no admiten ese tipo de código y muchos programas de detección de correo no deseado y virus marcarán tu correo electrónico como no deseado o malicioso. En lugar de incrustar tu video o contenido Flash en tu correo electrónico, haz una captura de pantalla de cómo se ve el reproductor de video o Flash e incrusta esa imagen. Puedes hacer que el video o el contenido Flash se abra en su navegador cuando hagan clic en la imagen.
• Los GIF animados no tienen compatibilidad completa
  Piensa si realmente necesitas una animación en tu correo electrónico. Aunque la mayoría de los clientes de correo electrónico admiten GIF animados, Outlook 2007 no los admite. Los clientes de correo electrónico que no admiten GIF animados probablemente mostrarán el primer fotograma de la secuencia de animación.
• Tener cuidado con las imágenes divididas
  Si tienes una imagen grande dividida y colocada en tu HTML usando celdas de tabla o etiquetas img una junto a la otra, tendrás que hacer pruebas exhaustivas. Algunos clientes de correo electrónico pueden añadir espacio adicional entre tus imágenes y hacer que tu correo electrónico se vea mal.
• Evitar usar imágenes para ayudar con tu diseño
  Algunas personas usan imágenes de uno o dos píxeles para alinear elementos dentro de su diseño. Algunos clientes de correo electrónico o filtros pensarán que es una posible imagen de seguimiento de lectura o apertura y penalizarán el correo electrónico.
• Probar tu correo electrónico con las imágenes desactivadas
  Como la mayoría de los clientes de correo electrónico muestran los correos con las imágenes desactivadas de forma predeterminada, tienes que comprobar cómo se ve tu correo electrónico con las imágenes desactivadas.
• Revisar el tamaño de tus archivos
  Igual que en el diseño web tradicional, tienes que tener en cuenta el tamaño de los archivos de imagen de tu correo electrónico. Intenta mantenerlos bajos para asegurarte de que se descargarán rápido para tus suscriptores.

Fondo

• Las imágenes de fondo no tienen compatibilidad completa
  Si usas una imagen de fondo, recuerda que algunos clientes de correo electrónico no la mostrarán. Si aun así quieres usar una imagen de fondo, usa las opciones de fondo en HTML en lugar de usar CSS para declarar un fondo.
• Colores de fondo en todo el cuerpo 
  Muchos clientes de correo electrónico (como Gmail) no muestran un color de fondo que configuras para el cuerpo principal (etiqueta <body>). Si configuras un color de fondo en la etiqueta body, también deberías tener un div contenedor con un color de fondo que rodee tu contenido. Así, incluso si el color de fondo del body no tiene compatibilidad, tendrás algo similar.

Varios

• No poner nada por encima de la etiqueta de apertura <body>
  Casi todo lo que pongas por encima de la etiqueta body se eliminará y no se usará.
• No incluir javascript
  Es probable que la mayoría de los clientes de correo electrónico lo eliminen y que los filtros de correo no deseado lo detecten como código malicioso.
• Evitar Microsoft Office
  El HTML que genera casi siempre causará problemas. Además, cuando copies y pegues desde Office, pegarás su formato y probablemente tendrás problemas de diseño.