Blocks Monster

A collection of top-notch UI blocks

Premium

2 Column Layout (Sidebar Right)

A clean and responsive 2 Column Layout (Sidebar Right), perfect for blogs, articles, and content-driven pages. The main content area is wide and prominent, while the right sidebar provides space for widgets, navigation, or additional information. Optimized for readability and seamless user experience. 🚀

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-8pltn">.bm-8pltn { background: #050507;margin-top: 0px;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 40px;padding-right: 40px;padding-bottom: 40px;padding-left: 40px; }
@media (max-width: 600px) { .bm-8pltn { padding-top: 20px;padding-bottom: 20px; } }</style>
<div class="bm-8pltn wp-block-bm-section">
<style type="text/css" id="bm-y1qnu">.bm-y1qnu { display: flex;flex-direction: row;align-items: center;justify-content: space-between;row-gap: 20px;column-gap: 20px;max-width: 1000px;margin-right: auto !important;margin-left: auto !important; }
@media (max-width: 600px) { .bm-y1qnu { display: flex;flex-direction: column; } }</style>
<div class="bm-y1qnu wp-block-bm-section">
<style type="text/css" id="bm-uraer">.bm-uraer { width: 75%;background: #19181d;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; }
@media (max-width: 782px) { .bm-uraer { width: 100%; } }
@media (max-width: 600px) { .bm-uraer { width: 100%; } }</style>
<div class="bm-uraer wp-block-bm-column">
<style type="text/css" id="bm-fvfzw">.bm-fvfzw { font-size:16px;color:#ffffff; }</style>
<h2 class="bm-fvfzw wp-block-bm-heading">Left Column (75%)</h2>
</div>
<style type="text/css" id="bm-23afw">.bm-23afw { width: 25%;background: #19181d;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; }
@media (max-width: 782px) { .bm-23afw { width: 100%; } }
@media (max-width: 600px) { .bm-23afw { width: 100%; } }</style>
<div class="bm-23afw wp-block-bm-column">
<style type="text/css" id="bm-30soz">.bm-30soz { font-size:16px;color:#ffffff; }</style>
<h2 class="bm-30soz wp-block-bm-heading">Right Column (25%)</h2>
</div>
</div>
</div>
</div>
<p>

2 Column Layout (Sidebar Right)

You may also like: