Header 137

ImageButtons2 ColumnsImage/Video Right19 nodes · 17 styles

Description

A split hero section with left content and a right-side full-height background featuring a two-image layered gallery overlay.

Detailed Analysis

This header uses a classic two-column split layout with content on the left (approximately 50% width) and a full-height background image on the right. The left side contains a bold headline, supporting paragraph, and dual CTA buttons. The right background panel has a light gray tone with two overlaid images: a larger portrait-oriented image positioned center-left, and a smaller landscape image layered on top-right with rounded corners. This creates depth within the image area while maintaining the clean split division.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

split herotwo columnbackground imagelayered imagesfull heightimage overlayportrait imagelandscape imagedual CTAasymmetric galleryimage rightcontent leftmodern header

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": "58425e26-8adc-caeb-641d-5ab8889548a4",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "4e432689-2cad-9acd-c19e-1f9758eb4ce9"
        ],
        "children": [
          "58425e26-8adc-caeb-641d-5ab8889548a5"
        ]
      },
      {
        "_id": "58425e26-8adc-caeb-641d-5ab8889548a5",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "grid": "two-by-two",
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Grid",
        "classes": [
          "4e432689-2cad-9acd-c19e-1f9758eb4cea"
        ],
        "children": [
          "58425e26-8adc-caeb-641d-5ab8889548a6",
          "58425e26-8adc-caeb-641d-5ab8889548b2"
        ]
      },
      {
        "_id": "58425e26-8adc-caeb-641d-5ab8889548a6",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "style": {
   
... (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": "58425e26-8adc-caeb-641d-5ab8889548a4", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "4e432689-2cad-9acd-c19e-1f9758eb4ce9" ], "children": [ "58425e26-8adc-caeb-641d-5ab8889548a5" ] }, { "_id": "58425e26-8adc-caeb-641d-5ab8889548a5", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "grid": "two-by-two", "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Grid", "classes": [ "4e432689-2cad-9acd-c19e-1f9758eb4cea" ], "children": [ "58425e26-8adc-caeb-641d-5ab8889548a6", "58425e26-8adc-caeb-641d-5ab8889548b2" ] }, { "_id": "58425e26-8adc-caeb-641d-5ab8889548a6", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "style": { ... (truncated)