Create/Edit Your Pages

This article explains how to use page editor to create beautiful, rich content for your sales, thank you, and site pages, and the different types of design components (page blocks) that are available. There is a video tutorial available in this article. 

If you are instead looking to edit your curriculum and lecture pages, please see this Knowledge Base article. 

Video tutorial

What is page editor?

Page editor is a robust graphical tool that helps bring your school’s presence to life. Using the What You See Is What You Get WYSIWYG  editor, you can build beautiful, content-rich site pages, sales pages, and thank you pages. Page editor is easy to use, yet flexible enough to offer more advanced page design if desired.

Pages and page blocks

There are several types of pages available to you on the Teachable platform including sales, thank you, and site pages—all of these are customizable.

You can find your site pages by going to Site > Pages. Site pages help you market your school as the storefront for all your available products. From there you can choose to preview your page, publish/unpublish your page, edit your page, or delete your page.

Similarly, you can find your product pages (sales pages, checkout page, and thank you page) by going to Course > Course Name > Pages or Coaching > Coaching Name > Pages and clicking the Edit button to work within a product-specific page.

Before diving into how to create and edit pages using page blocks, here’s an example of what is possible using page editor:

Whenever you create or edit a page, you use components called page blocks to design the layout. Page blocks are pre-made “building blocks” used to construct pages for your site. Each of these blocks are self-contained, which means that the editing and formatting of one block does not affect other blocks. Blocks have numerous attributes, a few of which are demonstrated in the graphic below:

Add blocks

To add a new block to your page, click the Add New Block button on the left-hand side and choose a block type. An explanation of the various block types is listed below. From here, a preview of how that block will look on your page will show in the page preview. If you like it, click the Add button to accept the block.

Once the block has been added to your page, you'll be able to customize its content and settings accordingly. More information on block designs is found below.

Block types

Click on each of the tabs below to see examples of blocks.

Course Curriculum

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.

Image

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:

Text

The text block contains a what-you-see-is-what-you-getWYSIWIG 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.

Button

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.

Video

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 Add Lecture Content article. 

Custom HTML

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. 

Block layouts

Whereas a block has a single component, block layouts are templates consisting of multiple components that can be used for a variety of functions. For example, the Image with Text layout lets you insert an image and text field to your page side-by-side.

Click each of the tabs below to see examples of block layouts.

Image with Text

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.

Banner

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:

• Upload Image allows you to upload a background image for your banner. You can also set Alt Text here.
• Heading Text and Subheading Text fields change the text that displays on the banner.
• Show Button is enabled by default. You can set an action for the button (go to a specific URL or go to Checkout), change the button's text, or disable the button if you don't want it.

Text with Image Grid

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.

Featured Products

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.

Pricing

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:

• Change the Heading Text in its text field
• Select the Pricing Plans you wish to show on your sales page
• Drag and drop to reorder the prices
• Change the button text in its respective text field.

Upsell

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.

Email Leads Form

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:

• Form Name - for your internal use. The form name will be listed as the Source when you export a list of your email leads from your Users > Leads page.
• Heading Text - the title, or first line, of the form
• Description text - a short description beneath the heading
• Button Text - the text that appears on the button
• Disclaimer Text - the small line of text beneath the button. You can use our default text, or create your own.
• Thank You Text - the message displayed on the page after a user correctly submits their email in the form 

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

There are two ways to delete blocks:

1. From the main page editor, click the side dots and choose Delete. A notification box will appear. Click Delete to confirm.
2. Scroll to the bottom in the block's settings and click Delete Block. A notification box will appear. Click Delete to confirm.

Duplicate and hide blocks

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.

Block designs

Each block has its own design that can be customized. Click the Design tab to see the block's design settings.

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

Block:

• Background Color - Sets the background color for the entire block.
• Image Opacity - Sets the transparency, or opaqueness, of the Banner image.

Text

• Text Alignment - Justifies the text alignment. Text can be flushed left, flushed right, or centered.
• Heading Color - Sets the color for heading text.
• Text Color - Sets the color for body text.

Padding

• Top & Bottom - Adds space around the top and bottom of the entire block.
• Gutter Width - Adds space in between elements of the selected block.
• Content Width - Sets the overall width of the selected block.

Buttons/Product Cards/Images with Text

• Border Radius - adds rounded edges to buttons, featured product cards, and images with text.

Responsive page displays and mobile padding

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. content padding  and The space between columns of content. 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.

Page settings

In the page editor, you can modify the following settings for each site page by clicking the gear icon:

• Header - When toggled on, the header will appear on the page.
• Header Overlap - When toggled on, your header will always be shown at the top of your page. 
• Transparent Header - When toggled on, your header will be transparent at the top of your page. When a user scrolls, your header will then turn opaque based on your theme.
• Transparent Text Color - If transparent header is toggled on, you can specify the color of the text that appears when your header is transparent.
• Show Footer - When toggled on, the footer will appear on the page.
• Header Width - Sets the width of the navigation bar at the top of the page.
• Footer Width - Sets the width of the footer at the bottom of the page.
• Page URL - The web address where your users can access this page. Please note that this field will not appear until you publish your page for the first time.
• Page Title - The title of the page as it displays in a browser tab.
• Page Description - A small blurb about your page.