Landinker

Editor de Landings

O que é o Editor de Landings?

O Editor de Landings do Landinker é a ferramenta visual que permite criar, editar e personalizar páginas dentro da plataforma.
Seu objetivo é proporcionar uma experiência intuitiva e flexível, para que qualquer usuário possa construir landing pages otimizadas para conversão, sem necessidade de conhecimentos técnicos avançados.

Como funciona?

• Cada landing é composta por componentes (Navbar, Hero, Grid, etc.).
• Os componentes possuem propriedades (props) que definem sua aparência e comportamento.
• O editor permite arrastar, soltar, ordenar e configurar componentes de forma modular.
• Uma landing pode ter diferentes status (rascunho, publicada, arquivada).
• Cada landing possui um caminho (path) único que determina em qual URL estará disponível.

Nota: Esta documentação explica o uso do editor e sua lógica de funcionamento sob a perspectiva do usuário. Não inclui detalhes internos da API do Puck.

Criar uma landing

Ao criar uma landing você pode escolher como começar:

• A partir de um modelo (template): a página já nasce com seções montadas (Hero, preços, depoimentos, rodapé, etc.) que você edita livremente.
• Do zero: uma página em branco para montar bloco por bloco.

Os modelos são agrupados por finalidade, e "Do zero" fica sempre no topo. Os que se preenchem com seu conteúdo avisam isso no cartão, para que você saiba de início se precisa ter algo carregado.

Artigo de blog: antes de publicar, escolha qual artigo exibir. Se deixar sem escolher, na página publicada aparecerá "Artigo não encontrado" — no editor, contudo, é exibido um artigo de exemplo. Você também pode vinculá-la a um parâmetro dinâmico da rota e ter uma única página que sirva para todos os artigos.

Catálogo: o botão "Adicionar ao carrinho" de cada cartão vem desativado por padrão, pois depende de ter a loja ativada (planos Pro e Enterprise). Você pode ativá-lo no painel do componente.

Em ambos os casos, você preenche os dados principais (nome, caminhos, SEO) e segue para o editor visual.

Propriedades (Props)

As propriedades são configurações específicas de cada componente.
Exemplos:

• Cores (backgroundColor, textColor)
• Dimensões (height, width, borderRadius)
• Conteúdo (title, subtitle, items, src)
• Comportamento (sticky, autoplay, required)

Essas propriedades permitem personalizar a landing em termos de design e funcionalidade.

Componentes

Os componentes são os blocos de construção das landings.

Categorias

• Essenciais: Navbar, Footer
• Seções: Hero, Features, Cta, Pricing, Testimonials, Stats, Steps, Team, LogoCloud, CountdownTimer
• Conteúdo: Card, FAQ, Accordion, Tabs
• Multimídia: Image, Video, Carousel, Gallery, BeforeAfter, Embed, Map
• Tipografia: HeadingBlock, Paragraph, List, IconText
• Ações: Button, Form, Newsletter, Social
• Produtos: ProductsGrid, ProductTitle, ProductPrice, ProductImage, ProductDescription, ProductCategory
• Blog: BlogIndex, BlogNote
• Estrutura: Container, Flex, Grid, Space, Divider

Os componentes podem ser aninhados em contêineres (Container, Flex, Grid). Para editar suas propriedades com controles visuais (cor, espaçamento, dimensões, ícones e variáveis), consulte Editar componentes.

Componentes de Produto

Os módulos de produto permitem:

• Exibir listas de produtos com ProductsGrid.
• Vincular blocos individuais (ProductTitle, ProductPrice, ProductImage, ProductDescription, ProductCategory) a um produto específico.
• Usar productId fixo (ObjectId) ou dinâmico (variável a partir da rota).

Quando o productId for dinâmico, recomenda-se configurar rotas com segmentos como :idProducto e usar a variável resultante {{IDPRODUCTO}}.

Status das Landings

Uma landing no Landinker pode estar em diferentes estados:

• Rascunho (Draft):

  • A landing está em edição.
  • Não é pública.
  • Apenas a equipe interna pode visualizá-la.

• Publicada (Published):

  • A landing está ativa e acessível em sua URL pública.
  • É visível para qualquer visitante.

• Arquivada (Archived):

  • A landing fica salva no histórico.
  • Não fica acessível publicamente.
  • Pode ser restaurada para rascunho ou publicação se necessário.

Caminhos (Paths) das Landings

Os caminhos são as rotas que determinam em qual URL cada landing vive.

• São definidos nas configurações da landing.
• Exemplo:
  • Caminho: /oferta-2025
  • URL pública: https://seusite.com/oferta-2025

Regras

• Cada caminho deve ser único dentro do mesmo domínio.
• Os caminhos não podem utilizar rotas reservadas do sistema, pois o Landinker as resolve antes da sua landing e elas nunca seriam exibidas: /api, /_next, /icon, /sitemap, /robots, /dashboard, /portal, /avatar, /og, /auth, /error, /invitation, e qualquer rota iniciada por arquivo (/robots.txt, /sitemap.xml). O restante é seu: /terms, /privacy ou /cookies são válidos em seu site.
• Os caminhos podem ser atualizados, mas alterá-los implica atualizar também a URL pública.

Página 404 própria

Quando alguém acessa uma URL inexistente em seu site, a resposta permanece em seu domínio (anteriormente redirecionava para landinker.com) e retorna um 404 real.

Sua lista de landings já inclui uma, "Página não encontrada (404)", marcada como Sistema: é a página de erro de todo o seu site e está sempre publicada. Edite-a como qualquer landing — conteúdo, SEO, layout — e as alterações entram em vigor ao salvar.

Por ser do sistema, ela não pode ser excluída, despublicada nem ter sua rota alterada: é o endereço procurado por seu site quando uma página não existe. Também não consome limite de landings do seu plano. Se você já tinha uma landing em /404 criada por você, ela passa a ser essa: não é criada duplicata.

A landing de /404 é servida com status HTTP 404 (inclusive ao acessar diretamente /404), o que é esperado pelos buscadores para uma página de erro.

Caminhos dinâmicos

Você também pode criar caminhos dinâmicos usando segmentos com :.

• Exemplo de caminho dinâmico: /tienda/:categoria/:idProducto
• Se um usuário acessar /tienda/zapatillas/6770…-nike-air, a landing é renderizada com variáveis disponíveis no conteúdo.
• Cada segmento dinâmico se transforma em uma variável em maiúsculas:
  • :categoria -> {{CATEGORIA}}
  • :idProducto -> {{IDPRODUCTO}}
  • :nota -> {{NOTA}}
  • :tag -> {{TAG}}
• Os endereços de produtos e artigos trazem seu identificador e nome, como no Mercado Livre (/producto/6770691107212649a3077ddc-zapatillas-running). A página encontra o produto pelo identificador; o nome serve para clareza e para o Google. Se você alterar o nome, os links antigos continuam funcionando e levam ao novo nome.

Pré-visualização com dados de exemplo. Uma landing dinâmica não possui um produto ou artigo concreto até que alguém acerte uma URL real. No editor e na prévia do painel (o ícone de olho na lista de landings), esses componentes mostram dados de exemplo, permitindo ver como ficará o layout durante a edição. Em uma rota fixa (ex.: uma landing atrelada a um produto específico), dados reais são exibidos.

Seleção guiada por tipo. Nas configurações da landing, para cada segmento :param aparece um seletor com o tipo de variável (Produto, Categoria de produto, Artigo de blog, Tag de blog ou Personalizado). Escolher um tipo conhecido aplica o nome canônico correto (evitando digitação manual) e oferece a resolução estrita adequada (produtos ou artigos ausentes). Com "Personalizado", o nome fica livre.

Como usá-las dentro do conteúdo

Você pode inserir variáveis diretamente em textos, títulos ou descrições usando chaves duplas:

• {{CATEGORIA}}
• {{CURRENT_PATH}}
• {{GROUP_NAME}}
• {{USER_NAME}}
• {{USER_EMAIL}}

Privacidade de {{USER_NAME}} e {{USER_EMAIL}}. São preenchidos com os dados do visitante autenticado, mas somente se ele for membro do grupo dono da landing (por segurança, para não expor dados de um usuário do Landinker a landings de outros grupos). Para visitantes anônimos ou de outro grupo, permanecem não resolvidos: use um valor padrão (fallback) com | (ex.: {{USER_NAME|convidado}}).

Exemplos práticos

• Rota fixa: /black-friday
  • Útil quando a landing existe apenas em uma URL exata.
• Rota dinâmica: /curso/:categoria
  • Útil quando se deseja reutilizar a mesma landing para várias categorias.
• Texto dentro da landing: Explore {{CATEGORIA}}
  • Resultado de exemplo: Explore tênis

Tratamento de produtos ausentes

Nas propriedades raiz (root props) você pode configurar strictProductResolution:

• false (recomendado para landings de marketing): se faltar um produto, os blocos do produto ausente são ocultados e a landing continua renderizando o restante do conteúdo.
• true (recomendado para landings de detalhe): se faltar um produto obrigatório, a landing é tratada como não encontrada e pode retornar 404.

Útil para escolher entre uma experiência tolerante a falhas ou uma experiência estrita por URL de produto.

Histórico de versões

Cada vez que uma landing é salva (ou uma versão é restaurada), registra-se uma versão no histórico, acessível pelo ícone de histórico no editor.

No painel de histórico você pode:

• Nomear/etiquetar uma versão com um nome próprio (ex.: "Antes do lançamento") para reconhecê-la facilmente. O rótulo pode ser renomeado ou removido a qualquer momento.
• Visualizar a prévia de uma versão como ela ficaria antes de restaurar.
• Comparar duas versões: ative "Comparar versões", selecione duas e veja as diferenças — quais componentes foram adicionados, removidos ou modificados, além de alterações em campos (nome, status, rotas).
• Restaurar uma versão (pela lista, prévia ou comparação). Restaurar não sobrescreve o histórico: cria-se uma nova versão a partir daquele backup (o histórico é append-only).

Nomear e restaurar estão disponíveis para todas as entidades com histórico (landings, produtos e artigos de blog). A comparação de componentes é exclusiva das landings (que possuem árvore de componentes).

Resumo

O Editor de Landings do Landinker permite:

• Construir páginas com componentes personalizáveis.
• Gerenciar seu ciclo de vida com status claros (rascunho, publicada, arquivada).
• Definir caminhos únicos que controlam a acessibilidade e visibilidade de cada landing.
• Resolver cenários avançados com caminhos dinâmicos e módulos de produto vinculados por variáveis.