# Personalizza widget e micrositi con l'editor di contenuti

L'editor dei contenuti ti consente di creare widget e micrositi che si abbinano perfettamente all'identità del tuo marchio, garantendo un'esperienza coerente e affidabile per i tuoi clienti. Un punto di contatto ben brandizzato è fondamentale per favorire un elevato coinvolgimento e l'adozione del programma.

#### Controlli di branding centralizzati

Puoi trovare e aggiornare con facilità gli elementi di design principali del tuo marchio usando l'opzione stile del widget o del microsito. Tutte le impostazioni di branding si trovano in una sezione dedicata al branding.

I widget o i micrositi appaiono diversi a seconda del contesto dell'utente, ad esempio se ha effettuato l'accesso, se si verifica un errore o se visualizza su un dispositivo mobile. Le anteprime del nostro editor ti permettono di passare facilmente tra tutti gli stati possibili del tuo widget o microsito.

{% hint style="info" %}
**Nota**: L'anteprima è più applicabile ai widget (ad es. widget di accesso istantaneo) e ai componenti (ad es. contanti, scambio di ricompense). Per visualizzare in anteprima i micrositi, è necessario navigare nelle diverse pagine dei micrositi per vedere gli stati.
{% endhint %}

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

* Visualizzazioni con accesso effettuato vs. non effettuato
* Messaggi di errore e di successo
* Diverse fasi in un flusso multi-step (come la verifica del pagamento in contanti)

Per personalizzare lo stile del tuo brand:

1. Nel menu di navigazione a sinistra, seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenuto**.
   * Per i widget, seleziona **Modifica widget** e per i micrositi, seleziona **Modificare il contenuto**.
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 widget**/**Stile microsito**.
4. Seleziona il colore del tuo brand per cambiare il colore principale presente nel tuo widget o microsito.
5. Successivamente, seleziona lo stile di font che desideri utilizzare.
6. **\[Opzionale]** Procedi attraverso 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="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-8d812c1bf3872e344f46d1b0625a63c004a7bced%2Fe0ca384cff61d04f49724f8a2cd7a214044ecb532b288e484e3942e277396d1d.gif?alt=media" alt=""><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 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ù in basso nelle opzioni di modifica.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e6c8a0d69bf06ad5a2df6c27d1f09ae0ee432e90%2Fb55c15456cdbd904a6ff8a44d426f93a32958279e057958310f6d52bf4970a4f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Font                        | <p>Seleziona lo stile di font che desideri avere all'interno del tuo widget o microsito.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ec18fd738390db60d7a39412866bb3698259b14f%2Fcc6e451c17e08331fb9d41c74d5d87453a9ae21e79ea9850f91bab20b49a716a.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Colore                      | <p>Seleziona i vari colori e accenti che desideri avere all'interno del tuo widget o microsito:</p><p>• <strong>Sfondo</strong></p><p>Seleziona il colore che desideri per lo sfondo del tuo widget o microsito.</p><p>• <strong>Testo</strong></p><p>Puoi cambiare il colore del font sia per il testo principale sia per il testo attenuato all'interno del widget o microsito.</p><p>• <strong>Colore accento</strong></p><p>Cambia i colori dei tuoi accenti. Questi includono elementi come schede o icone all'interno del widget o microsito.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-55be9fef526da2d5ca0fb54102ef83ad55d03e4b%2F81b48cb986ad1a94cbefaf856b0debab102bb11279d654f5e91caf10764718de.jpg?alt=media" alt="" data-size="original"></p><p>• <strong>Colori aggiuntivi</strong> <img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""></p><p>Puoi ulteriormente regolare colore e accenti per ogni elemento in base al tipo di widget o microsito.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0bece59f882d11a013783997bb2518dd4777f23c%2F2f4b167c662fe81c1de11e269d7bac69cc0422c2043a2087d21ace33273bee7c.jpg?alt=media" alt="" data-size="original"></p> |
| Pulsante primario           | <p>Seleziona lo schema di colore che desideri per il tuo pulsante primario o principale. Puoi anche regolare il valore in pixel del raggio del bordo attorno al pulsante.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c761dd03be42d0d41dc16f7a120c4fc2fdc433ac%2Fde0edb9123b43b0ce3a5e5c921ef75bb4f85d62426483bf97e46aacb7becd728.jpg?alt=media" alt="" data-size="original"></p><p>Espandi il <img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Stato hover</strong> sezione per selezionare o modificare ulteriormente il colore in cui il pulsante cambia quando un utente ci passa sopra o interagisce con esso.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aa31df8e922e6a978fbe88542452bbbaf929c848%2Ff99838a5337db16b96652353e550fdeb7df6532461e4b0e324d579065c4bc4d7.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                     |
| Pulsante secondario         | <p>Seleziona lo schema di colore che desideri per il tuo pulsante secondario. Puoi anche regolare il valore in pixel del raggio del bordo attorno al pulsante.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aba04be238a4411ef008e443e94dc3f15b0b2923%2Fce809941b33f15de27de52cf21ed8d5cf5b4e36991d8fef0b0d70f72f3b8c9ab.jpg?alt=media" alt="" data-size="original"></p><p>Espandi il <img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Stato hover</strong> sezione per selezionare o modificare ulteriormente il colore in cui il pulsante cambia quando un utente ci passa sopra o interagisce con esso.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-561ddad6d0fa2db588ba4837bd6cce5275c02b3d%2Fb20584dcfe328bb0cc164b094945aa4bf2c8fb5fe0fb809c83073204fd43798f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                |
| Bordo                       | <p>Cambia il colore e il contorno del bordo dei tuoi componenti, come tabelle o schede, all'interno del widget o microsito.</p><p>• <strong>Colore</strong></p><p>Seleziona il colore del tuo bordo.</p><p>• <strong>Spessore</strong></p><p>Inserisci un'unità in pixel per determinare lo spessore del tuo bordo.</p><p>• <strong>Raggio del bordo</strong></p><p>Inserisci un'unità in pixel per determinare il raggio del tuo bordo.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ad49b6545fa9d0ffa189127095f15ad904d62b26%2F87161ed257680c7779e29077bc360366c09ef62774fb3917cdc33621b85aa064.jpg?alt=media" 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 eventuali campi di input che l'utente compila. Puoi anche inserire un'unità in pixel per modificare la dimensione del raggio del bordo.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7ca9a1cbe9bd4d20e58a6a912c70e6b68d69832e%2Fd56db5a066f633dcafa399ca40df9b9a36cb6b8dc116695eedc872746af2a5b4.jpg?alt=media" alt="" data-size="original"></p><p>Espandi il <img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Opzioni avanzate</strong> sezione per personalizzare ulteriormente i colori dello stato selezionato o dello stato hover dei tuoi campi del modulo.</p><p><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1316f14f290be578906e018e061c38320ba9daac%2F1c704526ce54eccb73066cd4a924cc7b59fdb9bfb8842b648b385ea28923ea0e.jpg?alt=media" 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 embedded che per i 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="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b4d9c97d0dafbbc79cd2782a413fc8eaad21e8d3%2F7109281d478bf7f826b153d935ff7b87f62a1a80c7d6b23aac6d47752c8ae4cb.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

</details>