Learn how to use Teachable's Page Editor to build beautiful, content-rich pages for your school, including a homepage, sales pages, and thank you pages.

This guide covers:

This article includes a video tutorial.

Page Editor is Teachable's visual page builder that uses a "What You See Is What You Get" (WYSIWYG) interface. It allows you to create professional-looking pages without coding knowledge, while remaining flexible enough for advanced customization.

Here’s an example of what is possible using page editor:

Navigate to Site > Pages where you'll find two tabs: School pages and Product pages.

From the school pages table and product pages table you can choose to:

Alternatively, you can also access your product pages by going to Course > Course Name > Pages or Coaching > Coaching Name > Pages and clicking the Edit button.

Learn more about the different school and product page types and how to manage them in this Knowledge base article.

Page blocks are pre-built components that serve as building blocks for your pages. Each block is self-contained, meaning editing one block doesn't affect others.
​

Page blocks fall into two categories:

If you want to offer a preview of your course's curriculum, you can add the Course Curriculum block at the top of the Add New Block panel. You can modify the Curriculum title on the Content tab and design elements on the Design tab, but the curriculum content itself will be pulled from the "Curriculum" area of your school. Any changes to the content will need to be made there.

Once you add an image block to your page, click Upload Image and use the file-picker to upload an image to your page. Recommended image sizes (desktop and mobile) are 1200 x 800px (landscape), 1200 x 1600px (portrait). Minimum pixel width should be 1000 px. From there, you can enter Text that will display if the image cannot load.Image Alt Text and also Link to URL when the image is clicked:

The text block contains a what-you-see-is-what-you-get (WYSIWIG) editor for you to add text to your page. There are a number of text customizations in the editor, such as the ability to change styles, change font styles, insert links, etc.

Adding a button block allows you to create a Call-to-Action button that will take the user to an external link. You can change the URL field to specify the link you want the button to go to, and the Button Text field to change what the button says. On a course's sales page, you can have a button take users directly to a pricing plan's checkout page. Similarly, on a course's thank you page, you can have a button take students directly to your course curriculum.

The video block allows you to embed a video file to your page. Use the Heading Text and Description Text fields to add more information about your video. Click the Upload Video/Replace Video button to upload your video to your page. Once you've uploaded a video, you can also upload a custom thumbnail by clicking the Upload Custom Thumbnail button.

The following video formats are supported: MOV, AVI, and MP4. A full list of video requirements can be found in the File Types article.

The Email Leads Form block allows you to collect email addresses from potential customers who have not yet created an account in your school. When a user submits their email via the Email Leads Form, they are added to your Users > Leads list.

The Email Leads Form block contains the following fields:

The custom HTML block inserts a blank block into your page, which can then be customized as you see fit using HTML and/or Liquid. Please note that custom code is an advanced feature, and as such, the functionality cannot be guaranteed. You can learn more about using custom HTML blocks in this article.

Once you add an Image with Text block, you can change whether the image displays to the left or right of the text using the Layout dropdown menu. Recommended image sizes (desktop and mobile) are 1200 x 800px (landscape), 1200 x 1600px (portrait). Minimum pixel width should be 1000 px. Click Upload Image to open the file upload modal and upload your desired image. You can also set Image Alt Text here, and specify a URL link for an image using Image Link to URL. You can adjust the content width of your images in the Design tab.

Use the Heading Text and Text fields to edit the text that displays to whatever you'd like.

The Banner layout can be used to create homepage an oversized banner image at the top of a website. heroes, or eye-catching headers. Recommended image sizes (desktop and mobile) are 1500 x 800px or 1800 x 600px. Minimum pixel width should be 1500 px. You can set the following options here:

The Text with Image Grid comes with four different columns, but you can add more products by clicking the Add New button. In each different column, click Upload Image to add an image. Image Alt Text can also be set here, as well as a URL link for the image using Image Link to URL.

Use the Heading Text and Text fields to change the text that displays on the column.

On your sales page, the Pricing layout displays all the published pricing plans for your product. On your sales page, the Pricing layout displays the published pricing plan you want for your product. By default, the first pricing plan you created on your Pricing tab is listed. You can add as many pricing options as you have published.

In this block, you can do the following:

The Featured Products layout showcases other available products that your customers can purchase. In this block, you specify which products to feature on your sales page. Courses, coaching products, and bundles can be included in the same block. You can use multiple Featured Product blocks on multiple pages. Users who click on a product will be taken to the primary sales page of that product. You can add more than three products if you have them.

In the Design tab, you can change the look of the card set for your featured products. You can do things like add a border around the cards, change the border size/style, change the layout from grid to stacked, and change card spacing. More about block designs is covered below.

On your product thank you pages, the upsell block allows you to drive sales to other products within your school. These upsells will display after a student has completed checkout.

You can choose whether you would like to upsell a course, coaching, or bundle product on your thank you page. Within the upsell block, you can also select the Pricing Plan option you'd like to offer for that product. The Heading Text and Description Text fields can be used to describe the product and offer. The Button Text field will edit the text on the button. If a user clicks the button, they will be brought to the checkout page of the product you are upselling.

On the Design tab of the upsell block, you can edit the Background Color and Font Color for the overall block.

You can also edit some design details for the inner square of the block, or card. The Card Background Color, Card Border Width, and Card Border Color can all be customized.

The Card Border and Thumbnail Border can be selected to be square or round. The thumbnail image in the upsell block will be automatically populated from the thumbnail image of the product you are upselling.

To add a new block to your page:

Once the block has been added to your page, you'll be able to customize its content and settings.

Once you’ve added blocks to your page, you can rearrange them by clicking and dragging individual blocks above or below existing blocks:

Method 1: From the main page editor

Method 2: From the main page editor

When you want to test out blocks to see how they perform on your page, you can either duplicate them or hide them. Hiding a block doesn’t delete it, it just doesn’t show on your page. When you’re ready to use it again, you can simply unhide it.

To duplicate or hide a block, click the side dots and choose Duplicate or Hide, respectively. A hidden block will turn light gray. To unhide a block, click the light gray block’s side dots and choose Unhide.

Click the Design tab within any block to access customization options.

Each block has its own set of design settings. Available customizations can include:

Block:

Text:

Padding

Buttons/Product Cards/Images with Text

Teachable’s pages are responsive; this means that your content will automatically resize based on the device type or size of the browser window viewing your site. Shrink your browser window and your site will scale to fit the new size.

When you view Teachable content on a mobile device, the space between your content and the border of that content keeps objects from crowding each other. When content is viewed at smaller screen sizes, gutter width adjustments automatically activate. These are built-in adjustments which ensure that your visitors have a smooth mobile experience to engage with your content.

The example below demonstrates the difference between a computer browser and a mobile device.

Access page settings by clicking the gear icon in the page editor.

Available settings: