Ir al contenido principal

Consigue a un experto que te haga el trabajo

Desde formación hasta servicio completo de marketing, nuestra comunidad de Partners puede ayudarte a conseguir lo que quieras.

Contrata a un profesional

Añade una imagen de fondo a una plantilla HTML personalizada

Copiar la URL del artículo
Se copió

Nota

La información de este artículo se aplica solo al creador clásico. Para aprender a utilizar el nuevo creador, consulta Diseñar un correo electrónico con el nuevo creador.

Para mejorar aún más el diseño de tus campañas de marketing, puedes añadir una imagen de fondo a una plantilla de Code your own template (Programar tu propia plantilla), en Template Builder (Constructor de plantillas). Las imágenes de fondo sólo se pueden añadir a estas plantillas HTML con codificación personalizada, y no son compatibles con el resto de nuestros tipos de plantillas.

Las plantillas HTML personalizadas son una característica avanzada y están recomendadas para los usuarios familiarizados con la edición de código personalizada. Ponte en contacto con tu programador o contrata a un experto de Mailchimp si necesitas ayuda.

En este artículo, aprenderás a añadir una imagen de fondo a tu propia plantilla HTML personalizada.

Antes de empezar

A continuación, se detallan algunos puntos que debes conocer antes de empezar este proceso.

  • Las imágenes de fondo pueden no visualizarse correctamente en todos los clientes de correo electrónico: puedes consultar qué clientes de correo electrónico son compatibles con imágenes de fondo en nuestro artículo Compatibilidad con CSS de los clientes de correo electrónico.
  • Las imágenes grandes pueden hacer que las campañas no se visualicen correctamente en las bandeja de entrada de tus destinatarios. Para obtener los mejores resultados, ajusta la resolución a un máximo de  920 x 1080 px y comprime la imagen.
  • Aloja tus imágenes en un servidor público o utiliza un servicio gratuito como Imgur o Flickr, y usa una ruta de archivo absoluta que apunte directamente a la ubicación del archivo en el código. Ten en cuenta que si alojas tus propias imágenes en un servidor privado, los destinatarios sin acceso al servidor no podrán verlas.
  • Mailchimp también puede alojar tus imágenes en el Gestor de contenido si tienen menos de 10 MB.
  • También puedes añadir una imagen de fondo a una campaña estándar. Para obtener más información, echa un vistazo a nuestro artículo Cómo añadir una imagen de fondo a una página de destino o correo electrónico.

Añadir una imagen de fondo a una plantilla HTML personalizada

Este proceso utiliza CSS, HTML y VML para mostrar una imagen y un color de fondo. Pega nuestro código de ejemplo en tu plantilla y cambia la imagen del marcador de posición y el color de fondo según tus propias características.

Para añadir una imagen de fondo a una plantilla HTML personalizada, sigue estos pasos.

  1. Haz clic en Content (Contenido)y, a continuación, en Email templates (Plantillas de correo electrónico).
  2. Haz clic en Create Template (Crear plantilla).
  3. Haz clic en la pestaña Code your own (Programar tu propia plantilla) y selecciona Paste in code (Pegar código).
    Cursor en botón de pegar código
  4. En el editor de código, inserta el siguiente código justo después de la etiqueta <body> de apertura para añadir la imagen de fondo del marcador de posición y el color.
    <div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
 <v:fill type="frame" src="http://www.yoursite.com/yourimages/photo.jpg"color="#7bceeb" />
 <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
     <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td valign="top" align="left" background="http://www.yoursite.com/yourimages/photo.jpg" style="background-repeat:no-repeat; background-size:cover;">

    Este código muestra las URL y los colores de la imagen del marcador de posición. En el siguiente paso podrás reemplazarlos con la información de tu imagen y con tu color.

  5. Sustituye las dos URL de imagen de fondo del marcador de posición y los valores de color de fondo del marcador de posición de este ejemplo por el código hexadecimal del color de tu elección y la ruta completa del archivo de la URL de tu imagen.

  6. Inserta el siguiente código justo antes de la etiqueta de cierre <body>. 

    </td>
</tr>
 </table>
 <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</div>

  7. Sustituye o edita el resto del código de la campaña con tu propio código HTML personalizado.

  8. Cuando hayas terminado de editar el código, haz clic en Save (Guardar).
  9. Haz clic en Save and Exit (Guardar y salir).
  10. En la ventana modal emergente Save Template (Guardar plantilla), escribe un nombre para la plantilla.
  11. Haz clic en Save (Guardar).

Puedes acceder a la nueva plantilla en el creador de campañas o en la página Plantillas.

Pruebas y solución de problemas

Antes de enviar tu campaña por correo electrónico, previsualiza y prueba tu plantilla minuciosamente, y envía algunos correos electrónicos de prueba a ti mismo. Para ver cómo se visualizará tu imagen de fondo en determinados programas de correo electrónico, utiliza la herramienta Inbox Preview.

Vista previa y prueba de tu campaña por correo electrónico
Realizar pruebas con Inbox Preview

Aquí tienes algunos consejos más para trabajar con imágenes de fondo.

  • La imagen de fondo no se mostrará si las imágenes están desactivadas en la bandeja de entrada de tu destinatario. Por esta razón, asegúrate de elegir un color de fondo sobre el que tu texto se vea bien si la imagen de fondo no se carga.

  • Al modificar el CSS, asegúrate de que no haya otras propiedades en segundo plano en tu código, ya que pueden aplicarse también a la imagen de fondo.

  • Cuando se trabaja con el editor de plantillas, las etiquetas merge no se interpretan en la vista previa ni en los correos electrónicos de prueba. Si quieres ver cómo se renderizarán las etiquetas merge para los contactos, crea una campaña a partir de una plantilla y utiliza nuestras opciones de vista previa y probar.

Soporte técnico

¿Tienes alguna pregunta?

Los usuarios de pago pueden acceder al soporte por correo electrónico y chat.

¿Te fue útil este artículo?

Relacionados

Dónde Editar un Código de Plantilla

Si has creado una plantilla con el lenguaje de plantillas Mailchimp, o has importado un archivo HTLM que has codificado, puedes editar el código de la plantilla

CSS en emails HTML

Este artículo ofrece sugerencias básicas de usar CSS en emails HTML.