Web Design
How To Customise the Design of Your Teachable Course
10 min read
Web Design
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.
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.
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.
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.
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.
Another particularly annoying aspect of Teachable’s theme section is the process of setting a homepage background image as your header.
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:
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.
Teachable’s Admin view can be quite difficult to navigate at times. For example, course pages are kept separate from all other pages.
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.
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.
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:
(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:
These just don’t look great! We knew that we could build much nicer blocks by ourselves.
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.
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!
Need help with your own online course? We can help write content, design your sales pages or promote it for you.
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).
But here’s how you go about the next steps of the process.
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.
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.
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’.
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.
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'.
Open up your published Webflow website and right click anywhere on the page.
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.
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.
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.
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.
You can find the Head Code Snippets box by clicking on Site and then Code Snippets in the left hand navigation bar.
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?).
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.
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.
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.
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.
And now for the reveal! This is what Skillsprep’s homepage looked like before we got our hands on it:
And this is the homepage now:
To see for yourself, check out Skillsprep's new site here.
Need help with your own online course? We can help write content, design your sales pages or promote it for you.
Stay up to date with the latest marketing, web design, and branding tips and news.
