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.

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 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

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.

: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.

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.