Watch the below video for a short but comprehensive overview of how the page editor works.
Layout navigation menu
Layout navigation menu - Use this menu to easily select sections, rows, or columns on your page.
Once selected you can then use these menus to move content around via the arrows.
Page Settings
To access the Page settings, click on an empty space on the page outside of any section. Here you can modify a number of fields.
Page Name - This will determine what the page is called. This name will be displayed in the content menu and in the Product Content section.
Slug - This is what will be the part of the URL that will bring your end users to this page.
Estimated Time - This can be used to indicate to your end users how long you think this page will take to complete. If this page is in a product, then the time you place in this field will also contribute to the total time estimate for that product.
🧩 Add Content Using Blocks
To edit a page:
Go to your Product or Collection
Open any Page and click the Edit icon
Click inside a section or select the “Add Content” button
Choose from the available Blocks
🧱 Available Block Types & What You Can Do
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 (direct link or embed code).
Basic Settings:
Upload/change the video file or embed code.
Add or change the thumbnail image.
Design Settings:
Set width to "Fit" (full width) or a custom width (in pixels).
Customize border width, radius, and color.
Optionally hide the block on mobile devices.
Example Use: Add 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:
Same as Video block: width control, borders, radius, mobile visibility.
Example Use: Perfect for meditations, podcasts, or music tracks.
🖼️ Image
Upload static images (JPG, PNG, etc.).
Basic Settings:
Add or replace image.
Design Settings:
Customize size, borders, radius, and alignment.
Link image to another page or external site.
Example Use: Display diagrams, infographics, speaker photos, etc.
📄 Download
Add downloadable content (like PDFs or worksheets).
Basic Settings:
Upload your file.
Add a custom thumbnail.
Title and brief instructions.
Design Settings:
Same as Video/Audio blocks.
Example Use: Offer printable guides, templates, bonus files.
🛍️ Product
Embed a product card within the page.
Display a preview of a product 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: headings, paragraphs, links, etc.
Basic formatting options available: bold, italic, alignment, lists, links, etc.
No design settings panel, but fits seamlessly with page styles.
Example Use: Add instructions, introductions, or summaries.
💻 Custom Code
Add custom HTML, CSS, or JS snippets.
Useful for third-party embeds like forms, countdown timers, widgets.
Not beginner-friendly — intended for advanced users.
Example Use: Embed a Calendly form or tracking pixel.
🧠 Tip: Use the Code block to embed forms, countdown timers, YouTube playlists, Calendly, or anything that requires custom HTML.
🎨 Drag and Drop Simplicity
Each block can be dragged, reordered, or removed anytime. Combine multiple block types to create interactive experiences, such as:
A video + download + button
A text intro + embedded podcast
A lesson layout with multiple media formats
⚙️ Best Practices
Keep layouts consistent for a professional look
Use buttons to guide users to the next step
Test embeds (YouTube, forms, etc.) using Preview mode
Use the Download block when linking files vs. the Upload block to host them
Edit Content design
Click on any content to access the setting and design options.
Basic tab:
Change media
Based on what type of media you're editing and supported on images, videos, files, or audio.
Change thumbnail
Only supported on videos or files by default.
Info
Only supported on audio or files by default.
Design tab:
Width
Fit - Sets media to the full width of the column.
Custom - Allows you to adjust media size and set alignment.
Spacing
Adjust Padding and Margins. (px)
Border
Set width and color.
Mobile options
Enable if you want to hide this specific content on mobile devices.
CSS tab:
CSS Id
CSS Classes
Set a custom CSS ID or Class to the element to apply your own custom styles in your themes CSS.
Advanced CSS
Manually edit ALL CSS styles added to the element.