(Vídeo) Diseñar una newsletter sencilla y efectiva en menos de 15 minutos
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.
- 1 Diseñar una newsletter sencilla
- 1.1 Cómo crear una tabla contenedora
- 1.2 Cómo crear una tabla interior
- 1.3 Insertar imagen en la newsletter
- 1.4 Añadir un botón a la newsletter
- 1.5 Añadir una tabla con más columnas
- 1.6 El enlace de baja
- 1.7 ¿Cómo queda nuestra plantilla de newsletter?
- 1.8 ¿Por qué es efectiva esta newsletter?
- 1.9 Espero que este tutorial para diseñar una newsletter te sea útil
- 1.10 Related Posts:
Te dejo con el vídeo:
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.
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
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í:
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.
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.
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í:
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:
- Protocolo: otro
- URL: [unsubscribe_url_click]
Y a partir de eso Mailrelay generará un enlace de baja para cada suscriptor.
Pues si sigues este tutorial al pie de la letra al final del mismo deberías tener una newsletter muy parecida a esta:
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í:
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
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!
Si te ha gustado este formato de vídeo y guía coméntamelo y preparo alguno más.
¿Quizá para los boletines RSS?
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
Mailrelay
¡Hola Javi! Me alegra que te haya sido útil el tutorial 🙂 La plantilla la puedes guardar haciendo uso del botón de guardado, pero si tienes cualquier dificultad puedes contactar con nuestro soporte: https://mailrelay.com/es/contacto
humberto
gracias, me gusto eso luego de dar un instructivo por escrito.
Mailrelay
¡Gracias Humberto! Me alegra que te sea de utilidad 🙂
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)
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 🙂
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
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
Mailrelay
¡Hola Daniel!¡Muchas gracias por comentar! Espero que el tutorial te sea de ayuda, aunque el editor a veces sea un tanto complicado 🙂
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.
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.
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.
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.
Bruño Savron
Es Verdad,este sistema debiera estar al nivel de Mailchimp o Benchmark en cuanto a diseño.
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).
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.
Mailrelay
¡Gracias Vivían!
Emilio
Ay!.. equivoqueme.. DDDX
Quedote muy asturiana esa expresión.
Mailrelay
Jajaja síii 😀 no soy de Asturias, pero me encanta 🙂 tengo muchas ganas de volver la verdad.
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!
Mailrelay
¡Claro! Pruébalo Sonia, y cualquier duda nos contactas 🙂