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
Akshay Joshi

Breakio – Hero Section

Hero banner featuring an image and email signup form
View now
Copy now
{"id":3861,"name":"breakio-hero-section-3","title":"Breakio - Hero Section","date":"2025-09-23 17:54:18","date_formatted":"September 23, 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\/breakio-hero-section-3\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"1494f9","name":"section","parent":0,"children":["eb900d"],"settings":{"_cssGlobalClasses":["sntycg","mrxvyi","mkeggp"]},"label":"Hero"},{"id":"eb900d","name":"container","parent":"1494f9","children":["50d989","b1365e"],"settings":{"_cssGlobalClasses":["exxrhx","qqlcfl","linejo"]}},{"id":"50d989","name":"block","parent":"eb900d","children":["c62edd","ebb69b","84ab4a"],"settings":{"_cssGlobalClasses":["ghskkg","rsjtbs","xjldcd"]}},{"id":"c62edd","name":"heading","parent":"50d989","children":[],"settings":{"text":"I am a It\u2019s time to take a break","_cssGlobalClasses":["lindjz","hsjvko"],"tag":"h1"}},{"id":"ebb69b","name":"text-basic","parent":"50d989","children":[],"settings":{"text":"Build your meditation skills with an app that gives you all you need!","_cssGlobalClasses":["lgtfnt","ibgcju"]}},{"id":"84ab4a","name":"form","parent":"50d989","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Enter your name","id":"692127","width:mobile_portrait":"100","width":"60"}],"submitButtonStyle":"primary","actions":["email"],"successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"AK Developer","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you.","_cssGlobalClasses":["pjrtzt"],"placeholderTypography":{"font-weight":"400"},"submitButtonText":"Start Now","fieldTypography:mobile_portrait":{"font-size":"16"},"fieldTypography":{"text-wrap":"nowrap"}},"themeStyles":[]},{"id":"b1365e","name":"image","parent":"eb900d","children":[],"settings":{"_cssGlobalClasses":["xkppdx"],"image":{"id":3623,"filename":"Picture.png","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/09\/Picture.png","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/09\/Picture-1024x378.png"}}}],"templateType":"section","global_classes":[{"id":"mrxvyi","name":"breakio-hero","settings":{"_rowGap":"80","_columnGap":"80","_padding":{"bottom":"56"},"_width":"100%"},"modified":1758285973,"user_id":1},{"id":"qqlcfl","name":"breakio_container","settings":{"_columnGap":"80","_rowGap":"80","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_width":"100%","_widthMax":"1280"},"modified":1757946768,"user_id":1},{"id":"rsjtbs","name":"breakio_hero-block","settings":{"_columnGap":"24","_rowGap":"24"}},{"id":"hsjvko","name":"breakio_h1","settings":{"_typography":{"font-size":"72","font-family":"Roboto","text-align":"center"},"_typography:mobile_portrait":{"font-size":"32"},"_typography:mobile_landscape":{"font-size":"56"},"_gradient":{"applyTo":"text","gradientType":"linear","angle":"35","colors":[{"id":"mzmqzl","color":{"hex":"#c026d3"}},{"id":"wncldj","color":{"hex":"#701a75"}}]}}},{"id":"mkeggp","name":"breakio-default-section","settings":{"_padding":{"top":"80","bottom":"80","right":"5%","left":"5%"},"_rowGap":"60","_justifyContent":"center","_alignItems":"center","_alignSelf":"center","_padding:mobile_portrait":{"top":"48","bottom":"48","left":"16","right":"16"}}},{"id":"linejo","name":"breakio_hero_container","settings":{"_justifyContent":"center","_alignItems":"center","_alignSelf":"center"},"modified":1757946768,"user_id":1},{"id":"lgtfnt","name":"breakio-text-center","settings":{"_typography":{"text-align":"center"}},"modified":1757946768,"user_id":1},{"id":"xjldcd","name":"breakio-center-all","settings":{"_alignItems":"center"}},{"id":"pjrtzt","name":"breakio-hero-form","settings":{"_justifyContent":"center","_alignItems":"center","_alignSelf":"center","fieldMargin":{"right":"8","bottom":"0"},"submitButtonWidth":"40","submitButtonTypography":{"line-height":"1.7em","font-size":"24","color":{"hex":"#ffffff"},"font-weight":"700"},"submitButtonBorder":{"radius":{"top":"26","right":"26","bottom":"26","left":"26"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"hex":"#c027d3"}},"submitButtonBackgroundColor":{"hex":"#c026d3"},"submitButtonWidth:mobile_portrait":"100%","submitButtonTypography:mobile_portrait":{"font-size":"16"},"placeholderTypography:mobile_portrait":{"font-size":"16"},"_width:mobile_portrait":"100%","fieldTypography:mobile_portrait":{"font-size":"16"},"_widthMax":"700","_width":"100%","fieldTypography:mobile_landscape":{"font-size":"18"},"fieldPadding":{"left":"24","right":"24","bottom":"13","top":"13"},"fieldBorder":{"radius":{"top":"26","right":"26","bottom":"26","left":"26"}},"fieldTypography":{"font-size":"24"},"submitButtonTypography:mobile_landscape":{"font-size":"16","line-height":"48px","font-weight":"500"},"submitButtonMargin:mobile_portrait":{"top":"20"}}},{"id":"ibgcju","name":"breakio-default-text","settings":{"_typography":{"font-size":"20","font-family":"Roboto","font-weight":"400","color":{"hex":"#475569"}},"_typography:mobile_landscape":{"font-size":"16"}}}]}
Profile Picture
Akshay Joshi

Construction Kit – Hero News

Simple hero
View now
Copy now
{"id":3602,"name":"construction-kit-hero-news","title":"Construction Kit - Hero News","date":"2025-09-05 06:40:02","date_formatted":"September 5, 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\/construction-kit-hero-news\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"16b6b6","name":"section","parent":0,"children":["31b1f5"],"settings":{"_cssGlobalClasses":["tkudmp","ecvdox"],"_background":{"image":{"id":3399,"filename":"Rectangle-42.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/08\/Rectangle-42.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/08\/Rectangle-42.webp"},"position":"center center","repeat":"no-repeat"}},"label":"Hero - News"},{"id":"31b1f5","name":"container","parent":"16b6b6","children":["e0e598"],"settings":{"_cssGlobalClasses":["kzdlvy","nqvkqo"],"_direction":"row"},"label":"container"},{"id":"e0e598","name":"block","parent":"31b1f5","children":["8824e4"],"settings":{"_cssGlobalClasses":["ueqtko","zgrvin"]},"label":"Column"},{"id":"8824e4","name":"heading","parent":"e0e598","children":[],"settings":{"text":"News","_cssGlobalClasses":["fjtxgz","lhwouz"],"tag":"h1"}}],"templateType":"section","global_classes":[{"id":"ecvdox","name":"construction-default-section","settings":{"_padding":{"top":"100","bottom":"100","right":"8%","left":"8%"},"_padding:tablet_portrait":{"top":"75","bottom":"75","right":"5%","left":"5%"}}},{"id":"kzdlvy","name":"construction-full-width-container","settings":{"_width":"100%","_direction":"row","_alignItems":"stretch"}},{"id":"fjtxgz","name":"construction-h1","settings":{"_typography":{"font-size":"64","font-family":"Rubik"},"_typography:tablet_portrait":{"font-size":"46"},"_typography:mobile_landscape":{"font-size":"36"}}},{"id":"ueqtko","name":"construction__hero-column","settings":{"_justifyContent":"center","_gradient":[],"_columnGap":"40","_rowGap":"40","_width:mobile_landscape":"100%","_width":"55%","_width:tablet_portrait":"50%"}},{"id":"lhwouz","name":"construction-left-border-heading","settings":{"_border":{"width":{"left":"10"},"style":"solid","color":{"hex":"#ffb401"}},"_padding":{"left":"20"},"_typography":{"color":{"hex":"#ffffff"}}}},{"id":"tkudmp","name":"construction_hero","settings":{"_gradient":{"applyTo":"overlay","colors":[{"id":"zjnhjl","color":{"hex":"#1f1f1f","rgb":"rgba(31, 31, 31, 0.85)","hsl":"hsla(0, 0%, 12%, 0.85)"}},{"id":"zjnhjl","color":{"hex":"#1f1f1f","rgb":"rgba(31, 31, 31, 0.85)","hsl":"hsla(0, 0%, 12%, 0.85)"}}]}},"modified":1756713051,"user_id":1},{"id":"nqvkqo","name":"construction__hero-container","settings":{"_alignItems":"stretch","_rowGap:mobile_landscape":"50","_columnGap":"100","_columnGap:tablet_portrait":"80"},"modified":1756713051,"user_id":1},{"id":"zgrvin","name":"construction__hero-column-single","settings":{"_width":"70%","_width:mobile_landscape":"100%"},"modified":1756746945,"user_id":1}]}
Profile Picture
Akshay Joshi

Construction Kit – Hero Project

Hero section with small details
View now
Copy now
{"id":3607,"name":"construction-hero-project","title":"Construction - Hero Project","date":"2025-09-05 06:46:21","date_formatted":"September 5, 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\/construction-hero-project\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"cf2140","name":"section","parent":0,"children":["8ef7db"],"settings":{"_cssGlobalClasses":["tkudmp","ecvdox"],"_background":{"image":{"id":3401,"filename":"Rectangle-43.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/08\/Rectangle-43.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/08\/Rectangle-43.webp"},"position":"center center","repeat":"no-repeat"}},"label":"Hero Project"},{"id":"8ef7db","name":"container","parent":"cf2140","children":["d2168e","8184db"],"settings":{"_cssGlobalClasses":["kzdlvy","nqvkqo"],"_direction":"row"},"label":"container"},{"id":"d2168e","name":"block","parent":"8ef7db","children":["528eee","918b1e"],"settings":{"_cssGlobalClasses":["ueqtko"]},"label":"Column"},{"id":"528eee","name":"heading","parent":"d2168e","children":[],"settings":{"text":"Monarch HQ Project","_cssGlobalClasses":["fjtxgz","lhwouz"]}},{"id":"918b1e","name":"text-basic","parent":"d2168e","children":[],"settings":{"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis egestas pellentesque libero dolor in diam consequat ut.","_cssGlobalClasses":["wyotfr"]}},{"id":"8184db","name":"block","parent":"8ef7db","children":["e7e58d"],"settings":{"_cssGlobalClasses":["zvwtzc","xxecjr"],"_width:mobile_landscape":"100%","_display:mobile_landscape":"grid","_gridGap:mobile_landscape":"30","_gridTemplateColumns:mobile_landscape":"repeat(1,1fr)","_gridTemplateColumns:mobile_portrait":"repeat(1,1fr)"},"label":"Column"},{"id":"e7e58d","name":"block","parent":"8184db","children":["315f80"],"settings":{"_cssGlobalClasses":["foavli"]}},{"id":"315f80","name":"list","parent":"e7e58d","children":[],"settings":{"items":[{"title":"Date:","id":"dxlrzd","meta":"12 April 2018"},{"title":"Time:","id":"qohfoj","meta":"Monarch Group"},{"title":"Project Type:","id":"aqvyvp","meta":"Building Renovation"}],"_cssGlobalClasses":["mvyyej"]}}],"templateType":"section","global_classes":[{"id":"ecvdox","name":"construction-default-section","settings":{"_padding":{"top":"100","bottom":"100","right":"8%","left":"8%"},"_padding:tablet_portrait":{"top":"75","bottom":"75","right":"5%","left":"5%"}}},{"id":"kzdlvy","name":"construction-full-width-container","settings":{"_width":"100%","_direction":"row","_alignItems":"stretch"}},{"id":"fjtxgz","name":"construction-h1","settings":{"_typography":{"font-size":"64","font-family":"Rubik"},"_typography:tablet_portrait":{"font-size":"46"},"_typography:mobile_landscape":{"font-size":"36"}}},{"id":"wyotfr","name":"construction-body_font_big","settings":{"_typography":{"font-size":"22","color":{"hex":"#ffffff"}},"_typography:mobile_landscape":{"font-size":"17"}},"modified":1755695502,"user_id":1},{"id":"foavli","name":"construction_hero-small-block","settings":{"_display":"flex","_direction":"row","_rowGap":"10","_columnGap":"10","_alignItems":"center","_flexWrap:mobile_portrait":"nowrap"}},{"id":"ueqtko","name":"construction__hero-column","settings":{"_justifyContent":"center","_gradient":[],"_columnGap":"40","_rowGap":"40","_width:mobile_landscape":"100%","_width":"55%","_width:tablet_portrait":"50%"}},{"id":"zvwtzc","name":"construction__hero-column__right","settings":{"_width":"45%","_justifyContent":"center","_columnGap":"5%","_rowGap":"50px","_padding":{"left":"5%"},"_padding:tablet_portrait":{"left":"0"}},"modified":1756747741,"user_id":1},{"id":"lhwouz","name":"construction-left-border-heading","settings":{"_border":{"width":{"left":"10"},"style":"solid","color":{"hex":"#ffb401"}},"_padding":{"left":"20"},"_typography":{"color":{"hex":"#ffffff"}}}},{"id":"tkudmp","name":"construction_hero","settings":{"_gradient":{"applyTo":"overlay","colors":[{"id":"zjnhjl","color":{"hex":"#1f1f1f","rgb":"rgba(31, 31, 31, 0.85)","hsl":"hsla(0, 0%, 12%, 0.85)"}},{"id":"zjnhjl","color":{"hex":"#1f1f1f","rgb":"rgba(31, 31, 31, 0.85)","hsl":"hsla(0, 0%, 12%, 0.85)"}}]}},"modified":1756713051,"user_id":1},{"id":"nqvkqo","name":"construction__hero-container","settings":{"_alignItems":"stretch","_rowGap:mobile_landscape":"50","_columnGap":"100","_columnGap:tablet_portrait":"80"},"modified":1756713051,"user_id":1},{"id":"mvyyej","name":"construction-hero-list","settings":{"separatorDisable":true,"titleTypography":{"color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"},"font-weight":"500","font-size":"16","font-family":"Open Sans"},"metaTypography":{"color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"},"font-size":"16","font-weight":"400","font-family":"Open Sans"},"itemJustifyContent":"flex-start","metaMargin":{"left":"5"},"titleMargin":{"right":"0"}}},{"id":"xxecjr","name":"construction_project-hero-right_column","settings":{"_alignSelf":"flex-start"}}]}

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