Tilda Publishing

Tilda Publishing 是做什麼的？

概述

Tilda 是一個基於區塊的網站建置器——將區塊拖曳到頁面上、以視覺化方式自訂，然後發佈。無需管理後端，無需設定主機。對於開發人員：可將自訂的 HTML/CSS/JS 注入任何區塊、使用 Tilda API 以程式方式管理內容、將表單連接到任何後端，以及建立自訂整合。非常適合非技術人員需要獨立更新內容的行銷網站、著陸頁和小型電商商店。

使用時機

• 快速建立行銷網站和著陸頁
• 需要一個非技術人員也能輕鬆更新的 CMS
• 小型至中型的電商（使用 Tilda 內建商店）
• 具有進階動畫效果的自訂著陸頁
• 需要同時具備視覺編輯和自訂程式碼功能的網站

說明

網站結構

Tilda 網站的組織方式如下：

• 專案 → 包含頁面
• 頁面 → 包含區塊（章節）
• 區塊 → 預先設計好的章節（主視覺、特色、定價、圖庫等）
• Zero Block — 自訂區塊，可完全自由設計

區塊中的自訂 HTML/CSS/JS

<!-- 透過以下路徑加入自訂程式碼：設定 → 更多 → <head> 中的 HTML 程式碼 或 </body> 之前的 HTML 程式碼 -->

<!-- 自訂 CSS (head) -->
<style>
  /* 覆寫 Tilda 預設值 */
  .t-title {
    font-family: 'Inter', sans-serif !important;
  }

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

  /* 回應式覆寫 */
  @media (max-width: 640px) {
    .t-cover__wrapper {
      min-height: 60vh !important;
    }
  }
</style>

<!-- 自訂 JavaScript (放在 </body> 之前) -->
<script>
  // 用於捲動動畫的 Intersection Observer
  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));
  });

  // 自訂表單處理 — 傳送到您自己的 API
  document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    // 除了 Tilda 內建的處理之外，同時傳送到您的後端
    await fetch('https://api.myapp.com/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Zero Block（自訂設計）

Zero Block 提供完整的 Artboard 級控制——您可以精確放置元素、自訂動畫和回應式斷點。

<!-- 包含自訂互動元素的 Zero Block -->
<div class="custom-calculator" id="price-calc">
  <h3>價格計算機</h3>
  <div class="calc-row">
    <label>使用者人數</label>
    <input type="range" id="users" min="1" max="1000" value="10">
    <span id="users-count">10</span>
  </div>
  <div class="calc-row">
    <label>方案</label>
    <select id="plan">
      <option value="starter">入門版 — 每位使用者 $5</option>
      <option value="pro">專業版 — 每位使用者 $12</option>
      <option value="enterprise">企業版 — 每位使用者 $25</option>
    </select>
  </div>
  <div class="calc-result">
    總計：<span id="total">$50</span>/月
  </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 內容
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";

// 取得所有專案
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, ... }] }
}

// 取得專案中的所有頁面
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();
}

// 取得完整的頁面內容 (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();
  // 回傳：{ html, css, js, images[], title, descr, ... }
}

// 將頁面匯出到您自己的主機
async function exportPage(pageId: number) {
  const page = await getPageFull(pageId);
  const { html, css, js } = page.result;

  // 建構自包含的 HTML
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>${css}</style>
    </head>
    <body>
      ${html}
      <script>${js}</script>
    </body>
    </html>
  `;
}

表單處理與 Webhook

// webhook/tilda-form.ts — 接收 Tilda 表單提交
/**
 * 在 Tilda 中設定：區塊設定 → 表單 → Webhook URL
 * 每次提交表單時，Tilda 會發送 POST 請求，內含表單資料。
 */
export async function handleTildaForm(req: Request) {
  const formData = await req.formData();
  const data = Object.fromEntries(formData);

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

  // 儲存到 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",
    }),
  });

  // 傳送到 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: `🔔 新的潛在客戶！\n姓名：${data.Name}\nEmail：${data.Email}\n電話：${data.Phone}`,
    }),
  });

  return new Response("OK");
}

電商（Tilda 商店）

<!-- 自訂產品頁面增強功能 -->
<script>
  // 加入自訂處理的購物車
  document.addEventListener('DOMContentLoaded', () => {
    // 追蹤加入購物車事件
    document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const productName = btn.closest('.js-product')
          ?.querySelector('.js-product-name')?.textContent;

        // 傳送到分析工具
        if (window.dataLayer) {
          window.dataLayer.push({
            event: 'add_to_cart',
            product_name: productName,
          });
        }
      });
    });
  });
</script>

SEO 與分析工具設定

<!-- 加到：設定 → 更多 → <head> 中的 HTML 程式碼 -->

<!-- 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 程式碼 ... */}();
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- 自訂結構化資料 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "我的公司",
  "url": "https://mycompany.com",
  "logo": "https://mycompany.com/logo.png",
  "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8900" }
}
</script>

範例

範例 1：建立行銷著陸頁

使用者提示：「為一個 SaaS 產品建立一個包含主視覺、特色、定價、常見問題和聯絡表單的著陸頁——工作人員應該能夠更新文字和圖片。」

代理將使用 Tilda 區塊設計頁面、設定表單 Webhook、加入自訂 CSS 以維持品牌一致性，並設定分析追蹤。

範例 2：在 Tilda 上加入自訂互動元素

使用者提示：「在我們的 Tilda 網站上加入一個定價計算機和互動式產品比較表。」

代理將建立 Zero Block 版面配置，並使用自訂的 HTML/JS 來實作計算機和比較表，且樣式會與 Tilda 主題相符。

範例 3：將 Tilda 表單連接到 CRM

使用者提示：「將每個表單提交傳送到我們的 CRM，並在 Telegram 上通知業務團隊。」

代理將設定 Tilda Webhook、建立一個無伺服器函式來接收提交資料，然後將資料轉發到 CRM 和 Telegram。

指南

• 使用區塊建立結構，Zero Block 處理自訂需求 — 使用預建區塊以加快速度，使用 Zero Block 以獲得完全控制權
• 在設定中加入自訂程式碼 — 將 CSS/中繼標籤放在 <head> 的 HTML 中，將 JS 放在 </body> 之前的 HTML 中
• 表單具有內建 Webhook — 可將提交資料傳送到任何 URL
• Tilda API 為唯讀 — 可以匯出內容，但無法透過 API 建立頁面
• 每個頁面均可設定 SEO — 在頁面設定中設定標題、描述和 OG 標籤
• 自訂網域 — 將 DNS 指向 Tilda，SSL 會自動啟用
• 內建電商功能 — 提供產品目錄、購物車、結帳和付款功能
• 預設為回應式設計 — 區塊會自動調整，但請務必測試並調整斷點
• 工作人員可以編輯任何內容 — 透過視覺編輯器編輯文字、圖片、區塊和頁面順序
• 可匯出以自行主機 — API 會回傳完整的 HTML/CSS/JS，方便自行部署
• 不要覆寫重要的 Tilda class — 在自訂 CSS 前加上您的命名空間
• Google Tag Manager — 對於複雜的追蹤設定，請使用 GTM 而非行內指令碼