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

Ajustes generales y estructura de tus plantillas

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


Configuración del cuerpo
Pestañas: Cuerpo, Estructura y Contenidos: ¿Cómo funcionan?
¿Cómo cambio las propiedades de una fila?
     A cada dispositivo su tamaño
¿Cómo selecciono una fila vs. contenido?



Configuración del cuerpo


En la pestaña Cuerpo, puedes configurar las opciones generales que se aplican a todo el cuerpo de la plantilla.

Opciones del contenido

En esta pestaña vas a poder configurar:

- el ancho del área de contenido: establece el ancho máximo del área correspondiente al contenido del correo. Esto es especialmente útil cuando la pantalla del dispositivo es más grande que el ancho por defecto. En dispositivos pequeños, esto será ignorado.

- el color de fondo: el color de fondo por defecto. Podrás personalizar y cambiar el color de los diferentes elementos del correo: las columnas, los bordes, las filas y los áreas de contenido.

- el color de fondo del mensaje: el color de fondo por defecto que corresponde al área del cuerpo del correo, donde irá el texto de tu correo.

-la fuente predeterminada: la familia de fuentes por defecto que se aplicará a todos los elementos del cuerpo. Por supuesto, podrás personalizar la fuente de cada elemento por separado.

- el color del enlace: el color del enlace predeterminado que se aplicará a todos los enlaces presentes en el cuerpo de la newsletter, a menos que decidas personalizar el color de cada enlace.

Pestañas: Cuerpo, Estructura y Contenidos: ¿Cómo funcionan?


Un diseño flexible

Una de las mayores ventajas de la herramienta es que aporta a los más creativos una gran flexibilidad a nivel de diseño.

Esto se ha logrado separando la configuración del Cuerpo (configuraciones que se aplican a la totalidad del cuerpo del correo), de la Estructura general (las filas de contenido en el mensaje, que se pueden añadir, eliminar, copiar y mover) y del Contenido (imágenes, texto, botones, HTML etc que también se pueden añadir, eliminar, copiar y mover).

Pestaña Cuerpo
Configuraciones generales aplicadas al cuerpo del correo

Son heredadas por la configuración de los bloques de Estructura y Contenido. Por ejemplo, la familia de fuentes establecida en la configuración del Cuerpo se utilizará en la totalidad de la plantilla, excepto si decides personalizar la fuente de los diferentes elementos del correo.

Esto es muy útil para construir un mensaje coherente y unificado de forma rápida y sencilla. Lo que configures en esta pestaña se aplica a la totalidad de tu plantilla.

Color del cuerpo

Pestaña Estructura
Aquí encontrarás los diferentes tipos de filas que puedes insertar en el correo.

Las filas son estructuras del correo que definen la composición horizontal de una sección de la plantilla mediante el uso de columnas. Puedes configurar hasta cuatro columnas.

Utilizar más de una columna te permite poner diferentes elementos de contenido uno al lado del otro.

Puede añadir a tus mensajes todos los elementos estructurales que necesites, independientemente de la plantilla seleccionada inicialmente.

Cada fila se puede configurar de forma independiente lo cual permite una gran flexibilidad que antes solo se podía conseguir con conocimientos informáticos, con código.

Por ejemplo, puedes seleccionar un color de fondo para toda la fila, solo un área del correo o una columna específica dentro de ella.

Estructura de las filas

Pestaña Contenido
Esta pestaña incluye una serie de módulos que son los diferentes tipos de contenido que puedes añadir a tu plantilla a la hora de diseñar tu correo: imágenes, vídeos, tu propio código HTML…

Estructura de las filas

Para añadir un módulo, simplemente arrastra el que quieras dentro de una de las columnas sin contenido: se ajustará automáticamente al ancho de la columna en cuestión.

Cada módulo de contenido tiene su propia configuración y opciones de personalización. Por ejemplo, tendrás un control absoluto sobre el relleno. La propiedad relleno establece el ancho máximo de algunas o todas las zonas de relleno alrededor de los elementos de contenido. El panel de la derecha que aparece es un panel de propiedades que te permite configurar el módulo seleccionado.

Conficuración del módulo / Opciones

¿Cómo cambio las propiedades de una fila?


Primero, coloca el cursor sobre un área del correo que no contenga contenido ni texto. Aparecerán dos nuevas opciones. Luego, haz clic sobre este área para seleccionarlo.

En el lado derecho del editor aparecerá un panel con las propiedades que se aplican a toda la fila (por ejemplo: color de fondo, imagen de fondo, relleno, etc.) y que puedes configurar a tu gusto.

propiedades de fila/columnas

… y otras que se aplican a cada columna que compone la fila. Una fila puede contener varias columnas y puedes personalizar cada columna de forma independiente.

Configuración de columnas en los dispositivos móviles: aprende a utilizar la funcionalidad "No apilar en mobile"


El contenido de un correo electrónico se suele organizar en varias columnas. Cuando se visualiza en un dispositivo móvil, esas columnas pueden volverse bastante estrechas y afectar considerablemente la legibilidad del correo y por lo tanto, el efecto deseado con una campaña.

Para garantizar una mejor experiencia de usuario a la hora de leer tus newsletters en dispositivos móviles, nuestra herramienta genera un código HTML de forma automática que hace que las columnas se acumulen verticalmente y el correo se vuelva responsive. De esta forma no le hará falta al usuario utilizar el zoom: simplemente tendrá que hacer scroll para ir leyendo el contenido de arriba hacia abajo. Esto se conoce como el “apilamiento vertical”.

Vista previa del escritorio VS mobile

Vista previa en escitorio

Vista previa en móvil

El apilamiento vertical es compatible con los principales clientes de correo electrónico. En algunos casos, se mostrará la versión de escritorio. Esto sucede cuando un cliente de correo no tiene soporte CSS estándar.

A cada dispositivo su tamaño


Aunque suele ayudar, hay casos en los que el apilamiento vertical de las columnas puede no resultar en una visualización óptima para el suscriptor.

Un escenario común es usar una fila para mostrar una barra de navegación con enlaces de texto o íconos. En ese escenario, como se muestra a continuación, un diseño vertical podría crear espacios vacíos excesivos y ocultar algunos elementos importantes del correo o darle demasiada visibilidad a la parte superior del correo electrónico, a un contenido que no tenga mucha importancia.

La barra de navegación: apilamiento vertical vs. visualización horizontal

Vista apilamiento vertical

Veamos un ejemplo con imágenes:

Vista apilamiento vertical

Cómo cambiar este comportamiento, configurado por defecto

Puedes desactivar esta funcionalidad y así evitar que las columnas se apilen verticalmente para dispositivos móviles tienes que cambiarlo manualmente.

Vista apilamiento vertical

Esta opción te es accesible en el panel de Propiedades de la fila, a la derecha. Está DESACTIVADA por defecto para que tus newsletters sean responsive. Elige si quieres activar o desactivar “No apilar en móvil”.

Vista sin apilamiento vertical

Función "No apilar" y buena praxis para el diseño de newsletters


A la hora de diseñar tus newsletters y asegurarte de que sean efectivas ten asegúrate de usar con cuidado esta opción. Mantener un diseño vertical fácil de usar en los dispositivos móviles suele tener sentido en la mayoría de los casos. Como siempre, depende de ti, de tu creatividad y del contenido de tu newsletter.

¿Cómo selecciono una fila vs. contenido?


1. Al pasar el cursor sobre un módulo de contenido (una imagen por ejemplo como puedes ver en el ejemplo a continuación) aparece un ícono que, si haces clic sobre él, te permite arrastrar y mover ese bloque de contenido a otra parte de la plantilla.

Cómo arrastrar un modulo

Cómo mover un modulo

2. Cuando , la herramienta:

- Te muestra dos iconos que te permiten o bien eliminar o duplicar ese bloque de contenido.

- Puedes configurar el módulo y modificar las propiedades desde el panel que aparece en el lado derecho del editor. Los cambios se aplicarán al módulo de contenido en cuestión.

Opciones módulo cursor

3. Si pasas el cursor sobre un área sin contenido, por ejemplo la fila donde debería haber contenido, nuestra herramienta la resaltará y aparecerá un icono que te permite moverlo a otro área de la plantilla.

4. Si haces clic en una fila, la herramienta:

- Deseleccionará cualquier módulo de contenido que hayas sido seleccionado previamente.

- Seleccionará la fila y aparecerán dos iconos que te permiten eliminar o clonar toda la fila y la totalidad de su contenido.

- En el panel de la derecha, aparecerá la sección de Propiedades de contenido que puedes personalizar y modificar. Estos cambios se aplicarán a esa columna dentro de la fila. Una fila puede contener varias columnas.

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