Layout
Masonry Section
Packs columns into a masonry grid of mixed heights.
Live demo
See it in action
Visual builderDrag-and-drop sections, columns and 60+ elements into place.
Free & open sourceEverything ships under the GPL — the framework, the Bootstrap 5 theme and every element. Install once and the GitHub auto-updater keeps you current with new elements and fixes over time.
Clean markupNo wrapper soup.
Header & footer buildersDesign your chrome visually and reuse it across the whole site.
Global templatesSave any section, drop it anywhere, edit once — update everywhere.
Bootstrap 5 themeA modern, responsive parent theme with a full design-token system.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12 fw-col-sm-4">
<div style="background:#f5f5f5;border:1px solid #e7e8e9;border-radius:14px;padding:1.3rem 1.4rem">
<strong style="display:block;margin-bottom:.45rem;color:#1c1e22">Visual builder</strong>
<span style="color:#5f6266;font-size:.93rem">Drag-and-drop sections, columns and 60+ elements into place.</span>
</div>
</div>
<div class="fw-col-12 fw-col-sm-4">
<div style="background:#eef7f4;border:1px solid #e7e8e9;border-radius:14px;padding:1.3rem 1.4rem">
<strong style="display:block;margin-bottom:.45rem;color:#1c1e22">Free & open source</strong>
<span style="color:#5f6266;font-size:.93rem">Everything ships under the GPL — the framework, the Bootstrap 5 theme and every element. Install once and the GitHub auto-updater keeps you current with new elements and fixes over time.</span>
</div>
</div>
<div class="fw-col-12 fw-col-sm-4">
<div style="background:#f5f5f5;border:1px solid #e7e8e9;border-radius:14px;padding:1.3rem 1.4rem">
<strong style="display:block;margin-bottom:.45rem;color:#1c1e22">Clean markup</strong>
<span style="color:#5f6266;font-size:.93rem">No wrapper soup.</span>
</div>
</div>
<div class="fw-col-12 fw-col-sm-4">
<div style="background:#f3f6fb;border:1px solid #e7e8e9;border-radius:14px;padding:1.3rem 1.4rem">
<strong style="display:block;margin-bottom:.45rem;color:#1c1e22">Header & footer builders</strong>
<span style="color:#5f6266;font-size:.93rem">Design your chrome visually and reuse it across the whole site.</span>
</div>
</div>
<div class="fw-col-12 fw-col-sm-4">
<div style="background:#f5f5f5;border:1px solid #e7e8e9;border-radius:14px;padding:1.3rem 1.4rem">
<strong style="display:block;margin-bottom:.45rem;color:#1c1e22">Global templates</strong>
<span style="color:#5f6266;font-size:.93rem">Save any section, drop it anywhere, edit once — update everywhere.</span>
</div>
</div>
<div class="fw-col-12 fw-col-sm-4">
<div style="background:#eef7f4;border:1px solid #e7e8e9;border-radius:14px;padding:1.3rem 1.4rem">
<strong style="display:block;margin-bottom:.45rem;color:#1c1e22">Bootstrap 5 theme</strong>
<span style="color:#5f6266;font-size:.93rem">A modern, responsive parent theme with a full design-token system.</span>
</div>
</div>
</div>
</div>
</section>To learn more about the Masonry Section shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.