Edita el HTML y CSS de tu widget o micrositio para Advocate

Puedes personalizar tus widgets y micrositio de Advocate con HTML y CSS adicionales para alinearlos mejor con la apariencia y el estilo de tu marca. Con el editor de HTML integrado de Advocate, puedes añadir estructura, estilos e incluso sobrescribir ciertos componentes predeterminados para una personalización más profunda.

Nota: La edición personalizada de HTML/CSS solo está disponible para determinadas ediciones de Advocate. Contacta con soporte para actualizar tu cuenta y acceder a esta función.

¿Por qué usar HTML o CSS personalizados?

El HTML personalizado y el CSS en línea te permiten:

• Ajustarte más a las directrices de marca de tu empresa
• Reformatear el diseño y el espaciado
• Aplicar estilos más allá de lo disponible en el editor predeterminado
• Sobrescribir el estilo de componentes seleccionados del widget o del micrositio

Importante: Nuestro equipo de soporte ofrece asistencia limitada para los problemas introducidos por código personalizado. Si no estás seguro, te recomendamos trabajar con tu equipo de implementación de Advocate o con el equipo posterior al lanzamiento.

Editar el HTML o CSS

Edita tu micrositio

Puedes editar el HTML o CSS para realizar más personalizaciones en tu micrositio usando el editor de HTML integrado. Aunque el editor de HTML permite una mayor flexibilidad en el diseño del micrositio, ten en cuenta que no podemos solucionar problemas relacionados con ajustes realizados con HTML o CSS personalizados.

1. En el menú de navegación izquierdo, selecciona [Engage] → Contenido.
2. En la tarjeta del micrositio, selecciona Editar contenido.
3. En la pestaña Micrositio, selecciona el diseño o la página cuyo código quieras editar.
4. Seleccione [Vista de código] en la barra de menú superior.
5. Añade o modifica HTML y CSS según sea necesario.
6. El CSS se puede añadir de tres maneras:

   • Importando una hoja de estilo CSS externa
   • En la parte superior de la página, en una <style> etiqueta:

   <style>
     p {
       color: blue;
     }
   
     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }
   
     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 

   • En línea, para aplicar un estilo a un elemento HTML específico:

   <h3 style="font-size:30px;color:blue;">Recibe una recompensa cuando tu amigo use nuestro producto</h3> 

7. Seleccione [Pincel] para previsualizar tus cambios.
8. Seleccione Guardar borrador para guardar, o Publicar para aplicar los cambios en vivo.

Editar tu widget

Puedes editar el HTML o CSS para realizar más personalizaciones en tu widget usando el editor de HTML integrado. Aunque el editor de HTML permite una mayor flexibilidad en el diseño del widget, ten en cuenta que no podemos solucionar problemas relacionados con ajustes realizados con HTML o CSS personalizados.

1. En el menú de navegación izquierdo, selecciona [Engage] → Contenido.
2. En la Widgets tarjeta, selecciona Editar widget.
3. En Widgets del programa, selecciona el widget que quieres editar.

1. En la barra de menú superior, selecciona [Corchetes].
2. Añade o edita tu HTML en el cuerpo de la página.
3. El CSS se puede añadir de tres maneras:

   • Importando una hoja de estilo CSS externa
   • En la parte superior de la página, en una <style> etiqueta:

   <style>
     p {
       color: blue;
     }
   
     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }
   
     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 

   • En línea, para aplicar un estilo a un elemento HTML específico:

   <h3 style="font-size:30px;color:blue;">Recibe una recompensa cuando tu amigo use nuestro producto</h3> 

4. Seleccione [Pincel] para previsualizar tus cambios.
5. Seleccione Guardar borrador para guardar, o Publicar para aplicar los cambios en vivo.

Editar componentes usando partes de CSS

Algunos componentes integrados en tu widget o micrositio no se pueden estilizar completamente a través del editor visual. En ciertos casos, puedes sobrescribir su apariencia usando partes de CSS, que permiten un control más granular.

Si buscas realizar actualizaciones avanzadas de estilo, el equipo de impact.com puede aconsejarte sobre lo que es posible y compartir cualquier selector relevante de partes de CSS. Si te interesa editar componentes con partes de CSS, ponte en contacto con tu equipo de implementación de Advocate o con el equipo de soporte posterior al lanzamiento.