O que Tilda Publishing faz?
Visão Geral
Tilda é um construtor de sites baseado em blocos — arraste blocos para uma página, personalize-os visualmente e publique. Sem backend para gerenciar, sem hospedagem para configurar. Para desenvolvedores: injete HTML/CSS/JS personalizado em qualquer bloco, use a API Tilda para gerenciar conteúdo programaticamente, conecte formulários a qualquer backend e crie integrações personalizadas. Perfeito para sites de marketing, landing pages e pequenas lojas de e-commerce onde a equipe não técnica precisa atualizar conteúdo de forma independente.
Quando Usar
- Construir sites de marketing e landing pages rapidamente
- Precisar de um CMS que a equipe não técnica possa atualizar facilmente
- E-commerce de pequeno a médio porte (loja integrada do Tilda)
- Landing pages personalizadas com animações avançadas
- Sites que precisam tanto de edição visual quanto de código personalizado
Instruções
Estrutura do Site
Os sites Tilda são organizados como:
- Projeto → contém páginas
- Página → contém blocos (seções)
- Bloco → seção pré-projetada (hero, recursos, preços, galeria, etc.)
- Zero Block — bloco personalizado onde você tem total liberdade de design
HTML/CSS/JS Personalizado em Blocos
<!-- Adicione código personalizado via: Configurações → Mais → Código HTML no <head> ou Antes de </body> -->
<!-- CSS personalizado (head) -->
<style>
/* Substituir padrões do Tilda */
.t-title {
font-family: 'Inter', sans-serif !important;
}
/* Animações personalizadas */
.t-animate {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.t-animate.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Substituições responsivas */
@media (max-width: 640px) {
.t-cover__wrapper {
min-height: 60vh !important;
}
}
</style>
<!-- JavaScript personalizado (antes de </body>) -->
<script>
// Intersection Observer para animações de scroll
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.t-animate').forEach((el) => observer.observe(el));
});
// Tratamento personalizado de formulários — enviar para sua própria API
document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
const formData = new FormData(e.target);
const data = Object.fromEntries(formData);
// Enviar para seu backend junto com o tratamento integrado do Tilda
await fetch('https://api.myapp.com/leads', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
});
</script>
Zero Block (Design Personalizado)
Zero Block oferece controle total estilo Artboard — posicione elementos precisamente com posicionamento personalizado, animações e pontos de interrupção responsivos.
<!-- Zero Block com elementos interativos personalizados -->
<div class="custom-calculator" id="price-calc">
<h3>Calculadora de Preços</h3>
<div class="calc-row">
<label>Número de usuários</label>
<input type="range" id="users" min="1" max="1000" value="10">
<span id="users-count">10</span>
</div>
<div class="calc-row">
<label>Plano</label>
<select id="plan">
<option value="starter">Starter — $5/usuário</option>
<option value="pro">Pro — $12/usuário</option>
<option value="enterprise">Enterprise — $25/usuário</option>
</select>
</div>
<div class="calc-result">
Total: <span id="total">$50</span>/mês
</div>
</div>
<script>
const prices = { starter: 5, pro: 12, enterprise: 25 };
const usersInput = document.getElementById('users');
const planSelect = document.getElementById('plan');
function updatePrice() {
const users = parseInt(usersInput.value);
const price = prices[planSelect.value];
document.getElementById('users-count').textContent = users;
document.getElementById('total').textContent = '$' + (users * price).toLocaleString();
}
usersInput.addEventListener('input', updatePrice);
planSelect.addEventListener('change', updatePrice);
</script>
API Tilda
// api/tilda.ts — Gerenciar conteúdo Tilda programaticamente
const TILDA_PUBLIC_KEY = process.env.TILDA_PUBLIC_KEY;
const TILDA_SECRET_KEY = process.env.TILDA_SECRET_KEY;
const BASE_URL = "https://api.tildacdn.info/v1";
// Obter todos os projetos
async function getProjects() {
const res = await fetch(
`${BASE_URL}/getprojectslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}`
);
return res.json(); // { status: "FOUND", result: [{ id, title, ... }] }
}
// Obter todas as páginas em um projeto
async function getPages(projectId: number) {
const res = await fetch(
`${BASE_URL}/getpageslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&projectid=${projectId}`
);
return res.json();
}
// Obter conteúdo completo da página (HTML + CSS + JS)
async function getPageFull(pageId: number) {
const res = await fetch(
`${BASE_URL}/getpagefull/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&pageid=${pageId}`
);
return res.json();
// Retorna: { html, css, js, images[], title, descr, ... }
}
// Exportar página para sua própria hospedagem
async function exportPage(pageId: number) {
const page = await getPageFull(pageId);
const { html, css, js } = page.result;
// Construir HTML autocontido
return `
<!DOCTYPE html>
<html>
<head>
<style>${css}</style>
</head>
<body>
${html}
<script>${js}</script>
</body>
</html>
`;
}
Tratamento de Formulários e Webhooks
// webhook/tilda-form.ts — Receber envios de formulários do Tilda
/**
* Configure no Tilda: Configurações do Bloco → Formulário → URL do Webhook
* O Tilda envia POST com dados do formulário a cada envio.
*/
export async function handleTildaForm(req: Request) {
const formData = await req.formData();
const data = Object.fromEntries(formData);
// data: { Name: "Kai", Email: "[email protected]", Phone: "+1234567890", ... }
// Salvar no CRM
await fetch("https://api.mycrm.com/leads", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: data.Name,
email: data.Email,
phone: data.Phone,
source: "tilda-landing",
}),
});
// Enviar para o Telegram
await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
chat_id: CHAT_ID,
text: `🔔 Novo lead!\nNome: ${data.Name}\nEmail: ${data.Email}\nTelefone: ${data.Phone}`,
}),
});
return new Response("OK");
}
E-commerce (Loja Tilda)
<!-- Melhorias personalizadas na página de produto -->
<script>
// Adicionar ao carrinho com tratamento personalizado
document.addEventListener('DOMContentLoaded', () => {
// Rastrear eventos de adicionar ao carrinho
document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
btn.addEventListener('click', () => {
const productName = btn.closest('.js-product')
?.querySelector('.js-product-name')?.textContent;
// Enviar para análise
if (window.dataLayer) {
window.dataLayer.push({
event: 'add_to_cart',
product_name: productName,
});
}
});
});
});
</script>
Configuração de SEO e Análises
<!-- Adicionar em Configurações → Mais → Código HTML no <head> -->
<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<!-- Facebook Pixel -->
<script>
!function(f,b,e,v,n,t,s){/* ... Código do Facebook Pixel ... */}();
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<!-- Dados estruturados personalizados -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Minha Empresa",
"url": "https://minhaempresa.com",
"logo": "https://minhaempresa.com/logo.png",
"contactPoint": { "@type": "ContactPoint", "telephone": "+55-11-2345-6789" }
}
</script>
Exemplos
Exemplo 1: Construir uma landing page de marketing
Comando do usuário: "Crie uma landing page para um produto SaaS com hero, recursos, preços, FAQ e formulário de contato — a equipe deve poder atualizar texto e imagens."
O agente projetará a página com blocos Tilda, configurará webhooks de formulário, adicionará CSS personalizado para consistência da marca e configurará o rastreamento de análises.
Exemplo 2: Elementos interativos personalizados no Tilda
Comando do usuário: "Adicione uma calculadora de preços e uma tabela interativa de comparação de produtos ao nosso site Tilda."
O agente criará layouts Zero Block com HTML/JS personalizados para a calculadora e a tabela de comparação, estilizados para combinar com o tema Tilda.
Exemplo 3: Conectar formulários Tilda ao CRM
Comando do usuário: "Envie cada envio de formulário para nosso CRM e notifique a equipe de vendas no Telegram."
O agente configurará webhooks Tilda, criará uma função serverless para receber envios e encaminhará dados para CRM + Telegram.
Diretrizes
- Blocos para estrutura, Zero Block para personalização — use blocos pré-construídos para velocidade, Zero Block para controle total
- Código personalizado em Configurações — HTML no
<head>para CSS/meta, antes de</body>para JS - Formulários têm webhooks integrados — envie envios para qualquer URL
- API Tilda é somente leitura — exporte conteúdo, não é possível criar páginas via API
- Configurações de SEO por página — título, descrição, tags OG nas configurações da página
- Domínio personalizado — aponte DNS para Tilda, SSL automático
- E-commerce integrado — catálogo de produtos, carrinho, checkout, pagamentos
- Responsivo por padrão — blocos se adaptam, mas teste e ajuste pontos de interrupção
- Equipe pode editar qualquer coisa — texto, imagens, blocos, ordem das páginas via editor visual
- Exportar para auto-hospedagem — API retorna HTML/CSS/JS completo para auto-implantação
- Não substitua classes críticas do Tilda — prefixe CSS personalizado com seu namespace
- Google Tag Manager — use GTM para configurações de rastreamento complexas em vez de scripts inline