fbpx

The CourseUp Blog

Master Your Online Course Tech

How to Add a Logo to Your Teachable Footer

Heads up! This post may contain affiliate links. That means if you click on a link and then make a purchase, we might make a small commission. But rest assured, we ONLY recommend tools that we know, love and use in our own business.

Teachable footers are super simple. Your school name, legal notices and some social media links. But plenty of course creators also want to include their logo in their footer.

With built-in Teachable features? Not possible.

With a sneaky bit of CSS? Totally possible!

Step 1: Getting the custom code

Highlight and copy the following code to your clipboard, ready to paste into Teachable:

ul.footer__list:first-of-type:before {
    content: url(https://i.ibb.co/3vnksmB/Taskerly200.png);
    display: block;
    margin-bottom: 5px;
}

Step 2: Adding your logo to the code

In order to add your own logo, you’ll need to resize it to around 200px width and have an image URL for it. There are a few ways to turn the logo saved on your computer into one with a URL.

Option 1: Upload the image to Teachable.Open up any page editor in Teachable (a sales page builder or home page editor, for example). Add your image as an image block, then save and view the page. Right click on the image on the page and then click Copy Image Address. Your image’s URL is now on your clipboard ready to be pasted.

Option 2: Upload the image to an image hosting site.
Personally, I like to use ImgBB. Just upload your image and then use the Embed codes dropdown to display the HTML Full Linked code. Your image URL is the one right after the bit that says <img src” and it likely ends in either .jpg or .png.

Now you have your image URL, simply replace the URL in the code snippet with your own. If you’re using our free code snippet, you’ll want to put your logo right between the brackets, replacing all of the yellow URL below:

content: URL(https://i.ibb.co/3vnksmB/Taskerly200.png);

Step 3: Installing your custom code

This is the easy part!

  1. Copy the code to your clipboard.
  2. Open up your Teachable dashboard.
  3. Head to Site > Code Snippets.
  4. Paste your code into the CSS section.
  5. Click Save.

That’s it! Your logo should appear nicely in your footer. If it doesn’t look great, try tweaking some of the CSS margins to move it around a little, or try uploading the logo at a different size.

Our Favourite Tools
Heads up! Some of these are affiliate links so we may earn a commission if you sign up.

FREE

The Ultimate Teachable Set-Up Checklist

This checklist will give you a comprehensive rundown of every essential setting in Teachable, including best practices for sales pages, affiliate programs, curriculum structure and much more. Don’t launch without this list!

FREE

The Anatomy of a Killer Course Sales Page

Unsure what to put on your sales page? Find out the exact sections you need to convert visitors into students.

FREE

SERVICES

Work With Us

Ready to work with a Teachable Expert? Whether you’re struggling with your course tech or just don’t have the time to deal with it yourself, we’re here to help.

Ready To Work With A Teachable Expert?

Whether you’re struggling with your course tech or just don’t have the time to deal with it yourself, we’re here to help.