Header 108

ImageButtons39 nodes · 35 styles

Description

Centered hero section with a horizontal image gallery carousel below the text content, featuring multiple image slides.

Detailed Analysis

This hero follows a clean two-section vertical layout: centered text content on top with heading, description paragraph, and dual CTA buttons, followed by a horizontal image gallery strip below. The gallery shows multiple image placeholders arranged in a row, with a prominent center image flanked by partially visible side images suggesting carousel functionality. The layout maintains visual balance through centered alignment throughout. White background keeps focus on content and imagery. This pattern works well for showcasing multiple products, portfolio pieces, or featured content while maintaining clear messaging hierarchy.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

image carouselhorizontal gallerycentered heroslider galleryportfolio carouselimage slidergallery sectionfeatured imagesproduct showcasedual buttonsclean layoutcarousel heroimage stripsliding galleryshowcase section

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3327",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-622",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-622-p"
            }
          ],
          "target": {
            "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d036",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d036",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1696922256536,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "main",
            "medium"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-3330",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-630",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-3327", "name": "", "action": { "id": "", "config": { "actionListId": "a-622", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, "startsExiting": false, "addOffsetValue": 50, "addStartOffset": false, "endOffsetValue": 50, "startsEntering": true, "continuousParameterGroupId": "a-622-p" } ], "target": { "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d036", "appliesTo": "ELEMENT", "styleBlockIds": [] }, "targets": [ { "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d036", "appliesTo": "ELEMENT", "styleBlockIds": [] } ], "createdOn": 1696922256536, "eventTypeId": "SCROLLING_IN_VIEW", "mediaQueries": [ "main", "medium" ], "animationType": "custom" }, { "id": "e-3330", "name": "", "action": { "id": "", "config": { "actionListId": "a-630", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, ... (truncated)