Розробка кастомних блоків Tilda (Zero Block)

Розробка користувацьких блоків Tilda (Zero Block)

Zero Block — вбудований редактор HTML/CSS/JS у Tilda, який дозволяє створювати секції сторінок з повним контролем над розміткою та логікою. Це місток між no-code конструктором та розробкою: дизайнер або розробник верстає довільну секцію, яка вбудовується в Tilda-сторінку нарівні зі стандартними блоками.

Що таке Zero Block технічно

Кожний Zero Block — ізольований HTML-блок із inline-стилями та скриптами. Tilda обертає його у контейнер з унікальним ID та вбудовує на сторінку. Змінні дизайну сайту (шрифти, кольори) доступні через CSS-змінні, які Tilda встановлює глобально.

Обмеження ізоляції:

• немає прямого доступу до глобального API window.Tilda з Zero Block (тільки через window.addEventListener)
• стилі Zero Block не конфліктують з рештою сторінки (якщо написані з BEM або унікальним префіксом)
• JS виконується у глобальному контексті сторінки — конфлікти можливі

Редактор Zero Block

Інтерфейс редактора: візуальне полотно з drag-and-drop елементів (прямокутники, тексти, зображення, кнопки) + панель стилів + вкладка «HTML/CSS/JS» для коду.

Візуальний редактор генерує стилі як inline CSS на кожному елементу. Для складної розмітки — вкладка «HTML» дозволяє написати розмітку вручну.

Адаптивні контрольні точки у Zero Block: Desktop (960px+), Tablet (640–960px), Mobile (< 640px). Для кожної контрольної точки — окремий набір позицій та розмірів елементів.

Користувацька розмітка через вкладку HTML

Для секцій, які неможливо верстати через візуальний редактор:

<!-- Zero Block HTML tab -->
<div class="zb-pricing">
  <div class="zb-pricing__header">
    <h2 class="zb-pricing__title">Виберіть тариф</h2>
    <p class="zb-pricing__subtitle">Усі тарифи включають 30 днів підтримки</p>
  </div>

  <div class="zb-pricing__grid">
    <div class="zb-pricing__card zb-pricing__card--featured">
      <div class="zb-pricing__badge">Популярний</div>
      <h3 class="zb-pricing__plan">Professional</h3>
      <div class="zb-pricing__price">
        <span class="zb-pricing__amount">990</span>
        <span class="zb-pricing__currency">₽/місяць</span>
      </div>
      <ul class="zb-pricing__features">
        <li>До 10 проектів</li>
        <li>API-доступ</li>
        <li>Пріоритетна підтримка</li>
      </ul>
      <button class="zb-pricing__cta" data-plan="professional">Почати</button>
    </div>
  </div>
</div>

/* Zero Block CSS tab */
.zb-pricing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
}

.zb-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.zb-pricing__card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 32px;
  transition: box-shadow 0.2s ease;
}

.zb-pricing__card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.zb-pricing__card--featured {
  border-color: #3B82F6;
  position: relative;
}

.zb-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #3B82F6;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 100px;
}

.zb-pricing__amount {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 768px) {
  .zb-pricing__grid {
    grid-template-columns: 1fr;
  }
}

Інтерактивність через JavaScript

// Zero Block JS tab
(function() {
  // IIFE для ізоляції від глобального контексту

  const cards = document.querySelectorAll('.zb-pricing__cta');

  cards.forEach(btn => {
    btn.addEventListener('click', function() {
      const plan = this.dataset.plan;

      // Відкрити форму Tilda
      const formBlock = document.getElementById('rec123456789');
      if (formBlock) {
        formBlock.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }

      // Заповнити приховане поле форми вибраним тарифом
      const planField = document.querySelector('input[name="plan"]');
      if (planField) planField.value = plan;

      // Аналітика
      if (window.gtag) {
        gtag('event', 'select_plan', { plan_name: plan });
      }
      if (window.ym) {
        ym(COUNTER_ID, 'reachGoal', 'PLAN_SELECTED', { plan });
      }
    });
  });
})();

Анімації у Zero Block

Анімації при скролі через Intersection Observer:

(function() {
  const cards = document.querySelectorAll('.zb-pricing__card');

  // Початковий стан
  cards.forEach(card => {
    card.style.opacity = '0';
    card.style.transform = 'translateY(24px)';
    card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
  });

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
          }, index * 100); // staggered effect
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.15 }
  );

  cards.forEach(card => observer.observe(card));
})();

Перевірка prefers-reduced-motion:

if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
  initAnimations();
}

Типові користувацькі блоки

Таблиця тарифів — одна з найчастіших завдань. Нестандартна візуалізація порівняння планів недосяжна стандартними блоками Tilda.

Інтерактивна карта — Leaflet.js або Google Maps Embed API у Zero Block. Маркери з масиву даних, popup з адресою:

const map = L.map('zb-map').setView([53.9, 27.56], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const offices = [
  { lat: 53.9, lng: 27.56, name: 'Головний офіс', address: 'вул. Прикладна, 1' },
];

offices.forEach(office => {
  L.marker([office.lat, office.lng])
    .addTo(map)
    .bindPopup(`<b>${office.name}</b><br>${office.address}`);
});

Лічильники з анімацією — анімований числовий лічильник при попаданні у viewport:

function animateCounter(el, target, duration = 1500) {
  const start = performance.now();
  const update = (time) => {
    const progress = Math.min((time - start) / duration, 1);
    const value = Math.round(progress * target);
    el.textContent = value.toLocaleString('uk-UA');
    if (progress < 1) requestAnimationFrame(update);
  };
  requestAnimationFrame(update);
}

Користувацька форма — з логікою кількох кроків, умовними полями, завантаженням файлів. Стандартна форма Tilda не підтримує багатокрокові сценарії.

Горизонтальний scroll-слайдер — для галерей кейсів, відгуків:

const track = document.querySelector('.zb-slider__track');
let isDown = false;
let startX, scrollLeft;

track.addEventListener('mousedown', e => {
  isDown = true;
  startX = e.pageX - track.offsetLeft;
  scrollLeft = track.scrollLeft;
});
track.addEventListener('mouseleave', () => isDown = false);
track.addEventListener('mouseup', () => isDown = false);
track.addEventListener('mousemove', e => {
  if (!isDown) return;
  const x = e.pageX - track.offsetLeft;
  track.scrollLeft = scrollLeft - (x - startX);
});

Переиспользування блоків

Zero Block неможливо зберегти як глобальний компонент в межах Tilda. Обхідні варіанти:

• дублювання блока між сторінками (ручна синхронізація)
• зберігання HTML/CSS/JS у репозиторію, копіювання за потреби
• Tilda «Майстер-блок» — оновлення на всіх сторінках одночасно (функція платформи, не користувацький код)

Типові терміни

Простий Zero Block (таблиця, лічильники, користувацькі карточки без складної логіки) — 1–2 робочих дні. Інтерактивний блок (багатокрокова форма, карта з даними, слайдер з API) — 3–5 днів. Набір з 5–7 користувацьких блоків для повного сайту — 7–12 днів.