Como utilizar a opção CSS personalizado no editor de e-mail?
La opción CSS personalizado en el Creador de correos electrónicos de GetResponse te permite añadir tu propio código CSS para personalizar la apariencia y el estilo de tus mensajes más allá de las herramientas de diseño estándar. Ofrece mayor flexibilidad para ajustar estilos, espacios y efectos visuales que reflejen la identidad de tu marca.
La opción CSS personalizado está disponible en los planes Marketer, Creator y MAX (Enterprise). Si no ves esta opción en tu cuenta, considera actualizar tu plan para acceder a funciones avanzadas de personalización.
Qué es el CSS personalizado y cómo funciona
El CSS personalizado te permite definir tus propias reglas de estilo que se aplican a todo el mensaje o a cualquier elemento del mensaje. Cuando añades tu código en el elemento de CSS personalizado, los estilos se cargan después (es decir, tienen prioridad sobre) los estilos predeterminados del editor.
Puedes usarlo para:
- Ajustar colores, fuentes y márgenes.
- Sobrescribir los estilos predeterminados de bloques o botones.
- Añadir efectos visuales simples, como estados hover en enlaces o bordes redondeados en imágenes.
Los clientes de correo electrónico (como Gmail, Outlook o Apple Mail) interpretan el CSS de forma diferente. Algunas propiedades CSS pueden no mostrarse como se espera.
Los estilos generados mediante CSS personalizado no son visibles en la vista previa del mensaje.
Cómo añadir CSS personalizado a todo el mensaje
Para añadir CSS personalizado a todo el mensaje:
- Abre tu correo electrónico en el editor de mensajes.
- Haz clic en Estilo del mensaje en el panel de la derecha.
- Despliega CSS personalizado.
- En la ventana del editor que aparece, pega o escribe tu código CSS.
- Haz clic en el icono del ojo junto al código para previsualizar tus estilos CSS personalizados.
Cómo añadir CSS personalizado a los elementos del mensaje
Puedes seleccionar cualquier elemento en el editor de mensajes, como una sección, un botón, un bloque de texto o una imagen, y añadir CSS personalizado solo a ese elemento. Para ello:
- Abre tu correo electrónico en el editor de mensajes.
- Haz clic en cualquier elemento del mensaje.
- Usa el control deslizante para Añadir CSS personalizado en el panel de la derecha.
- En la ventana del editor que aparece, pega o escribe tu código CSS.
- Haz clic en el icono del ojo junto al código para previsualizar tus estilos CSS personalizados.
Cuando haces clic dentro del editor y escribes un punto (.), verás el ID único del elemento; por ejemplo: .elem-image-abcdef1234 { }.
Puedes usar ese ID para aplicar tus estilos personalizados.
Ten en cuenta que distintos elementos pueden requerir selectores diferentes. Por ejemplo, si estás dando estilo a un botón y quieres cambiar el texto dentro de él, es mejor dirigir el estilo específicamente al texto, como en este ejemplo:
.elem-text-216196qwerty span { }
Consejos
- Usa propiedades seguras para uso inline (como colores, bordes y padding) para una mejor compatibilidad.
- No incluyas JavaScript ni archivos externos; no son compatibles con los correos electrónicos.
Soporte y limitaciones
La opción CSS personalizado está pensada para usuarios familiarizados con HTML y CSS. Ten en cuenta que el equipo de Customer Success de GetResponse no puede ayudar a escribir ni depurar código personalizado.
Recomendamos probar tu mensaje en varios dispositivos y clientes de correo para asegurarte de que los estilos se muestran correctamente.
En qué se diferencia el CSS personalizado del bloque de código personalizado
| Función | CSS personalizado | Bloque de código personalizado |
|---|---|---|
| Propósito | Añade estilos CSS a todo el mensaje o a elementos del mensaje | Inserta HTML personalizado directamente en el diseño del mensaje |
| Alcance | Afecta a todo el mensaje o a los elementos seleccionados | Afecta solo al bloque seleccionado |
| Contenido permitido | Solo CSS | HTML y CSS en línea |
| Caso de uso | Ajustes de estilo y diseño | Incrustar elementos personalizados (por ejemplo, contadores, píxeles de seguimiento) |