Documentation / Page Manager

Page Manager

The Page Manager is your primary tool for creating and editing content in Luminal CMS. This guide covers every aspect of the page creation workflow.

Overview

Page Manager displays all your site pages as cards in a grid layout. Each card shows the page title, slug, and action buttons for editing, previewing, and deleting. Click the + New Page button to create a new page.

Creating a New Page

  1. Click + New Page in the top toolbar.
  2. Enter a Page Title — this is what appears in browser tabs and search results.
  3. The slug is auto-generated from the title (lowercase, hyphens). You can edit it manually.
  4. Click Create to create the page and open the editor.

The page is saved as a JSON file at admin/data/pages/{slug}/{slug}.json.

The Editor Modal

The editor is a full-screen modal with three main areas:

Toolbar

The top toolbar contains action buttons:

  • Save — Save the current page content
  • Preview (eye icon) — Open a live preview in a new tab
  • Page CSS (purple button) — Open the per-page CSS editor
  • AI Assist (purple button) — Open the AI content generation panel
  • Settings — Configure layout options (column widths, wrapper, background)

Content Areas

The main editor area contains one or two content columns:

  • Main Content (Left) — The primary content area. Always visible.
  • Right Column — An optional secondary column. Enable it in Settings.

Content is written as HTML. You can also insert shortcodes using the double-bracket syntax: [[type:slug]].

CPM Blocks Sidebar

The right sidebar contains clickable shortcode pills organized by category. Click a pill to insert the shortcode at the cursor position. Categories include:

  • Vstats — Three style variants (default, dark, minimal)
  • YouTube Playlists — Dynamically populated from YT Playlist Studio
  • Podcast Feed — Podcast episode listing shortcode
  • Affiliate Categories — Dynamically populated from Affiliate Products

Two-Column Layouts

To enable a two-column layout:

  1. Open the Settings panel in the editor toolbar.
  2. Toggle Right Column Enabled to on.
  3. Set the column widths using the sliders (e.g., 65% left / 35% right).
  4. Content entered in each column will render side by side on desktop.

The layout is responsive — columns stack vertically on mobile (controlled by mobile-master.css).

Layout Options

  • Use Wrapper — Wraps content in the standard page container with max-width and padding.
  • Include Background — Shows the site background behind the page content.
  • Left Width / Right Width — Percentage-based column widths. Must total 100.

Per-Page CSS Editor

Click the purple Page CSS button to open a CSS editor specific to this page. CSS entered here is:

  • Saved as admin/data/pages/{slug}/{slug}.css
  • Injected into the page <head> as <style id="page-css">
  • Applied with the highest cascade priority (after all stylesheet links)
  • Auto-deleted when content is cleared

Tip: Use per-page CSS for page-specific layouts, custom component styling, or overriding global styles without affecting other pages.

AI Assist

The AI Assist panel lets you generate content directly in the editor:

  1. Click the purple AI Assist button in the toolbar.
  2. Enter a prompt describing what you want to generate.
  3. Select a tone (professional, casual, technical, creative, etc.).
  4. Choose a content type (paragraph, article section, full page, list, etc.).
  5. Select your AI provider from the dropdown (Claude, GPT, Gemini, or Custom).
  6. Optionally set a word count target.
  7. Click Generate.

After generation completes, you can:

  • Insert into Left Column — Appends to the main content area
  • Insert into Right Column — Appends to the right column
  • Replace Left Column — Replaces the entire main content
  • Preview — View the generated content before inserting

AI Assist uses the generate_fragment API from the AIResources module. The generation is stateless — it does not save the page. You insert the content and then save manually.

Token Stats and Cost

After each generation, the panel shows input/output token counts and an estimated cost in USD. This helps you monitor AI usage across providers.

Prompt Commons

Save frequently used prompts for reuse:

  • Click the Prompts dropdown in the AI Assist panel.
  • Save Current stores the current prompt with a name.
  • Select a saved prompt to load it into the prompt field.
  • Delete removes a saved prompt.

Shortcode Insertion

Shortcodes are the primary way to embed dynamic content. Type them directly or use CPM Blocks:

[[image-gallery:my-photos]]
[[video-gallery:demo-reel]]
[[youtube-playlist:live-sessions]]
[[podcast-feed limit="5"]]
[[vstats style="dark"]]
[[store]]
[[affiliate-products category="gear" columns="3"]]

Page Preview

The preview button opens your page in a new browser tab exactly as visitors will see it. The URL format is /page.php?p={slug}. Preview reflects the last saved content — unsaved changes will not appear.

Deleting Pages

To delete a page:

  1. Click the trash icon on the page card in the Page Manager grid.
  2. Confirm the deletion.
  3. The page directory is moved to admin/data/pages_trash/{slug}/.

Deleted pages can be recovered by moving the directory back from pages_trash to pages.

Best Practices

  • Use semantic HTML in your content — headings, paragraphs, lists, and sections.
  • Leverage per-page CSS instead of inline styles for maintainability.
  • Use shortcodes for dynamic content rather than hardcoding HTML.
  • Preview your page on both desktop and mobile before publishing.
  • Give pages descriptive slugs — they become the URL path.
Gallery Manager Content Stacks All Documentation