Header 138

ImageButtons2 Columns23 nodes · 21 styles

Description

A hero section with full-width background image at top and split content row below, featuring a floating image bridging both sections.

Detailed Analysis

This component combines two distinct zones: a large full-width hero background image occupying roughly 60% of the viewport height, followed by a split content row below. The bottom section uses a two-column layout with the headline positioned left and the description with dual CTA buttons on the right. A small portrait image floats in the lower-right area, strategically positioned to bridge the hero and content sections by overlapping both zones. This creates visual continuity between the full-width image and the text content areas.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

full width herobackground imagesplit contentfloating imagetwo columnbridging elementhero sectionlarge imagecontent belowoverlay imagevisual continuitydual CTAheadline left

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": "c13c749c-b137-4041-b56b-2d78d7c23e3c",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "dab84946-fb73-43ae-220d-49d7656c275f"
        ],
        "children": [
          "c13c749c-b137-4041-b56b-2d78d7c23e3d"
        ]
      },
      {
        "_id": "c13c749c-b137-4041-b56b-2d78d7c23e3d",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "dab84946-fb73-43ae-220d-49d7656c2760"
        ],
        "children": [
          "c13c749c-b137-4041-b56b-2d78d7c23e3e",
          "c13c749c-b137-4041-b56b-2d78d7c23e43"
        ]
      },
      {
        "_id": "c13c749c-b137-4041-b56b-2d78d7c23e3e",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
       
... (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": "c13c749c-b137-4041-b56b-2d78d7c23e3c", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "dab84946-fb73-43ae-220d-49d7656c275f" ], "children": [ "c13c749c-b137-4041-b56b-2d78d7c23e3d" ] }, { "_id": "c13c749c-b137-4041-b56b-2d78d7c23e3d", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "dab84946-fb73-43ae-220d-49d7656c2760" ], "children": [ "c13c749c-b137-4041-b56b-2d78d7c23e3e", "c13c749c-b137-4041-b56b-2d78d7c23e43" ] }, { "_id": "c13c749c-b137-4041-b56b-2d78d7c23e3e", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], ... (truncated)