Tutorial passo a passo para colocar um flipbook com efeito de virar página em qualquer página do Squarespace usando um Bloco de código. Aborda os requisitos do plano, o código de incorporação, o tamanho responsivo, a proteção por senha, o teste no celular e as soluções para os problemas de exibição mais comuns.
Você tem um catálogo, um cardápio ou um portfólio guardado em um PDF, e seu site do Squarespace o mostra como um simples link de download que ninguém clica. Um flipbook resolve isso. Os visitantes leem direto na página, viram as páginas com um deslize e nunca saem do seu site. A ferramenta que faz isso funcionar é o Bloco de código do Squarespace e, com um flipbook criado no Flipbooks AI, o trabalho todo leva cerca de dez minutos.
Este tutorial percorre cada etapa: o que você precisa, onde o código vai, como definir o tamanho e como resolver os problemas que costumam complicar a vida das pessoas.
Um Bloco de código é um bloco de conteúdo que aceita HTML puro. Em vez de digitar um texto ou inserir uma imagem, você cola um trecho de código, e o Squarespace o exibe exatamente como foi escrito. Um código de incorporação de uma plataforma de flipbooks é um desses trechos. Ele instrui o navegador a carregar seu flipbook dentro de um quadro na sua página.
Um PDF linkado abre em uma nova aba ou é baixado para o dispositivo. No celular, isso costuma significar dar zoom com dois dedos numa página minúscula. Um flipbook incorporado permanece dentro do seu layout, se ajusta à tela e mantém as pessoas mais tempo no seu site.
| Método | Experiência de leitura | Permanece no seu site | Adequado para celular |
|---|---|---|---|
| Link de download do PDF | Abre um arquivo separado | Não | Ruim |
| Galeria de imagens das páginas | Rolagem manual | Sim | Médio |
| Flipbook incorporado | Visualização com efeito de virar página | Sim | Excelente |
Os Blocos de código estão disponíveis no plano Business e nos superiores. Os planos Personal não permitem executar código personalizado. Verifique isso antes de começar a montar qualquer coisa, porque é o principal motivo do bloco parecer ausente.
⚠️ Se você só vê o bloco de Markdown e nenhuma opção de Código, seu plano provavelmente não inclui código personalizado. Faça o upgrade em Configurações e depois em Faturamento.
Reúna três coisas primeiro. Isso evita voltar atrás depois.
Exporte em uma resolução adequada. Para a maioria dos catálogos, um arquivo entre 5 e 25 MB fica nítido e carrega rápido. Mantenha as páginas em um tamanho uniforme, porque tamanhos de página misturados deixam a animação de virada irregular.
Decida se o flipbook ocupa a largura total da página ou fica ao lado de um texto. A largura total combina com catálogos e revistas. Um espaço de meia largura funciona bem para uma prévia de amostra ao lado de um formulário de inscrição.
O código de incorporação só existe depois que o flipbook existe. O processo é curto.
💡 Use no fundo do flipbook a mesma cor da seção do seu Squarespace. Assim a moldura desaparece e o flipbook parece parte nativa da página.
As alterações feitas depois da incorporação são atualizadas automaticamente, então você pode corrigir erros de digitação mais tarde. Mesmo assim, defina o básico agora: logotipo, cor e a página inicial. Se seu PDF tiver links ou vídeos, a plataforma os mantém ativos, e você também pode adicionar áudio e vídeo dentro das páginas.
Esta é a parte central do processo. Siga na ordem.
A ferramenta Incorpore o flipbook no site explica as opções, se você quiser vê-las antes de escolher.
✅ Boa prática: deixe Exibir origem desativado. Se ficar ativado, os visitantes veem o código bruto em vez do seu flipbook.
Aqui está uma visão rápida de solução de problemas, com o que cada configuração faz.
| Configuração | O que faz | Valor recomendado |
|---|---|---|
| Exibir origem | Mostra o código como texto | Desativado |
| Largura do bloco | Define a largura da moldura | 100% |
| Altura do bloco | Define a altura da moldura | 600 a 800 px no computador |
| Fundo da seção | Colore a área ao redor da moldura | Igual à cor do flipbook |
Uma moldura baixa demais corta as páginas. Uma alta demais deixa um espaço vazio. Os dois casos parecem descuidados.
O Squarespace não redimensiona iframes automaticamente. Defina uma altura fixa no código de incorporação, como height="700". Uma boa regra é pegar a largura da área de conteúdo e multiplicar por 0,65 para a visualização de página dupla.
Envolva o iframe em um contêiner com largura percentual, para que ele encolha nos celulares. Muitas pessoas também usam uma altura maior para celular, adicionando um pequeno bloco de estilo no CSS personalizado.
💡 Abra sua página em um celular de verdade, não só no modo de visualização do navegador. Os dispositivos reais revelam sobreposição da barra de ferramentas que a prévia não mostra.
| Uso | Posicionamento | Altura sugerida |
|---|---|---|
| Catálogo de produtos | Seção de largura total | 750 px |
| Cardápio de restaurante | Centralizado, 80% da largura | 650 px |
| Portfólio de fotografia | Seção com sangrado | 800 px |
Ver casos reais de uso facilita a decisão.
Um restaurante pode incorporar um cardápio sazonal criado com o Criador de flipbook de cardápio de restaurante. Quando o cardápio muda, a equipe edita o flipbook uma vez, e a página do Squarespace se atualiza sozinha, sem código novo.
Um corretor de imóveis pode colocar um folheto do imóvel criado com o Criador de folheto imobiliário em cada página de imóvel. Os compradores folheiam plantas e fotos sem precisar baixar nada.
Um fotógrafo pode montar uma galeria com a ferramenta Portfólio de fotografia e depois colocá-la em uma página de portfólio. Uma loja de moda pode usar o criador de Catálogo de produtos para um lookbook de atacado.
Nem todo flipbook deve ser público. Tabelas de preços de atacado, propostas para clientes e manuais internos precisam de proteção.
No Flipbooks AI, ative a proteção por senha nas configurações de compartilhamento. Os visitantes digitam a senha antes de as páginas carregarem. Combine isso com uma área de membros do Squarespace ou uma página oculta para mais privacidade.
No plano Professional você pode coletar e-mails antes de os leitores abrirem o flipbook e ver quais páginas recebem mais atenção. Confira os planos e preços para comparar o que cada nível inclui.
| Funcionalidade | Standard | Professional |
|---|---|---|
| Flipbooks ilimitados | Sim | Sim |
| Sem marca d’água | Sim | Sim |
| Proteção por senha | Sim | Sim |
| Estatísticas | Básicas | Detalhadas |
| Geração de contatos | Não | Sim |
| Download offline | Sim | Sim |
Até uma incorporação simples pode dar problema. Estes são os suspeitos de sempre.
Exibir origem está ativado. Abra o bloco, desative a opção e salve.
Confirme se você copiou o trecho inteiro, incluindo a tag de fechamento. Uma colagem incompleta gera uma moldura vazia. Confirme também se o flipbook está publicado e não definido como privado sem senha.
Aumente o valor da altura ou reduza o número de botões da barra de ferramentas nas configurações do flipbook. Menos botões deixam mais espaço para a própria página.
O Squarespace às vezes oculta incorporações durante a edição. Visualize a página ou acesse o link publicado. Lá o flipbook carrega.
Um quadro incorporado não é lido da mesma forma que o texto da página, então cerque-o de palavras reais. Adicione um título acima do flipbook, duas ou três frases descrevendo o conteúdo e um link de texto para o PDF, para quem preferir.
💡 Um flipbook sem texto ao redor dá pouco para os buscadores indexar. Um parágrafo de introdução curto resolve isso em menos de um minuto.
A melhor parte dessa configuração é a manutenção. Como o Bloco de código carrega seu flipbook a partir de um link publicado, você nunca mais precisa mexer no Squarespace quando o conteúdo muda. Substitua o PDF no Flipbooks AI, e a página reflete a mudança na hora. Cardápios sazonais, catálogos trimestrais e tabelas de preços atualizadas ficam todos em dia com um único envio.
Pronto para colocar seu primeiro flipbook no site? Crie uma conta gratuita no Flipbooks AI, envie seu PDF e cole o código de incorporação em um Bloco de código do Squarespace. Veja a lista completa de ferramentas de flipbook para encontrar o modelo certo para o seu conteúdo, e compare os planos e preços quando quiser estatísticas e captação de contatos.
Escolha seu idioma
