Cómo crear plantillas personalizadas de Mailchimp que realmente funcionen a la perfección

Publicado: 2021-06-22

Codificar cada correo electrónico desde cero lleva demasiado tiempo, por lo que tener una plantilla de correo electrónico probada y reutilizable puede hacer maravillas por la eficiencia de su flujo de trabajo. Pero crear tu propia plantilla también puede ser una aventura en sí misma, incluso para Mailchimp, el segundo proveedor de servicios de correo electrónico (ESP) más popular según nuestro informe Estado de los proveedores de servicios de correo electrónico.

Es posible que tengas una forma preferida de desarrollar correos electrónicos, pero cuando se trata de plantillas personalizadas para Mailchimp, es importante seguir algunas pautas muy específicas para asegurarte de no perder horas haciendo que tu plantilla funcione. ¡Y digo esto habiendo perdido muchas horas yo mismo!

Mientras te guío a través de la creación de una plantilla personalizada de Mailchimp, ten en cuenta que la forma en que estructuras el código, cómo creas botones e incluso el tamaño de tus imágenes deben abordarse con un punto de vista técnico de Mailchimp.

Es por eso que colaboramos con Mailchimp y otros expertos en esta publicación de blog para asegurarnos de que tus plantillas de Mailchimp realmente funcionen a la perfección.

La diferencia entre las plantillas prediseñadas y las plantillas personalizadas de Mailchimp

Mailchimp tiene una biblioteca sustancial de plantillas que puedes usar para crear correos electrónicos. Cada uno de ellos es editable dentro de un editor de arrastrar y soltar y múltiples módulos de correo electrónico para elegir para diseñar su contenido.

Entonces, ¿por qué crear una plantilla personalizada?

Las plantillas de Mailchimp son altamente editables para que cualquier marca pueda usarlas con los colores y el estilo de su propia marca. Esto puede dificultar la supervisión de su uso y la coherencia de la identidad de una marca de un correo electrónico a otro. La creación de una plantilla personalizada garantiza que muchos de los estilos que crea en la plantilla no se modifiquen.

Además, el entorno de edición de las plantillas personalizadas es diferente. No hay un editor de arrastrar y soltar. En su lugar, cree módulos y elementos que se puedan duplicar, cambiar o eliminar según el lenguaje de plantilla que implemente. Esta es otra forma de protegerse contra diseños y ediciones no deseados.

Cómo codificar una plantilla personalizada de Mailchimp

¿Listo para crear tu propia plantilla de correo electrónico de Mailchimp? Siga leyendo para conocer los consejos y trucos que necesita para hacerlo bien.

Piense en sus objetivos y en los usuarios finales

Antes de comenzar, es importante pensar primero en el objetivo de la plantilla y en las personas que la utilizarán. Por ejemplo, es posible que necesite una plantilla con muchos detalles y flexibilidad. O puede que sea necesario que sea simple y fácil de adoptar para los miembros menos técnicos de su equipo.

Joolz Joseph, consultor de marketing por correo electrónico y motivador de marketing, dice:

Joolz Joseph

“Pregúntese '¿Qué estamos tratando de lograr con esto?'

¿Es una plantilla general que se puede usar para varios tipos de correo electrónico, por lo que necesita mucha flexibilidad con diferentes bloques? ¿O algo más rígido, como una plantilla promocional, una serie de incorporación o un boletín informativo?

Existe una gran ventaja en una plantilla con muchos bloques que se pueden adaptar, pero a veces 2 o 3 plantillas más cortas son más fáciles de administrar para las personas que pueden verse abrumadas por muchas opciones.

Esta breve consideración al principio le permite crear su plantilla con el objetivo y el usuario final en mente.

Por ejemplo, una plantilla promocional debe centrarse en el objetivo principal y el llamado a la acción (CTA), mientras que un boletín informativo puede tener varios CTA que son todos diferentes.

Todo esto debe reflejarse en el diseño de su plantilla. ¡También hará que sea más fácil para alguien que ejecuta una promoción incluir contenido relevante si sus opciones son limitadas!

Hacer una plantilla única que capture todas las posibilidades puede resultar en un correo electrónico que está en la marca pero no tan efectivo como podría ser, por lo que vale la pena dar ese paso atrás primero y mirar lo que desea lograr y qué tipo de plantilla (o plantillas) te ayudarán mejor a hacer esto ".

¡Gracias, Joolz, por el dato! Una vez que conozca los objetivos de su plantilla, puede empezar a construir.

Incruste su estilo CSS

Una de las primeras cosas que vale la pena mencionar es que Mailchimp integra automáticamente sus estilos CSS incrustados cuando guarda su plantilla dentro de la plataforma. Por lo tanto, a medida que inicie el trabajo de desarrollo, puede que le resulte más fácil integrar todos sus estilos y limitar el exceso de código.

Crea filas de módulos

Mientras estructura su código, piense en los bloques que le gustaría que fueran editables, especialmente aquellos que quiere poder reordenar. Estos bloques deben ubicarse dentro de las filas, por ejemplo:

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

Una vez que cierre la tabla principal, no podrá reordenar sus filas más allá de este punto.

Considere las limitaciones de los botones

Hay muchas formas de codificar un botón. Sin embargo, solo el botón acolchado funcionará en tu plantilla personalizada de Mailchimp. Esto se debe a que muchos de los estilos aplicados a las etiquetas de anclaje de los botones editables se eliminan automáticamente. El formato del código VML y los intervalos que coloque dentro de su etiqueta de anclaje también se pueden ajustar.

El método del botón acolchado significa que solo se podrá hacer clic en el texto de su botón, ya que debe aplicar su relleno y otro estilo de botón a una celda de la tabla principal. La extensa documentación de Mailchimp proporciona más detalles sobre el código de los botones (y otras limitaciones del correo electrónico HTML si tiene curiosidad).

Utilice imágenes de tamaño exacto para marcadores de posición editables

Al igual que los botones, las imágenes arrojan un poco de código cuando se hacen editables. Esta vez, son los atributos HTML los que definen el ancho y el alto que se eliminan. Outlook se basa en estos, y el entorno de edición de Mailchimp también representará el tamaño real de la imagen hasta que vuelva a poner estos atributos en el editor.

Esto hace que sea un poco complicado usar imágenes de retina, también conocidas como imágenes del doble de su tamaño, para reducirlas en el correo electrónico.

Recomiendo usar imágenes 1x para cualquier marcador de posición que codifique en su plantilla. Luego, cuando la plantilla se use para una campaña, cambie su marcador de posición por una imagen 2x (imagen retina), definiendo el ancho y alto en la pestaña de configuración del editor de imágenes.

Aplicar el lenguaje de plantilla de Mailchimp

Para definir áreas editables dentro de su plantilla, debe implementar el lenguaje de plantilla de Mailchimp. Existe una amplia documentación disponible que describe las cosas que debe incluir, según el tipo de plantilla que cree.

Para plantillas altamente personalizables que pueden ser utilizadas por varias marcas, puede hacer que los estilos CSS sean editables. Para hacer esto, sigue la guía de Mailchimp sobre estilos editables.

Para los propósitos de este tutorial, veremos cómo crear una plantilla que limite la editabilidad solo al contenido. Y para hacer esto, necesitamos agregar el siguiente lenguaje a los elementos HTML dentro de la plantilla:

mc: edit se utiliza para proporcionar una acción de edición de contenido para un elemento en particular dentro de una plantilla. Asegúrese de usar un nombre único para cada instancia de esto dentro de su plantilla.

mc: hideable se usa para proporcionar una acción de ocultar / mostrar para un elemento en particular dentro de una plantilla.

mc: label es una etiqueta opcional que se utiliza para nombrar una sección editable dentro de la aplicación.

mc: repetible se usa para proporcionar una acción de duplicación para un elemento particular dentro de una plantilla.

mc: variant se utiliza para proporcionar una forma de cambiar entre bloques discretos de HTML.

Para obtener información más detallada sobre el lenguaje de las plantillas de Mailchimp, este es mi documento de referencia.

Incluir etiquetas de combinación de Mailchimp

Hay muchas etiquetas de combinación que puede aprovechar dentro de las plantillas y campañas. Las etiquetas que recomiendo aplicar son:

* | MC_PREVIEW_TEXT | *
Agregue esta etiqueta de combinación de texto de vista previa a su compilación para asegurarse de que durante la configuración de la campaña, el contenido agregado al campo de texto de vista previa se inyecte en el correo electrónico. El truco de texto de vista previa que generalmente agregamos a los correos electrónicos de Litmus para crear espacios en blanco después de que nuestro texto de vista previa no funciona dentro de Mailchimp. No temáis. Mailchimp ha documentado la forma ideal de hacer esto para las plantillas personalizadas.

* | UNSUB | *
En el encabezado y / o pie de página de su plantilla, agregue esta etiqueta combinada a su enlace de cancelación de suscripción para asegurarse de que las personas puedan salir de su lista si así lo desean. Además, es un requisito legal, por lo que definitivamente no querrás olvidarlo.

* | UPDATE_PROFILE | *
Brinde a los suscriptores la oportunidad de actualizar su información o administrar sus preferencias.

* | ARCHIVO | *
Agregue esta etiqueta combinada a un enlace 'ver en línea' para ofrecer a las personas la oportunidad de ver su correo electrónico en su navegador web.

Cómo agregar tu plantilla a Mailchimp

Ahora que tiene su plantilla codificada, está listo para ponerla a trabajar.

Dirígete a "Campañas> Plantillas de correo electrónico" y haz clic en el botón "Crear plantilla" para importar tu plantilla.

La forma más fácil de llevar tu plantilla a Mailchimp es subir un zip que contenga tu HTML e imágenes, ya que Mailchimp administrará las rutas de las imágenes por ti.

Mailchimp: selecciona un punto de partida para tu plantilla

Una vez que haya nombrado su plantilla y haya navegado a su archivo zip, su plantilla se abrirá en el editor de plantillas. Aquí, puede realizar ajustes, acceder al estudio de contenido donde se almacenan las imágenes y otros activos y probar la representación de su plantilla.

Cuando haya terminado en este editor, puede guardar y cerrar, y su plantilla estará lista para usar.

Asegúrate de que tu plantilla funcione en Mailchimp

Hay muchos errores HTML comunes, por lo que es una buena idea ver cómo es la experiencia de edición en Mailchimp antes de enviarla a su equipo, clientes u otras personas para que la utilicen. Para hacer esto, diríjase a 'Crear' en el menú principal, luego seleccione 'correo electrónico' y quédese con una 'campaña normal'.

Puede agregar algunos detalles de la campaña, como una línea de asunto y un texto de vista previa. Esto le dará la oportunidad de comprobar que tiene su etiqueta de combinación y el código de texto de vista previa implementados correctamente.

Al hacer clic en 'Diseñar correo electrónico', podrá seleccionar la plantilla que desea utilizar. Busque su plantilla personalizada en la pestaña "Plantillas guardadas".

Selecciona una plantilla en Mailchimp

Una vez que hayas seleccionado tu plantilla, serás llevado al entorno de edición de Mailchimp donde podrás poner a prueba todas tus secciones editables.

Para editar un elemento editable, simplemente haga clic en él y aparecerá un panel de edición en el lado derecho.

Editar un elemento en tu plantilla de Mailchimp

Algo a tener en cuenta : a veces, reorganizar mis bloques de contenido no funciona, por lo que si no puede ver el ícono con una flecha hacia arriba y hacia abajo cuando hace clic en un bloque, intente duplicar el bloque que le gustaría reordenar. Puede eliminar el bloque adicional no deseado una vez que haya arrastrado el bloque que desea mover a su nueva ubicación.

Reorganizar bloques en tu plantilla de Mailchimp

No olvide probar la representación del correo electrónico

Como siempre, es muy importante ver cómo los diferentes clientes de correo electrónico están procesando su plantilla, especialmente después de que se ha utilizado para crear una campaña de correo electrónico.

Es a través de estas pruebas que identifiqué problemas con mis plantillas y encontré algunas de las peculiaridades de eliminación de código de Mailchimp. Puede realizar pruebas fácilmente en los editores de campañas y plantillas yendo a 'Vista previa' y 'Enviar un correo electrónico de prueba' a su bandeja de entrada o su dirección de prueba de Litmus para realizar pruebas exhaustivas y automatizadas previas al envío.

Litmus y Mailchimp también se integran de varias maneras para ayudarlo a probar sus correos electrónicos de la manera más completa y eficiente posible. Dirígete a 'Ingresar al modo de vista previa' y selecciona la pestaña 'Bandeja de entrada' para ejecutar las pruebas de correo electrónico impulsadas por Litmus dentro de las vistas previas de la bandeja de entrada en Mailchimp. Con un plan Litmus Plus o Enterprise, obtienes acceso a pruebas adicionales e integraciones que ahorran tiempo, incluida la capacidad de probar elementos cruciales previos al envío a medida que construyes con Litmus Extension en Chrome y sincronizar correos electrónicos entre Litmus y Mailchimp.

Obtenga plantillas personalizadas listas para usar

Si estás buscando plantillas de Mailchimp editables que puedas usar de inmediato, te respaldamos.

Plantilla Mailchimp gratuita creada por Litmus

Para ayudarte a empezar, hemos creado una plantilla de Mailchimp personalizada y optimizada para el modo oscuro. Tiene filas repetibles, un bloque de contenido variable y un botón compatible con Mailchimp.

Descarga nuestra plantilla de Mailchimp →

plantilla de correo electrónico Mailchimp gratuita de Litmus

Coge tu plantilla Mailchimp gratuita creada por Litmus (archivo .zip). Luego, profundiza en el código para ver cómo hemos aplicado el código de la plantilla de Mailchimp para hacer que una versión mini de nuestras plantillas de correo electrónico Subscriber Love gratuitas sean editables en Mailchimp.

Plantillas de correo electrónico creadas por socios de Mailchimp

Para obtener aún más opciones, consulte Mailchimp Marketplace con hermosas plantillas de correo electrónico diseñadas por los socios de servicio de Mailchimp.

Plantillas de Mailchimp en Mailchimp Marketplace

Puede buscar plantillas de correo electrónico en función de su objetivo de marketing, ya sea incorporando nuevos suscriptores o promocionando un nuevo producto. Seleccione y compre la plantilla que sea perfecta para usted, luego comience a personalizarla para que coincida con su marca. No requiere instalación ni codificación.

Tu plantilla perfecta de Mailchimp personalizada está a tu alcance

Ya sea que codifique su propia plantilla editable o personalice la de otra persona, estará bien encaminado hacia un proceso de creación de correo electrónico más eficiente, y uno en el que pueda confiar para crear correos electrónicos de marca y sin errores.

gráfico de correo electrónico con una marca de verificación verde y una carita sonriente

Asegúrate de que tu plantilla de Mailchimp se vea bien

Obtenga una vista previa de sus correos electrónicos en más de 90 clientes de correo electrónico, aplicaciones y dispositivos con Litmus para garantizar una experiencia de suscriptor de marca sin errores. Cada vez.

Obtenga una prueba gratuita de Litmus →