Editor de plantillas

El editor de plantillas de Acumbamail te permite diseñar emails de manera sencilla e intuitiva mediante un sistema drag & drop que ofrece muchas posibilidades para que crees tu diseño desde cero, o adaptes una de nuestras plantillas gratuitas. En este artículo podrás conocer en detalle todas las posibilidades que te ofrece el editor. 

En este artículo:

Seleccionar plantilla para editar

seleccionar plantillas

En primer lugar, puedes escoger entre seleccionar alguna de las plantillas que ofrece Acumbamail ( Nuevas Plantillas), reutilizar alguna de las que ya hayas utilizado (Mis Plantillas), o importar tu propia plantilla.

Si quieres utilizar una de nuestras plantillas, puedes filtrar por temáticas para encontrar fácilmente la que mejor se adapte a la campaña que quieras enviar.

 Una vez seleccionada, accederás al editor para que puedas personalizarla, modificar su estructura, o añadir bloques con diferente contenido. 

Contenido

En la sección Contenido podrás añadir diferentes bloques de acuerdo a lo que necesites. Para añadir cada tipo de contenido, sólo tienes que arrastrar cada bloque al interior de la plantilla, seleccionando el lugar en el que quieres incluirlo. Cada bloque de contenido tiene sus propias características que detallamos a continuación.

Texto

Para añadir un bloque de texto, debes arrastrar el bloque correspondiente al lugar de la plantilla al que quieras añadirlo.

texto

Propiedades del contenido

En la sección Propiedades del contenido, podrás llevar a cabo un ajuste de características para dicho bloque, que son las siguientes: color del texto, color de los enlaces, interlineado, márgenes superior, inferior, derecho e izquierdo, y la opción de ocultar este bloque en la vista de escritorio o de móvil.

propiedades texto

En el propio bloque, al seleccionar el texto, aparecerá un editor con las opciones de cambiar la fuente de letra, el tamaño, y diferentes formatos como negrita, subrayado, añadir un enlace, etc.

editor de texto

Fuentes disponibles

En la mayoría de los editores de texto en línea tendemos a encontrar  el mismo conjunto de fuentes disponibles. ¿Por qué es tan limitado y por qué solo se pueden elegir estas fuentes? Porque son las que suelen estar instalados en nuestros dispositivos. Estas son las fuentes que normalmente se conocen como fuentes seguras, en inglés "web safe".

El conjunto de fuentes disponibles en nuestros ordenadores está definido por las fuentes que se incluyen en nuestro sistema operativo, aquellas agregadas por las aplicaciones que vamos instalando en nuestros dispositivos y las fuentes descargadas manualmente a lo largo del tiempo.

Como te puedes imaginar, la  lista de fuentes pre-instaladas puede variar mucho de un dispositivo a otro. Sin embargo, hay un conjunto de fuentes que se consideran comunes, y por lo tanto seguras. A esas fuentes nos referimos cuando hablamos de fuentes web seguras:

Son "seguras" porque están disponibles en casi todos los dispositivos. y "web" porque se usan al editar documentos en línea.

De forma general, encontrarás las fuentes web seguras en la parte superior de cualquier herramienta de edición. Suelen ser las siguientes:

- Arial

- Georgia

- Helvética

- Lucida Sans

- Tahoma

- Times New Roman

- Trebuchet MS

- Verdana

Ahora bien, el problema con estas fuentes es que son solo un puñado y, por lo tanto, una selección que limita el diseño y personalización de una campaña de email marketing.

Una solución es  expandir el conjunto de fuentes disponibles mediante el uso de fuentes web.

¿Para qué sirven las fuentes web?

Las fuentes web están disponibles en línea y son proporcionadas por servicios como Google Fonts. Tu dispositivo las descarga solo cuando es realmente necesario sin que tú tengas que descargarlas una por una.

Las fuentes web existen para ayudarnos a  expandir nuestras opciones de estilo de texto e ir más allá de las fuentes estándar seguras web (y limitadas). Existe una multitud de webs que te permiten descargar fuentes subidas por diseñadores y terceros, como son por ejemplo DaFont o MyFonts.

Parece la solución perfecta para un editor como el nuestro, pero no todos los clientes de correo electrónico las admiten, desafortunadamente.  Clientes de correo muy utilizados y conocidos, como por ejemplo Outlook, Gmail y Yahoo! no admiten algunas fuentes web y muestran el texto con su fuente por defecto.

Por esta razón, en nuestra herramienta  hemos creado grupos de fuentes equivalentes llamadas Fuentes de Reserva (en inglés, llamadas “font stacks”, o traducido literalmente "pilas de fuentes") usando hojas de estilo en cascada que le dicen automáticamente a cualquier programa de correo electrónico cómo volver a una fuente segura cuando ese cliente de correo electrónico no la admite. Estos grupos funcionan como una lista descendiente de opciones disponibles: es decir, si la primera no está disponible, pasa a la siguiente.

Fuentes de reserva en nuestra herramienta

En nuestra herramienta, las fuentes se agrupan de esta manera para ofrecer las mejores alternativas posibles. Esto  garantiza que el diseño no se rompa cuando la fuente seleccionada no sea compatible con el cliente de correo receptor.

Las variables que consideramos al construir estas pilas de fuentes son la forma y el tamaño de la fuente.

A continuación, puedes ver la lista simplificada de las fuentes de reserva disponibles en nuestro editor:

Fuente web > Lista de opciones de respaldo seguras para la Web

Amargo > Georgia > Times > Times New Roman > serif

Serif Droid > Georgia > Times > Times New Roman> serif

Lato > Tahoma > Verdana > Segoe > sans-serif

Abrir Sans > Helvetica Neue > Helvetica > Arial > sans-serif

Roboto > Tahoma > Verdana > Segoe > sans-serif

Fuente Sans Pro > Tahoma > Verdana > Segoe > sans-serif

Montserrat > Trebuchet MS > Lucida Grande > Lucida Sans Unicode > Lucida Sans > sans-serif

Ubuntu > Tahoma > Verdana > Segoe > sans-serif

Ten en cuenta que nos hemos centrado en el diseño de la tipografía y que no hemos agregado fuentes demasiado sofisticadas o complejas. Por ejemplo, hemos omitido la fuente “Lobster”, que no tiene una fuente equivalente apropiada y segura.

Imagen

Si quieres añadir una imagen, tendrás que arrastrar el bloque Imagen.

imagen

Propiedades del contenido

En las propiedades de este contenido podrás escoger algunas características tales como el tamaño de la imagen, el alineamiento, la url de la imagen, el texto alternativo, añadir un enlace al que dirija la imagen, definir márgenes y ocultar en vista móvil o de escritorio. En la opción Cambiar imagen podrás sustituirla por otra manteniendo esta configuración.

propiedades imagen

propiedades contenido imagen

Cuando añadas uno de estos bloques, en Buscar imagen tendrás acceso a tu biblioteca multimedia en la que podrás acceder a imágenes que hayas subido previamente, subir una nueva imagen o utilizar nuestro buscador de imágenes gratuitas libres de derechos de autor.

buscador de imagenes

Te recomendamos que las imágenes tengan el mismo ancho que el área de contenido, es decir, que no sobrepasen los 600 píxeles. En caso de que incluyeras una fila con dos columnas con una imagen cada una, te recomendamos que el ancho se ajuste también al área de contenido. 

Si quieres más información sobre cómo optimizar imágenes para email marketing (formatos, resolución y modo de color), consulta nuestro artículo.

Botón

El editor también permite añadir botones para remarcar los enlaces más importantes de tu campaña.

botón

Propiedades del contenido

En sus propiedades podrás seleccionar la URL que quieres enlazar, y el tamaño y los estilos del botón para que puedas integrarlo fácilmente con el resto del diseño del email. También podrás escribir el texto del interior del botón, y editarlo como un texto normal.

propiedades boton

mas propiedades boton

Esta es la mejor manera de enlazar a una URL propia o de enlazar un archivo, en lugar de adjuntar un documento como un PDF. Las plataformas de email marketing no permitimos adjuntos directamente en el email ya que afectan a la entregabilidad de las campañas, aumentando mucho la posibilidad de que los sistemas de correo detecten el contenido como spam, por lo que puedes crear un botón, seleccionar la opción de Enlazar archivo y subir el adjunto a Acumbamail. 

Este enlace puede abrir una página web o documento con una URL resultante, enviar un email, hacer una llamada o enviar un SMS. 

Separador

Otro de los contenidos que puedes incluir en tu plantilla es un separador, una linea para diferenciar los diferentes bloques o secciones de tu email.

separador

Propiedades del contenido

Como en los casos anteriores, el separador es editable en estilo, color, y grosor.

propiedades separador

Social

El bloque Social te permite incluir botones con enlaces a tus perfiles de redes sociales.

social

Propiedades del contenido

En este bloque, podrás seleccionar la colección de iconos que prefieras, y enlazarlos a los perfiles de tus redes para que estén accesibles para tus suscriptores.

propiedades social

propiedades botones sociales

HTML

El bloque de HTML te permitirá pegar código en la sección de la plantilla. Esta opción sólo es recomendable para usuarios que sepan utilizar este lenguaje de manera avanzada, ya que podría interferir en un correcto HTML de la plantilla, lo cual es un factor para acabar en la carpeta de SPAM.

htmlPropiedades del contenido

Simplemente tendrás que pegar tu código en la caja habilitada para ello.

propiedades html

Etiquetas de HTML permitidas

Nuestra herramienta corregirá automáticamente algunos errores, como por ejemplo las etiquetas HTML que se dejen abiertas y eliminará el código que no se pueda usar, como las etiquetas de Script o Iframe. Estas etiquetas de código no están admitidas por la mayoría de los clientes de correo electrónico y pueden causar problemas en la entregabilidad de tu campaña o riesgos de seguridad para el editor y las aplicaciones que lo ejecutan.

Lista de etiquetas permitidas:

a, abbr, acrónimo, dirección, área, b, bdo, grande, blockquote, botón, título, centro, citar, código, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, fuente, formulario, h1, h2, h3, h4, h5, h6, i, ins, kbd, etiqueta, leyenda, li, mapa, menú, ol, optgroup, opción, p, pre, q, s, samp, seleccionar, pequeño, span, strike, fuerte, sub, sup, mesa, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

Lista de atributos permitidos:

atributos generales: estilo, id, clase, data- *, título
a: href, nombre, objetivo
img: alinear, alt, altura del borde, hspace, src, vspace, ancho, usemap
table: align, bgcolor, border, cellpadding, cellspacing, ancho
tbody: alinear, valign
td: alinear, bgcolor, colspan, altura, rowspan, valign, ancho
tr: alinear, bgcolor, valign
tfoot: alinear, valign
th: alinear, bicolor, colspan, altura, rowspan, valign, ancho
thead: alinear, align
li: tipo
mapa: nombre
área: alt, coords, href, forma, objetivo

Vídeo

Con el bloque de Vídeo podrás enlazar un vídeo de YouTube o Vimeo, para que en el email se muestre una imagen destacada que lleve al usuario a este contenido.

videoPropiedades del contenido

Tendrás que pegar la URL del video, y se generará automáticamente una imagen destacada que estará enlazada con esta URL. Para modificar la imagen destacada, tendrás que modificarlo sobre el vídeo original alojado en Youtube o Vimeo.

propiedades video

Recomendamos que el ancho del vídeo se ajuste al ancho del área de contenido, es decir, que no sobrepase los 600 píxeles. Si incluyes columnas, el vídeo debería ajustarse al ancho de la columna. 

Stickers

También puedes añadir stickers animados que puedes buscar directamente en nuestro buscador.

stickersPropiedades del contenido

Puedes editarlos como cualquier otra imagen, e incluir una URL enlazada en ellos.

propiedades stickers

GIF

Al igual que con los stickers, también contamos con un buscador de GIF, o puedes incluirlos subiéndolos desde tu equipo como una imagen normal. Si subes GIFs propios, recuerda optimizarlos correctamente: el estándar suele ser de unos 600 píxeles de ancho. 

gif

Propiedades del contenido

También tiene propiedades editables como el resto de imágenes.

propiedades gif

Mover y duplicar bloques de contenido

Filas

En esta sección podrás escoger entre diferentes layouts para estructurar tu contenido en bloques. Puedes seleccionar una sola fila que ocupe todo el ancho, dos filas que ocupen cada una un porcentaje determinado, etc. 

Esta estructura es responsive por lo que el ancho se adaptará al dispositivos de visualización.

layout

Ajustes

En este apartado podrás configurar los ajustes generales que afectan a toda la plantilla. Podrás definir el ancho máximo del área de contenido, el color de fondo, el color del área de contenido, la fuente predeterminada, y el color de los enlaces. Todas estas propiedades podrán ser modificadas individualmente en cada módulo, pero las que selecciones aquí serán las que aparezcan por defecto. 

ajustes generales

Acciones

En el apartado Acciones podrás seleccionar dos opciones:

acciones

Si seleccionas Vista previa, podrás visualizar cómo se verá tu plantilla en escritorio y móvil. Esto es una previsualización genérica. Si necesitas previsualizar la plantilla en diferentes dispositivos, navegadores o clientes de correo concretos, podrás hacerlo en el paso 5 de la creación de campaña. 

vista previa

vista previa movil

Si seleccionas Mostrar estructura, podrás ver el layout con todos los bloques mientras editas la plantilla. 

estructura

Buenas prácticas para evitar la carpeta de SPAM

Tanto el HTML como el contenido que incluyas en el email, tienen una incidencia directa en la entregabilidad de tus campañas. Por eso, cuando edites tu plantilla con el editor, conviene que tengas en cuenta estas buenas prácticas para evitar errores que puedan hacer que llegue a la carpeta de correo no deseado.

Construcción del HTML

Etiquetas "alt" en imágenes

Todas las imágenes deben incluir su respectiva etiqueta alt="contenido_de_la_imagen". Además es muy útil en los gestores de email que no muestran las imágenes hasta que el receptor lo indica, ya que puedes incluir un texto que se verá desde el principio y que posteriomente será sustituido por la imagen. Pero cuidado, ya que incluir un texto que incluya palabras determinadas, y que más adelante listamos, pueden hacer que tu boletín vaya directamente a SPAM.

Imágenes demasiado grandes o pesadas

Procura que las imágenes de tus boletines no sobrepasen los 500kb, para ello, es recomendable utilizar formatos como .jpg o .png, estos últimos en el caso de imágenes que requieran transparencia.

Aunque tu imagen sea poco pesada, procura que no tenga una dimensiones muy grandes. Imágenes de grandes proporciones hacen ganar puntos negativos en tus envíos. Como referencia no sobrepases los 600px x 400px, siendo este ya un límite peligroso. En el caso de requerir que tu imagen cuente con estas dimensiones, divídelas en varios "bloques", que compongan las distintas partes de un puzle formado por tablas.

Relación imagen / texto

Incluir una proporción espacial de imágenes mayor que de texto también es un elemento negativo. Procura que la cantidad espacial de texto siempre supere a la cantidad espacial de imágenes. Evita usar un tamaño de letra excesivamente pequeño.

En este caso no se tiene en cuenta el color de fondo de una tabla o uno de sus componentes, por lo que evita utilizar imágenes si son para rellenar de un color una parte de la tabla.

Contenido del HTML

Redacción del mensaje

Debes tratar de reducir al mínimo el uso de mayúsculas en tu envío, así como las repeticiones en los signos de exclamación (¡¡¡!!!) e interrogación(¿¿¿???). Intenta no duplicar contenido dentro de tu envío, ni repetir frases o palabras más de estrictamente necesario, mas aún si se trata de cantidades de dinero o símbolos de monedas. Por supuesto, nada de palabras malsonantes o inapropiadas.

Intenta evitar una redacción demasiado comercial, un toque personal siempre será un punto a tu favor. Esto lo puedes conseguir usando como remitente un correo personal, añadiendo un postdata (la parte más leida dentro de un email) en tu plantilla y usando un saludo personalizado.

Por último, revisa siempre con detenimiento tu plantilla para evitar cualquier error ortográfico en la redacción.