Page Blocks (Page Editor 1.0)

This article goes over the different types of page blocks that school owners can add, rearrange, and delete on pages in their Teachable school.

Overview

Page blocks are pre-made “building blocks” that you can use to construct homepages, sales pages, thank you pages, custom pages, and edit any site wide page template (e.g. Terms of Use, Privacy Policy, etc.).

Each of these blocks are self-contained, meaning that the editing and formatting in one block do not affect other blocks. There are many types of blocks available on Teachable, some of which, are available only on specific types of pages.

Add Blocks

To add a new block, hover your cursor between existing blocks until the Insert new block button appears. Click the Insert new block button and select a block. The block will then be inserted in between the existing blocks.

Rearrange Blocks

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

Delete Blocks

To delete a block, click the red trash icon on the right-hand side of a block.

A notification box will appear. Click OK to confirm.

Rich Text Block

The Rich Text block allows you to format text in a variety of different ways (bold, underline, font colors, etc.). You can format text using the WYSIWYG (What You See Is What You Get) text editor; this means that what you type, and how you format the text, is how it will appear on your page. Similar to Word, WordPress, and Gmail, you can format text any way you like. You can also add images, customize font colors and sizes, insert links and lists, and more.

This block is available on homepages, sales pages, thank you pages, and custom pages.

Liquid / HTML Block

The Liquid/HTML block allows you to add additional HTML code to your page. You can also add custom HTML or embed other elements (e.g., a Powerpoint, a Youtube video, external PayPal button, etc.).

A liquid block enables developers to access custom liquid attributes and filters. If you want to learn more about liquid attributes and how to use them on Teachable, see our documentation here.

This block is available on homepages, sales pages, thank you pages, and custom pages.

Background Image Block

The Background Image block allows you to add a background image to your page for extra visual appeal. Click on the Add Background button to upload a background image to the block. Add text in the text editor to add a text overlay over the image.

This block is available on homepages, sales pages, thank you pages, and custom pages.

Video Embed Block

Click the Add Video button and use the filepicker to select the video you would like to embed. You can also fill out the Headline and Description text fields to give more information about the video.

This block is available on homepages, sales pages, thank you pages, and custom pages.

Course Hero Header Block

The Course Hero Header block allows you to edit your course’s header background and enroll button. Click the Add Background button to upload a background image. The recommended header background image size is 1440x780px (JPG, PNG).

Then you can add an image by:

• Choosing from a variety of presets
• Uploading your own image from your computer
• Searching for images on the Web
• Linking to an image on the Web
• Uploading a file from an FTP
• Uploading an image from Dropbox, Google Drive, or OneDrive

After choosing a header image, click Upload.

Once your header image is uploaded, you can adjust the Overlay by moving the slider left (for a lighter effect) or right (for a darker effect). In the future, you can Replace the image with a new one or Reset it to bring it back to default.

To change the text on the enroll button that appears in the Course Hero Header block, check Customize Enroll Button. However, if the text is changed, the button will:

• Lose its ability to automatically display price
• Lose its ability to automatically show applied coupon price

If you decide to change the text of your enroll button, check Customize Enroll Button. Then, enter your new Button Label and click Save.

This block is available on sales pages and thank you pages.

Coupon Banner Block

The Coupon Banner block only displays to users who visit your page with a valid coupon code link (e.g., yourschool.teachable.com/courses/84828?code=HALFOFF). You can’t customize this block, but you can delete it by clicking the red trash icon.

This block is available on sales pages and thank you pages.

Course Description Block

The Course Description block allows you to add a description to your page by adding text, links, images, etc. using the WYSIWYG rich text editor.

Social media sharing icons will automatically display in the course description block when viewing the course sales page as a visitor:

This block is available on sales pages and thank you pages

Author Bio Block

The Author Bio block allows you to customize a course author’s biography. To modify the author bio, click the green External editor icon.

This will pull up a text editor that allows you to add information about the author, including:

• Their full name.
• A headline, which is a quick blurb summarizing their background and skill set.
• An image of the author.
• A bio description, which is an expansion of the headline and helps potential students judge the author's qualifications as an instructor.

Once you have made modifications to the author bio block, make sure to Save your changes.

This block is available on sales pages and thank you pages.

Course Curriculum Block

The Course Curriculum block is where a list of your course lectures will appear. Note that this block will be hidden on your page until at least one lecture is published. To add lectures, click the green External editor icon. This will take you to the curriculum area.

A pop-up modal will appear asking you to confirm that you’d like to leave the sales page editor. Click Yes.

Once you click Yes, you’ll be redirected to the Curriculum tab in your course admin area where you can add lectures and sections to your course:

This block is available on sales pages and thank you pages.

Bundled Courses Block

The Bundled Courses block displays all bundled courses associated with a course. To group multiple courses together into a single course bundle that you can sell at once, click the External editor icon. This will take you to the Bundled Courses area.

This block is available on sales pages and thank you pages.

FAQ Block

The FAQ block displays commonly asked questions and their corresponding answers. To add or edit an FAQ for your page, click the green External editor icon next to the FAQ that you wish to edit. You will then be directed to the FAQ page where you can modify or add questions and answers that will appear on your page.

This block is available on sales pages and thank you pages.

Course Page Closing Letter Block

The Course Page Closing Letter block allows you to create a closing remark that makes a final pitch to potential students, encouraging them to enroll in your course.

This block is available on sales pages and thank you pages.

Primary Enroll Button Block

The Primary Enroll Button block allows you to edit the pricing of your course and customize the button label. You can edit the pricing of the course by clicking on the External editor icon on the right-hand side of the block.

Button Behavior for a Course with One Pricing Plan

If your course has a single pricing plan, the price of your course will display inside the enroll button on the sales page. The user will be forwarded directly to the checkout page when the button is clicked.

Button Behavior for a Course With Multiple Pricing Plans

If your course has two or more pricing plans, the enroll button cannot display a single course price. Instead of being forwarded immediately to checkout when the enroll button is clicked on the sales page, the user is scrolled to the bottom of the page where all pricing plans are displayed. The user must then select an option and click the Enroll in Course button again to advance to the checkout page.

Button Behavior for a Course With a Coupon

When a user loads the sales page with a valid coupon code parameter in the URL, the enrollment button will reflect the discount. In the case of multiple pricing plans, the user will again be forwarded to the bottom of the page, where they will see their coupon applied to each pricing plan.

Customize the Text of the Enroll Button

Changing the enroll button text is possible but has a few consequences. If the text is changed, the button will:

• Lose its ability to automatically display price
• Lose its ability to automatically show applied coupon price

If you decide to change the text of your enroll button, check Customize Enroll Button. Then, enter your new Button Label and click Save.

This block is available on sales pages, and thank you pages.

Secondary Enroll Button Block

The Secondary Enroll Button block allows you to add an additional checkout button with a background image. To add a background image, click on the Add Background button.

This block is available on sales pages and thank you pages.

Embedded Form Block

The Embedded Form block allows you to insert an embedded formwith prefill code from MailChimp, Aweber, Campaign Monitor, or GetResponse, which are all e-marketing tools frequently used by our instructors. Choose your tool and fill in information within the HTML code that automatically appears in the text editor. You can also add a background image by clicking on the Add Background button.

Then, customize the embed code to match your own third-party account and list information (e.g. form action URLs, redirect URLs, etc.). The sections that need to be customized with your account and list information are denoted with capitalized text; for example, in order for the MailChimp form to function properly, you'll need to enter your MailChimp Form Action URL here:

This block is available on sales pages and thank you pages.

Testimonial Block

The Testimonial block allows you to add testimonials from people endorsing your course. To add an image, click on the Add Image button. Note that the recommended image size is 120x120px. Add a testimonial quote in the rich text editor section of the block.

This block is available on homepages, sales pages, thank you pages, and custom pages.

Featured Courses Block

The Featured Course block displays other courses in your school. The featured courses appear in the same order as they do in your the Courses section of your admin area, where they can also be reordered. The block can also be renamed by changing the text in the Heading field.

This block is available on homepages, sales pages, thank you pages, and custom pages.

Upsell Offer Block

The Upsell Offer block allows you to create a post-purchase offer for other courses in your school. For further information about creating upsell offers, see Course Thank You Page.

This block is available on thank you pages.

Proceed to Course Block

The Proceed to Course block allows owners to customize the URL and text of the Proceed to Course button. You can also convert the block to an Upsell Offer block if you wish to create a post-purchase upsell offer.

This block is available on thank you pages.

Purchase Confirmation Block

The Purchase Confirmation block allows you to display a message to your students after they purchase a course:

This block is available on thank you pages.