Editar 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.
Algunas de las opciones que se muestran a continuación, como los estilos de botones, están disponibles de forma predeterminada en las plantillas estándar y los bloques de la biblioteca de módulos que contienen botones de «Call to action».
Si desea beneficiarse de estas funciones para sus plantillas personalizadas, le invitamos a ponerse en contacto con su gestor de cuentas.
Editar estilos de un módulo
Para personalizar su correo electrónico, tiene la opción de modificar varios parámetros del módulo, como algunos colores o establecer bordes. Para ello, haga clic en el icono "Editar estilos" que se muestra en la esquina superior derecha de cada módulo individual.
Este botón abrirá el editor de estilos en el lado izquierdo de la pantalla:
Color de fondo
Podrá editar:
-
El color de la línea: es el color de fondo del correo electrónico, que se muestra a cada lado del cuerpo del correo electrónico. Este botón solo permite cambiar el color de la fracción del fondo directamente adyacente al módulo editado. Para cambiar el color de todo el fondo a la vez, es necesario ir a los estilos globales (ver la sección "Editar estilos globales" a continuación).
-
La couleur del contenido: esto te permite cambiar el color de relleno del bloque en sí.
Por defecto se utilizan los colores iniciales de la plantilla. Estos se configuran en los estilos globales (ver la sección "Editar estilos globales" más adelante). Si personalizas el color de un bloque, la casilla "Utilizar el valor global de la plantilla" se desmarcará automáticamente. Solo tienes que marcarla de nuevo para restablecer el color inicial.
El selector de color te permite seleccionar el color directamente de una paleta o ingresar un código en formato hexadecimal o RGB. Los últimos colores utilizados y los colores de la plantilla se guardan en memoria.
Espaciado
El espaciado de un bloque te permite ajustar la alineación del contenido de un bloque con respecto al fondo y a otros bloques, es decir, cuánto está centrado el contenido en relación con los bordes del bloque. Esto es especialmente visible en las imágenes, por ejemplo.
El espaciado izquierdo y derecho agregará un margen en los lados, con el "color del contenido". A menudo, preferiremos alinear la imagen en el centro definiendo el mismo espacio en ambos lados, pero se pueden definir de forma independiente.
El espaciado superior e inferior permite agregar un margen del "color del contenido" entre el contenido del módulo y el bloque anterior/siguiente.
El espaciado máximo es de 200 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 opción de configurar:
-
El color del borde
-
Su grosor (en píxeles)
-
Su estilo (simple, punteado, doble...)
Para una mayor personalización, puedes activar el botón "Más opciones" para tener la posibilidad de definir un estilo de borde específico para cada lado del bloque.
Tus modificaciones se guardarán cuando hagas clic en el botón "Guardar" en la parte inferior o cuando hagas clic en el editor.
Las opciones de Espaciado y Borde requieren que el bloque haya sido codificado específicamente. Es posible que no estén disponibles en algunos bloques con diseños más simples o en plantillas personalizadas creadas antes de la implementación de estas características. Por favor, contacta a tu administrador de cuenta si deseas una actualización de tu plantilla personalizada.
Editar estilos de botón
En todos los bloques que contienen botones de tipo "llamada a la acción", también tienes la opción de personalizar su apariencia. Esta opción no está definida en los estilos del módulo, sino directamente en cada botón del bloque.
Haz clic en el ícono de la derecha para acceder a ello.
Fondo
Esto te permite modificar el color de fondo principal del botón, utilizando el selector de color idéntico al utilizado en la gestión de estilos del módulo.
Texto
Esto te permite modificar el estilo del texto del botón, es decir, su fuente, color y tamaño de texto, así como diferentes efectos de estilo, como poner el texto en negrita o cursiva.
Borde
En este cuadro se definen dos parámetros importantes:
-
El radio de borde permite definir el redondeo de las esquinas del botón. Si se establece en 0 píxeles, el botón tendrá esquinas rectas. Al aumentar este radio, se redondearán las esquinas del botón, obteniendo un botón más o menos ovalado según el valor elegido.
-
El estilo de borde permite definir el contorno del botón, lo cual incluye el color del contorno, su grosor y el estilo de línea. Esto le permite mostrar botones con un contorno diferente al fondo del botón. Si desea un botón uniforme, mantenga el color del contorno igual al del fondo, o seleccione el estilo "Sin borde".
Ejemplo de botón redondeado con borde:
Por defecto, todos los botones toman el valor definido en los estilos globales del correo electrónico.
Si modifica un parámetro, la casilla "Utilizar el valor global de la plantilla" se desmarcará automáticamente. Solo tiene que marcarla de nuevo para restablecer el valor inicial.
Para modificar los estilos globales y, por lo tanto, definir el estilo de todos sus botones de una vez, consulte la siguiente sección.
Editar los estilos globales
Haga clic en "Estilos Globales" junto a la biblioteca de módulos para aplicar parámetros de estilo a todo el correo electrónico.
Los estilos de cada módulo/botón se pueden modificar individualmente, pero por defecto tomarán el valor definido en los estilos globales.
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 (fondo global y contenido de bloque) y los espacios de manera uniforme (ver "Editar estilos de un módulo" arriba para más detalles).
La diferencia aquí es que estos colores 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 también permite definir estilos de texto aplicables a todo su plantilla. Por defecto, hay 3 estilos de título, 1 estilo para párrafos, 1 estilo "en línea" (que permite cambiar el estilo de un fragmento de texto en particular sin cambiar todo el estilo del párrafo), 1 estilo para enlaces y 1 estilo para botones. Si está utilizando una plantilla de diseño personalizada, puede haber otros estilos disponibles.
Para cada estilo, tiene la opción de configurar:
-
el color del texto
-
su tamaño en píxeles
-
la fuente del texto, de una lista amplia de fuentes preseleccionadas compatibles con diferentes motores de correo electrónico. Si está utilizando una plantilla personalizada, puede haber otras fuentes disponibles.
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 le permite modificar los estilos de todos los botones "call to action" de su correo electrónico a la vez (ver "Editar los estilos de botón" arriba para más detalles).
Cuando personaliza el estilo de un módulo o un botón individual, siempre tiene la opción de volver a los estilos globales de la plantilla con un solo clic marcando la casilla "Utilizar el valor global de la plantilla".
Editar el estilo de los módulos dinámicos
Editar el estilo del botón
Cuando agregas un botón en un módulo dinámico, puedes editar su estilo. Como con los otros módulos, dirígete al editor de estilo del botón.
Se abrirá un menú específico para el estilo del botón en la pestaña izquierda.
Desde este menú podrás cambiar varios parámetros: el color de fondo, el tamaño del texto… igual que con los botones de los módulos fijos.
Además de las opciones de estilo clásicas, tendrás una serie de opciones adicionales específicas para los módulos dinámicos:
- Tamaño
- Espaciado
- Efecto hover (al pasar el cursor)
- Y opciones de posicionamiento
Para varias de estas configuraciones, también tienes la posibilidad de aplicar tus modificaciones solo en la versión web, o bien aplicarlas tanto en la versión web como en la móvil.
Las configuraciones que permiten aplicar cambios diferentes según la versión (web o móvil) son fácilmente identificables mediante un ícono que indica en qué versión estás editando.
Para definir opciones diferentes para la versión móvil, simplemente cambia a la vista móvil del editor y ajusta las opciones que deseas.
Aparecerá una pequeña ventana emergente 'Móvil' al lado de cada menú para indicar que las opciones definidas se aplican a la versión móvil.
Si deseas mantener las mismas opciones para la versión web y móvil, simplemente haz clic en la cruz de la ventana emergente.
Tamaño
Puedes optar por mantener el ancho automático o definir un tamaño específico. Cuando marques esta opción, se mostrará un menú específico para elegir el tamaño de tu botón.
El porcentaje elegido corresponde al porcentaje que ocupa el botón respecto al ancho del módulo.
Para bloques de varias columnas, el porcentaje definido corresponde al espacio ocupado dentro del ancho de la columna.
Espaciado
Puedes definir el espaciado general del botón respecto a todos los lados. Este espaciado se define en píxeles.
Si deseas establecer un espaciado específico para cada lado del botón, asegúrate de marcar 'Más opciones'.
Se mostrará un menú que te permitirá definir un espaciado específico para cada lado del botón.
El efecto hover (pasar el cursor)
Puedes configurar el comportamiento al pasar el cursor sobre tu botón y decidir si deseas activar o no esta funcionalidad.
Esta opción te permite destacar tu botón cuando uno de tus perfiles pase el cursor del ratón sobre él.
Puedes definir un color, una fuente y un estilo de fuente específicos para el efecto hover.
Las opciones de hover no son compatibles en la versión móvil y tampoco son admitidas por todos los servicios de correo, especialmente Outlook.
Esto significa que los perfiles que usan móvil o un gestor de correo que no admite efectos hover verán el botón en su estilo estándar, incluso al pasar el cursor.
Pasar el cursor sobre un botón en el editor de emails te da acceso a los distintos menús de acciones disponibles para ese botón.
Para ver el resultado de las opciones hover que hayas configurado, sal del editor de emails:
Opciones de posicionamiento
También puedes modificar la alineación de tu botón dentro del bloque y decidir si deseas ocultarlo o no en alguna de las versiones.
Aquí también, puedes definir opciones diferentes para la versión web o móvil.
Si decide ocultar determinados elementos de una u otra versión, puede ver la representación de cada versión con los botones ocultos marcando la opción 'Mostrar elementos ocultos'.
Entonces verá que los elementos ocultos de la versión en la que está trabajando aparecen atenuados.
Al pasar el ratón por encima de un elemento oculto, aparece un marco azul que indica la versión en la que el botón está oculto.
Si quieres ver el renderizado final de tus versiones sin los elementos ocultos, sólo tienes que marcar la opción 'No mostrar elementos ocultos'.
Editar el estilo de una imagen
Cuando agregas una imagen en un módulo dinámico, puedes editar su estilo. Para hacerlo, haz clic en 'Editar estilos de la imagen'.
Se abrirá un menú específico para el estilo de imagen en la pestaña izquierda.
Desde este menú, podrás definir varios parámetros para tu imagen:
- Tamaño
- Borde
- Y opciones de bloque
Para cada una de estas opciones, también puedes aplicar los cambios únicamente a la versión web o a ambas versiones (web y móvil).
Para definir opciones distintas para la versión móvil, simplemente cambia a la vista móvil del editor y ajusta las opciones que desees.
Una pequeña ventana emergente 'Móvil' aparecerá al lado de cada menú para indicar que las opciones se aplican a la versión móvil.
Si deseas mantener las mismas opciones para la versión web y móvil, simplemente haz clic en la cruz de la ventana emergente.
Tamaño
Puedes optar por mantener el ancho automático o definir un tamaño específico. Cuando marques esta opción, se mostrará un menú específico para elegir el tamaño de tu imagen.
El porcentaje elegido corresponde al porcentaje que ocupa la imagen respecto al ancho del módulo.
Para bloques de varias columnas, el porcentaje definido corresponde al espacio ocupado dentro del ancho de la columna.
Borde
Esta opción te permite definir el radio de los bordes de tu imagen.
El radio de borde determina el redondeo de las esquinas de tu imagen. Si lo defines en 0 píxeles, la imagen tendrá esquinas rectas. Al aumentar el valor, las esquinas serán más redondeadas, según el valor definido.
Ten en cuenta que Outlook no admite todos los estilos de borde en los correos electrónicos. Si aplicas estilos de borde (en botones e imágenes) en tu campaña, es posible que el mensaje no se muestre como esperas en los perfiles que lo abren en Outlook.
Opciones de bloque
También puedes modificar la alineación de tu imagen dentro del bloque y decidir si deseas ocultarla o no en alguna de las versiones.
Aquí también puedes definir opciones diferentes según la versión web o móvil.
Si decide ocultar determinados elementos para una u otra versión, puede ver la representación de cada versión con las imágenes ocultas marcando la opción 'Mostrar elementos ocultos'.
Entonces verá que los elementos ocultos de la versión en la que está trabajando aparecen atenuados.
Al pasar el ratón sobre un elemento en gris, aparece un marco azul que indica la versión para la que la imagen está oculta.
Si desea ver el renderizado final de sus versiones, sin los elementos ocultos, simplemente marque la opción 'No mostrar 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.