Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

(Vídeo) Diseñar una newsletter sencilla y efectiva en menos de 15 minutos

Publicado por Mailrelay en febrero 20, 2017

Diseñar newsletter

Hoy vamos a diseñar una newsletter sencilla, con el editor de Mailrelay, y en menos de 15 minutos.

El vídeo dura un poquito más, pero es porque hablo un poco en la presentación, y luego al final también.

Lo que es la materia, el tema del diseño de la newsletter, solo dura poco más de 10 minutos.

¡Envía hasta 75.000 emails gratis!

Te dejo con el vídeo:

Diseñar una newsletter sencilla

También te recomiendo, si quieres verlo a pantalla completa, que accedas a Youtube:

Hay algunos detalles que se ven mejor a pantalla completa, pero en general el proceso lo verás claro aquí también:

¿Qué hemos visto en este vídeo? Basicamente algunos puntos clave en el diseño de una newsletter:

Cómo crear una tabla contenedora

De forma que podamos centrar el contenido dentro de la misma. A esta tabla le daremos:

  • Una anchura del 100%.
  • Una fila
  • Una columna
  • Sin borde

Te quedará esta configuración más o menos como en la imagen.

diseñar una newsletter

Cómo crear una tabla interior

A continuación lo que hacemos es crear una tabla interior, que irá dentro de la otra. Esto lo vamos a ver en dos pasos primero:

  • Nuevamente es una tabla de una columna
  • Y una fila pero hay dos diferencias
  • El ancho es 65%
  • Alineación centrado

crear newsletter

Creo que me quedé un poco escaso de ancho, y quizá un 75% o 85% te den mejores resultados visualmente.

Es cuestión de probar hasta dar con lo que mejor resultado te de.

Ahora, sin salir de esta pantalla nos vamos a la pestaña avanzado.

Aquí vamos a modificar la casilla Estilos:

  • max-width: 500px;
  • Esto establece un ancho máximo, de forma que aunque el cliente de correo disponga de más ancho nuestra newsletter no lo exceda.
  • padding: 5px;
  • Con el padding lo que hacemos es dejar un espacio entre el borde de la tabla y el interior, de forma que si la tabla ajusta al borde del dispositivo, quede algo de espacio en blanco.

Te quedará algo así:

crear newsletter

Insertar imagen en la newsletter

Y lo siguiente que hacemos es insertar una imagen, este paso es fácil, pero a su vez es importante configurar el ancho:

  • Anchura: 100%
  • Altura: vacío 

Es importante que dejes el campo altura vacío, porque así la imagen ajustará las proporciones in problemas, ajustando el ancho al ancho disponible.

Diseñar newsletter

Añadir un botón a la newsletter

En el siguiente paso vamos a añadir un botón para nuestra llamada a la acción.

Es muy fácil, simplemente marcamos el texto y hacemos click en el botón de enlace.

Luego vamos a la pestaña avanzado, y en la casilla estilo introducimos:

  • background-color:#18adb3;
  • Esto definirá el color de fondo del botón.
  • border:2px solid #18adb3;
  • Aquí indicamos el grosor y el color del borde
  • color:white;
  • El color del texto
  • display:block; margin:0 auto;
  • Dos valores para conseguir que el botón se centre en la página
  • padding:5px;
  • Un margen entre el borde y el texto
  • width:50%;
  • Ancho del botón, para que no ocupe todo el ancho del diseño.
  • text-decoration: none;
  • Para quitar el subrayado del enlace

Con estos valores te quedará un botón visualmente interesante.

diseñar newsletter

Añadir una tabla con más columnas

Si queremos por ejemplo añadir una tabla para que tenga más columnas, podemos hacerlo simplemente así:

diseñar newsletter

Definimos un ancho del 100%.

Y 5 columnas.

Aquí lo importante será, si añades imágenes que les pongas un ancho del 100%, como vimos antes en el apartado de las imágenes.

Por último.

El enlace de baja

Al diseñar una newsletter es muy importante que incluyas el enlace de baja.

Para hacerlo simplemente crea un enlace con estos valores:

diseñar newsletter

  • Protocolo: otro
  • URL: [unsubscribe_url_click]

Y a partir de eso Mailrelay generará un enlace de baja para cada suscriptor.

¿Cómo queda nuestra plantilla de newsletter?

Pues si sigues este tutorial al pie de la letra al final del mismo deberías tener una newsletter muy parecida a esta:

diseñar una newsletter

Que la verdad, para haberla preparado en unos minutos no está nada mal ¿verdad?

¿Y si miramos la newsletter en un móvil?

Pues tenemos algo así:

ejemplo de newsletter

Como comentaba al principio, quizá con un ancho en porcentaje superior al 65% se vería mejor, pues en este caso se ajusta demasiado.

Pero en general se ha adaptado de forma razonable

¿Por qué es efectiva esta newsletter?

Porque incluye todo lo básico que queremos en una newsletter:

  • Cabecera con una imagen donde mostrar la marca
  • El texto imprescindible
  • Un botón y llamada a la acción para que el suscriptor ejecute la acción que queremos
  • Más fotos en caso de ser necesario
  • Algunos enlaces y llamada a la acción secundarias
  • Enlace de baja

Podríamos haber insertado algún elemento más, pero no es indispensable.

[Lo indispensable está ahí]

En general es buena idea mantener el diseño de la newsletter al mínimo, porque al final lo que queremos es que quien la recibe realice alguna acción.

Normalmente que pinchen en algún enlace para hacer algo.

No es necesario ni recomendable recargar el diseño de la newsletter.

¡No te sobrecompliques!

Espero que este tutorial para diseñar una newsletter te sea útil

Si te ha gustado este formato de vídeo y guía coméntamelo y preparo alguno más.

¿Quizá para los boletines RSS?

jose argudo

Suscríbete al blog y recibe los mejores contenidos semana a semana:







Acepto la política de privacidad.



Comentarios

  1. Javi

    Hola
    ¡Un artículo genial!
    Aunque soy un completo dummy de la programación, he podido seguirlo perfectamente.
    Tengo una pregunta: ¿cómo puedo guardar la plantilla que con tanto esfuerzo he ido creando?

    Muchas gracias

    31/10/2017 - 10:54:50 Publicar una respuesta
  2. humberto

    gracias, me gusto eso luego de dar un instructivo por escrito.

    25/07/2017 - 04:10:09 Publicar una respuesta
  3. Bruno Savron

    Hola Amigos,Agradeciando vuestra Amable Respuesta,mi pregunta es ,como se inserrta un campo de una base de datos en Mail Reñay..?
    Tengo que ir al ítem ->Campos Personalizados ? -> Suscriptores y obtener el nombre del campo a usar ,..por ej si quiero usar el nombre del suscriptosr ,debo usar [name]..?
    2.Como puedo manipular (cambiar largo ,ancho color ) de una línea horizonta insertada? (es la línea horizontal que se obtiene del tercer ítem-después/al lado izquierdo del ítem insertar Tabla del menú horizontal del editor)

    25/06/2017 - 02:52:10 Publicar una respuesta
    • Mailrelay

      ¡Hola Bruno! Eso es, debes usar el nombre del campo, por ejemplo [name] o el nombre ue le hayas dado. En cuanto a tu segunda pregunta deberás modificar el html del mismo elemento 🙂

      25/06/2017 - 08:49:14 Publicar una respuesta
  4. Ramón

    Buenas tardes!!
    Muchas gracias por la explicación me ha sido de gran ayuda,lo veo súper sencillo y muy practico
    un saludo

    02/06/2017 - 19:52:04 Publicar una respuesta
  5. Daniel

    Buenas tardes!! Yo llevo usando la plataforma mas de un año y me parece muy util. Aunque si que es verdad q a veces se desconfigura todo cuando intentas añadir mas tablas a la planilla de diseño. Muchas gracias a todo el equipo de mailrelay

    10/03/2017 - 15:12:13 Publicar una respuesta
    • Mailrelay

      ¡Hola Daniel!¡Muchas gracias por comentar! Espero que el tutorial te sea de ayuda, aunque el editor a veces sea un tanto complicado 🙂

      10/03/2017 - 15:20:35 Publicar una respuesta
  6. Alicia

    Por favor, integrad ya el sistema “Drag and Drop” para crear los boletines y dejaros de chorradas. Eso si que es sencillez. Con el sistema de MailRelay tienes que saber un mínimo de código de programación para poder manejarte y eso es un punto negativo para la plataforma.

    22/02/2017 - 14:14:51 Publicar una respuesta
    • Mailrelay

      ¡Hola Alicia! Lamento que el tutorial te haya parecido una “chorrada”, espero que otros usuarios lo encuentren útil. Con toda sinceridad, solo pensaba en facilitar el uso de la herramienta con las funcionalidades que tenemos actualmente.

      22/02/2017 - 14:18:41 Publicar una respuesta
      • Alicia

        Disculpa la expresión, tal vez no fue la más adecuada. No es el tutorial lo que no me haya gustado, sino al contrario, pero es que el editor para quién no sabe de programación es una pesadilla. Resulta muy complicado editar las plantillas que ya hay disponibles, la integración de otras plantillas creadas en otras plataformas es compleja, a veces los elementos no cuadran ni quedan como en el diseño creado originalmente, resulta prácticamente imposible añadir o eliminar más secciones por que tiras a mirar de código y te pierdes, luego se desconfiguran estilos, y un sin fin de cosas más. Me gusta MailRelay, pero hay aspectos que podrían mejorarse y facilitar así a los usuarios su tarea, sobretodo teniendo en cuenta que una gran parte de nosotros no sabemos de programación o no tenemos los conocimientos necesarios para sacarle todo el partido que podríamos a la plataforma. Un saludo y de nuevo te pido disculpas por esa parte de mi comentario.

        22/02/2017 - 16:41:18
      • Mailrelay

        ¡Hola Alicia! Sí, la verdad es que el editor puede ser complejo, y a veces es frustrante. Estamos trabajando para mejorarlo lo antes posible, y mientras tanto queremos ayudar en lo posible, como en este caso. Sabemos que no es fácil, y comprendo tu queja, me molesto la expresión sí, porque el tutorial lo hice con buena intención. Pero poniéndome en tu lugar, te comprendo, también debería haberlo pensado. A ver si los compañeros/as de desarrollo se ponen a ello y podemos tener un mejor editor.

        22/02/2017 - 17:53:46
      • Bruño Savron

        Es Verdad,este sistema debiera estar al nivel de Mailchimp o Benchmark en cuanto a diseño.

        13/06/2017 - 12:32:39
      • Mailrelay

        ¡Hola Bruño! Ambas plataformas que mencionas aplican costes mayores y reducen funcionalidades en las cuentas gratuitas en muchas casos (si es que disponen de cuentas gratuitas).

        13/06/2017 - 12:36:25
    • Vivian Francos

      A mi se me hace muy fácil ubicarme dentro de los menus de publicación e integración de vídeo con viwomail.

      22/02/2017 - 15:41:52 Publicar una respuesta
      • Mailrelay

        ¡Gracias Vivían!

        22/02/2017 - 15:47:41
  7. Emilio

    Ay!.. equivoqueme.. DDDX
    Quedote muy asturiana esa expresión.

    21/02/2017 - 19:39:39 Publicar una respuesta
    • Mailrelay

      Jajaja síii 😀 no soy de Asturias, pero me encanta 🙂 tengo muchas ganas de volver la verdad.

      22/02/2017 - 07:51:47 Publicar una respuesta
  8. Sonia

    Genial, No conocía Mail Relay, parece muy sencillito. Lo menos que quiero es perder tiempo así que si en 15 mins está listo, estupendo!

    20/02/2017 - 10:05:38 Publicar una respuesta

Deja un comentario

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


Shares
Menu Title