Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Plantillas responsive para newsletter en Mailrelay

Publicado por Celia en julio 12, 2016

Plantillas responsive

¿Plantillas responsive en mis newsletters con Mailrelay? Sí es posible, y además de muy recomendables de usar es muy fácil de implementarlas en tus envíos.

Todas las blogueras o emprendedoras que conozco dedican una cantidad de horas ingente a profesionalizar el diseño de su blog o web corporativa:

  • Analizan la gama de colores
  • Seleccionan las tipografías
  • Optimizan la navegación
  • Eligen fotografías que refuercen el mensaje
  • Repasan una y otra vez los textos más importantes de su web

VISITAR ÍNDICE DE EMPRENDE DESDE CERO

Pero ¿qué pasa con sus newsletters? ¿Utilizan también plantillas responsive?

Plantillas responsive para newsletter

Tus suscriptores son tu valor más preciado

Son aquellas personas que han confiado tanto en ti y en tu marca como para darte acceso a su correo electrónico personal, ese área íntima y privada que cada uno de nosotros guarda con recelo en internet y dónde solo dejamos entrar a aquellos en los que confiamos de verdad.

Si se han suscrito a tu lista, es porque has conseguido demostrarles que eres una profesional, sabes de lo que hablas y puedes aportarles ese contenido de gran valor que les ayude a seguir creciendo y evolucionando contigo.

No puedes estropearlo ahora utilizando un diseño al azar para tu newsletter ¿no crees?

En el apartado de plantillas para emails de Mailrelay tienes infinidad para empezar, pero necesitas tener unas nociones mínimas de programación para personalizarlas e incorporar tus colores y tipografías.

Además de que no todas son responsive. Y, como ya deberías saber, el índice de personas que leen sus correos desde sus dispositivos móviles… ¡va en aumento! Y supera a los que lo hacen desde su ordenador.

Por eso, para que cuides tu imagen de marca también en tus boletines corporativos, he programado y diseñado dos modelos de newsletter responsive para Mailrelay que puedes descargar gratis y personalizar a tu gusto siguiendo unos puntos muy básicos que no tienen pérdida.

Eso sí, tendrás que dedicar unos minutos de tu tiempo a cambiar mis colores por los tuyos o estaremos en las mismas ¿verdad?

Ambos modelos tienen dos columnas que puedes eliminar si no las necesitas, pero es la parte más creativa y original de estas plantillas, ya que desde tu ordenador se verán así:

Modelo de dos columnas de plantillas responsive para newsletter

Y desde tu móvil, las dos columnas pasarán a solo una en vertical, adaptándose por completo a la medida de la pantalla del dispositivo móvil desde el que la están leyendo.

Modelo de dos columnas en vertical de plantillas responsive para newsletter

 

¿Qué te parece? ¿Quieres aprender a utilizar estas plantillas responsive en tu newsletter y adaptarlas a tu imagen corporativa? ¡Pues vamos allá!

 

Descargar e instalar los archivos

He preparado dos archivos txt con los dos modelos que he diseñado para ti.

Los puedes descargar desde el siguiente enlace con los nombres: modeloresponsiveuno | plantillamodeloresponsivedos

Modelos de plantillas responsive para newsletter

El siguiente paso es instalar la plantilla en tu área privada de Mailrelay.

1.- Entra en tu cuenta y ve a PLANTILLAS – PLANTILLAS DE BOLETÍN.

2.- Click en CREAR.

3.- Pon el nombre con el que quieras diferenciar a tu nueva plantilla responsive.

4.- Pincha en VERSIÓN HTML.

5.- Pega el código de la plantilla que hayas elegido para empezar, eliminando las líneas que encontrarás por defecto.

Código html de plantillas responsive para newsletter

6.- Desmarca el botón VERSIÓN HTML.

7.- Ya tienes tu nueva plantilla instalada.

8.- Baja hacia abajo y pincha en el botón verde SALVAR.

9.- Para instalar la segunda plantilla sigue los mismos pasos.

Crea tu cuenta gratuita en Mailrelay

Personalizar las plantillas responsive

Ahora voy a darte una serie de nociones básicas para que puedas personalizar los colores de los dos archivos que has descargado.

Si ya tienes conocimientos de programación, no te será complicado, pero si es la primera vez que te enfrentas al código HTML, no te preocupes, lo veremos de forma sencilla y detallada para que no te pierdas.

Plantilla responsive modelo uno

► Las fotos

Haz clic encima de la imagen que quieres cambiar y se marcará en azul.

Si te fijas, la imagen del cabecero no ocupa todo el ancho, está alineada a la izquierda. Esto hace que al verse desde el móvil la imagen se adapte a la perfección al espacio disponible y no se perfeccione.

La medida de las imágenes que aparecen en la plantilla de la newsletter modelo uno son:

Imágenes en las plantillas responsive para newsletter

Logotipo cabecero: 264*109px

Columna: 264px de ancho

Como ves, la imagen de la columna no lleva establecida altura ya que se adaptará a la pantalla desde la que sea vista.

► Las tipografías

Muy sencillo:

Por defecto aparecerá Tahoma 16, pero para cambiarla solo tienes que marcar el texto por párrafos e ir seleccionando la familia tipográfica y tamaño que quieres utilizar.

plantillas responsive para newsletter

► Los colores

Aquí ya si nos metemos en el código de la plantilla, pero no te preocupes, que voy a enseñarte a utilizar el buscador para cambiar mi código de color por el tuyo. No hace falta que entiendas al 100% lo que dice cada fragmento de código para personalizarlo.

El fondo: código color – #8fe1d8 (azul clarito)

¿Cómo cambiarlo? Pasa de nuevo a VISTA HTML y pulsa a la vez las teclas Control + F. Se abrirá el buscador del navegador, pega el código que acabo de darte y presiona ENTER.

Encontrarás el siguiente fragmento de código en tu newsletter:

*@editable*/background-color:#8fe1d8;

Cambia mi código de color azul claro por el que quieras que aparezca como fondo de tu newsletter.

Te recomiendo utilizar uno de tus colores corporativos, el de mayor peso visual en tu marca pero de una tonalidad clara, que no llame demasiado la atención ni despiste al lector.

Tu objetivo es que te lean así que no le quites protagonismo a tu contenido con los colores de fondo ¿de acuerdo?

Los subtítulos: muy sencillo, ni siquiera necesitas mi código, puedes cambiarlo como lo hiciste con el tipo y tamaño de la letra:

Subtítulos en plantillas responsive para newsletter

Los botones: aquí, de nuevo, pasamos a VISTA HTML. Pero tranquila, abre de nuevo el buscador del navegador (Control + F) y busca la palabra que hay dentro del primer botón: VER DESCUENTOS

Encontrarás el siguiente fragmento de código:

<span style=»background-color:#33cccc; padding:5px; border-radius:5px;«><span style=»font-family:tahoma,geneva,sans-serif;»><a href=»http://suscriptoreselperrodepapel.blogspot.com.es/p/descuentos-especiales.html» target=»_blank»><span style=»color:#FFFFFF;»><strong>Ver Descuentos</strong></span></a></span></span></span></div>

La parte que afecta al botón es la que te he marcado en negrita:

background-color: color de fondo del botón.

padding: espacio entre las letras y el borde del botón.

border-radius: el nivel de redondez de las esquinas de los botones. Si los quieres completamente cuadrados, pon un 0.

¿Y qué pasa con el color de la letra? Porque si utilizas un color de fondo claro, la letra en blanco apenas será visible.

Pues puedes cambiar el color de dos formas: como ya hemos visto antes, directamente seleccionando la palabra y modificando el color o desde la Vista Html en el mismo código de antes:

<span style=»background-color:#33cccc; padding:5px; border-radius:5px;«><span style=»font-family:tahoma,geneva,sans-serif;»><a href=»http://suscriptoreselperrodepapel.blogspot.com.es/p/descuentos-especiales.html» target=»_blank»><span style=»color:#FFFFFF;«><strong>Ver Descuentos</strong></span></a></span></span></span></div>

Y añadir tu texto y enlace:

<span style=»background-color:#33cccc; padding:5px; border-radius:5px;«><span style=»font-family:tahoma,geneva,sans-serif;»><a href=»AQUÍ EL ENLACE» target=»_blank»><span style=»color:#FFFFFF;«><strong>AQUÍ EL TEXTO DEL BOTÓN</strong></span></a></span></span></span></div>

 

Las redes: Los iconos de redes sociales son imágenes de 48*48px. Solo tienes que cambiar mis imágenes y enlaces por los tuyos como haces habitualmente cuándo sustituyes una imagen por otra.

Iconos de redes en las plantillas responsive para newsletter

¡Y ya está! Ya tienes el Modelo Responsive Uno adaptado 100% a tu imagen corporativa.

¿Qué te parece? ¿A qué no ha sido tan complicado? Un par de toques desde el HTML y el Diseño y solucionado. Ya tienes tu plantilla responsive para tu newsletter en Mailrelay lista.

Recuerda guardar los cambios antes de salir de la pantalla.

Plantilla responsive modelo dos

Personalizar el modelo dos es igual de sencillo.

Ahora que ya sabes cambiar las imágenes, colores y tipografías, poco más puedo decirte para personalizar esta plantilla y utilizarla en tus newsletters.

El procedimiento es el mismo, no obstante, te dejo mis códigos de color para que puedas buscarlos de forma más sencilla y cambiarlos por los tuyos:

  • Fondo newsletter: #CCFFF9
  • Fondo footer: #33cccc

 

El color del footer le encontrarás repetido varias veces, ya que es mi color corporativo para las tipografías.

Para cambiar el footer, tienes que encontrar el siguiente fragmento de código:

<td bgcolor=»#33cccc» class=»footer»>

Y cambiar mi color por el código del tuyo.

 

Si has llegado hasta aquí y has ido siguiendo cada uno de los pasos que hemos visto, ¡enhorabuena!

Ya tienes tus dos plantillas responsive preparadas para usarlas en tus newsletter en Mailrelay.

Tus emails con dos columnas no volverán a verse con letras pequeñitas o textos muy largos desde el móvil, obligando a tus suscriptores a hacer scroll.

Tener que bajar demasiado para leer el texto completo de la primera columna te obliga a volver a subir para leer el de la segunda desde el principio, resulta un poco molesto. Y con estas plantillas eso no sucederá, ya que tu doble columna pasará a segunda fila y desde los dispositivos móviles tus suscriptores las verán de forma vertical y sin problema.

¿Y cómo empiezo a utilizar mis plantillas responsive para newsletter?

Muy sencillo. Si ya las tienes guardadas solo tienes que hacer lo siguiente:

1.- Desde tu panel de Mailrelay accede a BOLETINES – CREAR BOLETÍN

2.- Elige un título y un grupo al que enviarlo para poder continuar.

3.- Haz click en el botón de la izquierda: USAR PLANTILLA.

4.- Elige en el desplegable TIPO: MIS PLANTILLAS.

5.- Selecciona la una de las dos plantillas que acabas de personalizar.

6.- Cambia los textos modelo y las fotografías por los tuyos.

7.- Antes de enviar o programar tu plantilla a tus suscriptores, envía una prueba a tu correo para comprobar que todo es correcto y los enlaces funcionan.

Enviarte una prueba es sencillo.

Una vez hayas terminado tu plantilla, en la página del listado de plantillas, haz clic en ENVIAR con tu plantilla seleccionada, elige ENVIAR PRUEBA DEL BOLETÍN y escribe el correo dónde quieres recibir la prueba en la cajita blanca.

Te aconsejo hacer esto siempre que puedas para ofrecer una imagen cuidada y profesional en todas tus campañas de email marketing.

Creo que no me dejo nada importante en el tintero, he intentado que este tutorial sea accesible a cualquier persona interesada en tener una plantilla responsive personalizada para sus newsletter en Mailrelay. De todas formas, si tienes alguna duda o te quedas estancada en alguno de los puntos, puedes dejar un comentario aquí debajo e intentaré ayudarte en la medida de mis posibilidades.

Además, espero con ilusión que me cuentes los resultados de tu primera campaña de email marketing con tu nueva plantilla responsive, seguro que tus suscriptores notan la diferencia y ésta se ve reflejada en tu índice de conversión.

No olvides pasarte por aquí cuándo analices tus resultados y contarnos qué tal te ha ido utilizando tus nuevas plantillas responsive ¿vale?


Suscríbete y accede al ebook privado:
Cómo enviar correos masivos sin ser SPAM







Acepto la política de privacidad.



Comentarios

  1. Cristian

    Es posible agregar links de boostrap por ejemplo?

    01/05/2018 - 20:32:49 Publicar una respuesta
    • Mailrelay

      Hola Cristian, es complicado que las librerias CSS funcionen pues necesitan utilizar archivos externos, lo que algunas veces es limitado por los clientes de correo.

      02/05/2018 - 08:33:19 Publicar una respuesta
  2. Luis Collado

    Hola Celia,
    Una cosa, estoy usando tu plantilla como base para una newsletter pero en Outlook da problemas el diseño responsive ya que no se adapta a la pantalla.

    He estado buscando información pero lo único que he encontrado es que Outlook da más problemas que Gmail a la hora de detectar el HTML para pasar a responsive.

    ¿Hay forma de solucionarlo?

    03/05/2017 - 17:34:25 Publicar una respuesta
    • Mailrelay

      ¡Hola Luis! El problema es que Outlook no interpreta bien los códigos que se usan para hacer un email responsive. La solución es que Microsoft corrija Outlook, pero no creo que lo hagan y menos en las versiones antiguas.

      04/05/2017 - 09:01:16 Publicar una respuesta
  3. Antonio J. Prado Pérez

    Yo no encuentro manera de cambiar el fondo tal y comoindicas. En la plantilla 2 no me aparece ese color. Y si busco por background, tan solo me deja cambiar el color de fondo de los botones….

    25/10/2016 - 20:12:25 Publicar una respuesta
    • Mailrelay

      ¡Hola Antonio! Creo que es una opción del modelo 1 solamente

      26/10/2016 - 11:17:21 Publicar una respuesta
      • Ro

        Hola!! Pues yo lo estoy intentando en el modelo 1 y no lo consigo… En cuanto cambio el código y le doy a guardar es como si se me borrara todo. Cuando vuelvo a abrir la plantilla está todo en blanco… No sé qué hago mal 🙁
        Y Celia, mil gracias por compartir las plantillas!!

        31/01/2017 - 01:29:50
      • Mailrelay

        ¡Hola Ro! Si lo estás haciendo en wordpress.com es normal, pues no acepta formularios html.

        31/01/2017 - 08:45:29
  4. Alberto

    ¡Gracias por la información, Cecilia!
    Y quisiera destacar también que me ha gustado mucho que te hayas dirigido a quienes leemos este blog con la forma de género femenino.
    Estamos tan acostumbradxs a usar y leer en género masculino que apenas nos damos cuenta de la importancia que tienen estos pequeños gestos.

    14/07/2016 - 10:29:17 Publicar una respuesta
    • Celia

      ¡Hola, Alberto!

      Ups… es que estoy acostumbrada a hablar con mi público en femenino jajaja
      Me siento más cómoda y ellas también, ya que el 99% de mi público son mujeres.

      ¡Un saludo y disculpa! 😉

      17/07/2016 - 11:08:31 Publicar una respuesta
      • Mailrelay

        ¡Celia si a Alberto le ha gustado que te expresaras en femenino! 🙂

        18/07/2016 - 09:40:04
  5. Carlos Julián

    Gracias, mucha ayuda en este post para las personas que tienen problemas con su newsletter, hace mucho que quiero hacer un tutorial y lo haré dentro de poco…

    13/07/2016 - 16:28:37 Publicar una respuesta
    • Celia

      ¡Hola, Carlos!

      Me alegra que te haya sido útil, ya nos pasarás el enlace a tu tutorial para verlo 😉

      ¡Saludos!

      17/07/2016 - 11:09:06 Publicar una respuesta
  6. Yosjany

    Rectifico, ya pude instalar la segunda plantilla, nuevamente mil gracias, uno de los mejores post que he leído con un gran valor, será un post épico, saludos

    12/07/2016 - 21:45:31 Publicar una respuesta
    • Celia

      Hola Yosjany!

      Cuánto me alegro, ya nos contarás que les parece a tus suscriptores 😉

      Gracias y feliz tarde!

      13/07/2016 - 13:46:55 Publicar una respuesta
  7. Francisco Javier

    Gracias por el modelo de plantilla.
    Lo he estado adaptando a mis colores corporativos pero no consigo eliminar el borde de color azul que rodea todo el texto. Como color de fondo he seleccionado #FFFFFF y el borde azul rompe con todos mis colores.

    ¿Cómo puedo eliminarlo o ponerle un color gris?

    Muchas gracias

    12/07/2016 - 20:28:06 Publicar una respuesta
    • Francisco Javier

      Al final conseguí modificar el color del borde cambiando #00ffff, por #ffffff
      Este es el comando:
      *@editable*/border:1px outset #ffffff;

      13/07/2016 - 10:59:55 Publicar una respuesta
      • Mailrelay

        ¡Muchas gracias por el aporte Francisco!

        13/07/2016 - 11:00:45
      • Celia

        Genial, Francisco Javier!

        Muchas gracias y espero que el cambio les guste a tus suscriptores 😉

        Feliz día!

        13/07/2016 - 13:47:40
  8. Yosjany

    Excelente mega post, solo que no he podido instalar la plantilla 2, mil gracias por tan buen aporte

    12/07/2016 - 20:19:40 Publicar una respuesta

Deja un comentario

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


Menu Title