Corregir imágenes de ancho máximo en la campaña de RSS a correo electrónico de MailChimp

Sep 28, 2020 Uncategorized

Soy una persona muy TOC y siempre quiero que todo se vea perfecto, hasta el último píxel. El otro día noté que una de mis campañas de RSS-To-Email de MailChimp no se mostraba correctamente cuando se veía en un dispositivo móvil. El problema era que la imagen se desbordaba de la pantalla. Después de investigar un poco, descubrí algunas cosas. Primero, agregué algo de CSS para solucionar el problema. Pensé que había resuelto el problema, pero luego de probar en Outlook me di cuenta de que no admite la propiedad CSS de ancho máximo. Luego intenté agregar HTML en línea en mi feed. Lo que no me di cuenta es que MailChimp todavía extrae la imagen original de la fuente RSS.

Siga los pasos a continuación para resolver fácil y rápidamente el problema del ancho máximo en MailChimp y asegúrese de que su campaña se vea bien en todos los dispositivos.

Paso 1

Supongo que ya ha agregado sus imágenes a su fuente RSS de WordPress. Recomiendo configurarlos en grande por lo que, como mínimo, llenarán el ancho de la plantilla de campaña de Mailchimp, que es de 560 píxeles. Las miniaturas no se verán tan bien. Además, si está utilizando servicios como Feedly, las imágenes grandes se ven mejor.

Paso 2

A continuación, vamos a generar una nueva fuente RSS para su campaña de MailChimp que tendrá imágenes con un tamaño de hasta 560 px exactamente (mis imágenes WP eran demasiado grandes en más de 700 px y no pude cambiarlas en la configuración de medios porque ensuciaría hasta mis imágenes destacadas). Así que vaya a ChimpFeedr, ingrese la URL de su fuente RSS de WordPress (dominio.com/feed) y configure la escala de imágenes a 560px. Luego haga clic en «Chomp Chomp». Esto generará una nueva URL de fuente RSS para usted que se verá así. http://mix.chimpfeedr.com/bcd6b-bj

También tenga en cuenta: los feeds de ChimpFeedr se actualizan automáticamente cada 8 horas.

Paso 3

Toma la nueva URL del Feed que obtuviste en el Paso 2 e ingrésala en el paso RSS Feed en tu campaña de MailChimp. (Nota: ahora tienen una nueva función llamada «Cambiar el tamaño de las imágenes de la fuente RSS para que se ajusten a la plantilla». Sin embargo, esto aún no soluciona el problema para los clientes de MS Outlook. Por lo tanto, no es necesario verificarlo, ya que lo estamos haciendo en chimpfeedr).

sincronización de la alimentación de mailchimp rss

Paso 4

Ahora ve a la configuración del diseño en tu campaña de MailChimp. Supongo que está utilizando la plantilla «RSS básico». Ahora tenemos imágenes que se escalan correctamente para el escritorio y el cliente de correo de Outlook. Pero tenemos que arreglarlos para que funcionen con dispositivos móviles y respondan a Gmail, Outlook.com, etc. Aquí están las etiquetas CSS y RSS que estoy usando. Puede ingresar esto en un bloque de texto en MailChimp yendo a la vista «fuente».

código de mailchimp

<style type="text/css">#feed-images img {
            height:auto !important;
            max-width:560px !important;
            width: 100% !important;}
</style>
<div id="feed-images">*|RSSITEMS:|*
<h2 class="mc-toc-title"><a href="https://woorkup.com/fix-max-width-images-in-mailchimp-rss-to-email-campaign/*"RSSITEM:URL"https://woorkup.com/fix-max-width-images-in-mailchimp-rss-to-email-campaign/*" target="_blank">*|RSSITEM:TITLE|*</a></h2>
<br />
*|RSSITEM:CONTENT_FULL|* <a href="https://woorkup.com/fix-max-width-images-in-mailchimp-rss-to-email-campaign/*"RSSITEM:URL"https://woorkup.com/fix-max-width-images-in-mailchimp-rss-to-email-campaign/*" target="_blank">Read in browser &raquo;</a><br />
<br />
*|END:RSSITEMS|*</div>

Esto dará como resultado que su campaña se vea así. Aparecerá el título de su publicación de blog más reciente, la imagen reducida a 560px para llenar el ancho de la plantilla, y luego un extracto con el enlace leer más debajo. Si tiene más de una publicación de blog dentro del último período de envío, simplemente las apilará con la más reciente en la parte superior.

plantilla de correo electrónico mailchimp rss

Y así es como se ve mi correo electrónico en un dispositivo móvil, según la vista previa de MailChimp. El código CSS que le di arriba soluciona el problema de desbordamiento de la imagen.

mailchimp receptivo

Aquí hay un captura de pantalla directamente desde mi cliente de correo de Outlook en mi escritorio.

perspectiva de mailchimp

Y aqui hay un captura de pantalla directamente desde mi Windows Phone.

mailchimp wp8

Así que ahora tiene una hermosa campaña de correo electrónico a correo electrónico de MailChimp que se adapta perfectamente a todos los dispositivos.

Otros consejos de MailChimp

También recomiendo cambiar la línea de asunto para extraer del título de su publicación de blog más reciente. De forma predeterminada, la línea de asunto del correo electrónico de la campaña RSS simplemente dirá «Últimas actualizaciones de …». Esto no es muy atractivo y no captará la atención de sus lectores.

Vea un ejemplo de algunas líneas de asunto de correo electrónico de Matthew Woodward. Observe que está usando el título de su publicación de blog.

correos electrónicos de matthew woodward

Para hacer esto, vaya a la pantalla de configuración en MailChimp y, debajo del cuadro «Asunto del correo electrónico», actualícelo con esta etiqueta RSS.

* | RSSITEM: TITLE | *

línea de asunto del correo electrónico de mailchimp

Otra cosa que también recomiendo hacer es hacer una copia de seguridad de sus listas de MailChimp.

Con suerte, estas correcciones y consejos anteriores fueron útiles, ¡como siempre, no dude en dejar sus comentarios a continuación!

Luis Miguel

Por Luis Miguel

Content marketing en Iday.es. Me encargo de la creación de contenidos de nuestro propio blog así como el de clientes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *