Create/Edit Your Pages

PLAN AVAILABILITY FREE BASIC PROFESSIONAL BUSINESS

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

NOTE:This article covers page editor 2.0. If you're using page editor 1.0, you can find more information here. Unsure which page editor you have for your school? This article can help.

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:

A completed sales page with several page blocks.

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:

sweetshop_full_screen_block_anatomy.png

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.

add_block.gif

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 Image Text Button Video Custom HTML

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.

course_curriculum_block.gif

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 Banner Text with Image Grid Featured Products Pricing Upsell Email Leads Form

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.

image_with_text_block.png

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:

rearrange_blocks.gif

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.

sweet_shop_delete_block.gif

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.

sweet_shop_hide_unhide.gif

Block designs

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

blockdesigns.png

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.

NOTE: Not all design settings are available for each block. For example, the gutter width setting is only available for the Image with Text and Text with Image Grid blocks.

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.

sweet_shop_mobile_resize.gif

Page settings

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

pagesettingsgif.gif

  • 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.

Was this article helpful?

155 out of 407 found this helpful