Tilda Custom Blocks Development (Zero Block)

Tilda Custom Blocks Development (Zero Block)

Zero Block is a built-in HTML/CSS/JS editor in Tilda that allows creating page sections with full control over markup and logic. It's a bridge between no-code constructor and development: a designer or developer creates an arbitrary section that integrates into the Tilda page on par with standard blocks.

What Zero Block Is Technically

Each Zero Block is an isolated HTML block with inline styles and scripts. Tilda wraps it in a container with a unique ID and embeds it on the page. Website design variables (fonts, colors) are available through CSS variables that Tilda sets globally.

Isolation limitations:

• no direct access to global window.Tilda API from Zero Block (only through window.addEventListener)
• Zero Block styles don't conflict with the rest of the page (if written with BEM or unique prefix)
• JS executes in global page context — conflicts are possible

Zero Block Editor

Editor interface: visual canvas with drag-and-drop elements (rectangles, texts, images, buttons) + styles panel + "HTML/CSS/JS" tab for code.

Visual editor generates styles as inline CSS on each element. For complex markup — the "HTML" tab allows writing markup manually.

Responsive breakpoints in Zero Block: Desktop (960px+), Tablet (640-960px), Mobile (< 640px). For each breakpoint — separate set of positions and element sizes.

Custom Markup Through HTML Tab

For sections that cannot be built through the visual editor:

<!-- Zero Block HTML tab -->
<div class="zb-pricing">
  <div class="zb-pricing__header">
    <h2 class="zb-pricing__title">Choose a Plan</h2>
    <p class="zb-pricing__subtitle">All plans include 30 days of support</p>
  </div>

  <div class="zb-pricing__grid">
    <div class="zb-pricing__card zb-pricing__card--featured">
      <div class="zb-pricing__badge">Popular</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">$/month</span>
      </div>
      <ul class="zb-pricing__features">
        <li>Up to 10 projects</li>
        <li>API access</li>
        <li>Priority support</li>
      </ul>
      <button class="zb-pricing__cta" data-plan="professional">Get Started</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;
  }
}

Interactivity Through JavaScript

// Zero Block JS tab
(function() {
  // IIFE for isolation from global context

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

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

      // Open Tilda form
      const formBlock = document.getElementById('rec123456789');
      if (formBlock) {
        formBlock.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }

      // Fill hidden form field with selected plan
      const planField = document.querySelector('input[name="plan"]');
      if (planField) planField.value = plan;

      // Analytics
      if (window.gtag) {
        gtag('event', 'select_plan', { plan_name: plan });
      }
      if (window.ym) {
        ym(COUNTER_ID, 'reachGoal', 'PLAN_SELECTED', { plan });
      }
    });
  });
})();

Animations in Zero Block

Scroll-based animations through Intersection Observer:

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

  // Initial state
  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));
})();

Check prefers-reduced-motion:

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

Typical Custom Blocks

Pricing table — one of the most common tasks. Non-standard visualization of plan comparison is unattainable with standard Tilda blocks.

Interactive map — Leaflet.js or Google Maps Embed API in Zero Block. Markers from data array, popup with address:

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: 'Main Office', address: '1 Example St' },
];

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

Animated counters — animated number counter when entering 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('en-US');
    if (progress < 1) requestAnimationFrame(update);
  };
  requestAnimationFrame(update);
}

Custom form — with multi-step logic, conditional fields, file uploads. Standard Tilda form doesn't support multi-step scenarios.

Horizontal scroll slider — for case galleries, testimonials:

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);
});

Block Reuse

Zero Block cannot be saved as a global component within Tilda. Workarounds:

• block duplication between pages (manual synchronization)
• store HTML/CSS/JS in repository, copy when needed
• Tilda "Master Block" — update on all pages simultaneously (platform feature, not custom code)

Typical Timelines

Simple Zero Block (table, counters, custom cards without complex logic) — 1-2 working days. Interactive block (multi-step form, data map, slider with API) — 3-5 days. Set of 5-7 custom blocks for full website — 7-12 days.