Skip to main content

Admin Panel Tour

A walkthrough of the admin sidebar, dashboard, and the key concepts behind pages, sections, and themes.

The admin sidebar is organized into three groups with drill-down navigation. Clicking an item either opens a content page or drills into a deeper panel with sub-navigation.

Page Builder​

ItemWhat It Does
Theme EditorDrill into theme settings groups (colors, typography, layout). Changes preview live in the right panel.
PagesDrill into the page list, then into a page's sections, then into individual section settings. Drag-and-drop reordering at each level.
AI DesignerOpen an AI chat that can create and modify theme sections through conversation.

Content​

ItemWhat It Does
Asset LibraryUpload and manage images, videos, and files used across the site.
TagsView and manage tags. Posts are auto-tagged by AI on approval -- you rarely need to create tags manually.
CollectionsSmart and manual content groupings (similar to Shopify collections).
BlogsManage blog channels -- each blog has its own post feed and URL.
ReviewsView all post submissions, filter by status (submitted, approved, rejected), and review content.

Administration​

ItemWhat It Does
User ManagementInvite bloggers, assign roles, manage access.
SettingsDrills into a settings panel with sub-groups (see below).

Settings​

The Settings panel drills into three sub-groups:

Site: General (site identity), Domains (custom domains & SSL), Social Accounts, Email (SMTP), OAuth Login (social login providers), Themes (active theme & imports)

Developer: API Keys, Webhooks (outbound event notifications), Integrations (third-party connections)

Account: Billing (subscription & invoices), Security (2FA, sessions), Advanced (developer options & exports)

Dashboard​

The admin dashboard shows KPI cards at a glance:

  • Total Posts -- with monthly growth trend
  • Pending Review -- submissions awaiting review
  • Published This Week -- with monthly total
  • Active Bloggers -- contributors who posted in the last 30 days
  • Avg Review Time -- hours to complete reviews
  • Reviews Today -- with weekly total

Below the KPIs: a Pending Submissions queue (review or quick-approve inline), a Most Active Bloggers leaderboard, and Recent Users.

Pages, Sections & Layouts​

System Pages​

Every OQO site comes with five system pages that are created automatically and cannot be deleted:

PageSlugPurpose
HomehomeThe homepage -- what visitors see at /
PostpostThe default template for individual blog posts
TagtagThe listing page for posts with a specific tag
CollectioncollectionThe listing page for a collection of posts
BlogblogThe template for a blog's post feed

System pages work like any other page -- you add sections, configure settings, and customize the layout. The only difference is they can't be deleted or have their slug renamed.

You can create as many additional pages as you need (About, Contact, FAQ, etc.) alongside these system pages.

Sections​

Sections are the building blocks of every page. Think of them as vertically stacked "lego bricks" -- each one is a configurable component that occupies a horizontal band of the page.

┌──────────────────────────────────────┐
│         Navigation (section)         │  ← global section (shared across pages)
├──────────────────────────────────────┤
│         Hero Banner (section)        │  ← page section (unique to this page)
├──────────────────────────────────────┤
│         Feature Grid (section)       │  ← page section
├──────────────────────────────────────┤
│       Call to Action (section)       │  ← page section
├──────────────────────────────────────┤
│            Footer (section)          │  ← global section (shared across pages)
└──────────────────────────────────────┘

Each section has its own settings -- text, colors, images, layout options -- defined by the theme developer. When you click a section in the sidebar, you see only the settings that section supports.

Global Sections​

Some sections show the same content on every page -- navigation bars, footers, sidebars. These are global sections (internally called "site-scoped sections"). Edit a global section once, and the change appears everywhere.

Global sections live in a layout's zones (header, footer, sidebar). They're managed from the layout configuration rather than from individual pages.

Layouts & Zones​

A layout defines the structural frame of a page -- where the header, footer, main content, and optional sidebars go. Layouts use zones as named placeholders for global sections:

┌─────────────────────────────────────────┐
│              Zone: header               │  ← global sections (nav, masthead)
├───────────┬─────────────────────────────┤
│           │                             │
│  Zone:    │     Page Content            │  ← page-specific sections stack here
│  sidebar  │     (sections)              │
│           │                             │
├───────────┴─────────────────────────────┤
│              Zone: footer               │  ← global sections (footer, links)
└─────────────────────────────────────────┘

A theme can offer multiple layouts -- for example, a full-width layout, a layout with a sidebar, and a minimal layout without header or footer. You choose which layout a page uses in the page settings panel in the sidebar.

All pages using the same layout share the same zone sections. When you change the header or footer on a layout, it updates across every page that uses that layout.

Theme Settings​

The Theme Editor exposes settings that are defined by the theme developer -- colors, fonts, spacing, layout options. These are grouped into categories (e.g., "Colors", "Typography", "Header") and affect the entire site.

What you see in the Theme Editor depends entirely on the active theme. Different themes expose different settings. The theme designer decides what's configurable.

Sections can override theme settings when the theme designer builds them that way. For example, a theme might define a global heading color, but a specific hero section could offer its own color override. When the override is left empty, the section falls back to the theme default.

Key Workflows​

Building Pages​

  1. Navigate to Pages in the admin sidebar
  2. Click a page to drill into its section list
  3. Click Add Section to choose from the section library (organized by category: hero, content, CTA, navigation, footer, etc.)
  4. Click any section to drill into its settings panel
  5. Adjust text, colors, images, and layout options -- changes preview instantly in the right panel
  6. Drag sections to reorder them
  7. All changes are saved automatically

Editing Theme Settings​

  1. Navigate to Theme Editor in the admin sidebar
  2. Browse settings groups (Colors, Typography, Layout, etc.)
  3. Click a group to see its settings
  4. Adjust values -- color and image changes hot-reload via CSS without a page refresh
  5. All changes are saved and applied automatically

Reviewing Posts​

  1. Navigate to Reviews in the sidebar (or click a pending submission on the Dashboard)
  2. Filter by status: Submitted, Approved, Rejected, Needs Revision
  3. Click a post to see its content and the AI review feedback
  4. Approve, reject, or send back with revision notes

Using the AI Designer​

  1. Navigate to AI Designer in the sidebar
  2. Start a new conversation or continue an existing one
  3. Describe what you want in plain language -- the AI generates the template, schema, and CSS, visible in the live preview
  4. Keep iterating through conversation until the section looks right

Example prompts:

  • "Create a hero banner with a background image, title, and CTA button"
  • "Please add a size slider for the headline in this section"
  • "Can you flip this section -- left to right, right to left?"
  • "Please add a dark theme toggle to this section"
  • "Can you add a 4-color gradient to the background?"
  • "Please add an overlay to the image and give me a slider to adjust its transparency and color"

Next Steps​