# Modifica l'HTML e il CSS del Tuo Widget o Microsite per Advocate

Puoi personalizzare i widget e il microsito di Advocate con HTML e CSS aggiuntivi per allinearne meglio l'aspetto al tuo brand. Utilizzando l'editor HTML integrato di Advocate, puoi aggiungere struttura, stile e persino sovrascrivere alcuni componenti predefiniti per una personalizzazione più profonda.

{% hint style="info" %}
**Nota**: La modifica di HTML/CSS personalizzato è disponibile solo per determinate edizioni di Advocate. Contatta [assistenza](mailto:saasquatch-support@impact.com) per aggiornare il tuo account e accedere a questa funzione.
{% endhint %}

#### Perché usare HTML o CSS personalizzato?

HTML personalizzato e CSS inline ti permettono di:

* Adeguarti più precisamente alle linee guida del brand della tua azienda
* Riformattare layout e spaziatura
* Applicare stili oltre a quelli disponibili nell'editor predefinito
* Sovrascrivere lo stile di determinati componenti del widget o del microsito

{% hint style="warning" %}
**Importante**: Il nostro team di supporto fornisce assistenza limitata per problemi introdotti da codice personalizzato. Se non sei sicuro, ti consigliamo di lavorare con il tuo team di implementazione Advocate o con il team post-lancio.
{% endhint %}

#### Modifica l'HTML o il CSS

{% tabs %}
{% tab title="Modifica il tuo microsito" %}
Puoi modificare l'HTML o il CSS per effettuare ulteriori personalizzazioni del tuo microsito utilizzando l'editor HTML integrato. Sebbene l'editor HTML offra maggiore flessibilità nel design del microsito, tieni presente che non siamo in grado di risolvere problemi derivanti da modifiche effettuate con HTML o CSS personalizzati.

1. Nel menu di navigazione a sinistra, seleziona ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenuto**.
2. Sulla scheda del microsito, seleziona **Modifica contenuto**.
3. Nella scheda Microsite, seleziona il layout o la pagina il cui codice vuoi modificare.
4. Seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[Vista codice]** nella barra del menu in alto.
5. Aggiungi o modifica HTML e CSS secondo necessità.
6. Il CSS può essere aggiunto in tre modi:

   * Importando un foglio di stile CSS esterno
   * In cima alla pagina in un `<style>` tag:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * Inline, per applicare uno stile a un elemento HTML specifico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Ricevi ricompense quando il tuo amico utilizza il nostro prodotto</h3> 
   ```
7. Seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[Pennello]** per anteprima le tue modifiche.
8. Seleziona **Salva bozza** per salvare, oppure **Pubblica** per rendere effettive le modifiche.
   {% endtab %}

{% tab title="Modifica il tuo widget" %}
Puoi modificare l'HTML o il CSS per effettuare ulteriori personalizzazioni del tuo widget utilizzando l'editor HTML integrato. Sebbene l'editor HTML offra maggiore flessibilità nel design del widget, tieni presente che non siamo in grado di risolvere problemi derivanti da modifiche effettuate con HTML o CSS personalizzati.

1. Nel menu di navigazione a sinistra, seleziona ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenuto**.
2. Sulla *scheda Widget* , seleziona **Modifica widget**.
3. Sotto *Widget del programma*, seleziona il widget che desideri modificare.

<div data-with-frame="true"><figure><img src="https://1043985218-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. Nella barra del menu in alto, seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[Parentesi]**.
2. Aggiungi o modifica il tuo HTML nel corpo della pagina.
3. Il CSS può essere aggiunto in tre modi:

   * Importando un foglio di stile CSS esterno
   * In cima alla pagina in un `<style>` tag:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * Inline, per applicare uno stile a un elemento HTML specifico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Ricevi ricompense quando il tuo amico utilizza il nostro prodotto</h3> 
   ```
4. Seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[Pennello]** per anteprima le tue modifiche.
5. Seleziona **Salva bozza** per salvare, oppure **Pubblica** per rendere effettive le modifiche.
   {% endtab %}
   {% endtabs %}

#### **Modifica componenti usando CSS Parts**

Alcuni componenti incorporati nel tuo widget o microsito non possono essere completamente stilizzati tramite l'editor visuale. In alcuni casi, puoi sovrascriverne l'aspetto usando i CSS parts, che consentono un controllo più granulare.

Se desideri effettuare aggiornamenti di stile avanzati, il team di impact.com può consigliare su ciò che è possibile e condividere i selettori CSS part rilevanti. Se sei interessato a modificare i componenti con i CSS parts, contatta il tuo team di implementazione Advocate o il team di supporto post-lancio.
