Page Template System

Complete guide to managing page templates, sections, banners, styling, and site navigation

1. What This System Does

The Page Template System controls how every page on the Reader Portal looks. You choose a template for each page type, and the template determines which content sections appear and in what order.

Key Concepts

Concept	What It Means
Page Category	A group of related page types (e.g., "Section" groups Fiction, Poetry, Essays)
Page Type	A specific page on the Reader Portal (e.g., Homepage, Fiction, Article)
Template	A reusable layout — defines which components appear on a page
Component	A content block inside a template — a hero banner, an article grid, a newsletter form

How It Connects

Page Category (e.g., "Section")
  └── Page Type (e.g., "Fiction")
        └── Template (e.g., "Fiction List View")
              ├── Component: Hero section
              ├── Component: Article grid
              └── Component: Newsletter sign-up

After you select a template and click Publish Page, the Reader Portal updates within 60 seconds.

2. Who Should Use This

Role	What You'll Do
Content Editors	Select templates for pages and publish them
Operations / Publishing Staff	Create landing pages, manage navigation, configure static pages
Marketing Team	Set up campaign landing pages and promotional banners
Admin / Super Admin	Create custom templates, manage categories, configure appearance

3. Before You Begin

You have Admin Console access with Layout & Design permissions
Content has been published (articles, authors, etc.) — pages with no content appear empty

Where to find things in the sidebar:

Sidebar Item	What It Does
Layout & Design → Page Configuration	Select templates for each page type
Layout & Design → Page Categories	Manage page type groupings
Layout & Design → Static Pages	Create About, Terms, Contact, and other static pages
Navigation	Configure header menu, footer links, and mobile menu
Settings → Appearance	Customize colors, fonts, and theme

4. Page Configuration — Selecting Templates

This is the main screen for controlling page layouts.

Viewing All Page Types

Go to Layout & Design → Page Configuration in the sidebar.

Page Configuration — All Pages — All page types organized by category. Click any page to select its template.

You'll see all page types grouped by category: Homepage, Article, Section (Fiction, Poetry, Essays, Interviews, News, etc.), Tag, and more.

Configuring a Page

Click any page type to open its configuration screen.

Configure: Fiction — The Configure page for Fiction. Choose a template from the available options, then click Publish Page.

Each page configuration screen shows:

Page Status — Published or Draft, with version number and last updated date
Select Template — available templates for this page type, each with a name and description
View in Portal — link to see the live page on the Reader Portal
Publish Page — button to make the selected template live

To change a page's layout:

Click the page type from the All Pages list
Browse the available templates
Click a template card to select it
Click Publish Page (top right) to make it live

To create a custom template: Click Create Template to open the Template Canvas Editor (see Section 5).

5. Template Canvas Editor

The Canvas Editor is where you build custom templates by dragging components onto a page layout.

To open it: From any page configuration, click Create Template.

Template Canvas Editor — The Canvas Editor — drag components from the left panel onto the canvas to build a page layout

Editor Layout

Panel	Position	What It Does
Components	Left	Lists all available components: Banner, Hero sections, Article grids, Lists, Utilities, and more. Drag components from here onto the Canvas.
Canvas	Center	Your working area. Components appear in order from top to bottom. Drag to reorder.
Live Preview	Right	Shows a real-time preview of how the page will look.

The toolbar at the top shows the template name (editable), plus tabs for Template Settings and Components.

How to Build a Template

Browse the Components list on the left — components are grouped by type
Drag a component from the list onto the Canvas in the center
Components stack top-to-bottom in the order they'll appear on the page
Drag components on the Canvas to reorder them
Click any component to configure its properties
Check the Live Preview on the right to see how it looks
Click Save when done
Go back to the page configuration and select your new template
Click Publish Page to make it live

Available Component Types

Type	What It Does
Banner	Promotional strip with image, title, and call-to-action button
Hero	Large featured content area — full-width, image left/right, minimal, or carousel
Article Grid	Grid of article cards — 2-column, 3-column, with sidebar, or carousel
Featured	Highlighted content — featured article with grid, or mixed layout
Article List	List layout — horizontal cards, vertical cards, or minimal text
Author	Author profile sections — hero, articles grid, bibliography
Newsletter	Newsletter sign-up forms and archive listings
Subscription	Pricing tables, comparison charts, testimonials
Static	Rich text content, team grids, contact forms, timelines
Event	Event calendars, listing cards, speaker grids
Podcast	Show headers, episode lists, mini players
Archive	Magazine issue grids, timeline views

6. Page Categories

Page categories group related page types together. The platform includes built-in categories:

Category	What It Contains
Homepage	Main site homepage
Article	Article detail page
Section	Fiction, Poetry, Essays, Interviews, News landing pages
Author	Author profile pages
Index	Authors index, Tags index
Search	Search results page
Tag	Tag listing pages
Subscription	Subscribe, checkout, success pages
Campaign	Campaign landing pages
Podcast	Podcast show and episode pages
Archive / Issues	Magazine archive and issue pages

To create a custom category:

Go to Layout & Design → Page Categories
Click New Category (top right)
Enter a name, slug, description, and choose an icon
Click Save

Built-in categories cannot be deleted — you can only deactivate them.

7. Static Pages

Static pages are standalone content pages like About, Privacy Policy, Terms, Contact, and FAQ.

What the list shows:

Page name and slug (the URL path, e.g., /privacy-policy)
Template assigned to the page
Last updated date
Actions — edit or delete

To create a new static page:

Go to Layout & Design → Static Pages
Click New Page (top right)
Enter a Title and URL Slug
Select a template or write content directly
Click Publish

The page will be live at yoursite.com/{slug}.

Go to Navigation in the sidebar. The Header Menu tab is shown by default.

Navigation — Header Menu — Configure the header navigation links that appear at the top of every page on the Reader Portal.

The header navigation shows your current menu items with their labels, URLs, and types (link or dropdown).

To manage navigation items:

Click Add Item to add a new link
Enter a Label (text readers see) and URL (where it goes)
Choose a type: Link, Dropdown (with child items), or Megamenu
Drag items using the grip handles to reorder
Click Edit or Delete on any existing item
Click Save when done

Switch to the Footer tab.

Navigation — Footer — Configure footer columns with grouped links, plus the About text that appears above the footer.

The footer editor shows:

About Text — a description that appears in the footer area
Footer Columns — grouped link columns (e.g., Genres, Magazine, Legal)
Each column has a title and a list of links
Click Add Link to add links within a column
Click Save when done

Switch to the Mobile Menu tab to configure navigation for phone and tablet screens. It works the same as the Header Menu editor.

9. Appearance & Theme

Go to Settings → Appearance in the sidebar.

Appearance & Theme settings — Customize your site's visual identity with colors, fonts, and theme options

Settings available:

Setting	What It Controls
Color Palette	Primary, secondary, and accent colors
Color Theme	Preset visual themes — Default, Muted, Warm, Cool, Dark, Vibrant
Typography / Font Theme	Font combinations for headings and body text
Spacing	Compact, Normal, or Spacious layout density
Container Width	Standard, Wide, or Full page width
Header & Footer Style	Visual style for the site header and footer
Favicon	Browser tab icon
Custom CSS	Advanced custom styling rules

The Live Preview panel on the right shows changes in real time as you adjust settings. Click Save to apply — changes appear on the Reader Portal within 60 seconds.

10. Publishing and Versions

Every page configuration supports versioned publishing:

Select a template for a page type
Click Publish Page to make it live
Each publish creates a version with a timestamp
To revert, use the version history to restore a previous version

What happens when you publish:

The configuration is saved as a new version
The Reader Portal regenerates the page within 60 seconds (via ISR)
Readers see the updated layout on their next visit

11. How Pages Appear on the Reader Portal

Page Type	Reader Portal URL
Homepage	`yoursite.com/`
Fiction	`yoursite.com/fiction`
Poetry	`yoursite.com/poetry`
Article detail	`yoursite.com/article/{slug}`
Author profile	`yoursite.com/author/{slug}`
Tag listing	`yoursite.com/tag/{slug}`
Magazine issue	`yoursite.com/issue/{slug}`
Static page	`yoursite.com/{slug}`
Subscribe	`yoursite.com/subscribe`
Search	`yoursite.com/search`

Pages automatically adapt to different screen sizes — desktop shows multi-column layouts, mobile switches to single-column.

12. Common Mistakes and How to Fix Them

Problem	Fix
Page shows "Not configured"	Go to Page Configuration, select a template, and click Publish Page
Sections appear but have no content	Publish articles in the matching category or tag first
Can't see Layout & Design in sidebar	Ask an Admin to check your role under Settings → Roles & Permissions
New page doesn't appear on Reader Portal	Make sure you clicked Publish Page, then add a link in Navigation
Published wrong template	Go back to the page configuration, select the correct template, and publish again
Can't delete a built-in category	Built-in categories can be deactivated but not deleted
Navigation changes not showing	Click Save on the Navigation page — changes won't apply until saved
Appearance changes not showing	Wait 60 seconds and refresh. Make sure you clicked Save.

Internal — QA / Testing Checklist

9. QA / Testing Checklist

Category Management

Create a new custom category with all fields filled → appears in sidebar with correct icon and count
Edit a category's label, icon, and description → changes reflect immediately
Toggle "Show Banner" ON → Banner card appears in the Section Palette for that category's templates
Toggle "Allowed Variant Categories" → only those section categories appear in the Section Palette
Delete a custom category → removed from sidebar. Confirmation dialog appears first.
Attempt to delete a built-in category → delete button is not shown (shield icon displayed instead)
Built-in category slug field is disabled (grayed out, "Slug cannot be changed for built-in categories" message)

Page Creation & Management

Create a new page → appears as a card in the grid. Toast confirms creation.
Auto-generated slug matches the title (lowercase, hyphenated)
Created page shows "No template" label and no status badge initially
Delete a custom page → confirmation dialog → page removed from grid
Built-in pages do not show the delete button

Template Selection

Click a template card → highlights with colored border, Template Preview updates
Change template → "Save Draft" button enables, "Unsaved changes" text appears
Re-select the same template → "Save Draft" remains disabled (no change detected)
Click "Make it Live" on a template card → auto-saves and publishes. Toast: "[Template]" is now live.

Template Canvas Editor

Banner Configuration

"Show Banner" enabled on category → "Banner" card appears in Section Palette (orange gradient)
Drag Banner to Canvas → appears as a banner block
Click Banner → Banner Properties Panel opens with all fields
Fill in title, subtitle, colors → banner preview updates on Canvas
Delete banner → removed from Canvas

Page Configuration Tabs

Publishing Flow

Save Draft → status shows "Draft — not yet published" (yellow)
Publish → status changes to "Published" (green) with timestamp and version number
Publish with unsaved changes → auto-saves then publishes
Publish empty template (no sections) → error toast: "The selected template has no content."

Reader Portal Verification

Navigation

Add header link → appears on Reader Portal header after refresh
Add footer link → appears in correct footer column
Add social link → appears in Reader Portal footer with correct icon
Remove a link → disappears from Reader Portal after refresh
Save Changes → toast: "Navigation settings saved!"
Max 5 social links enforced (Add Social button disables at 5)

Advisory, Press Releases & Media Coverage

Generic Business Section Rendering

Image + Content section → two-column layout renders, stacks on mobile
Informational Card Grid → card grid renders with correct column count
Support / Donation Block → supporters list and CTA render correctly
Testimonial / Quote Band → testimonials scroll horizontally, author attribution visible
Icon Feature Grid → icons and descriptions render in grid layout
Submission / Tell Us CTA → accent-colored background with CTA button/link

Global Appearance

Change Primary Color → affects links and buttons across Reader Portal
Change Typography → affects fonts across all pages (unless overridden)
Change Header Style to Sticky → header stays visible on scroll
Change Footer Style to Expanded → full footer columns visible
Reset to Defaults → confirmation dialog → settings revert
Save Changes → toast: "Appearance settings saved!"

10. Current Known Limitations

Limitation	Details	Workaround
Custom font upload not yet functional	The "Upload Custom Font" button in the Styles tab is present but not operational.	Use one of the 6 built-in font options (Inter, Playfair Display, Lora, Merriweather, Georgia, System Default).
Page revalidation delay	After publishing, the Reader Portal may take up to 60 seconds to reflect changes due to server-side caching.	Wait 60 seconds and hard-refresh the Reader Portal.
No drag-to-reorder for navigation links	Header and footer links can be added/removed but not reordered via drag-and-drop.	Remove and re-add links in the desired order.
Category reorder uses arrows only	Page categories can only be reordered via up/down arrow buttons, not drag-and-drop.	Use the arrow buttons on the dedicated Page Categories page.
Template sections are shared	Editing a template's sections affects all pages that use that template.	Create a separate template if you need a unique layout for one page.
No real-time collaborative editing	Only one user should edit a template at a time. No live collaboration or conflict detection.	Coordinate with your team to avoid simultaneous edits.
Banner availability depends on category	Banners only appear in the Section Palette if the page category has "Show Banner" enabled.	Edit the category and toggle Show Banner ON if needed.
Hero Exclusive is per-section	You must manually enable Hero Exclusive on each hero section to prevent content duplication. The toggle is in the Properties Panel for all hero variants.	Enable this setting when using a hero section alongside listing sections on the same page.
Max 5 social links	The navigation system enforces a limit of 5 social platform links.	Prioritize your most important social channels.
Advisory member images use URL input	The advisory member form uses a URL text field for images instead of the media library picker.	Upload the image to the media library first, copy the URL, and paste it into the image URL field. Media picker integration is planned.
Press/Coverage edit pages not yet built	Press releases and media coverage entries can be created and listed, but inline editing from the list page is not yet available.	Delete and recreate the entry, or use the API directly for updates. Edit pages are planned.
Static section content via displayOptions	Some static sections (Card Grid, Icon Features, Testimonials) configure their content through `displayOptions` in section properties rather than a dedicated content editor.	Use the Properties Panel in the Canvas Editor to configure display options. A more user-friendly content editor is planned.
Advisory/Press/Media not synced to Strapi	These entities are managed in the admin database, not Strapi CMS. They don't have Strapi editorial workflow (drafts, localization).	Manage directly from the Admin Console. Strapi sync can be added later if needed.
Subscription/Shop sections are preview-only	All subscription and shop page sections (pricing tables, product grids, cart, checkout) display placeholder data. Payment checkout (Stripe/Razorpay) and Shopify product integration are not yet connected.	Use these sections for layout preview only. Actual subscription pages work via the separate `/subscribe` flow.
Event/Podcast sections are preview-only	All event and podcast page sections display demo data. RSVP forms, audio players, and calendar views are visual mockups.	Use the campaign system for real events. Podcast hosting requires separate integration.
Institutional sections are preview-only	Institutional hero, pricing, login, and usage stats sections display placeholder data. IP-based detection and institutional login are not yet functional.	Use the existing institutional inquiry form at `/institutional` for real institutional sales.

11. Section Component Readiness Reference

This table shows which section types are fully functional vs. preview-only (stubs), so you know what to expect when building pages.

Fully Functional Sections (ready for production)

Category	Sections	Notes
Hero	Hero Image Left/Right, Hero Full-Width, Hero Minimal, Hero Carousel	All 5 variants work with real article data, filters, manual selection
Article Grids	Grid 2-Column, Grid 2+Sidebar, Grid 3-Column, Grid 4-Carousel	All configurable with filters, sorting, pagination
Featured	Featured Left+Grid, Featured Above, Featured Mixed	Configurable with subscriber badges
Lists	Horizontal Cards, Vertical Cards, Minimal List	All show real articles with proper metadata
Article Detail	Article Header, Article Content, Author Bio, Related Articles	Read real article data; Author Bio shows social links
Section Page	Section Header, Featured Article, Article Grid, Hero Fullscreen	Read real section data from CMS
Author	Author Hero, Articles Grid, Bibliography	Read real author data; Bibliography groups by year
Static Page	Hero, Rich Content, FAQ, CTA Block, Timeline, Card Grid, Icon Features, Team Grid, Contact Form, Image Content, Support Block, Testimonial Band, People Grid, Person Detail, Press List, Media Coverage, Submission CTA, Sidebar Nav	All configurable from admin Properties Panel; FAQ, Card Grid, Icon Features support configurable columns
Campaign	Hero, Info, Form, CTA, Success, Expired, Upcoming, Paused, Countdown, Speakers, Schedule, Partners, Testimonial, all 11 extended variants	Full campaign state management; ICS calendar download
Newsletter	Archive Header, Edition Grid, Edition Detail, Subscribe Form	Full API integration, GA4 analytics, topic filtering, pagination
Collection	Header, Article List, Curator Note, Reading Progress	Partial — reads real article data for counts and lists

Preview-Only Sections (display placeholder data)

Category	Sections	What's Needed
Article Detail	Table of Contents, Media Embed, Series Nav, Footnotes	Content parsing, audio player, series data model
Section Page	Filter Bar, Cross Links	State connection to article grid, real section data
Author	Related Authors, Social Feed, Audio Readings	Related authors data, podcast data
Subscription	All 7 variants	Payment gateway (Stripe/Razorpay), real plan data
Shop	All 11 variants	Shopify integration, cart state, checkout flow
Institutional	All 6 variants	IP detection, token verification, inquiry API
Event	All 10 variants	Strapi event data, RSVP forms, calendar
Podcast	All 7 variants	Strapi podcast data, audio player