Profile Picture
Julian Galluzzo

Online Course Hero Section

Hero section for a landing page with a centered content block, followed by a play video lightbox.
Copy component
Download JSON
{"content":[{"id":"vxrufw","name":"section","parent":0,"children":["jduyhe"],"settings":{},"label":"Hero"},{"id":"jduyhe","name":"container","parent":"vxrufw","children":["edrcug","cnjiyb"],"settings":[]},{"id":"edrcug","name":"block","parent":"jduyhe","children":["aqqykz","oishfm","hxqkbg","zhcijo"],"settings":{"_cssGlobalClasses":["uvrubm"]},"label":"Content Wrap"},{"id":"aqqykz","name":"text-basic","parent":"edrcug","children":[],"settings":{"text":"Online Course Template","_cssGlobalClasses":["yvvyfb"]},"label":"Subheading"},{"id":"oishfm","name":"heading","parent":"edrcug","children":[],"settings":{"text":"Build an online course with Memberstack + WordPress","_margin":{"bottom":"20"},"tag":"h1","_widthMax":"900"}},{"id":"hxqkbg","name":"text-basic","parent":"edrcug","children":[],"settings":{"text":"This is a 100% free template that shows you how you can build an online course. Everything below here is a template for the home page of the course - if you'd like to watch how to build a course, click the video below - or, click enroll now to test it yourself.","_margin":{"bottom":"40"},"_typography":{"font-size":"20"},"_widthMax":"800"}},{"id":"zhcijo","name":"button","parent":"edrcug","children":[],"settings":{"text":"Enroll now","style":"primary","_cssGlobalClasses":["xruzrw"],"link":{"type":"external","url":"#brxe-lcwket"}}},{"id":"cnjiyb","name":"block","parent":"jduyhe","children":["mvruae","npzxnu"],"settings":{"_cssGlobalClasses":["kczfmd"]},"label":"Video Wrap"},{"id":"mvruae","name":"image","parent":"cnjiyb","children":[],"settings":{"image":{"id":25,"filename":"a-warm-inviting-studio-portrait-of-a-fri_oVN3yZw2R-6gS0bfchX7uQ_p-u-rzJNTPuCVwi5bfMG6g.avif","size":"full","full":"https://online-course-template.local/wp-content/uploads/2025/04/a-warm-inviting-studio-portrait-of-a-fri_oVN3yZw2R-6gS0bfchX7uQ_p-u-rzJNTPuCVwi5bfMG6g.avif","url":"https://online-course-template.local/wp-content/uploads/2025/04/a-warm-inviting-studio-portrait-of-a-fri_oVN3yZw2R-6gS0bfchX7uQ_p-u-rzJNTPuCVwi5bfMG6g.avif"}},"themeStyles":[]},{"id":"npzxnu","name":"icon","parent":"cnjiyb","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-play"},"_cssGlobalClasses":["zyospc"],"iconSize":"75"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"uvrubm","name":"hero__content-wrap","settings":{"_alignItems":"center","_typography":{"text-align":"center"},"_margin":{"bottom":"75"}}},{"id":"yvvyfb","name":"subheading","settings":{"_typography":{"color":{"hex":"#f44336"},"font-weight":"600"},"_background":{"color":{"hex":"#f44336","rgb":"rgba(244, 67, 54, 0.1)","hsl":"hsla(4, 90%, 58%, 0.1)"}},"_padding":{"bottom":"3","top":"3","left":"12","right":"12"},"_margin":{"bottom":"20"},"_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}}},"modified":1745409256,"user_id":1},{"id":"xruzrw","name":"button","settings":{"_background":{"color":{"hex":"#f44336","raw":"var(--brand-color)"}},"_typography":{"color":{"hex":"#ffffff"},"font-size":"18"},"_padding":{"top":"13","bottom":"13","left":"25","right":"25"},"_boxShadow":{"values":{"offsetY":"5","blur":"0"},"color":{"hex":"#c21a0a"}},"_border":{"radius":{"top":"100","right":"100","bottom":"100","left":"100"}},"_background:hover":{"color":{"hex":"#e52c0b"}},"_cssTransition":"0.2s","_cursor":"pointer"},"modified":1747125364,"user_id":1},{"id":"kczfmd","name":"hero__video-wrap","settings":{"_overflow":"clip","_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"}},"_position":"relative","_justifyContent":"center","_alignItems":"center"},"modified":1744889047,"user_id":1},{"id":"zyospc","name":"hero__video-icon","settings":{"iconColor":{"hex":"#ffffff"},"_position":"absolute","_background":{"color":{"hex":"#ffffff","rgb":"rgba(255, 255, 255, 0.36)","hsl":"hsla(0, 0%, 100%, 0.36)"}},"_border":{"radius":{"top":"100","right":"100","bottom":"100","left":"100"}},"_padding":{"top":"10","right":"10","bottom":"10","left":"10"},"_transform:hover":{"scaleX":"1.2","scaleY":"1.2"},"_cssTransition":"0.2s"}}],"globalElements":[]}

Our notes on this component

This component comes from Memberstack’s 2025 Online Course Template!

If you want to build an online course, click here to get the full template + installation instructions.

The template works using;

  • WordPress 6.8.1
  • ACF (Advanced Custom Fields)
  • Memberstack

Here’s the video showing how you can install it, and how the template works!!

Similar components

Profile Picture
Zubair Raee

Hero Section

Elegant hero with serif headline, modern layout, and lifestyle imagery for a bold first impression.
View now
Copy now
[ { "id": "dtjpml", "category": "Hero Section", "desc": "Elegant hero with serif headline, modern layout, and lifestyle imagery for a bold first impression.", "elements": [ { "id": "dtjpml", "name": "section", "parent": 0, "children": [ "lycfoc", "qtssra" ], "settings": { "_cssGlobalClasses": [] }, "label": "Inteo Hero Section" }, { "id": "lycfoc", "name": "container", "parent": "dtjpml", "children": [ "judyeu", "rorptz", "epqoco" ], "settings": { "_cssGlobalClasses": [ "ksptpz" ] } }, { "id": "judyeu", "name": "heading", "parent": "lycfoc", "children": [], "settings": { "text": "Make your home an ode to joy", "_cssGlobalClasses": [ "utgehl", "ownkxi", "qhjjfy" ], "tag": "h1", "_typography": { "text-align": "center" } } }, { "id": "rorptz", "name": "text-basic", "parent": "lycfoc", "children": [], "settings": { "text": "We turn your empty house to a lovely home, making the compact spaces with sapce saving furnitures. Making the unique tastes of yours into reality! ", "_cssGlobalClasses": [ "xlrzes", "bskrla" ], "_typography": { "text-align": "center" }, "_widthMax": "800" } }, { "id": "epqoco", "name": "image", "parent": "lycfoc", "children": [], "settings": { "image": { "id": 29, "filename": "cta-button-487f725c7d7d0729437bd09dc6f9b120.svg", "size": "full", "full": "https://bricksboard.zubairraee.com/wp-content/uploads/2025/05/cta-button-487f725c7d7d0729437bd09dc6f9b120.svg", "url": "https://bricksboard.zubairraee.com/wp-content/uploads/2025/05/cta-button-487f725c7d7d0729437bd09dc6f9b120.svg" }, "_cssGlobalClasses": [ "homhma" ] }, "themeStyles": [] }, { "id": "qtssra", "name": "container", "parent": "dtjpml", "children": [ "clkpjx" ], "settings": { "_cssGlobalClasses": [ "zlpaky" ] } }, { "id": "clkpjx", "name": "image", "parent": "qtssra", "children": [], "settings": { "image": { "id": 28, "filename": "hero-image-scaled.avif", "size": "large", "full": "https://bricksboard.zubairraee.com/wp-content/uploads/2025/05/hero-image-scaled.avif", "url": "https://bricksboard.zubairraee.com/wp-content/uploads/2025/05/hero-image-1024x455.avif" }, "_cssGlobalClasses": [ "tiocos" ] }, "themeStyles": [] } ], "properties": [], "_created": 1748637994, "_user_id": 1, "_version": "1.12.4" } ]
Profile Picture
Akshay Joshi

Sunzen kit – Hero section

Minimalist hero section with a button
View now
Copy now
{"id":969,"name":"sunzen-hero","title":"Sunzen Hero","date":"2025-05-28 21:21:32","date_formatted":"May 28, 2025","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/sunzen-hero\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"6b64ae","name":"section","parent":0,"children":["284f2a"],"settings":{"_cssGlobalClasses":["qflssy","oobxfe"],"_background":{"image":{"id":802,"filename":"sunzen-hero-banner.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/sunzen-hero-banner.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/sunzen-hero-banner-1024x574.webp"}}},"label":"Sunzen Hero"},{"id":"284f2a","name":"container","parent":"6b64ae","children":["9d3508","c5a7d2","e98271"],"settings":{"_cssGlobalClasses":["jjcpci","ldkfql"]}},{"id":"9d3508","name":"heading","parent":"284f2a","children":[],"settings":{"text":" Zen and the art of office space","tag":"h1","_cssGlobalClasses":["jicfnc"]}},{"id":"c5a7d2","name":"text-basic","parent":"284f2a","children":[],"settings":{"text":"Experience a coworking and office space of tranquil productivity that provides focus and clarity.","_cssGlobalClasses":["pukdjm"],"_typography":{"text-align":"center"}}},{"id":"e98271","name":"button","parent":"284f2a","children":[],"settings":{"text":"Apply Now","style":"primary","_cssGlobalClasses":["fwtdtj"],"link":{"type":"external","url":"#"}}}],"templateType":"section","global_classes":[{"id":"qflssy","name":"sunzen-default-section","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"},"_padding:mobile_landscape":{"top":"80","bottom":"80"},"_padding:mobile_portrait":{"top":"60","bottom":"60"},"_rowGap":"64","_rowGap:mobile_portrait":"40"}},{"id":"jjcpci","name":"sunzen-default-container","settings":{"_width":"1248","_rowGap":"64","_rowGap:mobile_landscape":"30"}},{"id":"ldkfql","name":"sunzen-banner__container","settings":{"_alignItems":"center","_alignSelf":"center","_width":"100%","_widthMax":"850","_rowGap":"40","_padding":{"left":"97","right":"97"},"_rowGap:mobile_portrait":"24","_widthMax:mobile_landscape":"100%","_padding:mobile_landscape":{"left":"0","right":"0"}}},{"id":"oobxfe","name":"sunzen-banner--section","settings":{"_justifyContent":"center","_alignItems":"center","_gradient":{"applyTo":"overlay","gradientType":"linear","colors":[{"id":"qyacsd","color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.35)","hsl":"hsla(0, 0%, 0%, 0.35)"}},{"id":"qyacsd","color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.35)","hsl":"hsla(0, 0%, 0%, 0.35)"}}]},"_background":{"position":"center center","repeat":"no-repeat","size":"cover"},"_heightMin":"715","_heightMin:mobile_landscape":"512"}},{"id":"jicfnc","name":"sunzen__h1","settings":{"_typography":{"font-weight":"500","font-size":"84","letter-spacing":"-2%","color":{"hex":"#ffffff"},"font-family":"Manrope","text-align":"center","line-height":"1.12"},"_typography:mobile_portrait":{"font-weight":"600","font-size":"34"},"_typography:mobile_landscape":{"font-size":"50"}}},{"id":"pukdjm","name":"sunzen__big-white-text","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-size":"24","font-weight":"500","font-family":"Manrope","line-height":"1.3"},"_typography:mobile_portrait":{"font-size":"18"},"_typography:tablet_portrait":{"font-size":"18"}}},{"id":"fwtdtj","name":"sunzen-primary-btn","settings":{"_background":{"color":{"hex":"#e9e591"}},"_border":{"radius":{"top":"1000","right":"1000","left":"1000","bottom":"1000"}},"_typography":{"color":{"hex":"#111111"},"font-weight":"700","font-size":"18","font-family":"Manrope"},"_padding":{"right":"32","left":"32","top":"5","bottom":"5"},"_padding:mobile_portrait":{"right":"24","left":"24"},"_typography:mobile_portrait":{"font-size":"16"},"_heightMin":"60px","_heightMin:mobile_portrait":"48px","_background:hover":{"color":{"hex":"#bab562"}}}}]}
Profile Picture
Akshay Joshi

Metric Kit – Single post template hero

Hero section for single post template
View now
Copy now
{"id":708,"name":"single-insight-hero","title":"Single Insight Hero","date":"2025-05-22 20:02:32","date_formatted":"May 22, 2025","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/single-insight-hero\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"c4c895","name":"section","parent":0,"children":["72faf4"],"settings":{"_cssGlobalClasses":["vneohb","qwesvz"]},"label":"Single Insight Hero"},{"id":"72faf4","name":"container","parent":"c4c895","children":["46cf6c","b4f399"],"settings":{"_cssGlobalClasses":["qresdr","kfzigd"],"_direction":"row"}},{"id":"46cf6c","name":"block","parent":"72faf4","children":["cc4468","878c46"],"settings":{"_cssGlobalClasses":["sgyxcf"]},"label":"Column"},{"id":"cc4468","name":"heading","parent":"46cf6c","children":[],"settings":{"text":"Why most B2B tech companies waste money on LinkedIn ads (and how to fix it)","tag":"h1","_cssGlobalClasses":["veazgd","xeyeir"]}},{"id":"878c46","name":"block","parent":"46cf6c","children":["b5ebb8","135d29"],"settings":{"_cssGlobalClasses":["qkceng"]}},{"id":"b5ebb8","name":"block","parent":"878c46","children":["9ec945","9dc30f"],"settings":{"_cssGlobalClasses":["uuhask"]},"label":"Column"},{"id":"9ec945","name":"image","parent":"b5ebb8","children":[],"settings":{"image":{"id":610,"filename":"Testimonial-Image-1.png","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Testimonial-Image-1.png","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Testimonial-Image-1.png"},"_cssGlobalClasses":["pywgoh"]}},{"id":"9dc30f","name":"text-basic","parent":"b5ebb8","children":[],"settings":{"text":"Jake White, SEO lead at Metric","_cssGlobalClasses":["hlgudr"]},"label":"Name"},{"id":"135d29","name":"block","parent":"878c46","children":["7ef0c8","2020c8"],"settings":{"_cssGlobalClasses":["uuhask"]},"label":"Column"},{"id":"7ef0c8","name":"button","parent":"135d29","children":[],"settings":{"text":"January 4, 2025","_cssGlobalClasses":["wcweyx"],"link":{"type":"external","url":"#"}}},{"id":"2020c8","name":"button","parent":"135d29","children":[],"settings":{"text":"8 min read","_cssGlobalClasses":["wcweyx"],"link":{"type":"external","url":"#"}}},{"id":"b4f399","name":"block","parent":"72faf4","children":[],"settings":{"_background":{"image":{"id":611,"filename":"Image-Container-2.png","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Image-Container-2.png","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Image-Container-2.png"},"position":"center center","repeat":"no-repeat","size":"cover"},"_cssGlobalClasses":["bhjvun"]},"label":"featured BG Column"}],"templateType":"section","global_classes":[{"id":"veazgd","name":"metric-hero__heading","settings":{"_typography":{"font-size":"72","font-weight":"500","color":{"hex":"#171717"},"line-height":"1.2"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"40"}}},{"id":"vneohb","name":"metric-default-section","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"},"_padding:mobile_landscape":{"top":"80","bottom":"80"},"_padding:mobile_portrait":{"top":"60","bottom":"60"}}},{"id":"qresdr","name":"metric-default-container","settings":{"_width":"1728","_rowGap":"45"}},{"id":"wcweyx","name":"metric-btn_light-grey","settings":{"_padding":{"top":"8","right":"24","bottom":"8","left":"24"},"_heightMin":"48","_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"_background":{"color":{"hex":"#f6f6f6"}},"_typography":{"font-size":"16","font-weight":"500","color":{"hex":"#171717"}},"_background:hover":{"color":{"hex":"#171717"}},"_typography:hover":{"color":{"hex":"#ffffff"}}}},{"id":"qwesvz","name":"metric-single-insight_hero","settings":[]},{"id":"kfzigd","name":"metric-single-insight_hero-container","settings":{"_alignItems":"stretch","_columnGap":"96","_columnGap:tablet_portrait":"50"}},{"id":"sgyxcf","name":"metric-single-insight_hero-col","settings":{"_justifyContent":"space-between","_rowGap":"120","_rowGap:mobile_landscape":"80","_rowGap:mobile_portrait":"60","_rowGap:tablet_portrait":"90"}},{"id":"xeyeir","name":"metric-single-insight_hero-h1","settings":{"_typography":{"font-size":"72"},"_typography:tablet_portrait":{"font-size":"42"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"40"},"_cssCustom":"@media only screen and (max-width:1620px) {\n\n .metric-single-insight_hero-h1.brxe-heading {\nfont-size:55px;\n}\n \n}"}},{"id":"qkceng","name":"metric-single-insight_hero-inner_block","settings":{"_direction":"row","_columnGap":"30","_justifyContent":"space-between","_rowGap":"30","_cssCustom":"@media only screen and (max-width:1620px){\n .metric-single-insight_hero-inner_block{\nflex-wrap: wrap;\n}\n}"}},{"id":"uuhask","name":"metric-s-i_hero-inner-col-l","settings":{"_direction":"row","_columnGap":"10","_alignItems":"center"}},{"id":"bhjvun","name":"metric-single-insight_hero-col-r","settings":{"_background":{"image":{"id":611,"filename":"Image-Container-2.png","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Image-Container-2.png","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Image-Container-2.png"},"position":"center center","repeat":"no-repeat","size":"cover"},"_heightMin:mobile_landscape":"436","_heightMin:mobile_portrait":"243"}},{"id":"hlgudr","name":"metric-s-i_hero-name","settings":{"_typography":{"font-size":"20"},"_typography:mobile_portrait":{"font-size":"16"}}},{"id":"pywgoh","name":"metric-s-i_photo","settings":{"_widthMax":"48"}}]}

Nice, you've downloaded this template! Now let's get it on your website...

To use this component, go to your 'Templates', click 'Import', and upload the file you just downloaded! It's that simple. You can then copy/paste it to other sections of your website.
Close & continue

Nice, you've copied this component! Now let's paste it...

To paste this component, simply go to any Bricks page or component and click paste! Simple as that.
Close & continue