Estilos
El aspecto de tus campañas juega un papel clave en la forma en que tu público las percibe. Para ayudarte a mantener la coherencia con tu imagen de marca y crear correos electrónicos atractivos, el editor Actito te permite personalizar fácilmente el estilo de tus módulos, botones e incluso el diseño general de la plantilla.
Desde la definición de colores y márgenes hasta la modificación de bordes y el perfeccionamiento de los botones de "Call to action", puede modificar cada detalle directamente en el editor (sin necesidad de código). Y si desea uniformidad, los parámetros de estilo globales le permiten aplicar cambios a todo su correo electrónico con solo unos clics.
El editor de correo electrónico te permite personalizar los estilos de tu correo electrónico en tres niveles:
-
Estilos globales: te permiten definir el aspecto general del correo electrónico. Las opciones definidas aquí se aplican por defecto a toda la plantilla.
-
Estilos de los módulos: te permiten definir el estilo de un módulo en concreto, sin que estos cambios se apliquen a toda la plantilla.
Editar los estilos globales
La pestaña "Estilos globales" te permite definir los estilos de diseño generales que se aplican a todos los módulos de tu correo electrónico, lo que te garantiza una apariencia uniforme en toda tu campaña.
Por defecto, todos los módulos adoptarán el valor definido en los estilos globales, pero siempre puedes personalizar individualmente módulos específicos para adaptar su aspecto a tus necesidades. En ese caso, la casilla "Usar el valor global de la plantilla" se desmarcará automáticamente. Basta con volver a marcarla para restablecer los parámetros iniciales (o los definidos en la pestaña de estilos globales).
Para la mayoría de los parámetros, puedes aplicar diferentes estilos en función de si tu correo electrónico está destinado a la versión web o móvil
Colores de la plantilla
Esto le permite guardar colores para usar en el correo electrónico. Es muy útil si su organización utiliza ciertos tonos de color específicos en su identidad visual: no es necesario recordar de memoria el código RGB de un tono de azul, al definirlo una vez en los colores de la plantilla, estará disponible en cada selector de color del correo electrónico.
Estilos del módulo
Esto permite definir los colores (del fondo general y del contenido del módulo), así como el espaciado y los bordes de forma uniforme o específica para cada borde.
Los colores definidos aquí se aplican a todo el correo electrónico, por lo que el color de fondo corresponde al "color de línea" para todos los módulos.
Estilos de texto
Esto permite definir estilos de texto aplicables a toda la plantilla. Por defecto, hay 3 estilos de título, 1 estilo para los párrafos y 1 estilo para los enlaces.
Para cada estilo, tiene la opción de configurar:
- el color del texto
- su tamaño en píxeles
- la fuente del texto, de entre una amplia lista de fuentes preseleccionadas compatibles con los distintos clientes de correo electrónico. Si dispones de una plantilla personalizada, es posible que haya otras fuentes disponibles.
- el estilo de la fuente (negrita, cursiva, subrayado, tachado)
- la alineación (izquierda, centrada, derecha o justificada)
Los nombres de los estilos son una sugerencia sobre su uso, pero si necesita 2 fuentes diferentes para el cuerpo de su texto, no hay nada que le impida usar el estilo 'Heading 3' para esto, por ejemplo.
De hecho, puede cambiar directamente el estilo de un fragmento de texto en el cuerpo de la plantilla, o aplicar uno si no tiene un estilo predeterminado.
Estilos de botón
Esto te permite modificar los estilos de todos los botones de "llamada a la acción" de tu correo electrónico a la vez.
Podrás definir:
- El color de fondo: modifica el color de fondo principal del botón utilizando el selector de color, el mismo que se utiliza en la gestión de estilos del módulo.
- El estilo del texto: modifica el estilo del texto del botón, es decir, su fuente, el color y el tamaño del texto, así como los diferentes efectos de estilo.
- Las características de los bordes (si los incluyes): en este recuadro se definen dos parámetros importantes:
- El radio del borde permite definir el redondeo de las esquinas del botón. Si lo estableces en 0 píxeles, el botón tendrá ángulos rectos. Al aumentar este radio, redondearás las esquinas del botón, obteniendo un botón más o menos ovalado según el valor elegido.
- El estilo del borde permite definir el contorno del botón, lo que incluye el color del contorno, su grosor y el estilo de la línea. Esto te permite mostrar botones con un contorno diferente al del fondo del botón. Si quieres un botón uniforme, mantén el color del borde igual al del fondo, o establece un borde de 0 píxeles.
En todos los módulos que contienen botones de tipo "llamada a la acción", también tienes la posibilidad de personalizar su aspecto de forma individual. Haz clic en el icono de la derecha para acceder a esta opción.
Editar estilos de un módulo
Para personalizar aún más tu correo electrónico, tienes la posibilidad de editar numerosos parámetros de estilo para cada módulo en concreto.
Para ello, haz clic en el botón "Editar estilo" que aparece en la esquina superior derecha de cada módulo.
Este botón abrirá el editor de estilos en la parte izquierda de la pantalla:
Desde este editor, podrás configurar:
- Los parámetros básicos (fondo, espaciado, bordes)
- Los elementos "Texto" y "Título"
- Los elementos "Botón"
- Los elementos "Imagen"
- Los elementos "Opiniones" y "Redes sociales"
- Los elementos "Imagen + Texto"
Ajustes básicos
Podrás editar:
-
El color de la línea: se trata del color de fondo del correo electrónico, que se muestra a ambos lados del cuerpo del mensaje. Este botón solo permite modificar el color de la parte del fondo directamente adyacente al módulo que se está editando. Para cambiar el color de todo el fondo de una sola vez, es necesario acceder a los estilos globales.
-
El color del contenido: esto te permite modificar el color de relleno del propio bloque.
El selector de color te permite seleccionar el color directamente de una paleta o introducir un código en formato hexadecimal o RGB. Se guardan en memoria los últimos colores utilizados, así como los colores de la plantilla.
Espaciado
El espaciado de un bloque te permite ajustar la alineación del contenido de un bloque con respecto al fondo y a los demás módulos, es decir, en qué medida el contenido está centrado con respecto a los bordes del bloque.
Esto se aprecia especialmente en las imágenes, por ejemplo.
El espaciado a la izquierda y a la derecha añadirá un margen a los lados, con el «color del contenido». A menudo, se prefiere alinear la imagen al centro definiendo el mismo espacio a ambos lados, pero estos se pueden definir de forma independiente.
El espaciado superior e inferior permite añadir un margen del «color del contenido» entre el contenido del módulo y el bloque anterior o siguiente.
El espaciado máximo es de 100 píxeles.
Borde
El editor de estilos del módulo también te permite configurar un borde alrededor del bloque (para enmarcar una imagen o un fragmento de texto, por ejemplo).
Tienes la posibilidad de configurar:
- El color del borde
- Su grosor (en píxeles)
- Su estilo (simple, punteado, doble...)
Para una personalización aún mayor, puedes activar el botón «Más opciones» y definir un estilo de borde específico para cada lado del bloque.
Tus cambios se guardarán al hacer clic en el botón «Guardar» situado en la parte inferior o al hacer clic en el editor.
Las opciones de espaciado y borde requieren que el bloque se haya programado específicamente. Es posible que no estén disponibles en algunos módulos con diseños más sencillos o en plantillas personalizadas creadas antes del lanzamiento de estas funciones. Ponte en contacto con tu gestor de cuenta si deseas actualizar tu plantilla personalizada.
Estilo de texto y título
Cuando añadas un elemento de texto o un título en un módulo dinámico, podrás editar su estilo.
Para ello, haz clic en cualquier punto del texto.
Se abrirá un menú específico en el panel lateral izquierdo que te permitirá definir:
- Los estilos de texto
- Las opciones de bloque
Estilos de texto
Desde este menú, podrás definir las opciones de formato del texto de tu contenido y elegir la alineación y el espaciado que mejor se adapten a tu diseño.
Encontrarás opciones de configuración para:
- El estilo de texto: Título 1, Título 2 o párrafo, tal y como se definen en el menú «Estilos globales». Ten en cuenta que, en cuanto al estilo de texto, no es posible definir dos estilos diferentes para la versión web y la versión móvil
- La alineación: a la izquierda, centrada, a la derecha o justificada
- La altura de línea: compacta (1), normal, cómoda (1,5) o espaciosa (2)
Por motivos de accesibilidad, te recomendamos que utilices la alineación a la izquierda.
Opciones de bloque
Este menú te permite definir el espaciado a ambos lados del texto y elegir si quieres ocultar o no el texto en cualquiera de las dos versiones.
Con la función «Más opciones», tendrás la posibilidad de aplicar un espaciado diferente para cada lado.
Si esta función está desactivada, el espaciado que definas se aplicará a cada uno de los lados (izquierdo, derecho, inferior y superior).
Estilo de los botones
Al añadir un botón a un módulo, puedes sustituir los estilos globales para personalizarlo individualmente. Haz clic en el icono del editor de estilo del botón para acceder a estos ajustes:
-
Tamaño y espaciado: mantén el ancho automático o define un porcentaje específico del ancho de la columna. También puedes personalizar los márgenes interiores de todos los lados.
-
Efectos al pasar el cursor: activa o desactiva esta opción para cambiar el color de fondo, la fuente o el estilo del botón cuando un usuario pase el cursor por encima.
Las opciones de efecto al pasar el cursor no son compatibles con la versión móvil ni con todos los servicios de correo electrónico, en particular Outlook. Esto significa que los usuarios que utilicen dispositivos móviles o cuyo gestor de correo electrónico no admita diseños al pasar el cursor verán el botón estándar al pasar el ratón por encima.
Al pasar el cursor por encima de un botón en el editor de correo electrónico, se accede a los distintos menús de acciones disponibles para ese botón. Para ver cómo se muestran las opciones definidas al pasar el cursor, sal del editor de correo electrónico: 
- Opciones del bloque: modifica la alineación y el espaciado de tu botón dentro del bloque y elige si quieres ocultarlo o no en cualquiera de las dos versiones.
Estilo de las imágenes
Cuando añadas una imagen a un módulo dinámico, podrás editar su estilo.
Para ello, haz clic en «Editar estilos de la imagen».
Desde este menú, podrás definir diferentes parámetros para tu imagen:
- Los estilos
- Las opciones de bloque
Estilos de la imagen
Desde esta pestaña, puedes definir:
- Tamaño: te permite mantener el ancho automático o elegir un tamaño específico. El porcentaje elegido corresponde al porcentaje que ocupa la imagen con respecto al ancho del módulo.
En los módulos de varias columnas, el porcentaje definido corresponde al porcentaje que ocupa sobre el ancho de la columna.
- Borde: te permite definir el radio del borde de tu imagen, que corresponde al redondeo de las esquinas de la misma. Si lo defines en 0 píxeles, tu imagen tendrá ángulos rectos. Al aumentar este radio, redondearás las esquinas de tu imagen, obteniendo un resultado más o menos redondeado según el valor elegido.
Ten en cuenta que Outlook no admite todos los estilos de bordes en los correos electrónicos. Si aplicas estilos de bordes (botones e imágenes) en tu campaña, es posible que el mensaje no se muestre como se espera en los perfiles que lo lean en Outlook.
Opciones de bloque
También puedes modificar la alineación y el espaciado de tu imagen dentro del bloque y elegir si quieres ocultarla o no en cualquiera de las dos versiones.
Estilo de valoración y redes sociales
Cuando añades un elemento de redes sociales o de valoración en un módulo dinámico, puedes editar su estilo.
Para ello, haz clic en el icono «Editar estilos».
Desde el menú, puedes definir la alineación y el espaciado de tus elementos en el módulo dinámico, así como elegir si quieres ocultarlos o no en una u otra versión.
Estilo de imagen + texto
Si utilizas un módulo de tipo imagen + texto, podrás editar su estilo.
Al igual que con los módulos de texto, para que aparezca el menú específico de este módulo, haz clic en cualquier parte del texto.
Desde el menú, podrás definir:
- El estilo del texto
- Opciones de bloque
Estilos de texto
Desde esta pestaña, podrás definir:
- Estilo de texto: te permite elegir un estilo para tu texto entre los que hayas definido en el menú de estilos globales
- Alineación del texto: izquierda, centrada, derecha o justificada
- Altura de línea: compacta (1), normal, cómoda (1,5) y espaciosa (2)
- Imagen decorativa: te permite seleccionar una imagen de tu dispositivo o mediante una URL, o bien eliminar la imagen
- Alineación de la imagen: a la derecha o a la izquierda
- Tamaño de la imagen: en píxeles dentro del módulo
Opciones de bloque
También puedes modificar el espaciado entre la imagen y el área de texto dentro del bloque, así como elegir si quieres ocultarlos o no en cualquiera de las dos versiones.
Definir estilos según la versión (móvil o web)
El editor también te permite aplicar diferentes parámetros de estilo según la versión web o móvil de tu correo electrónico.
Puedes identificar fácilmente los parámetros para los que es posible definir estilos diferentes según las versiones, gracias a la presencia de un icono («ordenador» para la versión web o el icono «móvil» para la versión móvil) situado junto al parámetro.
Para definir opciones diferentes para la versión móvil, solo tienes que ir a la versión móvil del editor y configurar las opciones que desees.
Aparecerá una pequeña ventana emergente «Móvil» junto a cada uno de los menús, para indicarte que las opciones definidas se aplican a la versión móvil.
Adaptar tu diseño a cada dispositivo no es solo una cuestión de estilo, sino también de accesibilidad y legibilidad. Un tamaño de fuente o un contraste de colores perfectos en la pantalla de un ordenador pueden resultar más difíciles de leer en el móvil, y viceversa. Definir estilos diferentes para ambas versiones te permite crear una experiencia óptima para cada pantalla.
Si quieres mantener el mismo diseño en ambas versiones, solo tienes que hacer clic en la cruz situada junto a «Versión móvil» para aplicar el mismo estilo a todos los dispositivos.
También tienes la opción de ocultar ciertos elementos en la versión web o móvil.
Si decides ocultar algunos elementos, puedes ver cómo queda cada versión con las imágenes ocultas haciendo clic en la opción «Mostrar elementos ocultos»
Verás entonces que los elementos ocultos de la versión en la que estás trabajando aparecen en gris.
Al pasar el ratón por encima de un elemento en gris, aparece un recuadro azul que te indica la versión en la que la imagen está oculta.
Si desea ver el resultado final de sus versiones, sin los elementos ocultos, solo tiene que hacer clic en la opción «No mostrar los elementos ocultos».
Limitaciones Outlook
Outlook es el cliente de correo empresarial por excelencia. Si bien es menos común en un contexto B2C, la compatibilidad con Outlook sigue siendo un aspecto importante en el diseño de sus correos electrónicos.
Un aspecto importante, pero también un desafío, ya que de todos los clientes de correo, Outlook es el que ofrece menos compatibilidad con las funcionalidades modernas del mundo del correo electrónico. De hecho, el motor de este cliente de correo se basa en otro software bien conocido de Microsoft, es decir... Word, el procesador de texto.
Esto implica restricciones y limitaciones en lo que es posible en las diferentes modificaciones de estilo (no relacionadas con el editor Actito, sino con las funcionalidades compatibles con Outlook).
Fuentes
Todas las fuentes disponibles, incluida la extensión de la lista en verano de 2022, son fuentes "web safe", lo que significa que están preinstaladas en todos los sistemas operativos. Las fuentes "google fonts" ofrecen más posibilidades pero también una compatibilidad mucho menor, por lo que siempre requieren una fuente de reemplazo. No están disponibles de forma predeterminada en el editor, sino solo a pedido en las plantillas personalizadas.
Botones
- Si un botón se deja sin enlace, Outlook romperá la visualización como si el texto estuviera pegado a los bordes.
- Los radios de borde (esquinas redondeadas) no son compatibles.
Bordures/Espacement
La visualización de los bordes inferiores y los bordes derechos puede causar problemas de visualización: no se muestra nada para un borde de 1 píxel, se muestra la mitad (1 píxel) para un borde de 2 píxeles, etc.
Lo mismo ocurre con los bordes de los botones.