Añade una imagen de fondo a una plantilla HTML personalizada
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.
Antes de empezar
A continuación, verás algunos algunos aspectos que debes tener en cuenta antes de empezar el 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 los buzones 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 Content Manager (Adminstrador de contenu), siempre que pesen menos de 10 MB.
Añade una imagen de fondo a tu 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 especificaciones.
Para añadir una imagen de fondo a una plantilla HTML personalizada, sigue estos pasos.
- Ve a la página Templates (Plantillas).
- Haz clic en Create Template (Crear plantilla).
- Haz clic en la pestaña Code Your Own (Programar tu propia plantilla), y selecciona Paste in code (Pegar código).
Imágenes de fondo [background-image]
La propiedad CSSbackground-imagese usa para insertar una imagen de fondo.Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedadbackground-imageal elemento<body>y especifica la localización de la imagen.body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
Pruebas y solución de problemas
Antes de hacer un envío a toda tu lista, examina bien y prueba tu plantilla en vista preliminar, y envía algunos correos de prueba a tu propio correo electrónico. Para ver cómo se visualizará tu imagen de fondo en determinados clientes de correo electrónico, utiliza la herramienta Inbox Preview.
Aqui 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 de fondo en tu código, ya que pueden aplicarse también a la imágen de fondo.
- Cuando se trabaja con el editor de plantillas, las etiquetas merge no se interpretan en la vista preliminar ni en los correos electrónicos de prueba. Si quieres ver cómo se interpretarán las etiquetas merge para los suscriptores, crea una campaña a partir de una plantilla y utiliza nuestras opciones de vista preliminar y pruebas.
Comentarios
Publicar un comentario