Whenever you create a page on your site—be it sales page, thank you page, homepage, etc—you'll be using the same page editing experience. This article goes over how to use the page editor and the different type of page blocks available.
NOTE: This article covers page editor 2.0. If you're using page editor 1.0, you can find more information here.
Whenever you create or edit a page, you'll be using blocks. Page blocks are pre-made “building blocks” used to construct pages for your site. Each of these blocks are self-contained, meaning that the editing and formatting of one block does not affect other blocks.
You can find your site pages by going to Site > Pages. 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 course pages (sales pages, checkout page, and thank you page) by going to Course > Pages and clicking the Edit button to work within a course page.
To add a new block to your page, click the respective Add New Block button on the lefthand side. From there, you'll be shown a preview of how that block will look on your page in the page preview. Once certain, click the Add button to finalize.
Once the block has been added to your page, you'll be able to customize its content and settings accordingly.
Once you add an image block to your page, click Upload Image and use the file-picker to upload an image to your page. From there, you can enter Image Alt Text and also Link to URL when the image is clicked:
The text block contains a WYSIWIG (what-you-see-is-what-you-get) 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 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.
A block layout is a template 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:
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. Click Upload Image to open the file upload modal and upload your desired image. The Image Alt Text is what will appear if your image fails to load, and is used for SEO purposes.
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 heroes, or eye-catching headers. Clicking the Add Image button allows you to upload a background image for your banner. Alt Text is what will appear if your image fails to load, and is used for SEO purposes.
Use the Heading Text and Subheading Text fields to change the text that displays on the banner.
Checking the Show Button box will add a button to your banner. Use the Button Action dropdown menu to change the behavior of the button. You can also change the text of the button using the Button Text field.
The Text with Image Layout grid comes with three different columns, but you can add more by clicking the Add New button. In each different column, click Upload Image to add an image. Alt Text is what will appear if your image fails to load, and is used for SEO purposes.
Use the Heading Text and Text fields to change the text that displays on the column.
The Featured Course layout will take the first three courses in your catalog and display them along with their first pricing plan. Users who click on a course will be taken to the primary sales page of that course.
You can change the number of courses that will display using the slider. Similarly, you can choose to add a View All Courses button.
In the Design tab, you can change how the card your featured courses are displayed in looks.
Once you’ve added blocks to your page, you can rearrange them by clicking and dragging individual blocks above or below existing blocks:
To delete a block, scroll to the bottom in the block's settings and click Delete Block. A notification box will appear. Click Delete to confirm.
Each block has its own design that can be customized. Click the Design tab to see the blocks design settings. Each block has its own set of design settings, for example the Image with Text block allows you to determine the text alignment, background color, heading color, and text color.
In the page editor, you can modify the following settings for each site page by clicking the gear icon:
- 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.
- Show Navigation Bar - When toggled on, the navigation bar will appear on the page.
- Colored Nav Bar- When toggled on, a colored navigation bar will display on the page, instead of a transparent navigation bar. The color of the navigation bar is determined by the palette set for Nav Bar & Footer Background in the Site >Theme section of your school.
- Show Footer - When toggled on, the standard school footer will display on the page.