Blocks Monster

A collection of top-notch UI blocks

Free

Hero Section 001

A professionally crafted Gutenberg block design that enhances your website’s layout and user experience. Fully responsive, easy to customize, and built for performance.

Required Plugins

Blocks Monster

Copy to Clipboard

</p>
<div class="wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow">
<style type="text/css" id="bm-7aajp">.bm-7aajp { display: flex;flex-direction: row;align-items: flex-end;justify-content: center;padding-top: 40px;padding-right: 0px;padding-bottom: 0px;padding-left: 40px; }
@media (max-width: 782px) { .bm-7aajp { display: flex;flex-direction: column;padding-top: 40px;padding-bottom: 40px; } }</style>
<div class="bm-7aajp wp-block-bm-section">
<style type="text/css" id="bm-nso81">.bm-nso81 { width: 50%;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;row-gap: 40px;column-gap: 40px; }
@media (max-width: 782px) { .bm-nso81 { width: 100%; } }
@media (max-width: 600px) { .bm-nso81 { width: 100%; } }</style>
<div class="bm-nso81 wp-block-bm-column">
<style type="text/css" id="bm-s3p0j">.bm-s3p0j { display: inline-flex;flex-direction: column;align-items: flex-start;row-gap: 4px;column-gap: 4px; }</style>
<p><span class="bm-s3p0j wp-block-bm-group"><br />
<span class="bm-6mdlc wp-block-bm-icon"><svg width="17" height="16" viewBox="0 0 17 16" fill="none">
<rect width="17" height="16" rx="8" fill="#F0234D"/>
<path d="M10.375 4C9.64047 4 8.97644 4.32178 8.5 4.84038C8.02361 4.32183 7.35953 4 6.625 4C5.17526 4 4 5.25361 4 6.8C4 8.34639 5.5 9.6 8.5 12C11.5 9.6 13 8.34639 13 6.8C13 5.25361 11.8247 4 10.375 4Z" fill="white"/>
</svg></span></p>
<style type="text/css" id="bm-dm2n8">.bm-dm2n8 { font-family:Inter, sans-serif;font-weight:600;font-size:16px;line-height:109.20%;text-transform:uppercase;color:#f0234d; }</style>
<p><span class="bm-dm2n8 wp-block-bm-text">Speed up<br />communication</span><br />
</span></p>
<style type="text/css" id="bm-x5o45">.bm-x5o45 { font-family:Inter, sans-serif;font-weight:800;font-size:75px;line-height:100%;text-transform:t;color:#000000;margin-top: 0px;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;z-index: 5; }</style>
<h2 class="bm-x5o45 wp-block-bm-heading">Bring Your Team Together<br />in Blockmonster.</h2>
<style type="text/css" id="bm-0m5xc">.bm-0m5xc { font-family:Inter, sans-serif;font-weight:400;font-size:20px;line-height:140.40%;text-transform:none;color:#424242; }</style>
<p><span class="bm-0m5xc wp-block-bm-text">Just install the plugin, pick a template, and launch your site in no time.</span></p>
<style type="text/css" id="bm-5j8r3">.bm-5j8r3 { width: 160px;height: 160px;position: absolute;top: 30%;left: 37%;z-index: 2; }</style>
<p><img src="https://blocks.monster/wp-content/uploads/2025/03/orange-circle-shape.svg" alt="" class="bm-5j8r3 wp-block-bm-image"/></p>
<style type="text/css" id="bm-u7vrm">.bm-u7vrm { text-align:left;font-size:14px;text-transform:none;text-decoration:none;color:#ffffff;display: inline-flex;flex-direction: row;align-items: center;justify-content: flex-end;row-gap: 8px;column-gap: 8px;background: #000000;padding-top: 28px;padding-right: 38px;padding-bottom: 28px;padding-left: 38px;border-top: 0px solid #000000;border-right: 0px solid #000000;border-bottom: 0px solid #000000;border-left: 0px solid #000000;border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-right-radius:100px;border-bottom-left-radius:100px; }</style>
<p><a href="" target="_self" class="bm-u7vrm wp-block-bm-button">		</p>
<style type="text/css" id="bm-rkjoe">.bm-rkjoe { font-family:Inter, sans-serif;font-weight:400;font-size:20px;line-height:100%;text-transform:none;text-decoration:none; }</style>
<p><span class="bm-rkjoe wp-block-bm-text">Get started</span><br />
</a>
</div>
<div class="bm-6e823 wp-block-bm-column">
<style type="text/css" id="bm-tim9x">.bm-tim9x { width: 100%;max-width: 100%;z-index: 20; }</style>
<p><img src="https://blocks.monster/wp-content/uploads/2025/03/hero-section-001-graphics.svg" alt="" class="bm-tim9x wp-block-bm-image"/>
</div>
</div>
</div>
<p>

Hero Section 001

You may also like: