Diseño de Mailchimp
Contenidos
SearchSearchClearSaber cómo construir diseños multicolumna sólidos como una roca es bastante importante; la mayoría de los correos electrónicos que circulan por ahí no son asuntos de una sola columna. Los diseños de varias columnas son buenos para contener mucha información, y los principios para construirlos pueden aplicarse a muchos otros escenarios de codificación. Aquí hay un código bastante estándar, para un diseño de dos columnas:
Notarás que las columnas son tablas individuales anidadas dentro de un contenedor más grande <table>; hemos encontrado que este método de anidación tiende a dar más control sobre el diseño y la estructura de un correo electrónico de varias columnas. Un diseño de tres columnas es una simple variación de este código:
También puede ver que los anchos de las columnas no se basan en los píxeles, sino en los porcentajes. La <tabla> que contiene las columnas sí tiene un ancho de píxel definido. La forma de establecer las dimensiones de la tabla, ya sea en porcentajes o en píxeles, depende realmente de ti; nosotros hemos comprobado que el método mostrado arriba nos da una buena cantidad de control, a la vez que mantiene las tablas lo suficientemente «blandas» como para que las variaciones de píxeles pequeños no perturben demasiado las cosas.
Código del botón de Mailchimp
Las plantillas básicas de Mailchimp son fáciles de usar, efectivas y lo mejor de todo es que se ven muy bien en casi todos los dispositivos. En las clases de Mailchimp siempre recomiendo a los asistentes que utilicen la plantilla básica de 1 columna.
Sin embargo, algunas personas encuentran que hay demasiado espacio en blanco en las plantillas básicas y no es posible eliminar fácilmente gran parte del espacio en blanco. Además, los participantes en la formación de Mailchimp suelen preguntar si es posible tener un botón en línea en lugar de un botón debajo o encima del contenido, es decir, a la izquierda o a la derecha del texto.
Para añadir un botón en línea tenemos que añadir el botón como HTML en lugar de utilizar el bloque de contenido del botón. Afortunadamente, incluso si no estás familiarizado con HTML, es realmente sencillo añadir un botón.
Añade un bloque de contenido de texto a tu constructor de campañas.Mientras estás en la pantalla de edición del bloque de contenido de texto haz clic en Configuración (en la parte superior derecha de la pantalla).En Número de columnas selecciona 2 Columnas.Selecciona la tercera División de columnas, es decir, dos tercios para la primera columna y un tercio para la segunda.Haz clic en Contenido (a la izquierda de Configuración) y luego en Columna 2.Haz clic en el icono de Fuente.Elimina el texto existente y copia y pega el HTML como se indica a continuación.
Texto sobre imagen mailchimp
El bloque de contenido Button crea un botón en tu correo electrónico o página que enlaza con un sitio web o un archivo para descargar. Los botones son una buena forma de llamar a un enlace concreto en el que quieres que la gente haga clic, como por ejemplo para confirmar la asistencia a un evento o para visitar tu tienda online.
Incluye tantos bloques de botones como necesites. Los bloques de botones se apilan unos encima de otros y no pueden alinearse horizontalmente, a menos que coloque dos botones uno al lado del otro en una plantilla de dos columnas. Si desea más de un botón por bloque de contenido, cargue los botones que haya creado como archivos de imagen y luego vincule las imágenes a las URL.
Cuando diseñas un correo electrónico, puedes convertir cualquier bloque de contenido en contenido dinámico que se muestre sólo para determinados destinatarios. Esto te ayuda a dirigirte a diferentes tipos de contactos al mismo tiempo con un solo correo electrónico.
Plantillas de Mailchimp
Los bloques de contenido se pueden arrastrar vertical u horizontalmente dentro del diseño. Para mover un bloque, haz clic y mantén pulsado el asa en la parte superior izquierda de un bloque de contenido, arrastra el bloque hasta donde quieras que vaya y suéltalo.
Cuando muevas un bloque de contenido, resaltaremos las secciones Preheader, Header, Body, Column y Footer para indicar en qué parte de la maquetación vas a colocar el bloque. Cuando muevas un bloque a una sección diferente, adoptará las preferencias de estilo de esa sección.
Utiliza las pestañas Estilo y Configuración para personalizar el diseño de los bloques de contenido individuales. Haz clic en un bloque de contenido de tu correo electrónico o página de destino para que aparezca el editor y elige la pestaña Estilo o Configuración para realizar cambios.
En la pestaña de Estilo podrás realizar cambios en el tipo y color de la fuente, la alineación del texto, la apariencia de los botones, etc. Cualquier preferencia aplicada a un bloque individual anulará las preferencias de estilo para la sección en su conjunto.
Cuando diseñas un correo electrónico, puedes convertir cualquier bloque de contenido en contenido dinámico que se muestre sólo para determinados destinatarios. Esto le ayuda a dirigirse a diferentes tipos de contactos al mismo tiempo con un solo correo electrónico.