---
url: "/pt/bannerify/export/preview.md"
description: "O Bannerify inclui uma página de pré-visualização HTML no .zip exportado, ideal para compartilhar todos os banners com um cliente ou stakeholder."
---

# Personalizar a página de pré-visualização dos banners HTML

> O Bannerify inclui uma página de pré-visualização HTML no .zip exportado, ideal para compartilhar todos os banners com um cliente ou stakeholder.

[Video](/assets/videos/bannerify/export/customize-preview-page.mp4)

Quando você exporta banners HTML, o Bannerify inclui automaticamente uma página de pré-visualização HTML. Esse arquivo carrega todos os banners exportados na mesma página e os organiza em uma grade, para que você veja todos ao mesmo tempo.

Por padrão, a opção **Generate Preview Page** fica ativada no painel de configurações de exportação HTML. Se preferir que a página de pré-visualização não seja gerada nem adicionada ao pacote `.zip`, você pode desativar essa opção.

## Título da página de pré-visualização {#preview-page-title}

O nome do seu **documento do Figma** é usado como a tag `` da página de pré-visualização HTML exportada pelo Bannerify.

## Ordem dos banners na página de pré-visualização {#preview-page-banner-order}

A ordem dos frames de banner no painel de camadas do Figma define a ordem dos banners na página de pré-visualização.

## Selecionar um layout para a página de pré-visualização {#selecting-a-layout-for-your-preview-page}

A opção escolhida na caixa de seleção do **layout da página de pré-visualização** define o estilo de grade usado para posicionar os banners na página de pré-visualização `index.html` gerada. Para mudar, selecione outra opção na caixa de seleção.

### Grade em layout masonry {#masonry-layout-grid}

O modo de layout masonry descobre automaticamente o melhor layout para acomodar todos os banners. Pode ser uma boa opção para um conjunto grande de banners.

### Grade em layout centralizado {#centered-layout-grid}

O modo de layout centralizado alinha verticalmente e centraliza horizontalmente todos os banners. Pode ser uma boa opção para conjuntos menores de banners.

## Ativar o “modo escuro” na página de pré-visualização {#enabling-dark-mode-on-your-preview-page}

Ativar a configuração **Use Dark Mode** aplica um tema/fundo escuro à página de pré-visualização `index.html` gerada. Ative essa configuração se os designs dos seus banners ficarem melhores sobre um fundo mais escuro.

## Adicionar um cabeçalho com a sua marca à página de pré-visualização {#adding-a-branded-header-to-your-preview-page}

Se você vai mostrar a página de pré-visualização `index.html` a clientes ou stakeholders externos, pode adicionar HTML e CSS personalizados para aplicar a sua marca ou um cabeçalho personalizado à página. Qualquer HTML que você adicionar será

### HTML personalizado {#custom-html}

Todo código adicionado ao campo **Custom HTML** é injetado logo após a tag `` na página `index.html` gerada. Você pode adicionar o que quiser aqui, como um cabeçalho personalizado ou algo tão simples quanto uma tag `` com o logotipo da sua empresa.

### CSS personalizado {#custom-css}

Todo código adicionado ao campo **Custom CSS** é injetado em uma tag `style` personalizada (então você não precisa incluir a sua própria tag `style`) na página `index.html`. Use-o para estilizar o **Custom HTML** que você adicionou.

## Compartilhar a página de pré-visualização on-line {#sharing-your-preview-page-online}

O `.zip` exportado pelo Bannerify inclui um arquivo `index.html` na raiz que exibe todos os banners exportados. Você pode fazer upload desse pacote pelo Bannerify usando uma das integrações nativas ou enviá-lo manualmente a um serviço de hospedagem estática.

### Upload manual rápido com o Tiiny Host {#quick-manual-upload-with-tiiny-host}

Para uma opção rápida de arrastar e soltar, você pode [fazer upload manual do `.zip` exportado pelo Bannerify no Tiiny Host](/pt/bannerify/export/tiiny-host). O pacote já contém o `index.html` exigido na raiz, então você não precisa reorganizar os arquivos exportados antes.

### Uploads diretos nativos {#built-in-direct-uploads}

Ative **Upload Preview Page** no painel de exportação HTML do Bannerify e selecione um destes provedores de hospedagem:

- **[Netlify](/pt/bannerify/export/netlify)** faz upload do pacote de pré-visualização em um site da Netlify.
- **[Cloudflare Pages](/pt/bannerify/export/cloudflare-pages)** usa um token de API da Cloudflare, o ID da conta e o nome do projeto do Pages. O Bannerify cria o projeto do Pages automaticamente se ele ainda não existir.
- **[Vercel](/pt/bannerify/export/vercel)** usa um token de acesso da Vercel e o nome do projeto, com um Team ID opcional. Cada exportação cria uma nova URL de deploy de pré-visualização.

O Cloudflare Pages tem um plano gratuito para sites estáticos, sujeito aos [limites atuais do Pages](https://developers.cloudflare.com/pages/platform/limits/). A Vercel também tem um plano Hobby gratuito, mas restringe as contas Hobby a uso pessoal e não comercial; trabalhos de empresas e equipes exigem um plano pago qualificado.

O Zapier e o Make continuam disponíveis para automações personalizadas. Essas integrações enviam o `.zip` exportado ao seu webhook, então o seu Zap ou cenário do Make ainda precisa de uma hospedagem estática na sequência se você quiser que ele retorne uma URL de pré-visualização pública.

### Usar a pré-visualização com o Commentful {#using-the-preview-with-commentful}

No momento, os links de revisão do Commentful exibem frames do Figma, em vez de incorporar uma pré-visualização HTML externa ao vivo. Para o QA, compartilhe a URL de pré-visualização hospedada do Bannerify para verificar animações e interações, junto com um link de revisão do Commentful para comentários e aprovações nos frames.