Blog Post Header 5
ImageButtons31 nodes · 29 styles
Description
Full-width hero blog post header with dark background image overlay, centered category label, large white title, author avatar, name, date, and read time.
Detailed Analysis
This dramatic blog post header uses a full-width background image with dark overlay to create visual impact. All content is centered on the image: category label at top, large white blog title as focal point, and author information below including circular avatar placeholder, full name in white text, publication date, and read time estimate. The dark overlay ensures text readability against the background image. This hero-style header works well for feature articles or posts where the visual sets the tone for the content.
Webflow Paste
Copy and paste directly into Webflow Designer
Keywords
blog postheaderherofull widthbackground imagedark overlaycenteredcategorytitleauthoravatardateread timedramatic
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": "df34b558-d01d-0e83-e374-2bda7c528b3c",
"tag": "header",
"data": {
"tag": "header",
"attr": {
"id": ""
},
"text": false,
"xattr": [],
"search": {
"exclude": false
},
"devlink": {
"slot": "",
"runtimeProps": {}
},
"visibility": {
"conditions": []
},
"displayName": ""
},
"type": "Block",
"classes": [
"8363935d-5083-d7d4-dbe9-196dcf5d00d0",
"b1a09e44-6a14-eacd-66d2-c0fdd99fdfe1"
],
"children": [
"df34b558-d01d-0e83-e374-2bda7c528b3d",
"df34b558-d01d-0e83-e374-2bda7c528b54"
]
},
{
"_id": "df34b558-d01d-0e83-e374-2bda7c528b3d",
"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": [
"df34b558-d01d-0e83-e374-2bda7c528b3e"
]
},
{
"_id": "df34b558-d01d-0e83-e374-2bda7c528b3e",
"tag": "div",
"data": {
"tag": "div",
"attr": {
"id": ""
},
... (truncated)