Page Builder for Flarum 2

A premium drag‑and‑drop page builder + CMS for Flarum 2. Design custom pages

from blocks, run structured content types ("databases") like an articles

section or knowledge base, and edit it all visually — in the admin **or live on

the front end**. No code required.

---

Table of contents

• Features

• Requirements

• Installation

• Quick start

• Pages & the block designer

• The live front‑end editor

• Block reference

• Hero banners

• Content types (the CMS)

• Comments on records

• Promote a discussion to an article

• SEO

• Setting a custom homepage

• Permissions

• For developers: the block & field APIs

• License

---

Features

• Visual page designer — build pages from a responsive 12‑column grid of

  rows → columns → blocks, with drag‑and‑drop reordering, in the admin.

• Live WYSIWYG editor on the front end — admins get an Edit layout button

  on any Page Builder page; drag blocks around and edit their settings while

  seeing the real, rendered result.

• 15 built‑in blocks — heroes, text/HTML/images/buttons, forum widgets

  (recent & featured discussions, online users, newest members, stats, tag

  grid), content lists, and media embeds.

• Customizable hero banners — full‑width or split layouts; gradient, solid,

  or uploaded/linked image backgrounds; custom text color; one or two buttons.

• Content types (CMS) — define your own kinds of content (articles,

  downloads, a directory, a knowledge base) with custom fields, categories, and

  per‑group permissions. Records get listing pages, detail pages, and comments.

• Promote a discussion to an article in one click.

• Built‑in SEO — server‑rendered titles, meta descriptions, and Open

  Graph / Twitter cards for every page and record.

• Open block & field APIs — other extensions can register their own blocks

  and field types.

---

Requirements

• Flarum ^2.0

• PHP 8.1+

• Optional: flarum/tags — required only for the **Tag

  Grid** block.

---

Installation

php flarum migrate
php flarum cache:clear```

Then enable **Page Builder** under *Admin → Extensions*.

This is a proprietary, paid extension — see License.

---

## Quick start

1. Open **Admin → Extensions → Page Builder**.
2. Click **New page**, give it a title, and you're dropped into the designer.
3. **Add row → Add block**, pick a **Hero banner**, and edit its heading,

   background, and buttons.
4. Click **Save changes**, then **Preview**.
5. (Optional) Use the **Forum homepage** card to make your page the site's front

   page — see Setting a custom homepage.

![Page Builder admin: homepage, pages, and content types](https://raw.githubusercontent.com/ernestdefoe/page-builder/main/docs/screenshots/admin-pages.png)

---

## Pages & the block designer

A **page** lives at `/p/{slug}` (or `/` when set as the homepage) and is built

from a layout tree:

```Page
└── Row            (full‑width / wide / narrow, padding, background)
    └── Column     (1–12 of a 12‑column grid)
        └── Block  (hero, text, widget, …)```

In the designer you can:

* **Add / delete / reorder rows**, set each row's width and padding, and give it

  a background color.
* **Add / delete / reorder columns** within a row and set each column's width

  (out of 12).
* **Add / delete / reorder blocks** within and across columns.
* **Edit every block's settings** inline (the form is generated from the block's

  schema).
* Set **per‑block visibility** — which device sizes (desktop / mobile) and which

  user groups can see it.

Everything reorders by **dragging the grip handle** (☰); drop zones appear

between items as you drag.

![The admin page designer](https://raw.githubusercontent.com/ernestdefoe/page-builder/main/docs/screenshots/designer.png)

---

## The live front‑end editor

Open any Page Builder page as an admin and click **Edit layout** (bottom‑right).

The page turns into a live editor where the **real blocks render as you work**:

* Drag rows, columns, and blocks to rearrange them.
* Click the **

⚙ settings** icon on a block to edit it — changes update the live preview instantly (true WYSIWYG). * **Add block** / delete blocks per column. * Click **Save layout** to publish, or **Cancel** to discard. ![Live front‑end WYSIWYG editor](https://raw.githubusercontent.com/ernestdefoe/page-builder/main/docs/screenshots/live-editor.png) --- ## Block reference | Block | Category | What it does | |-------|----------|--------------| | **Hero banner** | content | Full‑width or split banner; gradient/solid/image background, heading, subheading, up to two buttons. See Hero banners. | | **Heading** | content | A styled heading (h1–h4), alignment. | | **Text** | content | A rich text paragraph block, alignment. | | **HTML** | content | Raw HTML, **sanitized on save** (scripts & event handlers stripped). Authoring is admin‑only. Great for embeds and custom markup. | | **Image** | media | A single image (uploaded or by URL), optional rounded corners, alignment. | | **Button** | content | A call‑to‑action button (primary/secondary), link, alignment. | | **Divider** | layout | A horizontal rule with adjustable spacing. | | **Recent Discussions** | forum | The latest discussions, visibility‑filtered. | | **Featured Discussions** | forum | Hand‑picked discussions by ID, in your chosen order, with optional excerpts. | | **Online Users** | forum | Avatars of who's online now. | | **Newest Members** | forum | The most recently joined members, with join dates. | | **Forum Stats** | forum | Member / discussion / post / online counts. | | **Content list** | content | Embeds records from a content type (e.g. latest articles) as cards. | | **Tag Grid** | forum | Forum tags as clickable cards (requires `flarum/tags`). | | **Embed** | media | A responsive YouTube/Vimeo embed from a URL, with caption. | --- ## Hero banners The **Hero banner** block (and each content type's optional **listing hero**) is fully customizable: * **Layout** — *Full‑width background* (centered or left text) or *Split* (text panel beside an image panel). * **Background** — **Gradient** (start/end colors + angle), **Solid** color, or **Image** (upload or paste a URL, with an adjustable dark overlay). * **Text** — heading, subheading, and **text color**: light, dark, or a **custom color** to match your theme. * **Buttons** — a primary and an optional secondary button (e.g. "Browse articles" + "Browse forum"). * **Height** & **alignment**. --- ## Content types (the CMS) Page Builder includes a full content‑management layer. A **content type** is your own kind of content — *Articles*, *Downloads*, a *Knowledge base*, a *Directory* — each with its own fields, categories, permissions, and URLs. ![Editing a content type](https://raw.githubusercontent.com/ernestdefoe/page-builder/main/docs/screenshots/content-type.png) **Create one** under *Page Builder → Content types → New content type*, then configure: * **Fields** — text, textarea, rich text, **markdown** (the full Flarum composer with uploads/mentions/emoji), **image** (upload or URL), number, date, boolean, select, multiselect, URL, email, color, rating, and relationship. Mark one as the **title**, and choose which appear in the list view. * **Categories** — optional taxonomy with a filter bar and badges on the listing. * **Permissions** — which groups can **view**, **submit**, and **manage** records. * **Listing hero** — an optional hero banner on the type's `/c/{type}` page. Each type gives you: * A **listing** at `/c/{type}` (cards, category filter, pagination). * A **record page** at `/c/{type}/{slug}`. * A **composer** at `/c/{type}/new` and `/c/{type}/{slug}/edit`. ![A content type's listing page with a full‑width hero](https://raw.githubusercontent.com/ernestdefoe/page-builder/main/docs/screenshots/listing-hero.png) --- ## Comments on records When enabled for a type, each published record gets a **comment thread** backed by a real Flarum discussion — so comments get mentions, reactions, notifications, and moderation for free. The thread is created lazily on first view and hidden from the normal discussion list. --- ## Promote a discussion to an article Turn any forum discussion into an article from its **controls dropdown → Promote to article** (admin only). The discussion's title becomes the article title and its first post becomes the body; the original discussion is then attached to the new article as its **comment thread** (and drops out of the forum listing). --- ## SEO Page Builder renders SEO tags **server‑side** (so crawlers and social cards see them without running JavaScript) for `/home`, `/p/{slug}`, `/c/{type}`, and `/c/{type}/{slug}`: * `<title>` and `<meta name="description">` * **Open Graph** (`og:type`, `og:title`, `og:url`, `og:description`, `og:image`) * **Twitter** card tags * `article:published_time` for records, plus a canonical URL Record descriptions come from a summary/excerpt and `og:image` from the record's cover image. Pages use the **Meta description** field you set in the designer. The tags are authoritative and de‑duplicated, so they coexist cleanly with a dedicated SEO extension. --- ## Setting a custom homepage 1. In **Page Builder → Forum homepage**, choose the page to use as your front page. 2. Go to **Admin → Basics → Home Page** and select **“Home (Page Builder)”**. Your custom page now serves as the forum's landing route (`/`), Invision‑style. --- ## Permissions * **Pages & the designer** (admin) — building pages and editing HTML blocks is admin‑only. * **Content types** — set per‑type **view / submit / manage** group permissions in the content‑type editor. * **Block visibility** — limit individual blocks to specific groups (enforced server‑side) and device sizes. --- ## For developers: the block & field APIs Register a **block** from any extension: ```// extend.php (new Ernestdefoe\PageBuilder\Extend\PageBuilderBlock(MyBlock::class)),``` ```// forum JS app.pageBuilder.registerBlock('my-block', MyBlockComponent);``` `MyBlock` extends `Ernestdefoe\PageBuilder\Block\AbstractBlock`: declare `type()/name()/icon()/category()`, a `settingsSchema()` (the same schema language the editor renders), and a `resolve($settings, $actor)` returning data **scoped to the actor's visibility**. The matching JS component receives `{ settings, data }`. Register a custom **field type** for content types via `app.pageBuilderFields.register(type, InputComponent, DisplayComponent)`. --- ## License **Proprietary © Ernest Defoe.** A premium paid extension — see [LICENSE](https://github.com/ernestdefoe/page-builder/blob/main/LICENSE) for terms. For licensing inquiries: ernestdefoe@gmail.com

page-builder 2.0.0

Initial release of the premium Page Builder + CMS for Flarum 2 (versioned 2.0.0 to track Flarum 2 compatibility).

Highlights

• Visual page designer — drag-and-drop blocks in the admin, plus a live WYSIWYG editor on the front end.
• 15 blocks — hero, heading, text, HTML, image, button, divider, recent & featured discussions, online users, newest members, forum stats, content list, tag grid, and media embeds.
• Customizable hero banners — full-width or split layouts; gradient, solid, or image backgrounds; custom text color; dual call-to-action buttons.
• Content types (CMS) — define your own content (articles, downloads, a knowledge base) with custom fields, categories, per-group permissions, listing pages, and comments.
• Promote a discussion to an article — first post becomes the body, the first image becomes the cover; the discussion becomes the article's comment thread and redirects to it.
• Built-in SEO — server-rendered title, description, and Open Graph / Twitter tags for pages and records.
• Fully translatable — every UI string is localized.

Requirements: Flarum ^2.0, PHP ^8.3.

View Page Builder on ernestdefoe.online

page-builder 2.0.1

Added

• Demote to discussion — reverse a promotion from the discussion controls dropdown (it now toggles Promote/Demote). Deletes the article and restores the discussion; its replies are kept.

Changed

• Promoted discussions now stay in the forum listing and redirect to their article on click (admins aren't redirected, so they can still open the discussion to manage or demote it). Auto-created comment threads remain hidden.

Fixed

• Forum listing 500 (SQLSTATE[HY093]) caused by a bound parameter in the discussion-search union filter — the listing filter is now binding-free.

View Page Builder on ernestdefoe.online

page-builder 2.0.2

Fixed

• Admin "Add field" crash -- opening the field editor threw TypeError: e is not a function. The field-type dropdown's map callback shadowed Mithril's global m, so the <option> JSX tried to call a plain object. Renamed the variable.
• Homepage hero buttons now render at identical size. The outline (secondary) button's 1.5px border made it slightly taller/wider than the filled primary button; the base button now reserves the same border box.
• Article comments now show every reply instead of just the first batch. The view relied on the discussion endpoint's ~20-post window; it now pages through all of a record's posts.

Added

• The latest-articles / content-list widget now shows a record's category badge when one is assigned, matching the content listing page.

View Page Builder on ernestdefoe.online

page-builder 2.0.3

Fixed

• Homepage hero buttons now render at identical size on every install. The outline (secondary) button drew its border with a real CSS border, which enlarges an auto-sized box; on forums where another extension's sitewide .Button rule won the cascade and reset the filled button's border, the outline button ("Browse forum") rendered larger than the filled one ("Browse articles"). The outline is now drawn with an inset box-shadow (zero layout impact) and the size rules are scoped under .PB-Hero, so the pair stays identical regardless of other extensions' CSS.

After updating, run php flarum cache:clear and php flarum assets:publish so the recompiled stylesheet is served.

View Page Builder on ernestdefoe.online

page-builder 2.0.4

Fixed

• PostgreSQL: discussion listings and search no longer 500. The record-hiding query used pagebuilder_promoted = 1, which Postgres rejects (operator does not exist: boolean = integer). Now uses the SQL-standard IS TRUE, valid on MySQL 8+, MariaDB 10.3+, SQLite 3.23+, and PostgreSQL.
• Record view counts no longer lose increments under concurrent views — switched to an atomic DB-level increment('view_count').
• Failed layout saves in the live editor now show an error instead of silently dropping the spinner (which made a failed save look successful).
• Image upload shows a clear notice when fof/upload isn't installed instead of failing with a generic error.

Changed

• The promoted-discussion URL attribute resolves the record and its type in a single eager-loaded query instead of two per discussion in listing responses.
• Admin detection on the page-builder page reads the serialized isAdmin attribute rather than walking the groups relation.

Docs

• Added a Pricing section and Floxum purchase link ($10/year) to the README, plus a note that demo content is seeded on install.

fof/upload is now listed under suggest in composer.json (optional, for image uploads).

View Page Builder on ernestdefoe.online

page-builder 2.1.0

Changed

• Fresh installs no longer create demo content. The sample home page and Articles content type were previously seeded by migrations on every install, including production. They are now opt-in.

Added

• php flarum pagebuilder:seed-demo — an idempotent console command that creates the sample home page and Articles content type (with one example record) on demand. Run it whenever you want example content to explore.

Performance

• The pagebuilderRecordUrl discussion attribute now resolves with zero per-discussion queries: the promoted record and its content type are eager-loaded for the whole result set at the DiscussionResource level (with a safe single-lookup fallback).

Upgrade notes: existing installs keep any demo content they already have — this only changes behavior for new installs. No action required.

View Page Builder on ernestdefoe.online

page-builder 2.1.1

Fixed

• Hero buttons now stay the same size even when the active theme pins a fixed button height. Some themes (e.g. Mosaic) set .Button--primary { height: 36px }. Only the filled hero button carries .Button--primary, so it shrank while the outline button kept its natural height — leaving "Browse articles" and "Browse forum" visibly different sizes. The hero buttons now force height: auto (at a specificity that beats theme .Button rules), so both size from padding and match.

Upgrade: composer update ernestdefoe/page-builder && php flarum cache:clear && php flarum assets:publish, then hard-refresh (the compiled forum.css is cached).

View Page Builder on ernestdefoe.online

page-builder 2.1.2

Security

• HTML block sanitizer no longer allows the style attribute. Even with javascript:/expression() stripped, a stored style="background:url(https://tracker/p.png)" fired a request from every visitor's browser, leaking their IP and visit time to a third party. Inline styles are now removed wholesale.

Performance

• Forum Stats block caches its counts (members/discussions/posts/online) for 60s instead of running four COUNT queries on every page render — meaningful on large forums where those scans are slow and contend with writes.

Internal

• Extracted the duplicated slug-uniqueness loop (5 controllers) into a single SlugGenerator service with a max-attempts guard.
• Demo seeder now uses Eloquent models instead of a raw DB connection.
• Hardened the record-thread listing filter against future Eloquent internals changes.
• Removed an unused model/table (pagebuilder_areas) that was installed but never referenced.

No user-facing behaviour changes besides the sanitizer tightening.

View Page Builder on ernestdefoe.online

page-builder 2.2.0

Added

• Records are now a first-class JSON:API resource at /api/pagebuilder-content-records. They can be loaded via Flarum's app.store and extended by other extensions with the standard Extend\ApiResource(...)->fields(...) extender. Read-only (index + show); the existing gated CMS controllers still handle writes and the type-scoped frontend reads, so nothing about the current UI changes. Visibility is enforced server-side (content-type view permission, published-only for non-admins plus your own drafts) — drafts and restricted-type records are never exposed.

Fixed

• php flarum CLI commands no longer fatal. Since 2.1.0, the pagebuilder:seed-demo command declared an incompatible return type (fire(): void vs Flarum's fire(): int), which crashed every php flarum … console command (cache:clear, migrate, assets:publish, …) when the extension was enabled. Fixed. (Web requests were unaffected.)

Verified live against Flarum 2.0-rc.1: the new endpoints, relationship includes, 404s, visibility scoping, and the markdown-render pipeline all serialize correctly, and existing endpoints/forum/admin are unchanged.

View Page Builder on ernestdefoe.online

page-builder 2.2.1

Fixed

• Comment threads are now created atomically. When a published, comment-enabled record is first viewed, its backing discussion + first post are created inside a DB transaction. A failure between the two writes previously could leave an orphaned discussion with no first post, which breaks core discussion listings and serializers.

Performance

• The forum payload no longer scans the content-types table on every page load. pagebuilderContentTypes now reads a 60-second cache of the (actor-independent) content-types list and applies per-actor visibility in PHP; the cache is invalidated immediately when a content type is created, updated, or deleted.

Verified live on Flarum 2.0-rc.1. No user-facing behaviour changes.

View Page Builder on ernestdefoe.online

page-builder 2.2.2

Internal

• Self-audit pass against the full Flarum 2 security/structure checklist found no new security, performance, mass-assignment, injection, or dead-code issues on top of the 2.1.0–2.2.1 fixes. The only change here is a corrected RelationshipFieldType docblock: it now accurately states that present() returns raw ids and that resolution + visibility gating happen on the frontend via Flarum's own gated API (no server-side resolution). No behaviour change.

Known/accepted: pagebuilder_record_id and pagebuilder_promoted live as columns on the core discussions table (rather than a companion table). This is a deliberate design read on hot discussion-listing paths; both are nullable and guarded. A companion-table refactor is deferred to a future major version.

View Page Builder on ernestdefoe.online

page-builder 3.0.0

Page Builder 3.0.0

Changed (breaking — schema)

• Discussion record-link data moved off the core discussions table into a new pagebuilder_discussion_data companion table. The pagebuilder_record_id and pagebuilder_promoted columns are removed from discussions. This resolves the §45 finding (extensions shouldn't add columns to core tables) and avoids the install-time ADD COLUMN lock on large discussions tables.

The migration is automatic and one-way: on update it creates the companion table, copies existing linked/promoted discussions into it, and drops the old columns. No data is lost (comment threads and promoted-article links are preserved). There's nothing to do beyond the normal update steps.

php flarum migrate
php flarum cache:clear```

If any of your own code or another extension reads `discussions.pagebuilder_record_id` / `pagebuilder_promoted` directly, switch it to the `pagebuilderData` relation (`$discussion->pagebuilderData?->record_id` / `->promoted`). The built-in promote/demote, comment threads, and listing-hide behaviour are unchanged.

### Verified
Migration (create + backfill + drop), the binding-free listing-hide mutator (comment threads stay hidden, promoted discussions stay listed), promote/demote, and article-URL resolution were all verified end-to-end on Flarum 2.0-rc.1.

[View release on GitHub](https://github.com/ernestdefoe/page-builder/releases/tag/3.0.0)

page-builder 3.0.1

What changed

Audit fixes — performance, robustness, and type-safety:

• Performance: ContentRecordResource::scope() and the record-list block's settings schema now reuse the shared content-types cache (ForumAttributes::cachedTypes()) instead of scanning pagebuilder_content_types on every request.
• Robustness: comment-provisioning (ShowRecordController) and SEO head-population (PopulateHead) failures are now logged via PSR-3 instead of being silently swallowed; removed a redundant try/catch around the stable core User display_name/avatar_url accessors in ContentSerializer.
• Type-safety: the record editor page (RecordEditorPage) is fully typed — any replaced with ContentType/Record/Field/Category interfaces and a typed API response shape.
• Fixed an implicit-nullable parameter deprecation (PHP 8.4+).

Install / update:

php flarum cache:clear
php flarum assets:publish```

[View release on GitHub](https://github.com/ernestdefoe/page-builder/releases/tag/3.0.1)

page-builder 3.0.2

What's Changed

• ci: add canonical draft-release workflow
• Add hero button-style + button-position options

View Page Builder on ernestdefoe.online

page-builder 3.1.0

The Section Builder

Building a page used to mean starting from a blank canvas and doing the design work yourself. This release flips that around: pick from ready-made sections that already match your forum's theme, and the design decisions are already made for you.

New page → full-screen editor: your sections on the left, a live preview in the middle, settings on the right. The public page is rendered by the exact same code as the preview, so what you design is what visitors get.

Twelve sections

Hero · Feature grid · Articles · Image + text · Stats band · Latest discussions · Newest members · Testimonial · Pricing · Call to action · Logo strip · FAQ

Every section drops in already wearing your forum's colours, fonts and corner rounding. There's no separate theme to configure.

Four sections keep themselves current

Latest discussions, Newest members, Articles and the Stats band read straight from your forum — real threads, real members, real counts. Place them once and never edit them again.

Edit by clicking

Click any text on the page and type: headlines, buttons, feature cards, pricing plans, FAQ rows, stat numbers. Items can be added and removed from the panel on the right.

Guardrails you can loosen

Each section exposes a small, safe set of controls — background, accent colour, alignment, spacing, plus per-section extras like the image side of a split or the layout of the Articles grid. Enough to make a page feel like yours, not enough to break the design.

Articles, written or promoted

Write an article from scratch, or promote any forum discussion into one, without leaving the editor. Both kinds show up in the Articles section, which can render as a grid or an auto-scrolling carousel.

It follows your theme

Sections and the editor read Flarum's own colour variables, so everything tracks light, light high-contrast, dark and dark high-contrast along with your forum, and picks up your forum's primary colour.

Fully translatable

Every string in the new builder — section names, labels, hints, seeded content — goes through the translator, with English shipped in locale/en.yml.

---

Fixes and improvements

• A default Articles content type (with body, summary and cover fields) is created on install, so writing and promoting articles works out of the box.
• Article excerpts no longer leak upload markers or markdown into card summaries.
• The record editor's body field fills the form and keeps its padding, whether you use flarum/markdown or fof/rich-text; short fields stay short.
• An attach-image button in the body editor when fof/upload is installed.
• Real member avatars in the discussion feed and on article cards.
• Reply counts pluralise correctly.

Notes

The classic block designer, the freeform builder and content types are all unchanged and still available — the section builder sits alongside them as a faster way to build a page.

Upgrading: run your usual composer update and php flarum migrate. Two migrations run: they create an Articles content type and its fields only if you don't already have them, so existing setups are left alone.

View Page Builder on ernestdefoe.online

Page Builder

Page Builder for Flarum 2

A premium page builder + CMS for Flarum 2. Assemble beautiful pages from ready‑made sections that already match your forum's theme, run structured content types ("databases") like an articles section or knowledge base, and edit it all visually — live on the front end. No code, and no design skill required.

---

Table of contents

• Features

• The section builder

• Section reference

• Pricing

• Requirements

• Installation

• Quick start

• Pages & the block designer

• The live front‑end editor

• Block reference

• Hero banners

• Content types (the CMS)

• Comments on records

• Promote a discussion to an article

• SEO

• Setting a custom homepage

• Permissions

• For developers: the block & field APIs

• License

---

Features

• Section builder — assemble a page from 12 pre‑designed sections that drop in already styled to your forum. Pick, reorder, click any text to edit it in place, and nudge a few friendly knobs (background, accent colour, alignment, spacing). You can't make it ugly, and you don't need to know how the look is achieved.

• Live forum sections — Latest discussions, Newest members, and Articles pull real data straight from your forum and keep themselves current. Nothing to maintain.

• Follows your theme automatically — sections and the editor read Flarum's own colour variables, so everything tracks light / light‑hc / dark / dark‑hc and uses your forum's primary colour. Zero styling work.

• Articles, written or promoted — write an article from scratch, or promote any forum discussion into one, and list them anywhere with the Articles section.

• Visual page designer — build pages from a responsive 12‑column grid of rows → columns → blocks, with drag‑and‑drop reordering, in the admin.

• Live WYSIWYG editor on the front end — admins get an Edit layout button on any Page Builder page; drag blocks around and edit their settings while seeing the real, rendered result.

• 15 built‑in blocks — heroes, text/HTML/images/buttons, forum widgets (recent & featured discussions, online users, newest members, stats, tag grid), content lists, and media embeds.

• Customizable hero banners — full‑width or split layouts; gradient, solid, or uploaded/linked image backgrounds; custom text color; one or two buttons.

• Content types (CMS) — define your own kinds of content (articles, downloads, a directory, a knowledge base) with custom fields, categories, and per‑group permissions. Records get listing pages, detail pages, and comments.

• Promote a discussion to an article in one click.

• Built‑in SEO — server‑rendered titles, meta descriptions, and Open Graph / Twitter cards for every page and record.

• Open block & field APIs — other extensions can register their own blocks and field types.

---

The section builder

The fastest way to build a page. Go to Pages → New page and you land in a full‑screen editor: your sections on the left, a live preview in the middle, and the settings for whatever you've selected on the right.

Add a section and pick from the gallery. Every section arrives already wearing your forum's colours, fonts and corner rounding — there is no separate theme to configure.

Edit by clicking. Headlines, body copy, buttons, feature cards, pricing plans, FAQ rows — click the text on the page itself and type. Items can be added and removed from the right‑hand panel.

Tweak with guardrails. Each section exposes a small, safe set of controls: background (Surface, Subtle, Brand tint, Dark, Image), accent colour, alignment, and spacing. Deselect everything and the panel becomes the page's theme.

Publish when you're ready with the Draft / Published switch, then hit View page to see it live at /p/your-slug. The public page is rendered by the exact same code as the preview, so what you design is what visitors get.

---

Section reference

Section	What it does
Hero	Headline, sub‑copy and up to two buttons. Optional full‑bleed background photo with an automatic scrim so text stays readable.
Feature grid	Three cards with an icon, title and description. Icons are any Font Awesome class.
Articles	Live. Lists your latest articles — both ones you wrote and discussions you promoted — with cover image, excerpt, author and date.
Image + text	A split section with an uploaded image on either side.
Stats band	Big numbers with labels.
Latest discussions	Live. Recent threads from your forum with reply counts, updating on their own.
Newest members	Live. Recent sign‑ups with avatars.
Testimonial	A pull quote with an attributed author.
Pricing	Three plan cards; mark one as the popular plan.
Call to action	A closing banner with a button.
Logo strip	A muted "trusted by" row.
FAQ	A list of questions and answers.

Sections marked Live read from your forum and refresh themselves — you place them once and never edit them again.

Writing articles

Articles are content‑type records, so they get their own page, comments and SEO. There are two ways to create one, and both end up in the Articles section:

• Write one — the ✦ Articles button in the editor (or the Write an article button on the Articles section itself) opens a blank article.

• Promote a discussion — pick any thread from the same dialog and it becomes an article that links back to the original discussion.

---

Pricing

Page Builder is a premium extension, distributed through Floxum. Access requires an active subscription.

Plan	Price	Covers
For all use	$10.00 / year	Not‑for‑profit and for‑profit sites

👉 Purchase / subscribe: https://floxum.com/extension/ernestdefoe/page-builder

A free Floxum account is required to subscribe; manage your license, downloads, and renewals from your Floxum dashboard.

---

Requirements

• Flarum ^2.0

• PHP 8.3+ (matches Flarum 2's minimum)

• Optional: flarum/tags — required only for the Tag Grid block.

• Optional: fof/upload — required for image uploads in the page builder and content editors. Without it you can still paste image URLs; the upload button shows a notice telling you to install it.

---

Installation

composer require ernestdefoe/page-builder
php flarum migrate
php flarum cache:clear

Then enable Page Builder under Admin → Extensions.

Demo content (optional): fresh installs start clean — no demo content is created. To populate a sample home page and an Articles content type to explore, run the idempotent command:

php flarum pagebuilder:seed-demo

Remove the demo page and Articles type from Admin → Page Builder any time; it doesn't affect the extension.

This is a proprietary, paid extension — purchase a subscription on Floxum ($10/year). See Pricing and License.

---

Quick start

1. Open Admin → Extensions → Page Builder.

2. Click New page, give it a title, and you're dropped into the designer.

3. Add row → Add block, pick a Hero banner, and edit its heading, background, and buttons.

4. Click Save changes, then Preview.

5. (Optional) Use the Forum homepage card to make your page the site's front page — see Setting a custom homepage.

---

Pages & the block designer

A page lives at /p/{slug} (or / when set as the homepage) and is built from a layout tree:

Page
└── Row            (full‑width / wide / narrow, padding, background)
    └── Column     (1–12 of a 12‑column grid)
        └── Block  (hero, text, widget, …)

In the designer you can:

• Add / delete / reorder rows, set each row's width and padding, and give it a background color.

• Add / delete / reorder columns within a row and set each column's width (out of 12).

• Add / delete / reorder blocks within and across columns.

• Edit every block's settings inline (the form is generated from the block's schema).

• Set per‑block visibility — which device sizes (desktop / mobile) and which user groups can see it.

Everything reorders by dragging the grip handle (☰); drop zones appear between items as you drag.

---

The live front‑end editor

Open any Page Builder page as an admin and click Edit layout (bottom‑right). The page turns into a live editor where the real blocks render as you work:

• Drag rows, columns, and blocks to rearrange them.

• Click the ⚙ settings icon on a block to edit it — changes update the live preview instantly (true WYSIWYG).

• Add block / delete blocks per column.

• Click Save layout to publish, or Cancel to discard.

---

Block reference

Block	Category	What it does
Hero banner	content	Full‑width or split banner; gradient/solid/image background, heading, subheading, up to two buttons. See Hero banners.
Heading	content	A styled heading (h1–h4), alignment.
Text	content	A rich text paragraph block, alignment.
HTML	content	Raw HTML, sanitized on save (scripts & event handlers stripped). Authoring is admin‑only. Great for embeds and custom markup.
Image	media	A single image (uploaded or by URL), optional rounded corners, alignment.
Button	content	A call‑to‑action button (primary/secondary), link, alignment.
Divider	layout	A horizontal rule with adjustable spacing.
Recent Discussions	forum	The latest discussions, visibility‑filtered.
Featured Discussions	forum	Hand‑picked discussions by ID, in your chosen order, with optional excerpts.
Online Users	forum	Avatars of who's online now.
Newest Members	forum	The most recently joined members, with join dates.
Forum Stats	forum	Member / discussion / post / online counts.
Content list	content	Embeds records from a content type (e.g. latest articles) as cards.
Tag Grid	forum	Forum tags as clickable cards (requires flarum/tags).
Embed	media	A responsive YouTube/Vimeo embed from a URL, with caption.

---

Hero banners

The Hero banner block (and each content type's optional listing hero) is fully customizable:

• Layout — Full‑width background (centered or left text) or Split (text panel beside an image panel).

• Background — Gradient (start/end colors + angle), Solid color, or Image (upload or paste a URL, with an adjustable dark overlay).

• Text — heading, subheading, and text color: light, dark, or a custom color to match your theme.

• Buttons — a primary and an optional secondary button (e.g. "Browse articles" + "Browse forum").

• Height & alignment.

---

Content types (the CMS)

Page Builder includes a full content‑management layer. A content type is your own kind of content — Articles, Downloads, a Knowledge base, a Directory — each with its own fields, categories, permissions, and URLs.

Create one under Page Builder → Content types → New content type, then configure:

• Fields — text, textarea, rich text, markdown (the full Flarum composer with uploads/mentions/emoji), image (upload or URL), number, date, boolean, select, multiselect, URL, email, color, rating, and relationship. Mark one as the title, and choose which appear in the list view.

• Categories — optional taxonomy with a filter bar and badges on the listing.

• Permissions — which groups can view, submit, and manage records.

• Listing hero — an optional hero banner on the type's /c/{type} page.

Each type gives you:

• A listing at /c/{type} (cards, category filter, pagination).

• A record page at /c/{type}/{slug}.

• A composer at /c/{type}/new and /c/{type}/{slug}/edit.

---

Comments on records

When enabled for a type, each published record gets a comment thread backed by a real Flarum discussion — so comments get mentions, reactions, notifications, and moderation for free. The thread is created lazily on first view and hidden from the normal discussion list.

---

Promote a discussion to an article

Turn any forum discussion into an article from its controls dropdown → Promote to article (admin only). The discussion's title becomes the article title, its first post becomes the body, and the first image in the post becomes the cover. The original discussion is then attached to the new article as its comment thread (and drops out of the forum listing) — and anyone who opens the old discussion is redirected to the article (admins aren't, so they can still manage it).

To reverse it, use Demote to discussion on the same dropdown: the article is deleted and the discussion returns to a normal forum discussion (its replies are kept).

---

SEO

Page Builder renders SEO tags server‑side (so crawlers and social cards see them without running JavaScript) for /home, /p/{slug}, /c/{type}, and /c/{type}/{slug}:

• <title> and <meta name="description">

• Open Graph (og:type, og:title, og:url, og:description, og:image)

• Twitter card tags

• article:published_time for records, plus a canonical URL

Record descriptions come from a summary/excerpt and og:image from the record's cover image. Pages use the Meta description field you set in the designer. The tags are authoritative and de‑duplicated, so they coexist cleanly with a dedicated SEO extension.

---

Setting a custom homepage

1. In Page Builder → Forum homepage, choose the page to use as your front page.

2. Go to Admin → Basics → Home Page and select “Home (Page Builder)”.

Your custom page now serves as the forum's landing route (/), Invision‑style.

---

Permissions

• Pages & the designer (admin) — building pages and editing HTML blocks is admin‑only.

• Content types — set per‑type view / submit / manage group permissions in the content‑type editor.

• Block visibility — limit individual blocks to specific groups (enforced server‑side) and device sizes.

---

For developers: the block & field APIs

Register a block from any extension:

// extend.php
(new Ernestdefoe\PageBuilder\Extend\PageBuilderBlock(MyBlock::class)),

// forum JSapp.pageBuilder.registerBlock('my-block', MyBlockComponent);

MyBlock extends Ernestdefoe\PageBuilder\Block\AbstractBlock: declare type()/name()/icon()/category(), a settingsSchema() (the same schema language the editor renders), and a resolve($settings, $actor) returning data scoped to the actor's visibility. The matching JS component receives { settings, data }.

Register a custom field type for content types via app.pageBuilderFields.register(type, InputComponent, DisplayComponent).

---

License

Proprietary © Ernest Defoe. A premium paid extension — subscribe on Floxum ($10/year). See LICENSE for terms. For licensing inquiries: ernestdefoe@gmail.com

File Information

Submitter Ernest Defoe

Submitted 07/25/26

Category Flarum

View File