Añadir CSS personalizado al contenido
Puede agregar su propio CSS personalizado directamente en el espacio de diseño del correo electrónico o de la página de aterrizaje. Utilice CSS personalizado para aplicar un estilo avanzado y específico, para una mayor flexibilidad y control sobre el aspecto del contenido.
El CSS personalizado se anexa a la sección <head>
dentro de una etiqueta <style>
con el atributo data-name="global-custom"
. Esta estructura garantiza que los estilos personalizados se apliquen globalmente al contenido.
code language-html |
---|
|
Añada su CSS personalizado
-
Con al menos un componente de contenido agregado en el lienzo, selecciona el componente Cuerpo en el panel de navegación izquierdo.
-
Seleccione la ficha Estilos a la derecha y haga clic en Agregar CSS personalizado.
note note NOTE El botón Agregar CSS personalizado solo está disponible cuando se selecciona el componente Cuerpo. Sin embargo, puede aplicar estilos CSS personalizados a todos sus componentes. El editor emergente Agregar CSS personalizado se muestra con comentarios de código de marcador de posición.
-
Introduzca su código CSS en el editor.
Asegúrese de que CSS personalizado es válido y sigue la sintaxis adecuada. Si el CSS introducido no es válido, se muestra un mensaje de error y no se puede guardar el CSS. Para obtener más información, consulte Validez de CSS.
-
Haga clic en Guardar para guardar el CSS personalizado.
La hoja de estilos personalizada se aplica al contenido existente. Puede comprobar que el CSS personalizado se aplica según sus necesidades. Para obtener información sobre cómo realizar cambios y ajustar la aplicación de hojas de estilos, vea Solución de problemas.
Validez de CSS
code language-css |
---|
|
code language-css |
---|
|
No se acepta el uso de etiquetas <style>
:
code language-html |
---|
|
No se acepta sintaxis no válida como llaves que faltan:
code language-css |
---|
|
CSS en contenido importado
Si desea utilizar CSS personalizado con contenido importado en el espacio de diseño del correo electrónico o de la página de aterrizaje, tenga en cuenta lo siguiente:
-
Si importa contenido externo de HTML, incluido CSS, se rellena en modo de compatibilidad y la sección estilos CSS no está disponible.
-
Si importa contenido que se creó originalmente en el espacio de diseño de la página de aterrizaje o el correo electrónico, incluido CSS aplicado a través de la opción Agregar CSS personalizado, el CSS aplicado será visible y editable desde la misma opción.
Resolución de problemas
Si el CSS personalizado no se aplica según lo esperado, utilice las herramientas para desarrolladores del explorador para inspeccionar el contenido y verificar que el CSS está dirigiéndose a los selectores correctos. Cuando revise el código de estilo, tenga en cuenta lo siguiente:
-
Compruebe que el CSS sea válido y esté libre de errores de sintaxis (como llaves que faltan, nombres de propiedad incorrectos).
-
Compruebe que su CSS se haya agregado a la etiqueta
<style>
con el atributodata-name="global-custom"
. -
Compruebe si la etiqueta de estilo
global-custom
tiene el atributodata-disabled
establecido en true, como:<style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>
-
Compruebe que el CSS no se sobrescriba en ninguna parte del contenido, como cuando se aplica un estilo dentro de la línea.
-
Agregue
!important
a sus declaraciones para asegurarse de que tienen prioridad, como:code language-none .acr-Form { background: red !important; }