How To Customise the Design of Your Teachable Course

10 min read
Becky Lushey
Laptop with code on the screen

We were approached recently with a design query. A past client of ours, a lovely lady named Kristina Lushey, wanted to get some advice on how she could make her Teachable course look good.

She’d come up with a great set of courses to help teach freelancers the basics of building a business for the first time and decided to use Teachable to host her courses.

Screenshot of Teachable's homepage

Teachable had given her access to a fantastic set of tools to track her customers, promote her services and handle her sales, but she just couldn’t get her courses to look right using its website editor.

We said we’d see what we could do. Initially, we thought that maybe we could create some beautiful infographics to insert into the website’s simplistic builder.

But once we got into the weeds with Teachable’s builder, we came across limitation after limitation that meant our design ideas couldn’t be executed in the way we wanted.


Teachable’s Limitations

Setting a theme

To simplify the process of designing your website, Teachable makes you set a theme across the entire site that dictates how fundamental aspects of your design is styled, such as fonts and colours.

Screenshot of Teachable's colour section

While you can use a hex code to set specific colours for your theme, Teachable only have 11 fonts to choose from and unfortunately you can’t upload your own font.

Whichever font and set of colours you choose will be used for everything across the entire site. Your page titles, headers, body text, buttons, navigation bar - everything.

Consistency in design is obviously desirable but making this fixed on every page of your website can often cause issues.

Screenshot of Teachable's selection of fonts

For example, many designers distinguish page titles by using a different font, not just by adjusting the font size.

Plus, when it comes to colours, you might want the homepage link in your navigation bar to be a specific colour (such as the colour of your logo), separate from the rest of the navigation bar links. With Teachable, you can’t do this.

Fixed header

Another particularly annoying aspect of Teachable’s theme section is the process of setting a homepage background image as your header.

Screenshot of Teachable's header section

While you can upload any image you want to be your header, Teachable automatically centers your website title in the middle of this image.

You can’t get rid of the text or move it to a more suitable position. You can’t even edit the text or change the colour. It’s always white, it’s always in the dead center and it’s always exactly whatever you named your homepage.

Teachable are aware that this can make it difficult to read the text so they have a slider to create a dark overlay in their settings. However, this only helps to soften the problem rather than fixing it altogether.

For example, here’s what Skillprep’s header originally looked like:

Screenshot of Skillsprep's old header

Not too bad, but the center of the image looks too busy and the laptop keyboard underneath the text is distracting for the eye.

Plus, by using the dark overlay to help see the text, the image underneath is dulled and has less impact.

Navigation issues

Teachable’s Admin view can be quite difficult to navigate at times. For example, course pages are kept separate from all other pages.

Screenshot of Teachable's Pages tab

To edit your homepage you have to click on ‘Site’ on the left hand side navigation bar and then click on ‘Pages’. Here you can either ‘Preview’ these pages or edit them using the teal button on the right hand side.

To edit course pages, on the other hand, you have to click the book icon on the left hand side navigation bar. This will then take you to your course directory. Click on the course you want to edit, then click ‘Pages’ on the left hand side.

Screenshot of Teachable's Course Pages

Here you will be able to see the three default pages that come with a course: the sales page, the checkout page and the thank you page. The sales page is the main page you’ll be able to edit in the same way you can edit the homepage.

Creating your homepage or course page

The way Teachable enables you to create pages for your website is by using certain types of blocks that you can order. These blocks include:

  • Rich Text
  • Liquid / HTML
  • Background Image
  • Video Embed
  • Course Hero Header
  • Coupon Banner
  • Course Description
  • Author Bio
  • Course Curriculum
  • Bundled Courses
  • FAQ
  • Course Page Closing Letter
  • Primary Enroll Button
  • Secondary Enroll Button
  • Embedded Form Block
  • Testimonial
  • Featured Courses
  • Upsell Offer
  • Proceed to Course

(Note: if you would like any insight into how to use these blocks, check out this article by Teachable.)

This basic layout might be useful enough for some people, but as web designers, we found it to be far too limiting.

For example, the only way to include a link to your course pages on your homepage is by adding a ‘Featured Courses’ block. This is what that looks like:

Screenshot of Teachable's course page blocks

These just don’t look great! We knew that we could build much nicer blocks by ourselves.


Our Solution

Ever the perfectionists, we did a bit of digging to see what could be done.

Teachable offer a Power Editor setting for developers that means you can create your website using code.

We knew that coding an entire website would be far too time consuming and costly for Kristina so we kept searching for ideas with the knowledge of this in the back of our minds.

Screenshot of Teachable's Power Editor

However, the realisation that we could using code to affect Teachable’s design stuck in our mind.

As web designers, we work on a regular basis with a program called Webflow to design, build and launch responsive websites created with clean, simple code.

Webflow allows you to export code once you’ve created your finalised website, meaning that we could inject this code into Teachable’s platform and it would spit out our dream website.

Here was our solution!

Once you’ve created your finalised website in Webflow, you can inject this code into Teachable’s platform to replicate your dream website.

Get in Touch to Discuss Your Online Course

Need help with your own online course? We can help write content, design your sales pages or promote it for you.

Get In Touch

How To Guide

Now, we can’t explain how to build your website in Webflow because it would take years to explain (plus Webflow has its own University dedicated to that topic).

Screenshot of Webflow's University

But here’s how you go about the next steps of the process.


Step 1. Publish your site

This might seem a bit strange at first, but in order to keep the process of transferring the code from Webflow to Teachable as clean and error-free as possible, you have to publish your Webflow website.

Thankfully, you can publish up to two pages for free using Webflow without having to pay for hosting.

By doing this, you’ll be able to ensure that the code you insert into Teachable effectively tells your computer to refer back to the assets that are being hosted on your Webflow site. That way assets such as images will load much faster and are much less likely to break.


Step 2. Disable Subdomain Indexing

Of course, you don’t want users to be able to find your Webflow site via search engines because you want all of the traffic to go to your Teachable site instead.

Screenshot of Webflow's button to Disable Subdomain Indexing

To stop search engines from registering your site, go into Project settings and click on the SEO tab at the top of the page. Under the header ‘Indexing’, you’ll find a button that allows you to ‘Disable Webflow Subdomain Indexing’. Click ‘YES’.


Step 3. Unminify your code

Next, you need to ensure that the code we'll be transferring into Teachable isn't minified. Minified code basically means the line breaks have been removed.

Unfortunately, Teachable needs these breaks to be able to read the code within a Liquid/HTML box.

Screenshot of Webflow's Minify settings

Thankfully, Webflow has a button you can click to ensure that your code retains all of its line breaks.

Simply go into Project settings and click on the Hosting tab at the top of the page. At the bottom of the page, under the header 'Advanced Publishing Options', click the 'OFF' button next to 'Minify HTML'.

Step 4. View your page source

Open up your published Webflow website and right click anywhere on the page.

Screenshot of right clicking on a webpage

Select “View Page Source” in order to open up the source code behind your web page. This source code is what you’re going to inject into Teachable in order for it to duplicate the design you created in Webflow.


Step 5. Split the code into the head and the body

Instead of using Teachable’s Power Editor to add this code, we’re keeping this process as simple as possible in order to avoid making any major errors that could break the site.

Therefore, we’re using the HTML gained from the source code to create your website.

This HTML will be injected into both Teachable’s ‘Head Code Snippets’ box and into a Liquid/HTML box on your page of choice.

Because Teachable has different boxes for the head and the body, you have split the source code into these separate parts.

Screenshot of Skillsprep's View Source

The quickest way to do this is to use a keyboard shortcut to search for the chunk of code that starts with <head> and ends with </head>. This keyboard shortcut is either Windows Key + F or Command + F for Macs.


Step 6. Add the head to Teachable’s Head Code Snippets box

Copy the head, highlighting just the text that is in between the two <head> elements, and paste it into Teachable’s Head Code Snippets box.

Screenshot of the Head Code Snippets box on Teachable

You can find the Head Code Snippets box by clicking on Site and then Code Snippets in the left hand navigation bar.


Step 7. Add the body into a Liquid/HTML box

Whereas the head is injected into ‘Head Code Snippets’, the body has to be added into a Liquid/HTML block on your desired homepage or course page (see what we mean about how complicated it is to navigate around Teachable?).

Screenshot of Liquid/HTML block in Teachable

On your desired page, delete all of the blocks that are in the ‘Edit Page’ section and turn off your Navigation Bar and Footer in the ‘Settings’.

Add a single Liquid/HTML block and paste in the code for the body.


Step 8. Fix errors

If your website doesn’t look exactly how it does in Webflow, that’s because Teachable is overriding your styles. You can fix this by using some simple CSS.

To correct most of these errors, you’ll need to look into how to apply Important and where to add your custom CSS.

To find the CSS class of a broken element, right click on the published Teachable page you want to edit and select Inspect.

Click on the icon at the top of the page that looks like a cursor clicking on a square. This is the element selector tool. By using it to hover over the element you want to amend, you’ll be able to find out the class.

Screenshot of how to use the element selector tool in Inspect

For this example we've used the H1 (otherwise known as the page title) on Skillsprep. By using the element selector tool, we discovered that this element has a name of 'h1.c-heading-1'. The part after the full stop is the class so 'c-heading-1' is the class we want to edit.

If Teachable was causing this element to revert back to the colours we had to set in our theme, we can override this.

Say we want the colour to be the same purple as the sign up button. First of all we would need to find out the hex code for that colour which is #8546bc.

Screenshot of CSS box on Teachable

Then within the CSS box on the Code Snippets page we would paste the following code: .c-heading-1 {color: #8546bc !important;}

This would change the H1 to that purple colour, overriding any Teachable colour that affected the H1.

To learn more about CSS styling, we recommend checking out this article by w3schools.

If any of this is going over your head, get in touch! We’re always happy to help out.


Before and After

And now for the reveal! This is what Skillsprep’s homepage looked like before we got our hands on it:

Screenshot of Skillprep's old homepage

And this is the homepage now:

Screenshot of Skillsprep's new website

To see for yourself, check out Skillsprep's new site here.

Get in Touch to Discuss Your Online Course

Need help with your own online course? We can help write content, design your sales pages or promote it for you.

Get In Touch

Related Posts

Posts you may also like