Utilizar el constructor de campañas HTML personalizado

Marketing_Lite_Plus_Professional_Enterprise

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.

  ¿Sabías que nuestro nuevo editor de correo electrónico te permite ir fácilmente hacia atrás y para el entre su HTML / CSS y nuestra funcionalidad de arrastrar y soltar? Aprenda a utilizar HTML con el editor de correo electrónico.

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.

    Editor Visual Icon.jpeg

  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. 
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 13 de 31

¿Tienes más preguntas? Envía una solicitud

Start free trial