Header 118

ImageButtons2 Columns26 nodes · 24 styles

Description

Light hero section with split text layout above and a three-image gallery below with staggered heights creating visual rhythm.

Detailed Analysis

This hero expands the gallery concept to three images with carefully orchestrated height variations. The familiar split text section occupies the top with heading left and description plus CTAs right. Below, three image placeholders create an engaging visual pattern: a small square image anchored at the bottom-left, a tall portrait rectangle in the center extending upward, and a medium portrait on the right positioned at a middle height. This staggered arrangement creates a wave-like rhythm across the gallery while maintaining compositional balance.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheaderlight backgroundsplit layoutthree imagesimage gallerystaggered heightsvaried sizesvisual rhythmwave patternasymmetricCTAsdynamic

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [],
      "actionLists": [],
      "interactions": []
    },
    "nodes": [
      {
        "_id": "b7c00b33-e507-c2a3-c30c-231fb55f84c2",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "77026b2f-d2ec-cba1-836e-314aa4f0033d"
        ],
        "children": [
          "b7c00b33-e507-c2a3-c30c-231fb55f84c3"
        ]
      },
      {
        "_id": "b7c00b33-e507-c2a3-c30c-231fb55f84c3",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b0934d9a-875a-bb42-0630-12090a77fc73"
        ],
        "children": [
          "b7c00b33-e507-c2a3-c30c-231fb55f84c4"
        ]
      },
      {
        "_id": "b7c00b33-e507-c2a3-c30c-231fb55f84c4",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
      
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [], "actionLists": [], "interactions": [] }, "nodes": [ { "_id": "b7c00b33-e507-c2a3-c30c-231fb55f84c2", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "77026b2f-d2ec-cba1-836e-314aa4f0033d" ], "children": [ "b7c00b33-e507-c2a3-c30c-231fb55f84c3" ] }, { "_id": "b7c00b33-e507-c2a3-c30c-231fb55f84c3", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "b0934d9a-875a-bb42-0630-12090a77fc73" ], "children": [ "b7c00b33-e507-c2a3-c30c-231fb55f84c4" ] }, { "_id": "b7c00b33-e507-c2a3-c30c-231fb55f84c4", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)