Page Structure

Understanding the root JSON structure of a ClickFunnels page.

Root Structure

Every CF2 page has four top-level properties:

JSON

{
  "version": 157,
  "content": {
    "type": "ContentNode",
    "id": "",
    "version": 0,
    "attrs": {
      "data-skip-background-settings": "false",
      "style": {
        "display": "block",
        "background-position": "center !important"
      },
      "className": "bgCoverCenter"
    },
    "params": {
      "--style-background-color": "#ffffff",
      "--style-background-image-url": "",
      "--style-foreground-color": ""
    },
    "children": []
  },
  "settings": {
    "id": "6Z-xxxxx-0",
    "type": "settings",
    "version": 0,
    "children": []
  },
  "popup": {
    "id": "",
    "version": 0,
    "type": "ModalContainer/V1",
    "selectors": {}
  }
}

ContentNode

The ContentNode is the root container for all page content. Unlike other elements, it uses "ContentNode" without a version suffix.

Property	Description
`--style-background-color`	Page background color
`--style-background-image-url`	Background image URL
`--style-foreground-color`	Default text color for the page
`children`	Array of SectionContainer/V1 elements

Note: ContentNode can only contain SectionContainer/V1 children directly.

Settings Object

The settings object contains page-level configuration including custom CSS and tracking codes.

JSON

{
  "settings": {
    "id": "6Z-wZ7EF-0",
    "type": "settings",
    "version": 0,
    "children": [
      {
        "id": "page_style",
        "type": "css",
        "parentId": "6Z-YENoVk-2",
        "fractionalIndex": "a0",
        "attrs": {
          "style": {
            "font-weight": "600",
            "font-family": "\"Noto Sans JP\", sans-serif",
            "color": "#333333"
          }
        },
        "selectors": {
          ".elTypographyLink": {
            "attrs": { "style": { "color": "#0066cc" } }
          }
        }
      },
      {
        "id": "header-code",
        "type": "raw",
        "fractionalIndex": "a1",
        "innerText": "<script>// Header tracking code</script>"
      },
      {
        "id": "footer-code",
        "type": "raw",
        "fractionalIndex": "a2",
        "innerText": "<script>// Footer tracking code</script>"
      },
      {
        "id": "css",
        "type": "raw",
        "fractionalIndex": "a3",
        "innerText": "/* Custom CSS */"
      }
    ]
  }
}

Settings Children Types

ID	Type	Purpose
`page_style`	`css`	Default page typography and link styles
`header-code`	`raw`	Scripts/HTML injected in <head>
`footer-code`	`raw`	Scripts/HTML injected before </body>
`css`	`raw`	Custom CSS rules

Popup Container

The popup object defines a ModalContainer for popup/modal content that can be triggered by button actions.

JSON

{
  "popup": {
    "id": "",
    "version": 0,
    "type": "ModalContainer/V1",
    "selectors": {
      ".containerModal": {
        "attrs": {
          "data-skip-corners-settings": "false",
          "data-style-guide-corner": "style1",
          "style": { "margin-bottom": 0 }
        }
      }
    }
  }
}

Tip: When the popup has content, it will include a children array containing the modal's internal structure.

Element Feature Support Matrix

Not all elements support all styling features. Here's what each element type supports:

Element	Background	Border	Shadow	Corners
ContentNode	Yes	No	No	No
SectionContainer	Yes	Yes	Yes	Yes
RowContainer	Yes	Yes	Yes	Yes
ColContainer	Yes	Yes	Yes	Yes
FlexContainer	Yes	Yes	Yes	Yes
Text Elements	No	No	No	No
Button	Yes	Yes	No	Yes
Image	No	Yes	Yes	Yes
Input	Yes	Yes	Yes	Yes
BulletList	Yes	No	No	No
Divider	No	Yes	Yes	No
Icon	No	No	No	No