# Personalizza widget e micrositi con l'editor dei contenuti

L’editor dei contenuti ti consente di creare widget e micrositi che rispecchiano perfettamente l’identità del tuo brand, garantendo un’esperienza coerente e affidabile per i tuoi clienti. Un punto di contatto ben in linea con il brand è fondamentale per favorire un elevato coinvolgimento e l’adozione del programma.

#### Controlli centralizzati del branding

Puoi trovare e aggiornare con facilità gli elementi fondamentali del design del tuo brand utilizzando l’opzione di stile del widget o del microsito. Tutte le impostazioni di branding si trovano in una sezione dedicata al branding.

I widget o i micrositi hanno un aspetto diverso a seconda del contesto dell’utente, ad esempio se ha effettuato l’accesso, se si verifica un errore o se visualizza da un dispositivo mobile. Le anteprime del nostro editor ti consentono di passare facilmente da tutti gli stati possibili del tuo widget o microsito.

{% hint style="info" %}
**Nota**: L’anteprima è più adatta ai widget (ad esempio i widget di accesso immediato) e ai componenti (ad esempio denaro, scambio premi). Per visualizzare in anteprima i micrositi, dovresti navigare nelle diverse pagine dei micrositi per vedere gli stati.
{% endhint %}

Questo elimina la necessità di completare manualmente le azioni per vedere come apparirà un componente. Ora puoi modificare con sicurezza il testo e il design per ogni fase del percorso utente, inclusi:

* Viste con accesso effettuato vs. senza accesso
* Messaggi di errore e di successo
* Diverse fasi di un flusso in più parti (come la verifica del pagamento in contanti)

Per personalizzare lo stile del tuo brand:

1. Nel menu di navigazione a sinistra, seleziona ![](/files/56eb48c7f3195590132b62ea75c0575abe0113e5) **\[Engage] → Contenuti**.
   * Per i widget, seleziona **Modifica widget** e per i micrositi, seleziona **Modifica contenuti**.
2. Nel menu a sinistra, seleziona se desideri modificare il Microsito o il Widget.
3. Seleziona il modello di pagina su cui desideri apportare modifiche, quindi seleziona **Stile del widget**/**Stile del microsito**.
4. Seleziona il colore del tuo brand per modificare il colore principale presente nel tuo widget o microsito.
5. Successivamente, seleziona lo stile del font che desideri utilizzare.
6. **\[Facoltativo]** Continua con le restanti opzioni di stile per personalizzare completamente l’identità del tuo brand all’interno del widget o del microsito.

   <div data-with-frame="true"><figure><img src="/files/cbe9300c276a88198bf6cdff66d1e2325fc6a6fb" alt="" width="563"><figcaption></figcaption></figure></div>

<details>

<summary>Riferimento agli elementi dell’editor di stile</summary>

| Elemento di stile           | Descrizione                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Colore principale del brand | <p>Questo colore verrà utilizzato in diversi elementi all’interno del tuo widget o microsito, quindi è importante completare questo passaggio. Seleziona il colore principale del tuo brand.</p><p>Questo colore viene utilizzato anche nelle sezioni Pulsante primario e Pulsante secondario più avanti nelle opzioni di modifica.</p><p><img src="/files/e3249cc63d4f753454d946d579f40929b6b439af" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| Font                        | <p>Seleziona lo stile del font che desideri presente all’interno del tuo widget o microsito.</p><p><img src="/files/71504d437ad2fd00ec35c5315b24cf1b418196a6" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Colore                      | <p>Seleziona i vari colori e accenti che desideri presenti all’interno del tuo widget o microsito:</p><p>• <strong>Sfondo</strong></p><p>Seleziona un colore che desideri utilizzare come sfondo del tuo widget o microsito.</p><p>• <strong>Testo</strong></p><p>Puoi modificare il colore del font sia per il testo principale sia per il testo attenuato all’interno del widget o del microsito.</p><p>• <strong>Colore accento</strong></p><p>Modifica i colori dei tuoi accenti. Questi includono elementi come schede o icone all’interno del widget o del microsito.</p><p><img src="/files/814e7db1593e1df5e02c7dd4d1fda282358e100b" alt="" data-size="original"></p><p>• <strong>Colori aggiuntivi</strong> <img src="/files/a474859b52eb0cf0ee293759ee5542cfc1ffd5f8" alt=""></p><p>Puoi inoltre regolare i colori e gli accenti di ciascun elemento in base al tipo di widget o microsito.</p><p><img src="/files/c5c077ac1d6aa0db304afcced02e315bdfd5d302" alt="" data-size="original"></p> |
| Pulsante primario           | <p>Seleziona la combinazione di colori che desideri per il pulsante primario o principale. Puoi anche regolare il valore in pixel del raggio del bordo attorno al pulsante.</p><p><img src="/files/3156bf7baa6a4629e4f2f8aa2e1978b1858e7ec0" alt="" data-size="original"></p><p>Espandi la <img src="/files/a474859b52eb0cf0ee293759ee5542cfc1ffd5f8" alt=""> <strong>Stato al passaggio del mouse</strong> sezione per selezionare o modificare ulteriormente il colore in cui il pulsante cambia quando un utente passa il cursore sopra il pulsante o interagisce con esso.</p><p><img src="/files/e921c1cbcdecc97df0bb356dffcba3194aa7115f" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                        |
| Pulsante secondario         | <p>Seleziona la combinazione di colori che desideri per il pulsante secondario. Puoi anche regolare il valore in pixel del raggio del bordo attorno al pulsante.</p><p><img src="/files/9bb7e5a0fef40c6776e8dba3a3108d041cf8f8e7" alt="" data-size="original"></p><p>Espandi la <img src="/files/a474859b52eb0cf0ee293759ee5542cfc1ffd5f8" alt=""> <strong>Stato al passaggio del mouse</strong> sezione per selezionare o modificare ulteriormente il colore in cui il pulsante cambia quando un utente passa il cursore sopra il pulsante o interagisce con esso.</p><p><img src="/files/b7b66956ef9cef1b09151474a96291102ec76bb7" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                   |
| Bordo                       | <p>Modifica il colore e il contorno del bordo dei tuoi componenti, come tabelle o schede, all’interno del tuo widget o microsito.</p><p>• <strong>Colore</strong></p><p>Seleziona il colore del bordo.</p><p>• <strong>Spessore</strong></p><p>Inserisci un’unità in pixel per determinare lo spessore del bordo.</p><p>• <strong>Raggio del bordo</strong></p><p>Inserisci un’unità in pixel per determinare il raggio del bordo.</p><p><img src="/files/d81bb2735fa9c4ed3f666ce7a4490947211bc7aa" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| Campi del modulo            | <p>Seleziona il colore che desideri per i vari campi del modulo all’interno del tuo widget o microsito. Questi includono tutti i campi di input compilati dall’utente. Puoi anche inserire un valore in pixel per modificare la dimensione del raggio del bordo.</p><p><img src="/files/675ba3b7c5ebc215e8eafa4ae109bd04fc3b8400" alt="" data-size="original"></p><p>Espandi la <img src="/files/a474859b52eb0cf0ee293759ee5542cfc1ffd5f8" alt=""> <strong>Opzioni avanzate</strong> sezione per personalizzare ulteriormente i colori dello stato selezionato o dello stato al passaggio del mouse dei campi del modulo.</p><p><img src="/files/c33a2306664c1a21f6a24ee2a9e6987117f49ecb" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                             |
| Dimensione del widget       | <p>Modifica la dimensione dei tuoi widget all’interno del modello. Puoi regolare le dimensioni sia per i widget incorporati sia per quelli popup. Seleziona una dimensione minima e massima e, dalle opzioni a discesa, seleziona l’unità di misura. Scegli di impostare le misure in pixel o in percentuale.</p><p><img src="/files/f2cd70aba7605ce31f15439967d94e2486af27a1" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.impact.com/brand/it/che-cosa-vorresti-imparare/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.