Utilizar el constructor de campañas HTML personalizado

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

En este artículo, aprenderás a acceder al constructor HTML y recibirás orientación sobre las mejores prácticas de diseño.

Toma nota

Nuestro equipo de experiencia del cliente no puede ayudarle a solucionar problemas de código HTML personalizado

Crear una campaña HTML personalizada

1. Haga clic en Campañas "Crear una campaña".
2. En la página Tipo de campaña:
   • Proporcione un nombre para su campaña
   • Seleccione su tipo de campaña
   • Haga clic en el botón "Siguiente".
3. En la página Resumen de campaña, facilite los datos de su campaña. Tenga en cuenta que puede saltarse este paso y empezar a crear su diseño. No obstante, deberá facilitar los datos de la campaña antes de enviar el correo electrónico.
4. Haga clic en la flecha hacia abajo situada junto al botón "Crear con editor de correo electrónico". Seleccione "Constructor HTML"
5. Seleccione una plantilla (si procede) o haga clic en el botón "Empezar de cero".
6. Se abrirá el constructor HTML. Añade tu HTML personalizado al constructor de la izquierda. A medida que añadas código, lo verás renderizado en la pantalla de vista previa del panel derecho.
7. Para insertar contenido personalizado, contenido condicional, una imagen, un fuente RSS o contenido de una URL, haga clic en la opción "Insertar" y, a continuación, seleccione el elemento que desee añadir. A continuación, siga las indicaciones para añadir ese elemento.
8. Para cambiar al editor visual, haga clic en el icono del editor visual.
   
   
   
   
9. Haz clic en el icono de configuración (engranaje) para actualizar la línea de línea de asunto, añadir o actualizar el texto del encabezado, actualizar la información de "De" y "Responder a" y probar el correo electrónico.
10. Haga clic en el botón "Siguiente". Serás redirigido a la página "Resumen de la campaña".
11. Una vez que todo parezca correcto, puede hacer clic en "Enviar ahora" para enviar la campaña, hacer clic en el botón "Programar" para enviarla en una fecha y hora posteriores, o hacer clic en "Guardar y salir" para volver a la campaña más tarde.

Guía de diseño HTML

A continuación encontrará una guía general para utilizar el constructor HTML. Como recordatorio, nuestro equipo de Experiencia del cliente no puede ayudarle a solucionar problemas ni a crear ningún código para su correo electrónico.

Diseño

• 650px o menos anchode diseño
  La regla general para el tamaño del correo electrónico es mantenerlo 650px o menos de ancho. Esto permite que el correo electrónico se muestre correctamente en la mayoría de los clientes y configuraciones de correo electrónico.
• Los diseños sencillos son los mejores
  En el diseño de correos electrónicos, lo sencillo es lo mejor. Si intenta hacer un diseño complicado, encontrará muchas pruebas y depuración con problemas del cliente de correo electrónico. Si desea completar un diseño más avanzado, prepárese para usar muchas tablas y reserve una cantidad razonable de tiempo para las pruebas.
• Utilice tablas HTML básicas 
  Deberá utilizar tablas HTML estándar para crear el diseño general. Las técnicas flotantes y de diseño CSS no se representarán correctamente en todos los clientes de correo electrónico.
• Tenga cuidado con el relleno de las celdas de la tabla
  Outlook aplicará el relleno de cualquier celda de una fila a todas las celdas de la fila. Esto podría dar lugar a algunos cambios visuales que no desea. Lo mejor es que intentes aplicar el mismo relleno a todas las celdas de una fila o que coloques un div o tabla interior (que tenga relleno) dentro de la celda que quieras que tenga relleno. (Más información)
• Evite usar colspans="" en sus tablas
  Algunos clientes de correo electrónico no son totalmente compatibles con ellos y otros tendrán problemas de visualización para las otras celdas si tiene un colspan.

CSS

• No use hojas de estilo externas
  Solo funcionarán en unos pocos clientes de correo electrónico, y debe incluir todo su CSS usando CSS en línea dentro de su HTML.  
• No use clases CSS: siempre use CSS en línea 
  Muchos clientes de correo electrónico no admiten clases CSS. En lugar de declarar clases CSS, debe usar CSS en línea. Un ejemplo sería
  content
  en lugar de
  content
   
• No uses atajos CSS
  CSS te permite establecer propiedades en grupos normalmente. Como style="font: 12px, Arial" En lugar de agrupar dichos atributos, debe establecer cada parte individualmente. Como style="font-size:12px; font-family:Arial"
• Evite usar opciones CSS float o position
  Algunos clientes de correo electrónico ignorarán las opcionesCSS float y position. Intente usar tablas en su lugar.

Imágenes y vídeo

• Usar direcciones URL de origen de imagen absolutas 
  En lugar de incluir una imagen como (), debe incluir la dirección URL absoluta del archivo, como ()
• Utilice siempre etiquetas () 
  La mayoría de los clientes de correo electrónico deshabilitan las imágenes de forma predeterminada. A menos que tengas etiquetas alt, tus suscriptores solo verán un cuadro 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 flashear en su correo electrónico no es una buena idea. Muchos clientes de correo electrónico no admiten este tipo de código, y muchos programas de detección de spam y virus marcarán su correo electrónico como spam/malicioso. En lugar de incrustar su video o flash en su correo electrónico, tome una captura de pantalla de cómo se ve el video del reproductor flash e insértelo. Puedes hacer que el vídeo o el flash se abra en su navegador cuando hagan clic en él. 
• Los GIF animados no son totalmente compatibles
  Pregúntese si necesita una animación en su correo electrónico. Aunque la mayoría de los clientes de correo electrónico admiten GIF animados, Outlook 2007 no lo hace. Los clientes de correo electrónico que no admiten GIF animados probablemente mostrarán el primer fotograma de su secuencia de animación. 
• Ten cuidado con las imágenes empalmadas
  Si tienes una imagen más grande empalmada y colocada en tu HTML utilizando celdas de tabla o etiquetas img una al lado de la otra, tendrás que hacer pruebas a fondo. Algunos clientes de correo electrónico pueden agregar espacio adicional entre sus imágenes y hacer que su correo electrónico se vea mal.
• Evite usar imágenes para ayudar con su diseño
  Algunas personas usan imágenes de 1 o 2 píxeles para ayudar a alinear los 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.
• Pruebe su correo electrónico con imágenes deshabilitadas
  Dado que la mayoría de los clientes de correo electrónico muestran correos electrónicos con imágenes deshabilitadas de forma predeterminada, debe verificar cómo se ve su correo electrónico con las imágenes deshabilitadas.
• Observe los tamaños de sus archivos
  Al igual que con el diseño web tradicional, desea conocer los tamaños de archivo de imagen para su correo electrónico. Intente mantenerlos bajos para asegurarse de que se descarguen rápidamente para sus suscriptores.

Fondo

• Las imágenes de fondo no son totalmente compatibles
  Si utiliza una imagen de fondo, recuerde que algunos clientes de correo electrónico no las mostrarán. Si aún desea utilizar una imagen de fondo, utilice las opciones de fondo HTML en lugar de utilizar CSS para declarar un fondo.
• Colores de fondo para todo el cuerpo
  Muchos clientes de correo electrónico (como Gmail) no muestran un color de fondo que hayas configurado para el cuerpo principal (etiqueta). Si está estableciendo un color de fondo en la etiqueta del cuerpo, también debe tener un div de ajuste con un color de fondo que rodee su contenido. De esta manera, incluso si el color de fondo del cuerpo no es compatible, tendrá algo similar.

Varios

• No pongas nada encima de la abertura
  Cualquier cosa que coloques encima de la etiqueta del cuerpo probablemente será despojada y sin usar.
• No incluir javascript
  Es probable que esté eliminado en la mayoría de los clientes de correo electrónico, y los filtros de spam pueden detectarlo como código malicioso.
• Evite Microsoft Office
  El HTML generado casi garantizará problemas. Además, cuando copies y pegues desde Office, estarás pegando su formato y es probable que tengas problemas de diseño.