
Julian Galluzzo
PostPilot Hero Section
A light blue hero section with a 2 column grid layout.
Copy component

{"content":[{"id":"lhclur","name":"section","parent":0,"children":["dvmbxx","ikawlj"],"settings":{"_cssGlobalClasses":["lfzfpq","jiaqax"],"_overflow":"clip"},"label":"Hero"},{"id":"dvmbxx","name":"svg","parent":"lhclur","children":[],"settings":{"file":{"id":13,"filename":"66f14b25a707363026887052_PostPilot-logo-mark.svg","url":"http://postpilot.local/wp-content/uploads/2025/01/66f14b25a707363026887052_PostPilot-logo-mark.svg"},"_cssGlobalClasses":["zzcdtp"]},"themeStyles":[]},{"id":"ikawlj","name":"container","parent":"lhclur","children":["fuuykc"],"settings":{"_cssGlobalClasses":["ietguk","dccpwx"]},"label":"Container"},{"id":"fuuykc","name":"div","parent":"ikawlj","children":["ghpvrd","dqccpz"],"settings":{"_cssGlobalClasses":["upgjjt"]},"label":"Grid"},{"id":"ghpvrd","name":"div","parent":"fuuykc","children":["qbbzes","mbwhgh","hmnpqi","rfqxxe"],"settings":{"_cssGlobalClasses":["gvprjn"]},"label":"Content Wrapper"},{"id":"qbbzes","name":"div","parent":"ghpvrd","children":["nmpoeq","hefgwt","vrycpe"],"settings":{"_cssGlobalClasses":["dzvijm"],"_margin":{"bottom":"30"}},"label":"Rating"},{"id":"nmpoeq","name":"svg","parent":"qbbzes","children":[],"settings":{"signature":"08325a2439d2c8fd7398a5e158c89641","user_id":1,"time":1737369926,"file":{"id":70,"filename":"shopify_logo_darkbg.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/shopify_logo_darkbg.svg"},"_height":"24px","_margin":{"right":"10"}},"themeStyles":[]},{"id":"hefgwt","name":"div","parent":"qbbzes","children":["ptshqs","nfscft","cwmhyy","vhnbgq","splmhv"],"settings":{"_cssGlobalClasses":["uymsvy"]}},{"id":"ptshqs","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"nfscft","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"cwmhyy","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"vhnbgq","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"splmhv","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"vrycpe","name":"text-basic","parent":"qbbzes","children":[],"settings":{"text":"5.0","_cssGlobalClasses":["htwgzp"]}},{"id":"mbwhgh","name":"heading","parent":"ghpvrd","children":[],"settings":{"text":"Unlock a profitable new growth channel","tag":"h1","_cssGlobalClasses":["limylc"],"_margin":{"bottom":"30"}}},{"id":"hmnpqi","name":"text-basic","parent":"ghpvrd","children":[],"settings":{"text":"Easier than email. Remarkable results. Full-funnel AI targeting. We reinvented direct mail for modern ecommerce.","_cssGlobalClasses":["tlzrgu"]},"label":"Paragraph"},{"id":"rfqxxe","name":"text-link","parent":"ghpvrd","children":[],"settings":{"text":"Try it risk free","_cssGlobalClasses":["dxkwbv"],"_margin":{"top":"30"}},"label":"Button"},{"id":"dqccpz","name":"image","parent":"fuuykc","children":[],"settings":{"image":{"id":15,"filename":"66e99eb80439ce92afdafea6_hp-hero-img.avif","size":"large","full":"http://postpilot.local/wp-content/uploads/2025/01/66e99eb80439ce92afdafea6_hp-hero-img.avif","url":"http://postpilot.local/wp-content/uploads/2025/01/66e99eb80439ce92afdafea6_hp-hero-img-1024x864.avif"}},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.11.1.1","globalClasses":[{"id":"lfzfpq","name":"hero","settings":{"_background":{"color":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"}},"_position":"relative","_typography":{"font-family":"Instrument Sans"},"_justifyContent":"center","_justifyContent:mobile_portrait":"flex-end"},"modified":1737214401,"user_id":1},{"id":"jiaqax","name":"section-padding","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"}}},{"id":"zzcdtp","name":"hero__svg","settings":{"_pointerEvents":"none","_opacity":"0.15","_position":"absolute","_right":"-3%","_zIndex":"0","_height":"75%","_top:mobile_portrait":"auto","_right:mobile_portrait":"-3%","_bottom:mobile_portrait":"10%","_height:mobile_portrait":"100%","_display:mobile_landscape":"none"}},{"id":"ietguk","name":"hero__container","settings":{"_widthMax":"1300","_width":"100%"}},{"id":"dccpwx","name":"container-width","settings":{"_width":"100%","_widthMax":"1300px"}},{"id":"upgjjt","name":"hero__grid","settings":{"_display":"grid","_gridGap":"4rem","_gridTemplateColumns":"1fr 1fr","_width":"100%","_alignItemsGrid":"center","_position":"relative","_display:mobile_landscape":"flex","_direction:mobile_landscape":"column","_justifyContent:mobile_landscape":"center"},"modified":1737214401,"user_id":1},{"id":"gvprjn","name":"hero__content-wrapper","settings":{"_display:mobile_landscape":"flex","_direction:mobile_landscape":"column","_justifyContent:mobile_landscape":"center","_alignSelf:mobile_landscape":"center","_alignItems:mobile_landscape":"center","_typography:mobile_landscape":{"text-align":"center"}}},{"id":"dzvijm","name":"rating","settings":{"_display":"flex","_justifyContent":"flex-start","_alignItems":"center"},"modified":1737370371,"user_id":1},{"id":"uymsvy","name":"rating__star-wrap","settings":{"_display":"flex","_justifyContent":"center","_columnGap":"2px"}},{"id":"fekejk","name":"rating__star","settings":{"iconSize":"20"},"modified":1737370371,"user_id":1},{"id":"htwgzp","name":"rating__number","settings":{"_typography":{"font-weight":"600","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_margin":{"left":"10"}},"modified":1737370371,"user_id":1},{"id":"limylc","name":"hero__heading","settings":{"_typography":{"font-size":"70","font-family":"Merriweather","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-weight":"400","line-height":"1.1"},"_margin":{"bottom":"15"},"_typography:mobile_portrait":{"font-size":"40"}},"modified":1737214401,"user_id":1},{"id":"tlzrgu","name":"hero__paragraph","settings":{"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-size":"20"}}},{"id":"dxkwbv","name":"button","settings":{"_typography":{"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"},"font-size":"18px","text-transform":"uppercase","font-weight":"600"},"_background":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_padding":{"left":"25","right":"25","bottom":"15","top":"15"},"_background:hover":{"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_typography:hover":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_cssTransition":"all 200ms ease"},"modified":1737372282,"user_id":1}],"globalElements":[]}
Our notes on this component
This hero section component contains a simple left-to-right layout with a heading, paragraph, and a button. Along with that, it has an SVG (currently the PostPilot logo) as a faint background detail which you can replace with your own logo.
The design from this component was taken from the PostPilot website – so the images are more than likely all owned by them!
Similar components


Julian Galluzzo
Hero Section With Product Screenshot
Get straight to business by showcasing a screenshot and a demo on your home page - we've proven on our site that this type of hero increases conversions!


Julian Galluzzo
Hero Section With Background Grid
A hero section with a header, a paragraph, and a button. Great for when you have no image!


Julian Galluzzo
Hero Section With Image Background
A clean hero section featuring a subheading, heading, paragraph, and 2 buttons with hover effects.