# Widgets & Microsites mit dem Content-Editor anpassen

Der Inhaltseditor ermöglicht es Ihnen, Widgets und Microsites zu erstellen, die nahtlos zur Identität Ihrer Marke passen und so ein konsistentes und vertrauenswürdiges Erlebnis für Ihre Kunden sicherstellen. Ein gut gebrandeter Kontaktpunkt ist entscheidend, um hohe Engagement- und Programmakzeptanzraten zu erzielen.

#### Zentrale Branding-Steuerung

Sie können die Kerndesignelemente Ihrer Marke mühelos über die Widget- oder Microsite-Stiloption finden und aktualisieren. Alle Branding-Einstellungen befinden sich in einem eigenen Branding-Bereich.

Widgets oder Microsites sehen je nach Kontext des Benutzers unterschiedlich aus, z. B. ob er eingeloggt ist, einen Fehler hat oder auf einem mobilen Gerät anzeigt. Unsere Editor-Vorschauen ermöglichen es Ihnen, einfach zwischen allen möglichen Zuständen Ihres Widgets oder Ihrer Microsite zu wechseln.

{% hint style="info" %}
**Note**: Die Vorschau ist eher auf Widgets (z. B. Instant-Access-Widgets) und Komponenten (z. B. Bargeld, Prämienaustausch) anwendbar. Um Microsites vorzuschauen, müssen Sie zu den verschiedenen Microsite-Seiten navigieren, um die Zustände zu sehen.
{% endhint %}

Dies erspart das manuelle Durchführen von Aktionen, um zu sehen, wie eine Komponente aussehen wird. Sie können nun mit Vertrauen Text und Design für jeden Schritt der Benutzerreise bearbeiten, einschließlich:

* Ansichten eingeloggt vs. ausgeloggt
* Fehler- und Erfolgsmeldungen
* Verschiedene Schritte in einem mehrteiligen Ablauf (z. B. Bargeldauszahlungs‑Verifizierung)

Um Ihren Branding-Stil anzupassen:

1. Wählen Sie im linken Navigationsmenü ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Inhalte**.
   * Für Widgets wählen Sie **Widgets bearbeiten** und für Microsites wählen Sie **Inhalt bearbeiten**.
2. Wählen Sie im linken Menü aus, ob Sie an der Microsite oder am Widget bearbeiten möchten.
3. Wählen Sie die Seitenvorlage aus, die Sie bearbeiten möchten, und wählen Sie dann **Widget-Stil**/**Microsite-Stil**.
4. Wählen Sie Ihre Markenfarbe, um die Hauptfarbe zu ändern, die in Ihrem Widget oder Ihrer Microsite verwendet wird.
5. Wählen Sie als Nächstes den Schriftstil aus, den Sie verwenden möchten.
6. **\[Optional]** Fahren Sie mit den verbleibenden Stiloptionen fort, um Ihre Markenidentität innerhalb des Widgets oder der Microsite vollständig anzupassen.

   <div data-with-frame="true"><figure><img src="https://1698965099-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>Referenz der Style-Editor-Elemente</summary>

| Stilelement            | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hauptmarkenfarbe       | <p>Diese Farbe wird in verschiedenen Elementen Ihres Widgets oder Ihrer Microsite verwendet, daher ist es wichtig, diesen Schritt abzuschließen. Wählen Sie Ihre Hauptmarkenfarbe.</p><p>Diese Farbe wird auch in den Abschnitten Primäre Schaltfläche und Sekundäre Schaltfläche weiter unten in den Bearbeitungsoptionen verwendet.</p><p><img src="https://1698965099-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>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Schriftart             | <p>Wählen Sie den Schriftstil aus, der in Ihrem Widget oder Ihrer Microsite verwendet werden soll.</p><p><img src="https://1698965099-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>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Farbe                  | <p>Wählen Sie die verschiedenen Farben und Akzente aus, die in Ihrem Widget oder Ihrer Microsite erscheinen sollen:</p><p>• <strong>Hintergrund</strong></p><p>Wählen Sie eine Farbe, die als Hintergrund für Ihr Widget oder Ihre Microsite verwendet werden soll.</p><p>• <strong>Text</strong></p><p>Sie können die Schriftfarbe sowohl für den Haupttext als auch für den abgeschwächten Text innerhalb des Widgets oder der Microsite ändern.</p><p>• <strong>Akzentfarbe</strong></p><p>Ändern Sie die Farben Ihrer Akzente. Dazu gehören Elemente wie Registerkarten oder Symbole innerhalb des Widgets oder der Microsite.</p><p><img src="https://1698965099-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>Zusätzliche Farben</strong> <img src="https://1698965099-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>Sie können Farbe und Akzente für jedes Element je nach Widget- oder Microsite-Typ weiter anpassen.</p><p><img src="https://1698965099-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> |
| Primäre Schaltfläche   | <p>Wählen Sie das Farbschema, das Ihre primäre oder Hauptschaltfläche haben soll. Sie können auch den Pixelwert für den Radius der Schaltflächenbegrenzung anpassen.</p><p><img src="https://1698965099-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>Erweitern Sie das <img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Hover-Zustand</strong> Abschnitt, um die Farbe weiter auszuwählen oder zu ändern, in die sich Ihre Schaltfläche ändert, wenn ein Benutzer mit der Maus darüber fährt oder mit der Schaltfläche interagiert.</p><p><img src="https://1698965099-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>                                                                                                                                                                                                                                                                                                                                                                        |
| Sekundäre Schaltfläche | <p>Wählen Sie das Farbschema, das Ihre sekundäre Schaltfläche haben soll. Sie können auch den Pixelwert für den Radius der Schaltflächenbegrenzung anpassen.</p><p><img src="https://1698965099-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>Erweitern Sie das <img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Hover-Zustand</strong> Abschnitt, um die Farbe weiter auszuwählen oder zu ändern, in die sich Ihre Schaltfläche ändert, wenn ein Benutzer mit der Maus darüber fährt oder mit der Schaltfläche interagiert.</p><p><img src="https://1698965099-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>                                                                                                                                                                                                                                                                                                                                                                                |
| Rahmen                 | <p>Ändern Sie die Farbe und die Rahmenlinie Ihrer Komponenten, wie Tabellen oder Karten, innerhalb Ihres Widgets oder Ihrer Microsite.</p><p>• <strong>Farbe</strong></p><p>Wählen Sie die Farbe Ihres Rahmens.</p><p>• <strong>Dicke</strong></p><p>Geben Sie eine Einheit in Pixeln ein, um die Dicke Ihres Rahmens zu bestimmen.</p><p>• <strong>Eckenradius</strong></p><p>Geben Sie eine Einheit in Pixeln ein, um den Radius Ihres Rahmens zu bestimmen.</p><p><img src="https://1698965099-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>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Formularfelder         | <p>Wählen Sie die Farbe aus, die Sie für die verschiedenen Formularfelder in Ihrem Widget oder Ihrer Microsite möchten. Dazu gehören alle Eingabefelder, die der Benutzer ausfüllt. Sie können auch eine Einheit in Pixeln eingeben, um die Größe des Randradius zu ändern.</p><p><img src="https://1698965099-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>Erweitern Sie das <img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Erweiterte Optionen</strong> Abschnitt, um die Farben des ausgewählten Zustands oder des Hover-Zustands Ihrer Formularfelder weiter anzupassen.</p><p><img src="https://1698965099-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>                                                                                                                                                                                                                                                                                                                             |
| Widget-Größe           | <p>Ändern Sie die Größe Ihrer Widgets innerhalb der Vorlage. Sie können die Abmessungen sowohl für eingebettete als auch für Popup-Widgets anpassen. Wählen Sie eine Mindest- und Höchstgröße und wählen Sie aus den Dropdown-Optionen die Maßeinheit. Entscheiden Sie, ob die Messungen in Pixel oder in Prozent angegeben werden sollen.</p><p><img src="https://1698965099-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>
