Header 21

ImageLightboxButtons2 ColumnsImage/Video Left23 nodes · 21 styles

Description

A two-column hero section with video lightbox on the left and content with dual CTA buttons on the right.

Detailed Analysis

This component presents a horizontal two-column layout combining video content with text and calls-to-action. The left column features a dark gray video placeholder with centered play button icon, indicating lightbox functionality. The right column contains vertically centered content including a bold heading, paragraph text, and dual CTA buttons (solid black primary, outlined secondary). The dark video area creates visual contrast against the clean white background, drawing attention to the media content. The 50/50 split balances video preview with conversion-focused messaging. Ideal for product demos, course previews, or service explanations where video demonstrates value and buttons drive action.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

herotwo-columnvideolightboxplay buttondual buttonsCTAside-by-sideproduct demovideo leftdark placeholderlanding 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": "b03a8ed5-0dfa-ee01-1716-68d82f65dd79",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "4098d1b0-8d6a-a63c-c6e0-89409e39fc34"
        ],
        "children": [
          "b03a8ed5-0dfa-ee01-1716-68d82f65dd7a"
        ]
      },
      {
        "_id": "b03a8ed5-0dfa-ee01-1716-68d82f65dd7a",
        "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": [
          "b03a8ed5-0dfa-ee01-1716-68d82f65dd7b"
        ]
      },
      {
        "_id": "b03a8ed5-0dfa-ee01-1716-68d82f65dd7b",
        "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": "b03a8ed5-0dfa-ee01-1716-68d82f65dd79", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "4098d1b0-8d6a-a63c-c6e0-89409e39fc34" ], "children": [ "b03a8ed5-0dfa-ee01-1716-68d82f65dd7a" ] }, { "_id": "b03a8ed5-0dfa-ee01-1716-68d82f65dd7a", "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": [ "b03a8ed5-0dfa-ee01-1716-68d82f65dd7b" ] }, { "_id": "b03a8ed5-0dfa-ee01-1716-68d82f65dd7b", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)