🧭 Overview
The Page Editor is your primary tool for building and customizing content pages inside CustomerHub. Whether you're creating course lessons, welcome pages, or membership resources, the Page Editor provides a flexible block-based experience with a variety of content blocks to bring your pages to life.
Watch the video below for a short but comprehensive overview of how the page editor works:
✏️ Getting Started with the Page Editor
To open the Page Editor:
Navigate to your Product or Collection
Go to the CONTENT tab
Click on any Page to open it
Once inside the editor, you'll see two key interface elements:
Layout Navigation Menu — When you select content in the editor you can use the menu at the top of the editor to select sections, rows, or columns on your page. Once selected, use the arrow controls to move content around and reorganize your layout.
Page Settings Panel — Click on an empty space outside any section to access page-level settings including:
Page Name — The name displayed in the content menu and the Product Content section
Slug — The URL path that brings users to this page
Estimated Time — How long the page will take to complete (contributes to the product's total time estimate)
🧩 Add Content Using Blocks
Pages are built using Blocks — modular content elements you can add, arrange, and customize. To add a block:
Click inside a section or select the "Add Content" button
Choose from the available block types
Configure the block's settings as needed
🧱 Available Block Types
Here's a breakdown of each content block, what it's used for, and how you can customize it:
📹 Video
Embed hosted videos from any platform using a direct link or embed code.
Basic Settings — Upload or change the video file/embed code, add or change the thumbnail image
Design Settings — Set width to "Fit" (full width) or custom (pixels), customize border width/radius/color, toggle mobile visibility
Example Use — Course lessons, walkthroughs, or welcome videos
🎧 Audio
Add an audio player with a title, description, and optional thumbnail.
Basic Settings — Upload or change audio file, edit title and description, add or change thumbnail
Design Settings — Width control, borders, radius, mobile visibility
Example Use — Meditations, podcasts, or music tracks
🖼️ Image
Upload static images (JPG, PNG, etc.).
Basic Settings — Add or replace an image
Design Settings — Customize size, borders, radius, and alignment. Link the image to another page or external site.
Example Use — Diagrams, infographics, speaker photos
📄 Download
Add downloadable content like PDFs or worksheets.
Basic Settings — Upload file, add a custom thumbnail, set title and instructions
Design Settings — Width control, borders, radius, mobile visibility
Example Use — Printable guides, templates, bonus files
🛍️ Product
Embed a product card within the page to display a preview that users can click on to view or purchase.
Auto-syncs with your library settings
Example Use — Promote another course or membership product
🧾 Text
Insert and format rich text including headings, paragraphs, links, bold, italic, alignment, and lists.
No separate design settings panel — fits seamlessly with page styles
Example Use — Instructions, introductions, summaries
💻 Custom Code
Add custom HTML, CSS, or JavaScript snippets for advanced functionality.
Useful for third-party embeds like forms, countdown timers, and widgets
Intended for advanced users
Example Use — Embed a Calendly form, tracking pixel, or YouTube playlist
🔘 Button
Add a clickable button that links to another page, product, or external URL.
Basic Settings — Set the button label, link destination, and open behavior (same tab or new tab)
Design Settings — Customize size, color, alignment, borders, and mobile visibility
Example Use — "Start Next Lesson" navigation, links to external resources, call-to-action buttons
➗ Divider
Insert a horizontal line to visually separate content sections on your page.
Design Settings — Customize width, color, thickness, and spacing
Example Use — Separate lesson sections, break up long pages, create visual hierarchy
📤 Upload
Add a file upload zone where users can submit files directly from the page.
Basic Settings — Configure accepted file types and upload instructions
Design Settings — Width control, borders, radius, mobile visibility
Example Use — Homework submissions, worksheet uploads, assignment deliverables
⚙️ Block Settings & Customization
Click on any content block to access its settings. Settings are organized into tabs:
Basic Tab
Change Media — Swap out the image, video, audio, or file (based on block type)
Change Thumbnail — Supported on videos and files
Info — Edit title and description (supported on audio and files)
Design Tab
Width — "Fit" sets media to full column width; "Custom" lets you set a specific pixel width and alignment
Spacing — Adjust padding and margins (in pixels)
Border — Set border width, radius, and color
Mobile Options — Toggle to hide the block on mobile devices
CSS Tab
CSS ID / CSS Classes — Set a custom CSS ID or class to apply your own styles via your theme's CSS
Advanced CSS — Manually edit ALL CSS styles applied to the element
🎨 Reordering & Managing Blocks
Each block can be reordered, duplicated, or removed at any time using the block toolbar that appears when you select a block. Use the up and down arrows to move blocks, the duplicate icon to copy a block, or the trash icon to delete it.
Combine multiple block types to create interactive, engaging experiences:
A video lesson + downloadable worksheet + navigation button
A text introduction + embedded podcast episode
A multimedia lesson layout mixing video, images, and text
✅ Best Practices
Keep layouts consistent — Use the same structure across pages for a professional look
Guide users forward — Use buttons or text links to direct users to the next step
Test your embeds — Preview YouTube videos, forms, and other embeds using Preview mode before publishing
Use Downloads for files — Use the Download block when linking files rather than uploading them inline
Leverage Custom Code wisely — The Code block is powerful for embedding third-party tools like Calendly, countdown timers, or tracking pixels
💡Tip: Use Snippets to create reusable content blocks that you can embed across multiple pages — perfect for headers, disclaimers, or calls to action that appear in many places.