Questions? Feedback? powered by Olark live chat software
Acumbamail - Tú creas el contenido, nosotros lo enviamos.

Soporte

Desde nuestra base de conocimiento puedes resolver todas tus dudas

Llámanos al 91 278 40 71 o escríbenos a soporte@acumbamail.com

Añadir contenido a tu plantilla

Índice / Editor de plantillas - 14 de Febrero de 2018 a las 10:49


Cómo añadir vídeos a tus newsletters
Cómo usar fuentes web en nuestro editor
Diseñar configurando la propiedad Relleno
Diseñar configurando la propiedad Borde
Diseñar una newsletter con HTML personalizado
¿Cómo utilizo el Administrador de archivos?


Cómo añadir vídeos a tus newsletters


Una manera fácil de añadir contenido de YouTube o Vimeo

El módulo VIDEO te permite añadir un vídeo en tus newsletters en tan solo unos clics. Solo necesitas copiar y pegar la URL de YouTube o Vimeo donde está alojado tu vídeo y la herramienta se ocupará del resto. De forma automática, se quedará con la imagen de portada del video, añadirá el ícono de Play encima y se enlazará al vídeo correspondiente.

Módulo de vídeos

¿Cómo funciona?

Dentro de la pestaña Contenido, en el panel de edición, encontrarás un nuevo módulo llamado “Video". Arrástralo a tu plantilla para empezar.

Módulo de vídeo

En el panel de Propiedades de contenido se te pedirá que añadas la URL del video de YouTube o Vimeo, dos de las plataformas de alojamiento de vídeos más populares actualmente.

Módulo de vídeo / URL

Una vez insertada la URL, en el panel de contenido se generará automáticamente la imagen de portada del video asociada a la URL con un icono de Play. Puedes editar el tipo de botón, su color y su tamaño para personalizar su aspecto.

Módulo de vídeo / URL

1. Selecciona el tipo de icono que mejor se ajusta al resto de tu diseño (redondo, cuadrado, rectangular…)

Módulo de vídeo / Opciones

2. Elige el color del icono de Play en función de la portada del vídeo (oscuro o claro). La idea es que resalte lo más posible y tu suscriptor lo vea en seguida.

Módulo de vídeo / Opciones

3. Por último, elige el tamaño del botón. ¡Y listo!

Módulo de vídeo / Opciones

Notas sobre la inserción de video en tus newsletters

Esta funcionalidad no integra el video real en el correo electrónico diseñado con nuestra herramienta, sino que lo enlaza de forma automática.

La razón por la cual el contenido de video real no se incrusta como tal en tu newsletter es que, desafortunadamente, suele dar errores. Muchos clientes de correo electrónico no lo admiten y esto hace que tu newsletter pueda terminar en la carpeta de SPAM. Apple ha estado intentando facilitar esto para soportar el vídeo en iOS estos últimos años (si estás interesado, se explica en detalle en este artículo de Email on Acid).

Además, a día de hoy, la mayoría de los correos electrónicos se abren en dispositivos móviles y la visualización de videos en dispositivos móviles supone un uso importante de datos, lo cual acaba afectando la experiencia de usuario debido a la calidad de la conexión de datos.

En Acumbamail creemos que la solución y alternativa que hemos elegido proporciona los mejores resultados y la mejor experiencia de cliente.

Cómo usar fuentes web en nuestro editor



Con nuestra herramienta tienes una serie de fuentes web populares además del conjunto predeterminado de fuentes web seguras.

Éstas fuentes te ayudarán a darle un toque más personal a tus newsletters además de mantener un diseño claro y legible.

Léete este post para informarte de cómo se visualizan las fuentes web en diferentes clientes de correo electrónico, ya que no todas las fuentes son 100% compatibles.

¿Qué son y para qué sirven las fuentes seguras para la web?

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:

- "seguras" porque están disponibles en casi todos los dispositivos.

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

Diseñar configurando la propiedad Relleno


Opciones de la propiedad de relleno

Nuestra herramienta te da el poder de controlar con detalle la propiedad Relleno de tus newsletters en la sección Opciones de módulo que se encuentra seleccionando el módulo, en la parte inferior derecha del panel. Puedes configurar el Relleno (del inglés “Padding”) alrededor de un módulo hacia todos los lados a la vez, o individualmente para cada lado (Superior, Inferior, Derecha, Izquierda).

Opciones de la propiedad de relleno

Diseñar configurando la propiedad Borde


Opciones de la propiedad de borde

Opciones de la propiedad de borde

Para los elementos de tipo estructural y de contenido donde se pueda configurar la medida de los bordes, tienes la opción de hacerlo hacia todos los lados o configurar la medida de los bordes de cada lado individualmente (Superior, Inferior, Derecha, Izquierda). Esto te da una gran flexibilidad para personalizar la apariencia de tus campañas de emailing.

Diseñar una newsletter con HTML personalizado


Visión de conjunto

El módulo de contenido “HTML” te permite añadir fácilmente tu propio código HTML a una plantilla prediseñada con nuestra herramienta. Si sabes utilizar un bloque de texto, sabrás también hacer esto.

Solo para expertos en HTML: Usar tu propio código puede afectar la forma en que aparece el correo en los diferentes clientes de correo electrónico. Corres el riesgo de que no se ajuste al tamaño de la pantalla del suscriptor. Asegúrate de usar un HTML que sea compatible con el cliente de correo receptor y que sea responsive.

¿Por qué es interesante usar mi propio código HTML?

Existen algunos casos concretos en los que tiene sentido diseñar una newsletter utilizando tu propio código HTML:

- Puedes añadir contenido más personalizado

No estarás limitado por un conjunto de parámetros predefinidos y, por lo tanto, podrás tener un control más preciso de los estilos aplicados y de la apariencia general de tu newsletter.

- Añadir video HTML 5, anchor links, etc.

Ahora puedes añadir contenido que no está disponible como un elemento de contenido estándar en el editor (video HTML 5, enlaces de anclaje o anchor links, etc.).

- Añadir efectos avanzados con CSS

¡Sé creativo y añade animaciones a tus campañas de email marketing! Los principales clientes de correo electrónico no soportan animaciones. Sin embargo, si tienes conocimientos técnicos o alguien en tu equipo sabe hacerlo y con cuidado, puede ayudar a que tu campaña sea un real éxito y se haga viral.

- Añadir contenido en vivo de proveedores externos

Recomendaciones de productos, anuncios dinámicos, mapas personalizados, una cuentas atrás ... todo este tipo de contenido ahora se puede incluir fácilmente con nuestra herramienta. Simplemente copia y pega el código que te proporciona el proveedor o la herramienta con el que estás trabajando, ¡y listo!

¿Cómo inserto mi propio código HTML?


Para insertar tu propio código HTML, simplemente arrastra el módulo HTML a tu plantilla. Lo puedes colocar solo, combinarlo con otros elementos de contenido HTML o combinándolo con otros módulos (una imagen, un botón, botones sociales…):

Cómo inserto mi propio código HTML

El módulo recién insertado se mostrará con un texto de relleno que por defecto pone “Soy un nuevo bloque HTML”.

Haz clic en el texto que te aparece en la plantilla en vista previa donde has arrastrado el módulo HTML. A la derecha aparecerá el panel de propiedades que puedas editar el código HTML. Encontrarás un código de relleno dentro de este área para que lo edites y añadas tu propia código.

Cómo inserto mi propio código HTML

Pega tu propio código HTML o escríbelo directamente en el área de edición. El sistema resaltará la sintaxis e intentará tabular y reorganizar tu código para que sea más legible.

¿Qué etiquetas HTML están 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

¿Cómo utilizo el Administrador de archivos?


¿Para qué sirve?

Nuestra herramienta incluye un Administrador de archivos. Lo usarás para buscar y seleccionar las imágenes y archivos que deseas añadir a tus newsletters.

Lo usarás para:

- Buscar y ordenar archivos existentes

- Importar nuevos archivos

- Crear carpetas

- Ver una vista previa e insertar imágenes

¿Qué aspecto tiene el Administrador de archivos?

El administrador de archivos se abre desde el editor, ocupará toda la pantalla para que puedas diseñar tus newsletter con comodidad. Esto te permite navegar por los archivos sin preocuparte por su tamaño o la resolución de tu pantalla.

En la parte superior del editor encontrarás tres botones que te permiten cargar una foto, importarla, y buscar fotos gratis). Gran parte del espacio de trabajo será utilizado para que puedas visualizar tus archivos y solo se muestra la información que necesitas para trabajar y seguir editando tu plantilla.

Administrador de archivos

¿Cómo accedo al Administrador?

El Administrador de archivos aparecerá en varios casos:

1. Cuando hagas clic en el botón Buscar que aparece cuando quieres añadir una imagen a tu plantilla, cuando arrastras y sueltas el módulo imagen en la plantilla.

Soltar archivos

2. Cuando haces clic sobre el botón Cambiar Imagen en el panel de propiedades de contenido:

Cambiar imagen

3. Cuando haces clic en Enlazar archivo a la hora de añadir botones e imágenes:

Enlazar un archivo

¿Cómo se suben los archivos?

La forma más rápida de subir un archivo al administrador de archivos es arrastrándolo desde tu ordenador hasta la ventana del administrador de archivos, y colocándolo en el área de carga. ¿Fácil, verdad?

Soltar un archivo

Existen otras formas de hacerlo. Cuando utilizas el editor en pantalla completa y no puedes arrastrar el archivo directamente desde tu escritorio, simplemente haz clic en el botón Carga y selecciona en tus carpetas el archivo que quieres añadir.

Límites tamaño de archivo:

El tamaño máximo de archivo permitido es de 12 MB.

Los tipos de archivos permitidos son imágenes, pdf, MS Excel, MS Word y otros documentos de texto comunes.

¿Cómo puedo importar archivos desde otras aplicaciones?

El botón IMPORTA te permite conectar con aplicaciones externas como Facebook, DropBox, Google Drive, Instagram e importar tus archivos que se encuentren alojadas en otras plataformas o herramientas.

Importar un archivo

¿Cómo puedo buscar imágenes?

Para encontrar la imagen que buscas, explora tus carpetas y ordena tu contenido por nombre, fecha, tamaño o tipo haciendo clic en las etiquetas de clasificación que se encuentran en la parte superior de la lista.

Si aparece una flechita al lado de estas etiquetas significa que es el filtro está actualmente en uso y su orientación (ascendente o descendente) te indicará el orden.

¿Demasiados archivos subidos en la carpeta seleccionada?

Haz clic en el icono de la lupa para ejecutar una búsqueda. Los resultados serán filtrados en tiempo real. Ten en cuenta que esta búsqueda se realiza solo en la carpeta actual y no en la totalidad del administrador.

¿Cómo puedo utilizar y eliminar archivos?

Cuando muevas el cursor sobre un archivo o una carpeta, esa fila resalta y los iconos de acción disponibles se muestran en el lado derecho. Tendrás varias opciones:

- Insertar y previsualizar archivos

- Eliminar archivos y carpetas

Si una acción no está disponible se te notificará inmediatamente con un mensaje.

Por ejemplo, si intentas eliminar una carpeta que contiene archivos, esto pasará porque solo se pueden eliminar carpetas vacías.

Si deseas eliminar varios archivos o carpetas, usa las casillas de las check box de la izquierda para seleccionarlos, la opción de eliminar se mostrará en la parte superior de la lista. Solo los elementos que se pueden eliminar tendrán una casilla seleccionable.

Importar un archivo

¿Cómo puedo organizar las carpetas?

Puedes crear la estructura de carpetas que prefieras para organizar tus archivos: lo importante es que tú los encuentres lo antes posible. Para añadir nuevas carpetas haz clic en el botón de la derecha “Agregar carpeta”.

Elige el nombre de tu carpeta: puedes usar letras (mayúsculas y minúsculas), números, espacios, puntos (.), Guiones (-) o guiones bajos (_).

Para volver a la carpeta principal, utiliza la ruta de exploración superior. Haz clic en el ícono de inicio para volver a la carpeta superior.

Regístrate gratis

Comienza a usar gratis nuestro servicio y disfruta de 2.000 emails al mes para siempre. No necesita tarjeta de crédito