Klickbare Popup-Overlays mit Rich Text zu deinen Bannern hinzufügen

Mit Bannerify fügst du ein einfaches Popup-Overlay mit Rich Text hinzu (zum Beispiel Haftungsausschlüsse oder AGB), das erscheint, wenn man auf eine bestimmte Ebene deines Banners klickt.

Video-Tutorial: Popup-Overlays mit Rich Text zu HTML-Bannern aus Figma hinzufügen

Dieses Video zeigt, wie du HTML-Bannern aus Figma mit dem Bannerify-Plugin Popup-Overlays mit Rich Text hinzufügst.

Wenn dein Banner ein Popup-Overlay mit scrollbarem (und schließbarem) Rich Text enthalten soll, das sich per Klick auf eine bestimmte Ebene deiner Banner-Zeitleiste öffnet, wähle die gewünschten auslösenden Ebenen in jedem deiner Banner aus. Wähle dann im Bereich für Mehrfachaktionen unten im Plugin (das erscheint, wenn in deiner Zeitleiste mehrere Ebenen markiert sind) beliebige Animationsoptionen im Abschnitt Generate Popup Overlay Disclaimers.

Wenn du mit den Animationseinstellungen des Popups zufrieden bist, klick auf den Button Create Popup Links. Bannerify erstellt dann automatisch eine „Popup“-Komponente (mit einer Textebene und einem Schließen-Button) auf deiner Figma-Seite und verknüpft jede ausgewählte Ebene über die native Prototyp-Link-Funktion von Figma automatisch als Auslöser mit dieser neuen Popup-Komponente.

Du kannst den Inhalt der Textebene gern ändern, die Schriftgröße anpassen und die einfarbigen Füllungen des Popup-Hintergrunds, des Schließen-Symbols und der Textebene ändern.

Wenn du deine HTML-Banner exportierst, sucht das Plugin automatisch nach diesen Figma-Prototyp-Links und der Popup-Komponente, auf die sie verweisen, und erzeugt die klickbaren Auslöser und den Code für das Popup-Overlay in deinem fertig exportierten Banner-Set.

Stile der Scrollleiste anpassen ​

Wenn du die Scrollleiste für scrollbare, gekürzte Textebenen oder den Text von Popup-Overlays anpassen willst, aktiviere in deinen HTML-Exporteinstellungen Inject Custom Code und füge Folgendes in das Feld Custom CSS ein.

css
:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

Mit den Werten oben änderst du Farbe, Spurfarbe, Breite, Höhe und Eckenradius der Scrollleiste. Manche Browser und Mobilgeräte stellen Scrollleisten trotzdem im nativen Systemstil dar, aber das CSS wird überall angewendet, wo der Client eigene Scrollleisten-Stile zulässt.

Beachte: Diese Komponente ist bewusst sehr einfach gehalten und besteht nur aus der einzelnen Textebene (für den Haftungsausschluss) und dem Schließen-Button. Text, Schriftstile und Farben kannst du gern anpassen, aber andere Anpassungen oder zusätzliche Ebenen können das exportierte HTML beschädigen.