Getting Started
Learn the fundamentals of ClickFunnels page tree structure.
Overview
A CF2 page tree is a JSON object that defines the complete structure of a funnel page. It consists of four main parts:
| Property | Description |
|---|---|
version |
Page version number (currently 157-158) |
content |
ContentNode - the root container holding all page content |
settings |
Page-level settings including CSS and tracking codes |
popup |
ModalContainer for popup/modal content |
Element IDs
Every element in CF2 has a unique ID following the format 6Z-xxxxx-0 where xxxxx is 5 random alphanumeric characters.
JavaScript
function generateId() {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let id = "";
for (let i = 0; i < 5; i++) {
id += chars[Math.floor(Math.random() * chars.length)];
}
return `6Z-${id}-0`;
}Common Element Properties
Every element shares these base properties:
JSON
{
"type": "ElementType/V1",
"id": "6Z-xxxxx-0",
"version": 0,
"parentId": "parent-element-id",
"fractionalIndex": "a0"
}| Property | Description |
|---|---|
type |
Element type with version suffix (e.g., "Headline/V1", "Button/V1") |
id |
Unique identifier in format 6Z-xxxxx-0 |
version |
Always 0 for new elements |
parentId |
ID of the parent container element |
fractionalIndex |
Ordering within parent: a0, a1, ... a9, aA-aZ, b0... |
Styling Elements
CF2 uses a combination of attrs and params for styling:
- attrs.style - Direct CSS properties (padding, margin, etc.)
- params - CSS custom properties (--style-*)
- selectors - Nested styling for child elements and states
JSON
{
"attrs": {
"style": {
"padding-top": 20,
"padding-bottom": 20,
"margin-top": 15
}
},
"params": {
"padding-top--unit": "px",
"padding-bottom--unit": "px",
"margin-top--unit": "px",
"--style-background-color": "#ffffff"
}
}
i
Tip: Numeric style values in
attrs.style require corresponding unit params (e.g., padding-top--unit).
Important Constraints
No margin-bottom: Only
margin-top is available. Default is 15px if not set.
Line-height uses %: Always use percentage unit (e.g.,
120, 150) with "line-height--unit": "%"
Horizontal padding unified: Use
--style-padding-horizontal instead of separate left/right values.
i
Spelling note: CF2 uses
fa_apended (single 'p') for appended icons - this is the correct spelling.