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

Puede personalizar sus widgets y micrositio de Advocate con HTML y CSS adicionales para alinearlos mejor con la apariencia de su marca. Usando el editor HTML incorporado de Advocate, puede agregar estructura, estilos e incluso anular ciertos componentes predeterminados para una personalización más profunda.

Nota: La edición de HTML/CSS personalizada solo está disponible en ediciones específicas de Advocate. Contacte a soporte para actualizar su cuenta y acceder a esta función.

¿Por qué usar HTML o CSS personalizado?

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

• Ajustarse más estrechamente a las directrices de marca de su empresa

• Reformatear el diseño y los espaciados

• Aplicar estilos más allá de lo disponible en el editor predeterminado

• Anular el estilo de componentes selectos del widget o micrositio

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

Edite el HTML o CSS

Edite su micrositio

Puede editar el HTML o CSS para realizar más personalizaciones en su micrositio utilizando el editor HTML incorporado. Aunque el editor HTML permite mayor flexibilidad en el diseño del micrositio, tenga en cuenta que no podemos solucionar cambios realizados con HTML o CSS personalizados.

1. En el menú de navegación izquierdo, seleccione [Engage] → Contenido.

2. En la tarjeta del micrositio, seleccione Editar contenido.

3. En la pestaña Micrositio, seleccione el diseño o la página cuyo código desea editar.

4. Seleccione [Vista de código] en la barra de menú superior.

5. Agregue o modifique HTML y CSS según sea necesario.

6. El CSS se puede agregar de tres maneras:

   • Importando una hoja de estilo CSS externa

   • En la parte superior de la página dentro de 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 recompensas cuando tu amigo usa nuestro producto</h3> 

7. Seleccione [Brocha de pintura] para previsualizar sus actualizaciones.

8. Seleccione Guardar borrador para guardar, o Publicar para aplicar los cambios en vivo.

Edite su widget

Editar componentes usando CSS Parts

Algunos componentes integrados en su widget o micrositio no se pueden estilizar por completo mediante el editor visual. En ciertos casos, puede anular su apariencia usando CSS parts, lo que permite un control más granular.

Si busca realizar actualizaciones avanzadas de estilo, el equipo de impact.com puede asesorar sobre lo que es posible y compartir los selectores de CSS part relevantes. Si está interesado en editar componentes con CSS parts, comuníquese con su equipo de Implementación de Advocate o con el equipo de soporte posterior al lanzamiento.