# 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.

{% hint style="info" %}
**Nota**: La edición de HTML/CSS personalizada solo está disponible en ediciones específicas de Advocate. Contacte a [soporte](mailto:saasquatch-support@impact.com) para actualizar su cuenta y acceder a esta función.
{% endhint %}

#### ¿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

{% hint style="warning" %}
**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.
{% endhint %}

#### Edite el HTML o CSS

{% tabs %}
{% tab title="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\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[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 ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[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:

   ```programlisting
   <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:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Recibe recompensas cuando tu amigo usa nuestro producto</h3> 
   ```
7. Seleccione ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[Brocha de pintura]** para previsualizar sus actualizaciones.
8. Seleccione **Guardar borrador** para guardar, o **Publicar** para aplicar los cambios en vivo.
   {% endtab %}

{% tab title="Edite su widget" %}
Puede editar el HTML o CSS para realizar más personalizaciones en su widget utilizando el editor HTML incorporado. Aunque el editor HTML permite mayor flexibilidad en el diseño del widget, tenga en cuenta que no podemos solucionar cambios realizados con HTML o CSS personalizados.

1. En el menú de navegación izquierdo, seleccione ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenido**.
2. En la *Tarjeta de widgets* , seleccione **Editar widget**.
3. Bajo *Widgets del programa*, seleccione el widget que desea editar.

<div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-a43ec359ba16080d17bc57dc7faaa602268158cf%2Fdfb3191356adad2577e4a1e24b0646a647f8e08aa012feb467a38841a9b5a788.png?alt=media" alt=""><figcaption></figcaption></figure></div>

1. En la barra de menú superior, seleccione ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[Corchetes]**.
2. Agregue o edite su HTML en el cuerpo de la página.
3. 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:

   ```programlisting
   <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:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Recibe recompensas cuando tu amigo usa nuestro producto</h3> 
   ```
4. Seleccione ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[Brocha de pintura]** para previsualizar sus actualizaciones.
5. Seleccione **Guardar borrador** para guardar, o **Publicar** para aplicar los cambios en vivo.
   {% endtab %}
   {% endtabs %}

#### **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.
