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 Alt text is text that appears if an image fails to 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-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.
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 Products layout will take the first three products in your catalog and display them along with their first pricing plan. Users who click on a product will be taken to the primary sales page of that product.
In the Design tab, you can change how the card your featured courses are displayed in looks.
- 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.
NOTE: Updates made to the order, layout, or pricing plans you show will only take place on newly created price blocks. Existing price blocks will not be affected, but you can update those blocks with specific plans just like a newly added pricing block.
NOTE: Upsell blocks are only available on thank you pages.
On your thank you page, the upsell block allows you to display another coaching product or course to your users. This way, after a student successfully purchases one of your products, you can showcase another product that they might be interested in purchasing.
You can choose whether you would like to upsell a course or a coaching product. 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 CTA field will edit the text on the button. If a user clicks the button, they will be brought to the checkout page of the course or 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 course or coaching product you are upselling.
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 block's design settings.
Each block has its own set of design settings. Available customizations can include:
- Background Color - Sets the background color for the entire block.
- Image Opacity - Sets the transparency, or opaqueness, of the Banner image.
- 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.
- 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.
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.
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.