3-19 Teachableでエディタ1.0でページブロックを編集する

今回はTeachableで、1.0のページエディターを使いページブロックを編集する方法についてやっていきます。

Step1. ページエディター1.0とは

今はコースの中のPagesに入っています。EDITOR VERSIONにページエディターのバージョンが表示されています。各ページに1.0、2.0とありますが、古いスクールになればなるほど、1.0となっているのを目にすると思います。

チェックアウトページとサンキューページでは、1.0しかない場合は2.0のものを作ることができないんですよね。古いスクールだったら、チェックアウトページとサンキューページがもう1.0で固定されてしまっています。ある時を境に新しいスクールに登録したらすべて2.0になっているのですが、今回はレガシーの1.0のページエディターを使って編集していきます。

Step2. ページエディター1.0で編集する方法

まずは中を見てみましょう。「Edit」で中に入っていきますね。サンキューページなので、Purchase Confirmationという買ってくれてありがとうと表示するページや、Video Embed、Proceed to Courseというコースの受講に進むようなボタン、HTMLのボタンなどいろいろなものがすでにあります。

今回は「＋Insert new block」で挿入しながら見ていきましょう。

#1. Rich Text

まずは何があるかというと、Rich Textですね。これはリッチテキストを入れることができます。このような感じです。良いですよね。HTMLエディターというか、すごく汎用性のあるものですね。フォントを大きくしたり、いろいろな事ができます。HTML表示もできますね。

#2. Liquid/HTML

次は先ほどもありましたが、Liquid/HTMLですね。LiquidというのはTeachableの中で使っているショートコードのようなもので、Web ページがHTMLの言語で作られているならば、Teachableは半分がLiquidという言語で作られています。確かShopifyが作った言語で、それを使っていますね。

#3. Background Image

次はBackground Imageです。背景画像を入れます。テキストを入れることもできます。

#4. Video Embed

次はVideo Embedですね。埋め込みのビデオです。僕たちはここにアップセルのビデオセールスレターを入れて、そこでさらにサンキューページでアップセルするといったことをしています。Headingでは見出し、Descriptionでは説明文を入れることができます。

Step3. ページエディター1.0で編集できるその他のブロック（Other Blocks）

あとはほかにもこんなにたくさんあるんですよね。ひとつひとつ見てみましょうか。

#1. Course Hero Header

まずはCourse Hero Headerですね。ここにコース名が出ているのですが、これは画像になっています。画像をリプレイスしてあげると、その画像の上にこのテキストが載ります。OVERLAYでは画像の暗さを設定できます。Resetで戻すこともできます。このような感じです。Customize Enroll Buttonで「参加する」と入れるとどう映るか見てみましょう。このようになります。ボタンの文字を変えることもできますね。

#2. Coupon Banner

まだ沢山あります。次はCoupon Bannerです。クーポンが適用されているときの何パーセント割引されますよという表示で、セールスページでよく使いますね。サンキューページではあまり使わなくてもいいかなという感じですね。

#3. Course Description

次はCourse Descriptionです。コースの説明ですね。

#4. Author Bio

Author Bioは講師の説明です。講師はコースごとに割り振られているじゃないですか。InformationのAuthorのところに割り当てられていますね。これが表示されます。そのため、直接は編集できません。Authorを切り替えてください。

#5. Course Curriculum

ほかにはどんなものがあるでしょうか。次はCourse Curriculumです。これもコースのカリキュラムがそのまま反映されて載っているものになります。

#6. Bundled Courses

次はBundled Coursesです。ほかのレクチャーでも解説していますが、Teachableでは1つのコースに対して、バンドルといっていくつもコースを寄せ集めてパッケージのようにできます。これは同じパッケージの中に含まれる別のコースを表示するときに有効です。今のテスト用のコースはバンドルされていないので、なにもありませんよと言われています。

#7. FAQ

次はFAQですね。よくある質問です。

#8. Course Page Closing Letter

次はCourse Page Closing Letterです。これはコースの一番下にコースのまとめを書くようなところですね。普通のリッチテキストエディタでもいいんじゃないかなと僕は思ってしまいました。

#9. Primary Enroll Button

次はPrimary Enroll Buttonです。これは参加するボタンですね。プライマリーとセカンダリーでなにが違うか見てみましょうか。

ちなみに右側のゴミ箱のマークからDelete blockでいらないブロックをデリートできるので、いらないやつを消していきましょう。

ではプレビューします。どのような感じかというと、これですね。プライマリーのエンロールボタンにはこのようにプライシングを選ぶボタンがついています。こちらのセカンダリーのエンロールボタンにはついていません。セカンダリーのほうをクリックするとプライマリーに飛ぶようになっています。

#10. Embed Form

次はEmbed Formです。Mailchimpなどランディングページのフォームがあるじゃないですか。お客さんに情報を入力してもらってMailchimpのリストに登録してもらうフォームですね。「GetResponse」「CampaignMonitor」といったほかのEメールプラットフォームがありますが、これはここにコードを入れてくださいとやるものですね

#11. Testimonial

次はTestimonialです。これも良いですよね。お客さんの声をここに書けます。たくさん配置するとリアル感が出て良いですよね。

#12. Features Courses

次はFeatures Coursesです。注目のコースを3つ並べることができますね。サンキューページで他のコースを紹介したいときに結構良いんじゃないかなと思います。

#13. Homepage Hero Header

次はHomepage Hero Headerです。このように背景の画像があって、ここにテキストを載せたものをヒーローヘッダーと言うのですが、それが簡単に作れます。

#14. Upsell Offer

次はUpsell Offerです。来ました。これです。僕たちは必ずアップセルのオファーを必ず出していますね。確かCourseを選ぶとPricing Planが選べるんですよね。デモのコースを選ぶとPricing Planが選べました。Couponでクーポン適用する、しないを選ぶこともできます。これは結構汎用性が高いですね。

#15.Purchase Confirmation

次はPurchase Confirmationですね。これは買ってくれてありがとうという表示ですね。

#16.Proceed to Course

次はProceed to Courseです。これはもともとあったものですね。すぐコースに入りましょうという表示ですね。

Step3. ソーシャルメディアのアイコンを消す方法

よく左側のソーシャルメディアのアイコンをあまり使わないのですが、これを消す方法はないですかと聞かれることがあります。実はCourse Descriptionを削除すると消えるんです。セーブしてプレビューします。消えましたね。ということでどうしても消えない消えないと思ったらCourse Descriptionを削除してください。今回は以上です。やってみてください。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る