¿Cómo usar la opción de CSS personalizado en el editor de correos electrónicos?
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 el aspecto y la experiencia visual de tus mensajes más allá de las herramientas de diseño estándar. Ofrece mayor flexibilidad para ajustar estilos, espaciados 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 elementos específicos del mensaje. El código que añadas se carga después de los estilos predeterminados del editor, lo que significa que tiene prioridad sobre ellos.
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 en el editor de mensajes.
- Haz clic en Estilo del mensaje en el panel de la derecha.
- Expande la sección CSS personalizado.
- Pega o escribe tu código CSS en la ventana del editor.
- Haz clic en el icono del ojo para previsualizar los estilos personalizados.
Cómo añadir CSS personalizado a elementos del mensaje
Puedes seleccionar cualquier elemento del editor (por ejemplo, una sección, un botón, un bloque de texto o una imagen) y añadir CSS personalizado solo a ese elemento.
- Abre tu correo en el editor de mensajes.
- Haz clic en cualquier elemento del mensaje.
- Activa el control deslizante Añadir CSS personalizado en el panel derecho.
- Pega o escribe tu código CSS.
- Haz clic en el icono del ojo para ver la vista previa.
Al hacer clic dentro del editor y escribir 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 estilizando un botón y quieres cambiar el texto interno, es mejor aplicar el selector directamente al texto:
.elem-text-216196qwerty span { }
Consejos
- Utiliza propiedades seguras para inline (como colores, bordes y padding) para una mejor compatibilidad.
- No incluyas JavaScript ni archivos externos, ya que no son compatibles con el correo electrónico.
Soporte y limitaciones
La opción CSS personalizado está pensada para usuarios con experiencia en HTML y CSS. El equipo de Customer Success de GetResponse no puede ayudar a escribir ni depurar código personalizado.
Recomendamos probar el mensaje en distintos clientes de correo y dispositivos para asegurarte de que los estilos se muestran correctamente.
Diferencias entre CSS personalizado y el bloque de código personalizado
| Funcionalidad | CSS personalizado | Bloque de código personalizado |
|---|---|---|
| Propósito | Añade estilos CSS al mensaje completo o a elementos específicos | Inserta HTML personalizado directamente en el diseño del mensaje |
| Alcance | Afecta a todo el mensaje o a elementos seleccionados | Afecta solo al bloque seleccionado |
| Contenido permitido | Solo CSS | HTML y CSS inline |
| Caso de uso | Ajustes de estilo y diseño | Incrustar elementos personalizados (por ejemplo, contadores o píxeles de seguimiento) |