On this page
Return to top

Building sections

Building sections & sidebar settings

How sections become editable in the Content sidebar — and which edition you need for each workflow.

Mental model

Concept What it is Edition
Community / core section Local blocks shipped with VoodBuilder Community+
Element Official catalog tile Developer+
Component Section you saved (or imported) Agency
Template Whole page clone Developer+
Declarative markers data-vb-* on HTML Drive Content panel
Dynamic bindings Live Eloquent / API Developer+ / Agency 
flowchart LR
  S[Select block] --> C[Content]
  S --> Y[Style]
  S --> D[Dynamic]
  C --> C1[Copy icons items optional]
  Y --> Y1[Spacing type colours]
  D --> D1[Bindings List repeat]
Tab Use for
Content Declarative fields, layout item count/columns, component properties
Style Tailwind / vp-* tokens
Dynamic Live data (companions)

Workflow A — Edit a shipped or Elements section

Available on Community for local sections; Elements tiles need Developer+.

  1. Drop a section from the library (or SOURCE modal).
  2. Select the section root.
  3. Edit Content fields and Layout items.
  4. Adjust Style.
  5. Save.

Workflow B — Your own section HTML (Agency)

Putting your markup into a reusable library item requires Agency Components (save / code import). Community is limited to shipped blocks and their markers — it is not a free-form HTML component workshop.

  1. Hold Agency; Components plugin registered.
  2. Build or import the section (code import when entitled).
  3. Mark author-facing fields with data-vb-* before saving.
  4. Save to the Components library.
  5. Re-insert from the Components tab on any page.

Minimal marker example:

HTML 
<section data-voodbuilder-section-block="my-features" data-vb-item-count="3" data-vb-items-layout="preserve">
  <h2 data-vb-field="heading" data-vb-field-type="text" data-vb-field-label="Heading">Features</h2>
  <div data-vb-items-root data-vb-items-layout="preserve">
    <div data-vb-item>
      <h4 data-vb-field="title" data-vb-field-type="text" data-vb-field-label="Title">Card</h4>
      <p data-vb-field="text" data-vb-field-type="textarea" data-vb-field-label="Text">Copy</p>
    </div>
  </div>
</section>

Full attribute reference: Declarative fields.

Workflow C — Make part of a section dynamic (Developer+)

  1. Configure a Model Integration (or Agency API source).
  2. Select the node → Dynamic tab.
  3. Bind posts.latest.title or List repeat.
  4. Publish — values resolve at render time.

data-vb-field alone does not pull Eloquent rows.

Field types in Content

Type Control
text / textarea / number Text inputs
icon Icon picker
rich Rich text
status Yes / no

Checklist

  • Author-facing strings marked with labels
  • Card grids use items markers
  • Visuals in Style / vp-*, not Content
  • Live data via Dynamic tab
  • Custom reusable HTML → Agency Components