Usar el creador de campañas de HTML personalizado

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

En este artículo vas a aprender cómo acceder al editor HTML y recibir 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.
• Los iframes no son compatibles en campañas de correo electrónico.

Crear una campaña HTML personalizada

1. Ir a Campañas 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
   • Selecciona tu tipo de campaña
   • Hacer clic en el botón "Siguiente"
4. En la página Resumen de campaña, ingresa los detalles de tu campaña. Ten en cuenta que puedes omitir este paso y empezar a crear tu diseño. Sin embargo, tendrás que 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 "Creador HTML".
6. Selecciona una plantilla (si corresponde) o haz clic en el botón "Start from Scratch".
7. Se abrirá el editor HTML. Agrega tu 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 derecho.
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" y 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 icono del editor visual.
   
   
    
10. Haz clic en el ícono de Configuración (engranaje) para actualizar tu línea de asunto, agregar o actualizar el texto de preencabezado, actualizar tu información de "De" y "Responder a" y probar tu correo electrónico.
11. Haz clic en el botón "Siguiente". Volverás a la página de resumen de la 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 tienes algunas indicaciones generales para usar el creador de 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 650 px o menos
  La regla general para el tamaño del correo electrónico es mantenerlo con un ancho de 650 px o menos. 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 sencillos son mejores
  En el diseño de correo electrónico, lo sencillo es lo mejor. Si intentas crear un diseño complicado, tendrás que hacer muchas pruebas y corregir errores 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 buena cantidad de tiempo para hacer pruebas.
• Usar tablas HTML básicas 
  Necesitas usar tablas HTML estándar para crear el diseño general. Las técnicas de flotación y diseño en CSS no se mostrarán correctamente en todos los clientes de correo electrónico.
• Tener cuidado con el relleno de las celdas de tabla
  Outlook aplicará el relleno de cualquier celda de una fila a todas las celdas de esa fila. Esto puede generar algunos cambios visuales que tú no quieres. Lo mejor es intentar usar el mismo relleno en todas las celdas de una fila o colocar un div interno o una tabla (que tenga relleno) dentro de la celda en la que quieras usar relleno. (Más información)
• Evitar usar colspans="" en tus tablas
  Algunos clientes de correo electrónico no admiten completamente los colspans y otros pueden mostrar problemas en las demás celdas.

CSS

• No usar hojas de estilo externas
  Solo funcionarán en algunos clientes de correo electrónico y debes incluir todo tu CSS como CSS en línea dentro de tu HTML.
• No usar clases CSS, usar siempre CSS en línea 
  Muchos clientes de correo electrónico no admiten clases CSS. En lugar de declarar clases de CSS, debes usar CSS en línea. Un ejemplo sería <div style="color:#cccccc;">content</div> en lugar de <div class="cssclassa">content</div> 
• No uses atajos de CSS
  Normalmente, CSS te 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 no tienen en cuenta las opciones de CSS float y position. Intenta usar tablas en su lugar.

Imágenes y video

• Usar URL 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="Company ABC">) 
  La mayoría de los clientes de correo electrónico desactivan las imágenes de forma predeterminada. Si no tienes 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 ni contenido Flash
  No es buena idea incrustar videos o contenido Flash directamente en tu correo electrónico. Muchos clientes de correo electrónico no admitirán ese tipo de código y muchos programas de detección de spam y virus marcarán tu correo electrónico como spam o malicioso. En lugar de incrustar tu video o contenido flash en tu correo electrónico, toma 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 abran en su navegador cuando hagan clic en ellos. 
• Los GIF animados no son totalmente compatibles
  Pregúntate si de verdad 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 lo hace. Es probable que los clientes de correo electrónico que no admiten GIFs animados muestren el primer fotograma de tu secuencia de animación.
• Tener cuidado con las imágenes divididas
  Si tienes una imagen grande dividida y colocada en tu HTML con celdas de tabla o etiquetas img una al lado de la otra, tendrás que hacer pruebas exhaustivas. Es posible que algunos clientes de correo electrónico agreguen espacio adicional entre tus imágenes y hagan que tu correo electrónico se vea mal.
• Evitar usar imágenes para ayudarte con el diseño
  Algunas personas usan imágenes de uno o dos píxeles para alinear elementos dentro de su diseño. Algunos clientes o filtros de correo electrónico 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 electrónicos con las imágenes desactivadas de forma predeterminada, debes comprobar cómo se ve tu correo electrónico con las imágenes desactivadas.
• Prestar atención al tamaño de los archivos
  Igual que en el diseño web tradicional, debes tener en cuenta el tamaño de los archivos de imagen para tu correo electrónico. Intenta mantenerlos pequeños para que se descarguen rápido para tus suscriptores.

Contexto

• Las imágenes de fondo no son totalmente compatibles
  Si usas una imagen de fondo, ten en cuenta que algunos clientes de correo electrónico no la mostrarán. Si aún quieres usar una imagen de fondo, usa las opciones de fondo de HTML en lugar de usar CSS para declarar un fondo.
• Colores de fondo para todo el cuerpo
  Muchos clientes de correo electrónico (como Gmail) no muestran el color de fondo que configuras para el cuerpo principal (etiqueta <body>). Si configuras un color de fondo en la etiqueta body, también debes tener un div envolvente con un color de fondo que rodee tu contenido. De esta manera, incluso si el color de fondo del cuerpo no se admite, tendrás algo similar.

Varios

• No pongas nada antes de la etiqueta de apertura <body>
  Cualquier cosa que pongas antes de la etiqueta body se eliminará y no se usará.
• No incluyas javascript
  La mayoría de los clientes de correo electrónico probablemente lo eliminen y los filtros de spam pueden detectarlo como código malicioso.
• Evitar Microsoft Office
  El HTML que se genera casi siempre crea problemas. Además, cuando copies y pegues desde Office, pegarás su formato y es probable que tengas problemas de diseño.