Landinker

Editar componentes

Quando você seleciona um componente no editor, suas propriedades surgem no painel direito. Em vez de escrever valores manualmente, a maioria dos campos conta com controles visuais. Cada campo exibe à esquerda um ícone de tipo indicando sua natureza (um T para texto, uma paleta para cor, uma régua para dimensão, etc.).

Cor (paleta do grupo)

O campo de cor permite escolher entre:

• As cores da paleta do grupo (primária, secundária, destaque, fundo, texto), exibidas com sua cor real.
• Uma cor própria (hex) com o seletor.
• Nenhuma (sem cor).

Ao usar uma cor da paleta, se você alterar a paleta do grupo, o componente se atualiza automaticamente.

A paleta do grupo é definida em Configurações do grupo → Paleta de cores: você pode usar uma predefinida ou criar uma personalizada com suas próprias cores (com pré-visualização ao vivo). Aplica-se ao painel e às suas landings e produtos publicados.

Cor de fundo da seção

Vários módulos de seção (Depoimentos, Tabela de preços, Equipe, Abas, além de Hero, CTA e outros) possuem Cor de fundo da seção e Cor do texto. Ao escolher um fundo, o módulo adiciona espaçamento interno e cantos arredondados automaticamente, para que o conteúdo não encoste na borda da cor. Sem fundo, o módulo é exibido como sempre.

Imagem (URL ou multimídia)

Os campos de imagem (Hero, avatares, logotipos, capa de um artigo…) exibem uma prévia do conteúdo carregado e permitem:

• Colar uma URL de qualquer imagem, como de costume.
• Escolher da multimídia: abre sua biblioteca de arquivos com busca e, com um clique, aplica ao campo. A partir daí você também pode enviar e usar uma nova imagem sem sair do editor: com o botão Enviar e usar ou arrastando o arquivo para a janela.
• Arrastar uma imagem para o campo: soltando diretamente sobre o campo, o envio e a aplicação ocorrem sem abrir a janela. Se soltar várias, a primeira é utilizada (o campo recebe uma única imagem); para enviar vários arquivos de uma vez, use a seção Multimídia.

O botão da biblioteca aparece se seu plano incluir multimídia (Basic em diante) e você tiver permissão para visualizá-la. Consulte Multimídia.

Espaçamento (margem e preenchimento)

O campo de espaçamento utiliza um menu de seleção com predefinições — Nenhum, Pequeno, Médio, Grande — aplicadas aos quatro lados simultaneamente. Com Personalizado, você ajusta cada lado (superior, direito, inferior, esquerdo) de forma independente. Há também abas por dispositivo (computador, tablet, celular) para espaçamentos específicos.

Dimensões (altura e largura)

Em vez de digitar 100vh manualmente, o campo de dimensão oferece um menu com opções claras (Automático, Meia tela, Tela cheia ou Personalizado) e uma barra deslizante (slider) com o valor à direita, editável para medidas exatas (por exemplo, 420px).

Ícones

Os campos de ícone abrem uma busca com visualização prévia: digite o nome e escolha o ícone na grade, sem precisar conhecer a lista completa.

Variáveis dinâmicas ({{…}})

Nos campos de texto e link, ao digitar {{ abre-se um menu com as variáveis disponíveis. Ao selecionar uma, insere-se o token; na página publicada ele é substituído pelo valor real.

Variáveis típicas:

• Usuário: {{USER_NAME}}, {{USER_EMAIL}}
• Grupo: {{GROUP_NAME}}, {{GROUP_DESCRIPTION}} e as cores da paleta
• Rota: {{CURRENT_PATH}} e cada parâmetro dinâmico do caminho (ex.: uma rota /blog/:nota habilita {{NOTA}})
• Produto da rota: {{PRODUCT_TITLE}}, {{PRODUCT_DESCRIPTION}}, {{PRODUCT_PRICE}}, {{PRODUCT_CATEGORY}}, {{PRODUCT_IMAGE}}
• Artigo da rota: {{BLOG_TITLE}}, {{BLOG_EXCERPT}}, {{BLOG_AUTHOR}}, {{BLOG_TAGS}}, {{BLOG_COVER}}, {{BLOG_DATE}}

Valor padrão (fallback): caso uma variável possa não ter valor, adicione um fallback com |. Por exemplo, {{USER_NAME|Convidado}} exibe o nome do usuário ou, na ausência, "Convidado". Sem fallback, se a variável não tiver valor, o texto permanecerá como {{USER_NAME}}.

Variáveis do produto ou do artigo da rota

As variáveis {{PRODUCT_*}} e {{BLOG_*}} são preenchidas com a entidade correspondente àquela URL. Em uma landing com um componente de produto (ou artigo) associado a um parâmetro de rota — por exemplo, uma rota /producto/:id e um componente "Produto completo" com ID em {{ID}} —, cada endereço resolve as variáveis com seu produto.

Isso permite que uma única landing atenda a todo o catálogo sem duplicação de textos. Dois detalhes:

• O preço sai com o mesmo formato do componente Preço, e a descrição entra como texto simples (sem asteriscos ou traços de formatação), ideal para leitura por mecanismos de busca.
• Se a landing não vincular nenhuma entidade ou o produto não existir, a variável não resolve (permanecendo o token ou o fallback definido com |), da mesma forma que {{USER_NAME}} para um visitante anônimo.

Título e descrição para buscadores (SEO)

Os campos Título SEO, Descrição SEO, Palavras-chave e Imagem de compartilhamento (OG) em Configurações da landing aceitam as mesmas variáveis. Nos três campos de texto você conta com o mesmo preenchimento automático do editor: digite {{ e a lista se abre, navegue com as setas e insira com Enter. Parâmetros das rotas digitadas acima também aparecem, mesmo antes de salvar. Essa é a maneira de evitar o clássico problema de rotas dinâmicas: dezenas de URLs com o mesmo título e descrição, tratadas pelos buscadores como conteúdo duplicado.

Por exemplo, com o título {{PRODUCT_TITLE}} | Minha Loja, cada produto é compartilhado e indexado sob seu próprio nome.

Se algo não for resolvido, o token não é publicado. Quando o produto não existe, foi excluído ou o campo está vazio, o campo inteiro é descartado e o texto padrão do seu grupo é utilizado. Você nunca verá um {{PRODUCT_TITLE}} literal no Google ou na prévia do WhatsApp.

Nos links das listagens (grade de produtos, índice de blog), o menu inclui também uma variável por cartão substituída pelo item de cada card: {{CARD_PRODUCT_ID}} e {{CARD_BLOG_ID}}. Ambas fornecem o endereço do item: seu identificador e nome (6770…-zapatillas-running). Por exemplo, um link /blog/{{CARD_BLOG_ID}} faz com que cada cartão leve ao detalhe do respectivo artigo.

Links para uma seção da mesma página

Em qualquer campo de link, ao digitar # como primeiro caractere surge a lista de IDs dos componentes dessa landing para selecionar o destino. Escolhendo um, o campo torna-se #precios, que direciona para aquela seção ao clicar.

Para que um componente apareça nessa lista, defina um valor em seu campo ID (opcional). Se nenhum tiver ID ainda, o menu indicará isso.

Outros recursos do editor

• Busca de componentes: no painel esquerdo há uma busca que filtra os componentes em tempo real conforme você digita.
• Prévia no computador: o visualizador abre por padrão no modo computador (largura total); você pode alternar para tablet ou celular na barra superior para conferir a adaptação responsiva.