Header 17

ImageLightboxButtons2 Columns24 nodes · 22 styles

Description

A hero section with two-column header layout featuring heading, description with dual buttons, and a full-width video lightbox placeholder below.

Detailed Analysis

This component emphasizes video content through a stacked layout with text header and video area. The header uses a two-column arrangement with bold heading on the left and paragraph text with dual CTA buttons (solid black primary, outlined secondary) on the right. Below, a dark gray video placeholder with centered play button icon spans full width within content margins. The darker video area creates strong contrast against the white background, drawing attention to the media content. The play button indicates lightbox or inline video playback functionality. Ideal for product demos, explainer videos, or any page where video is the primary conversion driver.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

herovideolightboxplay buttontwo-columndual buttonsCTAproduct demoexplainer videodark placeholderfull-width videolanding pagemarketingmedia

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": "51f2b832-27da-c44a-c90f-1eb5965a42bc",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "767b6b74-894e-f4b6-02b9-63d6fc2a2cef"
        ],
        "children": [
          "51f2b832-27da-c44a-c90f-1eb5965a42bd"
        ]
      },
      {
        "_id": "51f2b832-27da-c44a-c90f-1eb5965a42bd",
        "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": [
          "51f2b832-27da-c44a-c90f-1eb5965a42be"
        ]
      },
      {
        "_id": "51f2b832-27da-c44a-c90f-1eb5965a42be",
        "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": "51f2b832-27da-c44a-c90f-1eb5965a42bc", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "767b6b74-894e-f4b6-02b9-63d6fc2a2cef" ], "children": [ "51f2b832-27da-c44a-c90f-1eb5965a42bd" ] }, { "_id": "51f2b832-27da-c44a-c90f-1eb5965a42bd", "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": [ "51f2b832-27da-c44a-c90f-1eb5965a42be" ] }, { "_id": "51f2b832-27da-c44a-c90f-1eb5965a42be", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)