Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Cómo lo hicimos: Convertir los Emails de Tuts+ en plantillas de Monitor de campaña

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How We Made Our Shiny New Envato Tuts+ Emails.
How We Did It: Building the New Tuts+ Email Templates

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En las dos primeras partes de esta serie de estudio de caso, hemos visto cómo se diseñaron los nuevos mensajes Envato Tuts+, y luego se construyeron como entregas de HTML/CSS estáticas. En esta pieza final del rompecabezas, te mostraré cómo convertimos esos archivos en plantillas de Campaign Monitor.

En esta etapa había un par de miembros del equipo involucrados en el proceso: Cameron y yo. Cam se encargó de integrar los digests en Campaign Monitor, yo manejé los boletines, que explicaré en este post.

1. Prepare sus archivos

Nicole entregó una serie de archivos al final del proceso de compilación, incluyendo HTML, CSS e imágenes. Juntos, atendieron una serie de diferentes tipos de correo electrónico, por lo que sólo tenía que tomar los pedacitos necesarios para la plantilla boletín y el trabajar desde allí.

Consejo: Descargue los archivos del codigo si desea seguir adelante.

Heroe local

Actualmente, las rutas dentro de los archivos son todas relativas. Hay un par de enlaces a los archivos CSS, algunos enlaces dentro de ellos a las imágenes, y todos apuntan al directorio de archivos local como lo vemos. Por ejemplo:

Cuando subimos nuestros archivos al final del tutorial, Campaign Monitor reconocerá todas estas rutas y las modificará en consecuencia.

2. Comienzar en el principio

Nuestro proceso es el siguiente: tomaremos todos los pedacitos estáticos de nuestra plantilla de correo electrónico y los intercambiamos por fragmentos dinámicos siempre que sea posible. Desplazamiento hacia abajo, el primer error que encuentro es alrededor de la línea 73: un enlace a la versión web:

Ese enlace será diferente cada vez, así que cambiémoslo por el dinámico <webversion> del CM:

Fácil como eso. ¡Siguiente!

3. Enlaces más importantes

La <webversion> que acabamos de usar es uno de los pocos enlaces importantes que Campaign Monitor ofrece. Mientras estamos en esto, hagamos uso de uno o dos. El párrafo de las preferencias de correo electrónico se puede encontrar en la línea 346, y se ve así:

Utilicemos <preferences> y <unsubscribe> para hacer que la sección sea dinámica:

Hay un par de otros enlaces importantes, como <forwardtoafriend>, pero no vamos a hacer uso de ellos en este caso.

4. Líneas Únicas

La siguiente cosa que tenemos que atender es la dirección de correo electrónico principal.

tuts email heading
Título y subtítulo

Alrededor de la línea 87, la encontrarás marcada así:

Párrafos, con clases heading y h1 o h2 (gracias email HTML). Cada uno de ellos debe ser editable desde dentro de Campaign Monitor, por lo que, dado que sólo necesitaremos editar el contenido del texto y nada más, podemos usar el elemento de plantilla <singleline>:

Los párrafos permanecen perfectamente intactos, solo agregamos una región editable dentro de cada uno. Cada singleline tiene un atributo opcional label, que se mostrará útilmente desde el editor Campaign Monitor:

5. Líneas múltiples

Para contenido que es un poco más complejo que los encabezados y straplines, usaremos el elemento <multiline>. En la línea 134 encontrarás el contenido de nuestro "primer artículo" que usaremos como introducción para cada correo electrónico:

Hagamos que estas dos secciones sean dinámicas:

Estos siguen el mismo patrón que antes: regiones editables, con etiquetas opcionales–pero esta vez nos permiten usar un editor WYSIWYG:

6. Imágenes editables

Desplácese hasta la línea 168 y encontrará una imagen dentro de una celda de tabla, todo por sí mismo:

Esto será parte de una sección repetible (que trataremos en un minuto) así que primero hagamos esta imagen dinámica. No me gusta usar la palabra "simplemente" en los tutoriales, pero en este caso lo dejaré pasar: simplemente agregue el atributo editable a la etiqueta de imagen. ¡Hecho!

El atributo width es obligatorio, pero el src (que nos da una imagen predeterminada) es opcional, como tambien nuestro amigo el atributo label.

Con eso hecho, el editor nos permite eliminar la imagen predeterminada, subir uno nuevo, añadir texto alt, y (crucialmente) agregar un enlace.

"Los datos duros dicen: los correos electrónicos con imágenes se convierten casi dos veces más." – Chris Hexton, CEO y cofundador de Vero

Nota: tenga en cuenta que si elegimos quitar la imagen por completo, el formato que contiene seguirá. Esto puede resultar en grandes áreas rellenadas sin contenido, así que considere cómo formatear sus imágenes en el diseño.

7. Áreas Repetibles

Esa imagen es parte de una sección que queremos poder repetir tantas veces como sea necesario. Comienza en la línea 146 y termina en la línea 176, con los comentarios:

Como hicimos anteriormente con otras áreas, necesitamos hacer que el encabezado dentro de esta sección sea <singleline> y el contenido sea <multiline>, así que hazlo antes de ir más lejos.

Para hacer que todo este fragmento sea repetible, envolveremos los pedacitos necesarios en un elemento <repeater>:

Esto nos proporcionará algunos controles adicionales en el editor de Campaign Monitor, lo que nos permitirá duplicar la sección, moverla (útil para reordenar) o eliminarla.

Nota: el <repeater> debe contener una <singleline>, una <multiline> o una <img editable>.

Otra nota: ¡no puedes anidar elementos <repeater>!

8. Diseño

Ahora para una sección repetible con una diferencia. Es una sección de tema específico, y cada tema tiene uno, con el color del tema apropiado.

En el caso de nuestro boletín de proyectos de traducción, a veces podemos incluir una sección de Fotografía y Video, junto con Codigo, y Desarrollo de juegos. A veces podemos omitir Código. A veces podemos presentar los nueve temas. Entonces, ¿cuál es el mejor para organizar esto? Introduzca el elemento <layout>.

Podemos usar múltiples elementos de diseño dentro de un único bloque <repeater>, de modo que cada vez que duplicamos el bloque, se nos da una selección de diseños. En nuestro caso, queremos elegir entre los temas disponibles, por lo que nuestro formato se verá como esto:

Allí verás elementos de diseño, cada uno con una etiqueta única.

Importante: no utilice entidades HTML escapadas (como &amp; en vez de &) dentro de las etiquetas del diseño.

Comience en la línea 183 envolviendo nuestros bloques de temas en un <repeater>. A continuación, envuelva cada uno de los bloques de temas en un elemento <layout label=''>, asegurándose de asignarles etiquetas únicas.

Ahora, una vez que subamos todo a Campaign Monitor, el editor nos dará todas nuestras opciones de diseño cuando queramos repetir una sección:

9. Cargar al Campaign Monitor

¡Todo nuestro arduo trabajo está hecho, ahora necesitamos subir nuestros archivos a Campaign Monitor para usar nuestra plantilla en una campaña de correo electrónico!

En el panel de control de Campaign Monitor, vaya a Plantillas > Importar.

A continuación, introduzca un nombre para su plantilla, seleccione el archivo HTML finalizado y, a continuación, seleccione todos los demás elementos necesarios (CSS e imágenes) como un archivo zip.

Sus archivos se cargarán y procesarán, lo que tomará un momento. Los estilos se optimizarán (algunos en linea, algunos se inyectarán en el <head> del HTML) y las rutas se actualizarán. Cuando todo esté listo, su plantilla estará disponible para seleccionar cuando inicie una nueva campaña.

Conclusion

Esto concluye este estudio de caso por correo electrónico; Una visión de cómo diseñamos y construimos los correos  de Envato Tuts+. Espero que haya disfrutado siguiendo el proceso, y si necesita inspiración por correo electrónico para su próximo proyecto, asegúrese de consultar las últimas plantillas de correo electrónico disponibles en Envato Market.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.