Customizing the preview page for your exported HTML banners

When you export any HTML banners, Bannerify will automatically include an HTML preview page. This file loads in all of your exported banners on the same page, and lays them out in a grid where you can see them all at the same time.

By default, the Generate Preview Page toggle is enabled in your HTML export settings panel, but if you'd prefer to exclude a preview page from being generated and added to your .zip package, you can optionally turn off this toggle, if needed.

Preview Page Title ​

The name of your Figma document will be used as the <title></title> tag for the exported HTML preview page from Bannerify.

Preview Page Banner Order ​

The order of your banner frames in the Figma layers panel will be used to order your banners on the preview page.

Selecting a layout for your preview page ​

Updating the preview page layout select box option will set the grid style used to position your banners in the generated index.html preview page. You can change this by selecting a different option in the select box.

Masonry Layout Grid ​

The masonry layout mode option will automatically figure out the best layout to fit all of your banners. This can be a good option for a large banner set.

Centered Layout Grid ​

The centered layout mode option will vertically align and horitzontally center all of the banners. This can be a good option for smaller banner sets.

Enabling "Dark Mode" on your preview page ​

Enabling the Dark Mode setting will set a dark theme/background to your generated index.html preview page. You can enable this setting if your banner designs work better against a darker background.

Adding a branded header to your preview page ​

If you're showing your index.html preview page to clients or third party stakeholders, you can add some custom HTML and CSS to apply your own branding or custom header to the page. Any HTML you add will be

Custom HTML ​

Any code added to the Custom HTML field will be injected directly after the <body></body> tag in the generated index.html page. You can add anything here, like a custom header, or something as simple as an <img> tag linking to your company logo.

Custom CSS ​

Any code added to the Custom CSS field will be injected into a custom style tag (so you don't need to add your own style tag in your input) in the index.html page. This can be used to style the Custom HTML you've added.