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
O nome do seu documento do Figma é usado como a tag <title></title> da página de pré-visualização HTML exportada pelo Bannerify.
Ordem dos banners na página de pré-visualização
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
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
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
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
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
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
Todo código adicionado ao campo Custom HTML é injetado logo após a tag <body></body> 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 <img> com o logotipo da sua empresa.
CSS personalizado
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
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
Para uma opção rápida de arrastar e soltar, você pode fazer upload manual do .zip exportado pelo Bannerify no 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
Ative Upload Preview Page no painel de exportação HTML do Bannerify e selecione um destes provedores de hospedagem:
- Netlify faz upload do pacote de pré-visualização em um site da Netlify.
- 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 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. 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
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.