Tilda Publishing

¿Qué hace Tilda Publishing?

Descripción general

Tilda es un constructor de sitios web basado en bloques: arrastra bloques a una página, personalízalos visualmente y publica. Sin backend que gestionar, sin hosting que configurar. Para desarrolladores: inyecta HTML/CSS/JS personalizado en cualquier bloque, usa la API de Tilda para gestionar contenido de forma programática, conecta formularios a cualquier backend y crea integraciones personalizadas. Perfecto para sitios de marketing, páginas de aterrizaje y pequeñas tiendas en línea donde el personal no técnico necesita actualizar contenido de forma independiente.

Cuándo usarlo

• Crear sitios de marketing y páginas de aterrizaje rápidamente
• Necesitar un CMS que el personal no técnico pueda actualizar fácilmente
• Tiendas en línea de pequeña a mediana (tienda integrada de Tilda)
• Páginas de aterrizaje personalizadas con animaciones avanzadas
• Sitios que necesiten tanto edición visual como código personalizado

Instrucciones

Estructura del sitio

Los sitios de Tilda se organizan como:

• Proyecto → contiene páginas
• Página → contiene bloques (secciones)
• Bloque → sección predefinida (héroe, características, precios, galería, etc.)
• Zero Block — bloque personalizado con total libertad de diseño

HTML/CSS/JS personalizado en bloques

<!-- Añade código personalizado en: Configuración → Más → Código HTML en <head> o Antes de </body> -->

<!-- CSS personalizado (head) -->
<style>
  /* Anular valores predeterminados de Tilda */
  .t-title {
    font-family: 'Inter', sans-serif !important;
  }

  /* Animaciones personalizadas */
  .t-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  .t-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Anulaciones responsivas */
  @media (max-width: 640px) {
    .t-cover__wrapper {
      min-height: 60vh !important;
    }
  }
</style>

<!-- JavaScript personalizado (antes de </body>) -->
<script>
  // Observador de intersección para animaciones de desplazamiento
  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));
  });

  // Manejo de formularios personalizado: envía a tu propia API
  document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    // Enviar a tu backend junto con el manejo integrado de Tilda
    await fetch('https://api.myapp.com/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Zero Block (Diseño personalizado)

Zero Block te ofrece un control similar a Artboard: coloca elementos con precisión, posicionamiento personalizado, animaciones y puntos de interrupción responsivos.

<!-- Zero Block con elementos interactivos personalizados -->
<div class="custom-calculator" id="price-calc">
  <h3>Calculadora de precios</h3>
  <div class="calc-row">
    <label>Número de usuarios</label>
    <input type="range" id="users" min="1" max="1000" value="10">
    <span id="users-count">10</span>
  </div>
  <div class="calc-row">
    <label>Plan</label>
    <select id="plan">
      <option value="starter">Starter — $5/usuario</option>
      <option value="pro">Pro — $12/usuario</option>
      <option value="enterprise">Enterprise — $25/usuario</option>
    </select>
  </div>
  <div class="calc-result">
    Total: <span id="total">$50</span>/mes
  </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 de Tilda

// api/tilda.ts — Gestionar contenido de Tilda programáticamente
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";

// Obtener todos los proyectos
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, ... }] }
}

// Obtener todas las páginas de un proyecto
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();
}

// Obtener contenido completo de la 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();
  // Devuelve: { html, css, js, images[], title, descr, ... }
}

// Exportar página a tu propio hosting
async function exportPage(pageId: number) {
  const page = await getPageFull(pageId);
  const { html, css, js } = page.result;

  // Construir HTML autocontenido
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>${css}</style>
    </head>
    <body>
      ${html}
      <script>${js}</script>
    </body>
    </html>
  `;
}

Manejo de formularios y webhooks

// webhook/tilda-form.ts — Recibir envíos de formularios de Tilda
/**
 * Configurar en Tilda: Configuración del bloque → Formulario → URL del webhook
 * Tilda envía POST con los datos del formulario en cada envío.
 */
export async function handleTildaForm(req: Request) {
  const formData = await req.formData();
  const data = Object.fromEntries(formData);

  // data: { Name: "Kai", Email: "[email protected]", Phone: "+1234567890", ... }

  // Guardar en 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 a 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: `🔔 ¡Nuevo lead!\nNombre: ${data.Name}\nEmail: ${data.Email}\nTeléfono: ${data.Phone}`,
    }),
  });

  return new Response("OK");
}

Comercio electrónico (Tienda Tilda)

<!-- Mejoras personalizadas en la página de producto -->
<script>
  // Añadir al carrito con manejo personalizado
  document.addEventListener('DOMContentLoaded', () => {
    // Rastrear eventos de añadir al carrito
    document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const productName = btn.closest('.js-product')
          ?.querySelector('.js-product-name')?.textContent;

        // Enviar a análisis
        if (window.dataLayer) {
          window.dataLayer.push({
            event: 'add_to_cart',
            product_name: productName,
          });
        }
      });
    });
  });
</script>

Configuración SEO y análisis

<!-- Añadir en Configuración → Más → Código HTML en <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 Facebook Pixel ... */}();
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- Datos estructurados personalizados -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Mi Empresa",
  "url": "https://miempresa.com",
  "logo": "https://miempresa.com/logo.png",
  "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8900" }
}
</script>

Ejemplos

Ejemplo 1: Crear una página de aterrizaje de marketing

Solicitud del usuario: "Crea una página de aterrizaje para un producto SaaS con héroe, características, precios, FAQ y formulario de contacto: el personal debe poder actualizar texto e imágenes."

El agente diseñará la página con bloques de Tilda, configurará webhooks de formulario, añadirá CSS personalizado para la coherencia de la marca y configurará el seguimiento de análisis.

Ejemplo 2: Elementos interactivos personalizados en Tilda

Solicitud del usuario: "Añade una calculadora de precios y una tabla comparativa de productos interactiva a nuestro sitio de Tilda."

El agente creará diseños de Zero Block con HTML/JS personalizado para la calculadora y la tabla comparativa, con estilo para que coincida con el tema de Tilda.

Ejemplo 3: Conectar formularios de Tilda con CRM

Solicitud del usuario: "Envía cada envío de formulario a nuestro CRM y notifica al equipo de ventas en Telegram."

El agente configurará webhooks de Tilda, creará una función serverless para recibir los envíos y reenviará los datos al CRM + Telegram.

Directrices

• Bloques para estructura, Zero Block para personalización — usa bloques predefinidos para rapidez, Zero Block para control total
• Código personalizado en Configuración — HTML en <head> para CSS/meta, antes de </body> para JS
• Los formularios tienen webhooks integrados — envía envíos a cualquier URL
• La API de Tilda es de solo lectura — exporta contenido, no se pueden crear páginas a través de la API
• Configuración SEO por página — título, descripción, etiquetas OG en la configuración de la página
• Dominio personalizado — apunta DNS a Tilda, SSL automático
• Comercio electrónico integrado — catálogo de productos, carrito, pago, procesamiento de pagos
• Responsivo por defecto — los bloques se adaptan, pero prueba y ajusta los puntos de interrupción
• El personal puede editar cualquier cosa — texto, imágenes, bloques, orden de páginas mediante el editor visual
• Exportar para autoalojamiento — la API devuelve HTML/CSS/JS completo para autodespliegue
• No anular clases críticas de Tilda — prefija el CSS personalizado con tu espacio de nombres
• Google Tag Manager — usa GTM para configuraciones de seguimiento complejas en lugar de scripts en línea