---
url: "/pl/bannerify/design/popups.md"
description: "Dodaj w Bannerify prostą nakładkę pop-up z tekstem sformatowanym (np. zastrzeżeniem lub regulaminem), otwieraną kliknięciem wybranej warstwy."
---

# Dodawanie klikalnych nakładek pop-up z tekstem do banerów

> Dodaj w Bannerify prostą nakładkę pop-up z tekstem sformatowanym (np. zastrzeżeniem lub regulaminem), otwieraną kliknięciem wybranej warstwy.

### Poradnik wideo: dodawanie nakładek pop-up z tekstem do banerów HTML z Figmy

Ten film pokazuje, jak za pomocą wtyczki Bannerify dodać nakładki pop-up z tekstem sformatowanym do banerów HTML z Figmy.
[Embedded media](https://www.youtube-nocookie.com/embed/fOlw2ghGcIc)

[Video](/assets/videos/bannerify/design/popup-overlays.mp4)

Jeśli baner ma zawierać nakładkę pop-up z przewijanym (i zamykanym) tekstem sformatowanym, otwieraną kliknięciem wybranej warstwy na osi czasu, [zaznacz odpowiednie warstwy wyzwalające](/pl/bannerify/animation/animating-banners#quick-selecting-similar-layers) w każdym banerze, a potem wybierz opcje animacji w sekcji **Generate Popup Overlay Disclaimers** w oknie akcji masowych na dole wtyczki (pojawia się ono, gdy na osi czasu zaznaczonych jest kilka warstw).

Gdy ustawienia animacji pop-upu Ci odpowiadają, kliknij przycisk **Create Popup Links**. Na stronie w Figmie automatycznie powstanie komponent „Popup” (zawierający warstwę tekstową i przycisk zamykania), a każda zaznaczona warstwa zostanie automatycznie połączona z tym komponentem jako wyzwalacz za pomocą natywnego linku w prototypie Figmy.

Możesz zmienić treść warstwy tekstowej, dostosować rozmiar fontu oraz zmienić jednolite wypełnienia tła pop-upu, ikony zamykania i warstwy tekstowej.

Podczas eksportu banerów HTML wtyczka automatycznie wyszuka te linki z prototypu Figmy i komponent Popup, do którego prowadzą, a potem wygeneruje w końcowym zestawie banerów klikalne wyzwalacze i kod nakładki pop-up.

## Dostosowywanie stylu paska przewijania {#customizing-scrollbar-styles}

Jeśli chcesz zmienić wygląd paska przewijania w przewijanych, obciętych warstwach tekstowych lub w tekście nakładki pop-up, włącz **Inject Custom Code** w ustawieniach eksportu HTML, a potem wklej ten kod w pole **Custom CSS**.

```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);
}
```

Zmień wartości na górze, aby ustawić kolor paska przewijania, kolor ścieżki, szerokość, wysokość i promień zaokrąglenia narożników. Niektóre przeglądarki i urządzenia mobilne mogą nadal wyświetlać paski przewijania w natywnym stylu systemu, ale CSS zostanie zastosowany wszędzie tam, gdzie klient pozwala na własny styl pasków przewijania.

> **Warning:** Ten komponent jest celowo bardzo prosty: zawiera tylko jedną warstwę tekstową (na tekst zastrzeżenia) i przycisk zamykania. Możesz dowolnie zmieniać treść tekstu, style fontu i kolory, ale **inne modyfikacje lub dodatkowe warstwy mogą zepsuć eksportowany kod HTML**.