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

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.

👉 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

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