If you’re familiar with the Teachable blog, you may have noticed how strongly we feel about the importance of a good sales page. We’ve even written several blog posts about writing sales copy that converts.

But once you have the perfect copy to make your course offer seem irresistible, you need to get your users to actually read it.

That’s why the design of your sales page is so important.

At Teachable, we strive to learn from the thousands of online schools hosted on our platform and work hard to give you everything you need to create compelling and beautiful sales pages.

Yet, we still get excited when we look at some of the stunning sales pages our instructors put together:Teachable Sales Pages.png(From left to right, sales pages from Every-Tuesday, XO Sarah, Jessica Sprague, and Melyssa Griffin)

In this week’s post, we’re giving away 5 custom page blocks to take your sales pages to the next level. These blocks will give you additional templates to provide social proof, display personal statements, and present your sales copy in exciting and engaging ways.

Before I dive in, though, I want to tell you about an event we have coming up: The Ultimate Sales Page Design Masterclass.

The master class is a live, 90-minute workshop for Teachable instructors. You'll leave with:
- A professional course sales page you can use to start enrolling more students
- Our tried and true, 100% reusable sales page template, to use on every sales page you ever create

The master class will be perfect for you if you are just getting started on your sales page (and these code snippets are feeling a bit overwhelming) or if you have an existing course sales page you'd like to optimize to attract more students to your course.

RSVP and get all the details here:

Click here to save your spot!

How to add these custom blocks to your Teachable sales page


  1. To start creating blocks using these templates, navigate to the admin area of your school, choose the course you want to edit, and select Sales Page from the sidebar. This will bring you to your sales page editor:1-salespageeditor.png
  1. Add a custom Liquid/HTML block by hovering over an existing block and choosing it from the selection wheel:2-newliquidblock.png
  1. Copy and paste the code from your chosen template into the new block.3-pastecode.png
  1. Customize the code to be specific to your course. In this section we’ll cover how to do this on each of the five templates, noting the customizable areas with instructions in red. You’ll also see examples of how the raw templates will look on a sales page.

The Personal Letter Block

This template allows you to feature your personal story in letter form, to address your visitors in a more personal way.4-letter.png

<div class="closing-letter-row">
 <div class="container">
     <div class="row">
       <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
         <h2 class="section-title">A Letter from [Instructor Name]<br>
           <small>[Best-selling instructor or other tagline]</small></h2>
           <p>&nbsp;</p>
           <p>Put the content of your letter inside paragraph body tags.</p>
           <p>Have multiple paragraphs by adding more paragraph tags and writing content inside them.</p>
           <br>
           <p><strong>John Doe</strong>, AwesomeCourse.com
           </p>
         <br><br><br><br><br>
       </div>
     </div>
   </div>
</div>

The Featuring Insights Block

Have influential people contributed to your course? Did you include interviews in your course content? This block will allow you to highlight their profiles.

This template has space for eight featured people in two rows. To adjust according to how many people you’re featuring insights from, simply remove or add more of the sections that begin with <div class="person col-sm-3 col-xs-11"> and end with </div>.

If you want to only have one row of people, remove one of the sections starting with <div class="row"> all the way up until the next enter space.5-johndoe.png

<div class="featuring-row description-row">
 <div class="container">
   <div class="row">
     <div class="col-lg-12 col-md-12">
       <h1 class="section-title"><center>Featuring insights from:</center></h1>

       <div class="row">
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>First Person’s Name</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>Second Person’s Name</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>Third Person’s Name</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>Fourth Person’s Name</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
       </div>

       <div class="row"> 
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>First person in second row</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
         </div>
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>Second person in second row</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>Third person in second row</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-description"><strong>Fourth person in second row</strong><br><em>Made $1M+ with impressive course, Founder of Impressive Company</em></div>
         </div>
       </div>

       <br><br>
     </div>
   </div>
 </div>
</div>

<style>
/* Featuring Insights From */
.featuring-row h2.section-title { margin-top: 0px; }
.featuring-row .large-img-rounded { width: 120px !important; height: 120px !important; margin-bottom: 15px; }
.featuring-row .person { text-align: center; margin-bottom: 20px; margin-top: 50px; font-size: 15px; line-height: 23px; }
.featuring-row .person em { font-weight: 200; }
.featuring-row .bonus { font-style: italic; font-size: 25px; margin-top: 50px; font-weight: 200; text-align: center; }
.featuring-row .color-bold { color: #57986d; font-weight: bold; }
.featuring-row .bonuses .point { margin-top: 50px; margin-bottom: 30px; }
.featuring-row .bonuses .point img { height: 35px; }
.featuring-row .bonuses .point .point-description { line-height: 26px; margin-bottom: 10px; }
</style>

The Multiple Instructors Block

If your course is taught by multiple instructors, use this template to feature their names, photos, and bios.6-instructors.png

<div class="container block-padding">
   <div class="row">
       <div class="col-xs-1 visible-xs"></div>
       <div class="col-lg-8 col-lg-offset-2 col-xs-10 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
       <h2>Your Instructors</h2>
       <br>
       <!-- AUTHOR ONE -->
       <div class="instructor-single row">
           <div class="col-lg-2 col-md-2 col-sm-2 text-center">
               <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
               <div class="author-name">
                   Author One
               </div>
           </div>
           <div class="col-lg-9 col-md-8 col-sm-8">
               <p><strong>John Doe</strong> is the Co-Founder at Impressive Company. Previously, he taught people how to do impressive things. He has a cat and loves animals.</p>
           </div>
       </div>
       <!-- AUTHOR TWO -->
       <div class="instructor-single row">
           <div class="col-lg-2 col-md-2 col-sm-4 text-center">
               <img class="large-img-rounded img-responsive" src="http://freelanceme.net/Images/default%20profile%20picture.png">
               <div class="author-name">
                   Author Two
               </div>
           </div>
           <div class="col-lg-9 col-md-8 col-sm-8">
               <p><strong>John Doe</strong> is the Co-Founder at Impressive Company. Previously, he taught people how to do impressive things. He has a dog and loves animals.</p>
           </div>
       </div>
       <br>
     </div>
 </div>
</div>
<style>
.block-padding {
   padding-top: 50px;
   padding-bottom: 50px;
}
 
.instructor-single {
   padding-bottom: 30px;
}
 
.instructor-single p {
   font-size: 16px;
}
 
.author-name {
   font-weight: bold;
   margin-top: 5px;
}
</style>
 

The Recent Results Block

With this template, you can add more social proof to your sales page by featuring names, photos, and quotes from students who have taken your course and enjoyed it or been successful.7-results.png

<div class="featuring-row recent-results-row">
 <div class="container">
   <div class="row">
     <div class="col-lg-8 col-md-8 col-lg-offset-2 col-md-offset-2">
       <h2 class="section-title recent-results-title">Recent Results</h2><br>
       <div class="row">
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive results-image" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-person"><strong>John Doe</strong><br><em class="site-name"><a href="http://example.com" target="_blank">Impressive Course Course</a></em></div>
         </div>
         <div class="person col-sm-9 col-xs-11">
           <p class="point-description">Quote about the course. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         </div>
       </div>
       <br><br>
       <div class="row">
         <div class="person col-sm-9 col-xs-11">
           <p class="point-description">Quote about the course. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         </div>
         <div class="person col-sm-3 col-xs-11">
             <img class="large-img-rounded img-responsive results-image" src="http://freelanceme.net/Images/default%20profile%20picture.png">
             <div class="point-person"><strong>John Doe</strong><br><em class="site-name"><a href="http://example.com" target="_blank">Impressive Course Course</a></em></div>
         </div>
       </div>
     </div>
   </div>
   
 </div>
<style>
.recent-results-row { text-align: center; padding-top: 50px; padding-bottom: 50px; background-color: #ecf0f1; }
.recent-results-row .recent-results-title { margin-bottom: 13px; }
.recent-results-row .results-image { margin-bottom: 20px; width: 100px; }
.recent-results-row .point-person { line-height: 20px; }
.recent-results-row .point-description {
 font-size: 16px;
 line-height: 25px;
 padding: 20px 18px;
 background: #fff;
 border-radius: 5px;
 border: 1px solid #ccc;
 margin-top: 2px;
}
.recent-results-row .site-name { font-size: 14px; margin-top: 3px; display: block; }
</style>

The Dynamic FAQ Block

This template allows you to create a dynamic FAQ section, where students can simply click on the question to reveal the answer.

This one is a little different in that you won’t modify the template itself to change or add content. Instead, go into your original FAQs block to add or modify questions to your liking. This template will pull content from that block. When you’re done making changes, delete the original FAQs block (so you don’t have two of them showing up on your sales page) and save your changes.

If you want to add or modify questions in the future, simply add the original FAQs block back in, make the changes, and delete it again. Any changes you make will apply to this block.8-faq.png

<div class="faq-row padded-section">
   <div class="container">
       <h2><center>Frequently Asked Questions</center></h2>
       <br>
       <br>
       <div class="row faq-question">
         
       </div>
   </div>
</section>
<style>
.faq-row .faq-question { text-align: left; margin-bottom: 30px; }
.faq-row .faq-question .question-wrapper {
   border-bottom: 1px solid #E7E7E7;
   padding-bottom: 20px;
}
.faq-row span.plus { color: orange; }
.faq-row .faq-question h3.question { line-height: 30px; margin-bottom: 4px; }
.faq-row .faq-question .answer { font-weight: 200; font-size: 16px; line-height: 27px; }
</style>

How you can take this further

This post is just a baseline on how to improve the design of your sales page.

We'd love to see you take your school beyond what's explained in this post and we’ve created an exclusive workshop just for that. Don’t miss our Ultimate Sales Page Design Master Class next week!

Click here to save your spot!

Limitations (that I could find)

The content on some of these blocks is static

Because of the way these blocks are built, you will have to go into the blocks to change the content displayed in them. For example, if you decide to use the Multiple Instructors Template and want to update the author information, instead of going to Site > Authors in the Admin Area as you would usually do it, you will need to go directly to the sales page editor and update the information in the block.

Did you find this useful? Want to see more content like this?

Your feedback is very important to our content creation process.

If you found this useful (or didn’t), found something I missed (I’m sure I did), think of something cool we could add to this process, want to see a similar post about another topic, or just want to say hi - pleeease add a comment below!

I’ll personally read and answer every one.

Back to Blog
Eduardo Yi

Written by Eduardo Yi

Eduardo Yi is a content marketer at Teachable, the platform that allows anyone to teach online, where he gets to work on the intersect of his four passions: education, digital marketing, and incomplete lists.