Tilda Publishing

Was macht Tilda Publishing?

Übersicht

Tilda ist ein blockbasierter Website-Builder – ziehe Blöcke auf eine Seite, passe sie visuell an und veröffentliche sie. Kein Backend zu verwalten, kein Hosting zu konfigurieren. Für Entwickler: injiziere benutzerdefiniertes HTML/CSS/JS in jeden Block, verwende die Tilda-API, um Inhalte programmatisch zu verwalten, verbinde Formulare mit jedem Backend und baue benutzerdefinierte Integrationen. Perfekt für Marketing-Seiten, Landing Pages und kleine E-Commerce-Shops, bei denen nicht-technische Mitarbeiter Inhalte unabhängig aktualisieren müssen.

Wann verwenden

• Schnelles Erstellen von Marketing-Seiten und Landing Pages
• Benötige ein CMS, das nicht-technische Mitarbeiter einfach aktualisieren können
• Kleine bis mittlere E-Commerce-Shops (Tildas integrierter Shop)
• Benutzerdefinierte Landing Pages mit erweiterten Animationen
• Websites, die sowohl visuelle Bearbeitung als auch benutzerdefinierten Code benötigen

Anleitung

Seitenstruktur

Tilda-Seiten sind wie folgt organisiert:

• Projekt → enthält Seiten
• Seite → enthält Blöcke (Abschnitte)
• Block → vorgefertigter Abschnitt (Hero, Features, Preise, Galerie usw.)
• Zero Block — benutzerdefinierter Block mit voller Gestaltungsfreiheit

Benutzerdefiniertes HTML/CSS/JS in Blöcken

<!-- Füge benutzerdefinierten Code hinzu über: Einstellungen → Mehr → HTML-Code im <head> oder vor </body> -->

<!-- Benutzerdefiniertes CSS (head) -->
<style>
  /* Überschreibe Tilda-Standardeinstellungen */
  .t-title {
    font-family: 'Inter', sans-serif !important;
  }

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

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

<!-- Benutzerdefiniertes JavaScript (vor </body>) -->
<script>
  // Intersection Observer für Scroll-Animationen
  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));
  });

  // Benutzerdefinierte Formularverarbeitung – an eigene API senden
  document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    // An dein Backend senden, parallel zur integrierten Verarbeitung von Tilda
    await fetch('https://api.myapp.com/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Zero Block (Benutzerdefiniertes Design)

Zero Block bietet dir eine Artboard-ähnliche Steuerung – platziere Elemente präzise mit benutzerdefinierten Positionierungen, Animationen und responsiven Breakpoints.

<!-- Zero Block mit benutzerdefinierten interaktiven Elementen -->
<div class="custom-calculator" id="price-calc">
  <h3>Preisrechner</h3>
  <div class="calc-row">
    <label>Anzahl der Nutzer</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$/Nutzer</option>
      <option value="pro">Pro – 12$/Nutzer</option>
      <option value="enterprise">Enterprise – 25$/Nutzer</option>
    </select>
  </div>
  <div class="calc-result">
    Gesamt: <span id="total">50$</span>/Monat
  </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>

Tilda-API

// api/tilda.ts – Tilda-Inhalte programmatisch verwalten
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";

// Alle Projekte abrufen
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, ... }] }
}

// Alle Seiten in einem Projekt abrufen
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();
}

// Vollständigen Seiteninhalt abrufen (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();
  // Gibt zurück: { html, css, js, images[], title, descr, ... }
}

// Seite in eigenes Hosting exportieren
async function exportPage(pageId: number) {
  const page = await getPageFull(pageId);
  const { html, css, js } = page.result;

  // In sich geschlossenes HTML erstellen
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>${css}</style>
    </head>
    <body>
      ${html}
      <script>${js}</script>
    </body>
    </html>
  `;
}

Formularverarbeitung und Webhooks

// webhook/tilda-form.ts – Tilda-Formularübermittlungen empfangen
/**
 * Konfiguriere in Tilda: Block-Einstellungen → Formular → Webhook-URL
 * Tilda sendet bei jeder Übermittlung einen POST mit den Formulardaten.
 */
export async function handleTildaForm(req: Request) {
  const formData = await req.formData();
  const data = Object.fromEntries(formData);

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

  // Im CRM speichern
  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.Telefon,
      source: "tilda-landing",
    }),
  });

  // An Telegram senden
  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: `🔔 Neuer Lead!\nName: ${data.Name}\nE-Mail: ${data.Email}\nTelefon: ${data.Telefon}`,
    }),
  });

  return new Response("OK");
}

E-Commerce (Tilda-Shop)

<!-- Benutzerdefinierte Produktseiten-Erweiterungen -->
<script>
  // In den Warenkorb legen mit benutzerdefinierter Verarbeitung
  document.addEventListener('DOMContentLoaded', () => {
    // In-den-Warenkorb-Ereignisse verfolgen
    document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const productName = btn.closest('.js-product')
          ?.querySelector('.js-product-name')?.textContent;

        // An Analytics senden
        if (window.dataLayer) {
          window.dataLayer.push({
            event: 'add_to_cart',
            product_name: productName,
          });
        }
      });
    });
  });
</script>

SEO- und Analytics-Einrichtung

<!-- Hinzufügen unter Einstellungen → Mehr → HTML-Code im <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){/* ... Facebook Pixel-Code ... */}();
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- Benutzerdefinierte strukturierte Daten -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Mein Unternehmen",
  "url": "https://mycompany.com",
  "logo": "https://mycompany.com/logo.png",
  "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8900" }
}
</script>

Beispiele

Beispiel 1: Eine Marketing-Landingpage erstellen

Benutzeraufforderung: „Erstelle eine Landingpage für ein SaaS-Produkt mit Hero, Funktionen, Preisen, FAQ und Kontaktformular – Mitarbeiter sollen Texte und Bilder aktualisieren können.“

Der Agent wird die Seite mit Tilda-Blöcken entwerfen, Formular-Webhooks konfigurieren, benutzerdefiniertes CSS für Markenkonsistenz hinzufügen und die Analytics-Nachverfolgung einrichten.

Beispiel 2: Benutzerdefinierte interaktive Elemente auf Tilda

Benutzeraufforderung: „Füge unserer Tilda-Seite einen Preisrechner und eine interaktive Produktvergleichstabelle hinzu.“

Der Agent wird Zero-Block-Layouts mit benutzerdefiniertem HTML/JS für den Rechner und die Vergleichstabelle erstellen, die an das Tilda-Theme angepasst sind.

Beispiel 3: Tilda-Formulare mit CRM verbinden

Benutzeraufforderung: „Sende jede Formularübermittlung an unser CRM und benachrichtige das Vertriebsteam über Telegram.“

Der Agent wird Tilda-Webhooks konfigurieren, eine serverlose Funktion zum Empfangen von Übermittlungen erstellen und Daten an CRM + Telegram weiterleiten.

Richtlinien

• Blöcke für die Struktur, Zero Block für Benutzerdefiniertes – vorgefertigte Blöcke für Geschwindigkeit verwenden, Zero Block für volle Kontrolle
• Benutzerdefinierter Code in den Einstellungen – HTML im <head> für CSS/Meta, vor </body> für JS
• Formulare haben integrierte Webhooks – Übermittlungen an jede URL senden
• Tilda-API ist schreibgeschützt – Inhalte exportieren, Seiten können nicht über API erstellt werden
• SEO-Einstellungen pro Seite – Titel, Beschreibung, OG-Tags in den Seiteneinstellungen
• Benutzerdefinierte Domain – DNS auf Tilda zeigen, SSL automatisch
• E-Commerce integriert – Produktkatalog, Warenkorb, Checkout, Zahlungen
• Standardmäßig responsiv – Blöcke passen sich an, aber Breakpoints testen und anpassen
• Mitarbeiter können alles bearbeiten – Text, Bilder, Blöcke, Seitenreihenfolge über den visuellen Editor
• Export für Self-Hosting – API gibt vollständiges HTML/CSS/JS für die Eigenbereitstellung zurück
• Kritische Tilda-Klassen nicht überschreiben – benutzerdefiniertes CSS mit eigenem Namespace versehen
• Google Tag Manager – GTM für komplexe Tracking-Setups anstelle von Inline-Skripten verwenden