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. 

Seleccionar plantilla para editar

En primer lugar, cuando estés creando una campaña puedes escoger entre: seleccionar alguna de las plantillas que ofrece Acumbamail (desde Nuevas Plantillas), reutilizar alguna de las que ya hayas utilizado (Mis Plantillas) o importar tu propia plantilla.

También tienes la posiblidad de empezar a editar dos plantillas desde el editor completamente adaptadas a tu diseño web, con tu logo y colores corporativos. Para generarlas, solo tienes que acceder a la vista general de plantillas e introducir la URL de tu sitio web.

Por otro lado, en cualquier momento puedes crear o modificar una plantilla desde el apartado de Plantillas  dentro de Boletines, para utilizarla más tarde en una campaña.

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. El editor está formado por tres partes:

• La plantilla en edición, a la izquierda
• El editor en sí, dividido en contenido, filas y ajustes
• Los botones en la parte superior izquierda de Vista Previa (visualizar la plantilla en distintos dispositivos) y Mostrar estructura (ver la plantilla por cuadrículas, lo que ayuda a diseñarla con más precisión), así como la opción de editar la plantilla en versión desktop (escritorio) y mobile sobre la marcha, viendo en todo momento cómo queda una versión y otra. Para más información sobre esta función, dirígete al apartado de opciones responsive.

Comandos generales del editor

Estas son las acciones básicas requeridas para empezar a utilizar el editor:

• Para añadir un bloque de contenido a la plantilla, basta con arrastrarlo al lugar que quieras.
• Si haces doble clic sobre el bloque de contenido concreto, podrás duplicarlo, eliminarlo o arrastrarlo a otro sitio haciendo clic sobre la cruceta blanca

• Igualmente, al hacer doble clic sobre un contenido concreto tendrás acceso a sus ajustes en la parte del editor, a la derecha

• Ten en cuenta que el área de contenido se engloba siempre dentro de una fila, por lo que si quieres modificar un elemento que afecte a toda la fila (por ejemplo, el color de fondo), tendrás que hacer clic sobre la fila concreta (la manera más fácil es hacer clic desde los laterales)

• Cuando hagas doble clic sobre la fila concreta, podrás acceder a los ajustes generales de esa fila a la derecha.
• Si quieres deshacer algún cambio, encontrarás a la izquierda un botón de deshacer una vez realices cambios en la plantilla. Si haces clic sobre el icono del reloj, podrás ver los últimos cambios realizados.

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, solo 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.

Título

Para añadir un bloque de título, debes arrastrar el bloque correspondiente al lugar de la plantilla al que quieras añadirlo. El bloque de título te ayudará a jerarquizar el contenido.

Puedes introducir títulos en tu plantilla de email para jerarquizar el contenido que incluyas, de la misma manera que en una página web o un blog con un título 1, 2 y 3 (H1, H2 y H3). 

Propiedades del contenido

En este sección se puede configurar lo siguiente:

• Generación automática de texto basada en IA (solo accesible para planes Pro y Enterprise).
• cambiar la jerarquía del título concreto (H1, H2 o H3), la fuente y su tamaño, el color del texto y de los enlaces, el interlineado y la dirección del texto.

Barra de herramientas emergente

Al hacer clic en el propio text aparece un menú o barra emergente desde donde se puede:

• Cambiar el estilo de la tipografía (negrita, cursiva, subrayado, tachado….)
• Insertar caracteres especiales
• Cambiar el color del texto concreto y resaltarlo en diferentes colores 
• Añadir un enlace o vínculo
• Añadir contenido personalizado para customizar tus envíos con, por ejemplo, el nombre de tus suscriptores. En este artículo te explicamos este aspecto. 

Texto (obsoleto)

⚠️ Este bloque permitía introducir texto en el diseño. No obstante, ha quedado obsoleto en favor de los nuevos bloques de tipo párrafo y lista.

Si tienes un bloque de este tipo ya incluído en tus diseños, podrás seguir editándolo con normalidad tal y como se describe en este apartado. No obstante, para incorporar nuevos textos a tus plantillas te recomendamos que uses los nuevos elementos párrafo y lista.

Propiedades del contenido

En esta sección 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, modificar el espaciado del texto, márgenes superior, inferior, derecho e izquierdo
• Opción de ocultar este bloque en la vista de escritorio o de móvil

Barra de herramientas emergente

En el propio bloque, al seleccionar el texto, aparecerá un editor con las opciones de cambiar:

• La tipografía, el tamaño, el estilo (bold, cursiva, subrayado, tachado….) y la alineación del texto
• Insertar caracteres especiales (en el icono de la omega) , superíndices o subíndices
• La opción de maximizar o minimizar el editor mientras estás modificando un texto
• Añadir listas numeradas o de viñetas 
• Cambiar el color del texto y resaltarlo en diferentes colores 
• Añadir diferentes tipos de enlaces (URL, email, archivos, llamada y sms). 
• También tendremos acceso a los enlaces especiales (ver en navegador, darse de baja, modificar datos y renovar consentimiento GDPR) y la posibilidad de añadir contenido personalizado para personalizar tus envíos con, por ejemplo, el nombre de tus suscriptores. En este artículo te explicamos en detalle cómo utilizar etiquetas personalizadas para cada suscriptor.

Asimismo, si copias y pegas un texto que esté en cursiva o en negrita, el editor de texto mantendrá ambos formatos. 

Párrafo

Este bloque permite introducir texto en el diseño.

Párrafo vs Texto

Este bloque es similar a su predecedor bloque de Texto, pero tiene algunas diferencias:

• Algunas opciones de formato se han movido desde la barra de herramientas que aparece sobre el propio bloque de texto al menú lateral (en el apartado de "Propiedades de contenido"). De esta manera la barra de herramientas queda más compacta y menos saturada de opciones. Estas opciones son:
  • Fuente (familia)
  • Tamaño de letra
  • Alineación del texto
  • Dirección del texto
  • Insertar listas (esto ahora se gestiona con el nuevo elemento Lista).
• En la barra de herramientas, se ha añadido:
  • Un nuevo botón junto al botón de emoticonos, que permite introducir un "non-breaking space". Este tipo de espacio ( ) entre dos palabras indica que son dos palabras que no pueden ser separadas con un salto de línea.
• En el apartado de "Propiedades de contenido", ahora también se puede configurar lo siguiente:
  • Grosor de la fuente: permite seleccionar entre las variantes normal o en negrita de la fuente.
  • Espaciado de párrafo: proporciona control sobre el espaciado entre el retorno de carro y el salto de línea. Esta opción te permite así aumentar o reducir el espacio entre párrafos.
• A diferencia del bloque de Texto, este elemento permite la generación automática de texto usando inteligencia artificial.

Propiedades del contenido

Puedes ajustar las siguientes características:

• Generación automática de texto basada en IA (solo accesible para planes Pro y Enterprise).
• Ajuste de la fuente: familia, grosor y tamaño.
• Ajuste de color: color del texto y color de los enlaces.
• Espaciado: interlineado, el espaciado del texto, espaciado entre párrafos, márgenes (superior, inferior, derecho e izquierdo).
• Dirección y alineación del texto
• Poder ocultar este bloque en la vista de escritorio o de móvil.

Barra de herramientas emergente

En el propio editor, al hacer clic sobre el texto del párrafo, aparece una barra de herramientas con las siguientes opciones de configuración:

• El estilo del texto (negrita, cursiva, subrayado, tachado, opciones de color, etc.)
• Insertar superíndices, subíndices, emoticonos, non-breaking spaces y caracteres especiales ( icono Omega).
• La opción de maximizar o minimizar el editor mientras estás modificando un texto
• Añadir diferentes tipos de enlaces (URL, email, archivos, llamada y sms). 
• Acceso a enlaces especiales (ver en navegador, darse de baja, modificar datos y renovar consentimiento GDPR)
• Acceso a contenido personalizado para personalizar tus envíos con, por ejemplo, el nombre de tus suscriptores. En este artículo te explicamos en detalle cómo utilizar etiquetas personalizadas para cada suscriptor.

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

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.

Lista

El bloque de lista complementa al bloque Párrafo, ya que también permite introducir texto pero con el formato específico de lista. Es por ello que comparten opciones de configuración.

A continuación se mencionan las opciones específicas de este bloque.

Propiedades del contenido

Para el bloque de tipo lista es posible configurar lo siguiente:

• Tipo de lista: permite elegir una lista ordenada o desordenada.
• Estilo de lista: permite seleccionar algunas opciones básicas de estilo para la lista.
• Empezar lista desde: es una opción accesible si se elige una lista ordenada. Permite indicar a partir de qué número se inicia la numeración. Es útil, por ejemplo, en caso de que se utilicen distintos bloques para representar una misma lista.
• Espaciado de elementos de la lista
• Sangría de los elementos de la lista
• Generación automática de texto basada en IA (solo accesible para planes Pro y Enterprise).

Imagen

Si quieres añadir una imagen, tendrás que arrastrar el bloque 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.

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.

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.

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.

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. El archivo estará disponible en una pestaña adicional al hacer clic sobre el botón. 

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

También puedes enlazar a un evento de calendario al que accedan tus suscriptores por medio de un iCalendar o archivo ICS. Basta con crear el archivo ics (hay muchas páginas donde puedes crearlo gratuitamente, buscando en Google sin problema), descargar el archivo resultante y añadirlo en la opción de Enlazar archivo de la misma manera que adjuntarías un archivo adjunto. Tus suscriptores accederán al evento de calendario desde su aplicación correspondiente (Google Calendar o similares) y podrán confirmar su asistencia. 

Este elemento también permite la generación automática de texto basada en IA (solo accesible para planes Pro y Enterprise).

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.

Propiedades del contenido

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

Espacio

Este bloque permite añadir espacio separador en la plantilla. Aunque esto también se puede conseguir con el bloque Separador (haciendo la línea transparente), este bloque específico permite proceder con mayor rapidez.

Propiedades del contenido

La configuración de este bloque es muy sencilla. Solo tienes que introducir los píxeles que ocupará el alto del bloque.

Social

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

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.

Pero no solo podrás enlazar directamente a tus redes sociales, sino que también podrás fomentar que se comparta tu campaña de email en redes sociales con un solo clic si seleccionas la opción de Participación social al añadir un icono. 

Una vez selecciones el botón de participación social, aparecerá con la etiqueta de Share en el editor. Podrás añadir asimismo un texto con el que por defecto se comparta tu publicación. A continuación, puedes ver un ejemplo:

Y así se vería cuando un suscriptor haga clic en el botón de compartir en redes sociales:

Si quieres cambiar de sitio el enlace (para que aparezca después del texto), recuerda poner primero el texto y añadir la etiqueta [ShareOn] al final:

Por último, si quieres añadir un enlace directo a tu Whatsapp Business, puedes consultar la información en este artículo. 

HTML

El bloque de HTML te permitirá pegar código HTML en la sección de la plantilla. Esta opción sólo es recomendable para usuarios avanzados 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.

Propiedades del contenido

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

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.

Propiedades 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.

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. 

Iconos

También puedes añadir iconos a partir de imágenes que hayas subido anteriormente en Acumbamail o seleccionar uno ya disponible. 

Propiedades del contenido

Cuando hayas arrastrado el bloque de icono, haz clic sobre Añadir icono en Propiedades de contenido:

Después, podrás seleccionar un icono que hayas añadido a la galería de Acumbamail recientemente al hacer clic en el botón azul de Cambiar imagen.

Asimismo, en el panel de la derecha podrás cambiar el tamaño del icono, su posición y su alineación, entre otros aspectos. 

Menú

Puedes añadir un menú para facilitar la navegación por la plantilla de email o resaltar un aspecto o enlace determinados. 

Propiedades del contenido 

Una vez hayas arrastrado el menú, en el apartado de Propiedades de contenido a la derecha, podrás empezar a añadir apartados incluidos en tu menú o índice haciendo clic en Añadir elemento.

Para cada elemento del menú podrás modificar:

• El texto 
• El tipo de enlace (abrir página web o enlazar archivo, enviar email, hacer llamada o enviar SMS)
• El target, es decir, si el enlace se abrirá en una pestaña nueva o en la actual 

Si añades diferentes elementos al menú, puedes pinchar sobre ellos para reorganizarlos:

Más abajo podrás cambiar elementos globales del menú como la fuente, el color de fuente y enlaces o si quieres que el menú tenga una orientación vertical u horizontal. 

Añadir un menú para el móvil 

Para mejorar la navegación y usabilidad en dispositivos móviles, también puedes añadir lo que se conoce como menú hamburguesa. 

El nombre menú hamburguesa hace referencia al icono representado por tres rayas horizontales que indica un menú desplegable. Este tipo de menú desplegable se utiliza principalmente en las versiones móviles de las páginas para ahorrar espacio de pantalla.

Para incluir un menú hamburguesa, has de activarlo desde propiedades de contenido. Una vez activado, podrás personalizarlo como quieras. 

Cuenta atrás

Para nuestros usuarios con planes PRO y Enterprise existe la opcion de añadir una cuenta atrás.

Una vez arrastres el bloque de cuenta atrás, accederás a una ventana emergente para configurar tu cuenta atrás:

• Tipo de temporizador: para marcar una fecha determinada (podrás seleccionar la zona horaria y la fecha), que dé comienzo al abrir el email o cuando se empiece a enviar la campaña 
• Estilo del temporizador: normal, en forma de círculos o con bloques 
• Tamaño y colores del temporizador 
• Idioma, podrás seleccionar el que quieras y los cambios se aplicarán al momento 
• Fuente del texto y de los dígitos 
• Imagen de fondo 
• La opción de mostrar una imagen cuando termine la fecha 

Una vez hagas todos los cambios pertinentes, puedes darle a Guardar y cerrar.

GIFs

Puedes incluir GIFs 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. También contamos con un buscador de GIFs.

Propiedades del contenido

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

Stickers

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

Propiedades del contenido

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

Filas

En esta sección encontrarás distintas categorías de filas que podrás arrastrar e incluir en tu diseño.

Filas vacías

Esta categoría incluye filas sin contenido, pero con diferentes layouts que te permitirán estructurar tu contenido en bloques. Podrás seleccionar una sola fila que ocupe todo el ancho, dos columnas de igual tamaño, dos columnas que ocupen cada una un porcentaje determinado, etc.

El máximo de columnas que puedes añadir son seis. Ten en cuenta que el contenido que añadas siempre estará supeditado a la estructura que tenga la fila en la que se incluya. Esta estructura es responsive por lo que el ancho se adaptará a los dispositivos de visualización.

Filas predefinidas

Si dispones de una tarifa de pago, en la pestaña de Filas encontrarás un desplegable adicional con una serie de categorías.

Encontrarás filas predefinidas en las siguientes categorías:

• Cabecera. Aquí encontrarás filas con distribución de contenidos útiles para la cabecera de tus emails o páginas de aterrizaje.
• Contenido. Aquí encontrarás filas con distribución de contenidos útiles para el cuerpo o parte central de tus emails o páginas de aterrizaje.
• Pie de página. Aquí encontrarás filas con distribución de contenidos útiles para la parte final de tus emails o páginas de aterrizaje.

Puedes aprovechar estas filas predefinidas como un punto de partida (tanto de estructura como de contenidos), donde solo tendrás que personalizar los colores, imágenes, textos y enlaces ya ubicados.

Guardar filas personalizadas

Aparte de las filas predefinidas, tienes la posibilidad de crear y guardar tus propias filas. Una vez guardes una fila, está será reutilizable en el resto de tus plantillas.

Para guardar una fila, solo tendrás que seleccionarla y darle al botón de guardar (el primero de los tres botones en la esquina superior derecha).

Esto abrirá un popup donde tendrás que elegir el nombre de tu fila y decidir bajo qué categoría se va a guardar. Las categorías disponibles son: Cabecera, Contenido, Pie de página y Otros.

Además, debes decidir si quieres que esta fila sea sincronizada o no. ¿Qué significa que una fila sea sincronizada? Significa que si una vez guardada la fila, la añades en x diseños de plantilla de email diferentes, cuando edites el contenido de la fila y lo guardes (en cualquiera de esas plantillas), los cambios se propagarán al resto de plantillas de email donde la fila está incluida.

Una vez guardada, si seleccionas su categoría podrás encontrarla junto al resto de filas predefinidas.

Debes tener en cuenta que esta funcionalidad no está disponible en la tarifa gratuita. Para tarifas de pago, dependiendo del plan especifico podrás guardar un número determinado de filas . Si has llegado a tu límite de filas guardadas, la acción de guardado no podrá completarse.

Editar fila guardada

Una vez que has guardado una fila, podrás arrastrarla para añadirla a cualquiera de tus plantillas, siempre que sean del mismo tipo. Esto significa que las filas guardadas para las plantillas de email no te aparecerán en el editor de páginas de sitio web y viceversa.

Aquí hay dos escenarios posibles:

• Que la fila sea una fila normal (no sincronizada), o
• Que la fila sea una fila sincronizada

Para el caso de una fila reutilizable normal, partiendo de una fila guardada, si la arrastras al editor y aplicas cambios sobre esta tienes dos opciones:

• Guardar una nueva fila con los cambios. De esta forma, seguirás teniendo disponible la fila original (la primera que guardaste) y esta nueva versión por separado. Para ello tendrás que marcar "No" en la opción de ¿Sobreescribir fila existente? (opción por defecto).
• Sobreescribir la fila original con los cambios. De esta manera podrás cambiar el nombre de la fila, moverla de categoría o bien actualizar su contenido. Para ello tendrás que marcar "Sí" en la opción de ¿Sobreescribir fila existente?

Para el caso de una fila reutilizable sincronizada, partiendo de una fila guardada, si la arrastras al editor e intentas editarla, verás que no te deja hacerlo, ya que los elementos que la componen parecen estar bloqueados. Debes hacer clic sobre el área general de la fila y darle al botón de editar fila (lápiz) o bien al botón de "Editar fila sincronizada" en las opciones a la derecha.

Esto abrirá un popup con dos opciones:

• Puedes optar por editar la fila sincronizada de forma que, efectivamente, al actualizarla y guardar los cambios, estos se propaguen al resto de plantillas donde esté la fila presente. Para ello elige la opción de "Editar fila sincronizando cambios".
• Puede que necesites aplicar los cambios solo en esta plantilla específica y no en el resto de plantillas donde esté presente la fila. En ese caso puedes optar por desvincular esta fila del resto. Para ello elige la opción de "Desvincular fila".

En caso de que edites la fila aplicando la sincronización, verás que el editor se recarga para mostrar solo el contenido de la fila que quieres editar. En este modo, puedes aplicar todos los cambios que consideres y darle al botón de "Guardar fila".

Cada vez que guardes la fila, te permitirá actualizar el nombre asignado a la fila, así como la categoría en la que está incluida.

Una vez hayas terminado de aplicar los cambios, puedes darle al botón de "Volver al diseño" para recuperar el contexto anterior y poder seguir editando el contenido de tu diseño de email.

Podrás comprobar que en la plantilla de email inicial se ven reflejados los cambios aplicados en la fila editada y, cuando abras cualquier otra plantilla de email que también contenga esta fila, los cambios también estarán presentes.

⚠️ IMPORTANTE: Esta acción de guardado conlleva un proceso de sincronización de la fila en todas las plantillas de email donde esté presente. Si son muchas plantillas, aunque veas que se confirma la acción de guardado, ten en cuenta que puede tardar unos minutos en aplicar la sincronización en todas las plantillas.

Eliminar fila guardada

Puedes eliminar las filas que ya no te resulten útiles. Para ello hay que hacer clic en el botón de Eliminar que aparece en la esquina inferior derecha de cada fila. Una vez hayas hecho clic y confirmes la acción la fila será eliminada.

En caso de que elimines una fila sincronizada que esté incluida en una o más plantillas, esto interrumpirá el proceso de sincronización.

Añadir color o imagen de fondo a tu plantilla

Si quieres añadir un fondo determinado para tu plantilla, ya seo otro color plano o una imagen de fondo, ten en cuenta que tendrás que modificar el fondo para cada fila, ya que funcionan como bloques independientes. Los pasos que tienes que seguir son: 

• Hacer doble clic sobre una fila concreta (desde los laterales)
• Si quieres cambiar el color actual a otro, seleccionálo a la derecha, en Color de fondo de la fila dentro de Propiedades de la fila 
• Si quieres cambiar el fondo a una imagen concreta, activa la opción Imagen de fondo de fila. Después, selecciona la imagen con el botón Cambiar imagen. En esta opción podrás elegir que la imagen de fondo ocupe el ancho completo (recomendado), aparezca repetida como un moisaico o quede centrada. Si quieres que todas las filas tengan este fondo concreto, tendrás que repetir el proceso fila por fila. 

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, si quieres que el área de contenido esté alineao a la izquierda o centrado, 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. 

Vista previa / Mostrar estructura

En este apartado, en el margen superior izquierdo del editor, podrás encontrar dos botones:

Vista previa

Si seleccionas Vista previa, podrás visualizar cómo se verá tu plantilla en escritorio y móvil. Esta 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.

También podrás hacer cambios mientras ves la vista en escritorio y móvil en la opción más abajo.

Mostrar estructura

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

Responsive para dispositivos móviles

Cuando utilizamos el término «responsive» (adaptable) nos referimos a la capacidad de adaptabilidad de un diseño para visualizarse correctamente en diferentes dispositivos, desde ordenadores de escritorio a tablets y móviles.

Además de la opción de mostrar una vista previa adaptada a distintos dispositivos vista más arriba, en el propio editor tienes a tu disposición herramientas específicas para facilitar esta adaptabilidad.

Ver versión escritorio y móvil

Además de poder acceder a una vista previa de tu plantilla, puedes ver cómo queda tanto en la versión desktop (escritorio) como móvil sobre la marcha, mientras la vas editando.

Ocultar en escritorio o móvil

Todos los bloques de contenido cuentan con la opción de ocultarse tanto en la versión desktop como en la versión móvil. Podrás utilizar esta opción al hacer clic sobre un bloque de contenido, en el lateral inferiror derecho de Opciones de módulo.

Esta opción nos da la posibilidad de duplicar nuestro contenido y asegurar que sea totalmente responsive. Por ejemplo, si vemos que un texto no se está adaptando correctamente a la versión móvil siempre podemos duplicar dicho texto, y ocultar cada uno en un dispositivo, y adaptar el que se enseñará en la versión móvil para asegurar su correcta visualización.

Apilar o no en móvil

Esta opción está disponible para que las columnas se visualicen igual en dispositivos móviles que en la versión de escritorio. Cabe destacar que cuantas más columnas tengan nuestras filas manteniendo la opción de “No apilar en el móvil” desactivada, más comprometeremos la adaptabilidad de nuestro diseño, especialmente en los módulos que contengan texto.

Por eso esta opción está siempre activada por defecto y nuestra recomendación es que permanezca así. La mejor opción es que, aunque hayamos hecho un diseño concreto en la versión de escritorio, la versión móvil tenga un diseño diferente, en el que todo el contenido se apila y sale uno a continuación del otro, sin distinción entre columnas, para asegurar una mejor visualización. 

Buenas prácticas para evitar 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.

Generación de texto con inteligencia artificial

En algunos bloques es posible generar de forma automática textos con la ayuda de la inteligencia artificial. Esto está disponible solo para usuarios Pro y Enterprise y en los siguientes bloques:

• Título
• Párrafo
• Lista
• Botón

Para generar el texto, solo hay que ir a las "Propiedades de contenido" del bloque y hacer clic en el botón "Escribir con IA".

Esto abre una nueva vista con una caja de texto, donde puedes introducir una petición, a raíz de la cual se generará el texto (haciendo clic en el botón de "Generar").

Hay que tener en cuenta que todas las generaciones toman como referencia las peticiones previas que se hayan hecho. Para resetear el historial, puedes hacer clic sobre "Reinicia con un nuevo tema".