The Page Builder - Overview

Introduction

The Page Builder is a visual drag-and-drop editor for creating rich, responsive slide layouts. Unlike the standard rich text editor, the Page Builder gives you full control over the visual design of your slides — you can arrange text, images, videos, buttons, and interactive elements freely on a canvas, and style every detail without writing code.

Layout Overview

The Page Builder interface is divided into several areas:

Editor Toolbar (top) — Templates button, template info, and save status
Left panels — Blocks, Layers, and AI Assistant (toggled via icon strip)
Canvas (center) — The main editing area where you build your slide
Right panels — Selector, Styles, and Traits/Properties (toggled via icon strip)
Canvas Toolbar (below the canvas toolbar area) — Undo/Redo, device preview, grid generator, outlines, and code editor

Building Blocks

Click the Blocks icon in the left panel strip to open the block library. Drag any block onto the canvas to add it to your slide.

Layout Blocks

Flex Containers — Pre-built layout structures (e.g., 50/50 split, three-column, sidebar layouts). These automatically handle responsive spacing and alignment. You can nest layouts inside each other for complex designs.

Text & Content

Text — A rich text block with formatting options (headings, bold, italic, lists, links, etc.). Double-click to start editing.
HTML — A raw HTML/CSS block for advanced customization. Use this when you need something the visual tools don't offer. You can even write your own JavaScript. Only use this feature if you are familiar with HMTL, CSS and JavaScript.

Media

Image — Insert images from the Asset Manager. Supports object fit and positioning options.
Video Player — Embed video content with built-in playback controls.
Audio Player — Add audio content with built-in playback controls.

Interactive Elements

Button — A styled clickable button with customizable text and appearance. This is an expert feature, since it will execute your custom JavaScript code.
Link Button — A navigation button that links to other slides in your cBook (uses slide links).
Icon — Insert icons from the available icon library.
Accordion — Collapsible panels that learners can expand and collapse. Great for organizing content into sections.
Flip Card — A card with front and back sides. Learners click to flip the card and reveal the back content.

Specialized

AI Assistant — AI-powered content suggestions and generation tools.

Working with the Canvas

Selecting Components

Click any element on the canvas to select it. A blue border appears around the selected component, and its properties become available in the right panels.

A breadcrumb trail at the top of the canvas shows the selected component's position in the hierarchy (e.g., Body > Flex Container > Text). Click any breadcrumb to select that parent component.

Drag and Drop

Drag blocks from the left panel onto the canvas. You can also drag existing components on the canvas to reorder them within their containers.

Undo and Redo

Use the Undo and Redo buttons in the canvas toolbar (or Ctrl+Z / Cmd+Z) to reverse or restore changes.

Show Outlines

Toggle Show Outlines in the canvas toolbar to see the boundaries of all components. This is helpful when working with invisible containers or debugging layout issues.

Responsive Design

Device Preview

Use the Device dropdown in the canvas toolbar to switch between:

Desktop — Full-width view
Tablet — Medium-width view
Mobile — Narrow-width view

This lets you see how your layout adapts to different screen sizes.

Responsive Styling

You can set different styles for each device size. Switch to a device in the dropdown, then adjust styles in the right panel. Your changes only apply to that device size and smaller, so you can fine-tune the experience for every screen.

Styling Components

Select a component and click the Styles icon (palette) in the right panel strip. The style panel is organized into sections:

Layout

Control how the component is displayed: block, inline, flex, or grid. Set width, height, and overflow behavior. For flex containers, configure direction, alignment, and spacing between items.

Spacing

Adjust Padding (inner spacing) and Margin (outer spacing) for each side individually, or click the chain icon to change all sides at once.

Typography

Set font family, size, weight, line height, text alignment, color, decoration (underline, strikethrough), letter spacing, and text transform (uppercase, lowercase, capitalize).
Note: Make sure to test changes properly with the font size settings in the accessibility menu in the player!

Colors & Backgrounds

Set background colors, background images (with repeat, position, size, and attachment options), and border properties (width, style, color, border radius for rounded corners).
Note: Make sure to test changes properly with the color contrast settings in the accessibility menu in the player!

Effects

Control opacity, box shadows, and text shadows.

Animations

Add CSS animations to components:

Animation name — Choose from available animation types
Duration — How long the animation takes
Timing function — The speed curve (ease, linear, ease-in, ease-out, or various cubic-bezier options)
Delay — Wait time before the animation starts
Iteration count — How many times to repeat (or infinite)
Direction — Normal, reverse, or alternate
Fill mode — How styles apply before/after the animation

Component Properties (Traits)

Select a component and click the Properties icon in the right panel strip to configure component-specific settings.

Properties vary by component type. Common properties include:

ID and Classes — For identifying and styling components
Link settings — URL, target, and destination for buttons and links
Image settings — Source, alt text, object fit, and object position
Icon settings — Icon selection from the library
Flex settings — Direction, justify, align, wrap, and gap for layout containers
Accessibility — ARIA labels and roles

Selector Panel

Click the Selector icon for advanced CSS class management:

Switch between styling by component (unique to this element) or by selector (shared CSS class)
Add or remove CSS classes
Style pseudo-states like hover, active, and focus

Layers Panel

Click the Layers icon in the left panel strip to see a tree view of all components on your canvas. This gives you a hierarchical overview of your slide structure. Click any item in the tree to select it on the canvas — useful for selecting components that are hard to click directly.

Templates

Templates let you save and reuse page designs across your cBook.

Applying a Template

Click the Templates button in the editor toolbar
Browse the template library — use the search field or click tag chips to filter
Toggle Show active only to hide deprecated templates
Click a template to preview it in a side drawer
Click Apply to replace the current slide content with the template

Creating a Template

Design your slide content in the Page Builder
Save the slide first — you can only create a template from saved content
Click the Create Template button in the editor toolbar
Enter a template name (minimum 3 characters)
Add tags to categorize the template (minimum 3 characters each)
Optionally mark it as an AI template
Click Create Template

The template is now available for all slides in your cBook.

Grid Generator

Click the Grid Generator button in the canvas toolbar to automatically create grid-based layouts. Set the number of rows, columns, and gaps, and the generator creates a structured layout for you — saving time compared to building flex containers manually.

Code Editor

For advanced users, click the Edit HTML/CSS button in the canvas toolbar to open the code editor. You can directly edit the raw HTML structure and CSS styles of your slide. Changes are reflected immediately on the canvas.

AI Assistant

Click the AI Assistant icon (sparkles) in the left panel strip to open the AI content builder. It provides AI-powered suggestions for content creation and refinement.