Learn Mode

IR Sections

Build pages from structured section blocks.

Objective

Understand how sections become visible page blocks.

Sections are the most important part of IR1.1.

Each section has an id, type, headline, and optional content.

Supported section types include hero, trust, services, products, story, process, offer, contact, and footer.

Syntax

"sections": [
  {
    "id": "hero",
    "type": "hero",
    "headline": "Welcome",
    "description": "This becomes a visible section."
  }
]

Practice Editor

Temporary only. No local save. No cloud save. No compile quota used.

{
  "version": "1.1",
  "meta": {
    "title": "Sections Test",
    "description": "Testing IR sections.",
    "businessName": "DaizLab",
    "businessType": "general",
    "language": "en"
  },
  "brand": {
    "colors": {
      "primary": "#153331",
      "secondary": "#CFB113",
      "accent": "#CFB113",
      "background": "#ffffff",
      "text": "#111111",
      "muted": "#666666"
    },
    "typography": {
      "heading": "Arial, Helvetica, sans-serif",
      "body": "Arial, Helvetica, sans-serif"
    },
    "vibe": "modern"
  },
  "layout": {
    "container": {
      "maxWidth": "1180px",
      "padding": "32px"
    },
    "grid": "mixed",
    "responsive": true
  },
  "sections": [
    {
      "id": "hero",
      "type": "hero",
      "badge": "SECTION 1",
      "headline": "Hero section",
      "description": "This introduces the website."
    },
    {
      "id": "services",
      "type": "services",
      "badge": "SECTION 2",
      "headline": "Services section",
      "description": "This explains what the business offers.",
      "items": [
        {
          "title": "Brand Website",
          "description": "A conversion-ready landing page."
        },
        {
          "title": "WhatsApp Funnel",
          "description": "A direct lead generation flow."
        },
        {
          "title": "Sales System",
          "description": "A structured page for turning attention into action."
        }
      ]
    }
  ],
  "actions": {
    "primary": {
      "label": "Start",
      "type": "link",
      "value": "#",
      "style": "primary"
    }
  },
  "output": {
    "targets": ["html", "css", "previewHtml"]
  }
}

Notes

Sections are rendered in the order they appear.

Each section id should be unique.

Common Mistakes

Forgetting that sections must be an array.

Using unsupported section types.

← Previous

Learn Mode

IR Sections

Build pages from structured section blocks.

Objective

Understand how sections become visible page blocks.

Sections are the most important part of IR1.1.

Each section has an id, type, headline, and optional content.

Supported section types include hero, trust, services, products, story, process, offer, contact, and footer.

Syntax

"sections": [
  {
    "id": "hero",
    "type": "hero",
    "headline": "Welcome",
    "description": "This becomes a visible section."
  }
]

Practice Editor

Temporary only. No local save. No cloud save. No compile quota used.

Notes

Sections are rendered in the order they appear.

Each section id should be unique.

Common Mistakes

Forgetting that sections must be an array.

Using unsupported section types.

← Previous

Learn Mode

IR Sections

Build pages from structured section blocks.

Objective

Understand how sections become visible page blocks.

Sections are the most important part of IR1.1.

Each section has an id, type, headline, and optional content.

Supported section types include hero, trust, services, products, story, process, offer, contact, and footer.

Syntax

"sections": [
  {
    "id": "hero",
    "type": "hero",
    "headline": "Welcome",
    "description": "This becomes a visible section."
  }
]

Practice Editor

Temporary only. No local save. No cloud save. No compile quota used.

Notes

Sections are rendered in the order they appear.

Each section id should be unique.

Common Mistakes

Forgetting that sections must be an array.

Using unsupported section types.

← Previous