Gdy eksportujesz banery HTML, Bannerify automatycznie dołącza stronę podglądu HTML. Ten plik wczytuje wszystkie wyeksportowane banery na jednej stronie i rozmieszcza je w siatce, dzięki czemu widzisz je wszystkie jednocześnie.

Domyślnie przełącznik Generate Preview Page w panelu ustawień eksportu HTML jest włączony. Jeśli nie chcesz, aby strona podglądu była generowana i dodawana do paczki .zip, możesz go wyłączyć.

Tytuł strony podglądu

Nazwa Twojego dokumentu w Figmie zostanie użyta jako znacznik <title></title> strony podglądu HTML eksportowanej z Bannerify.

Kolejność banerów na stronie podglądu

Kolejność ramek banerów w panelu warstw w Figmie wyznacza kolejność banerów na stronie podglądu.

Wybór układu strony podglądu

Opcja w polu wyboru preview page layout określa styl siatki, w której rozmieszczone są banery na wygenerowanej stronie podglądu index.html. Możesz to zmienić, wybierając inną opcję w tym polu.

Układ siatki Masonry

Tryb układu Masonry automatycznie dobiera najlepszy układ, w którym zmieszczą się wszystkie banery. To dobra opcja dla dużego zestawu banerów.

Układ wyśrodkowany

Tryb układu wyśrodkowanego wyrównuje wszystkie banery w pionie i wyśrodkowuje je w poziomie. To dobra opcja dla mniejszych zestawów banerów.

Włączanie trybu ciemnego na stronie podglądu

Włączenie ustawienia Use Dark Mode nadaje wygenerowanej stronie podglądu index.html ciemny motyw i tło. Włącz to ustawienie, jeśli Twoje banery lepiej wyglądają na ciemniejszym tle.

Dodawanie firmowego nagłówka do strony podglądu

Jeśli pokazujesz stronę podglądu index.html klientom lub zewnętrznym interesariuszom, możesz dodać własny kod HTML i CSS, aby nadać stronie własny branding lub nagłówek. Każdy dodany kod HTML zostanie

Własny HTML

Kod dodany w polu Custom HTML zostanie wstawiony bezpośrednio po znaczniku <body></body> na wygenerowanej stronie index.html. Możesz tu dodać cokolwiek, na przykład własny nagłówek albo po prostu znacznik <img> z logo Twojej firmy.

Własny CSS

Kod dodany w polu Custom CSS zostanie wstawiony do osobnego znacznika style na stronie index.html (nie musisz więc dodawać własnego znacznika style). Możesz w ten sposób ostylować dodany Custom HTML.

Udostępnianie strony podglądu online

Wyeksportowany plik .zip z Bannerify zawiera w katalogu głównym plik index.html, który wyświetla wszystkie wyeksportowane banery. Możesz przesłać tę paczkę z Bannerify przez jedną z wbudowanych integracji albo ręcznie do usługi hostingu statycznego.

Szybkie ręczne przesyłanie przez Tiiny Host

Jeśli wolisz szybkie przeciągnięcie i upuszczenie, możesz ręcznie przesłać wyeksportowany plik .zip z Bannerify do Tiiny Host. Paczka zawiera już wymagany plik index.html w katalogu głównym, więc nie musisz najpierw przestawiać wyeksportowanych plików.

Wbudowane bezpośrednie przesyłanie

Włącz Upload Preview Page w panelu eksportu HTML w Bannerify, a następnie wybierz jednego z tych dostawców hostingu:

• Netlify przesyła paczkę podglądu do witryny w Netlify.
• Cloudflare Pages korzysta z tokenu API Cloudflare, identyfikatora konta i nazwy projektu Pages. Bannerify automatycznie tworzy projekt Pages, jeśli jeszcze nie istnieje.
• Vercel korzysta z tokenu dostępu Vercel i nazwy projektu oraz opcjonalnego Team ID. Każdy eksport tworzy nowy URL wdrożenia podglądu.

Cloudflare Pages oferuje darmowy plan dla witryn statycznych, z zastrzeżeniem aktualnych limitów Pages. Vercel również ma darmowy plan Hobby, ale ogranicza konta Hobby do użytku osobistego i niekomercyjnego; praca firmowa i zespołowa wymaga odpowiedniego płatnego planu.

Zapier i Make nadal są dostępne do własnej automatyzacji. Te integracje wysyłają wyeksportowany plik .zip do Twojego webhooka, więc jeśli Zap lub scenariusz Make ma zwracać publiczny URL podglądu, nadal potrzebuje dalej w łańcuchu hostingu statycznego.

Korzystanie z podglądu w Commentful

Linki do przeglądu w Commentful wyświetlają obecnie ramki z Figmy, a nie osadzają zewnętrznego podglądu HTML na żywo. Na potrzeby QA udostępnij hostowany URL podglądu z Bannerify do sprawdzania animacji i interakcji, a obok niego link do przeglądu w Commentful do komentarzy i akceptacji opartych na ramkach.