Styling Your Course

How to customize course colors and some example courses to get design inspiration from.

Jason Zook avatar
Written by Jason Zook
Updated over a week ago

We’ve tried to give you as much flexibility as possible to customize the look and feel of our two course templates (Sidebar and Minimal).

From the hover states of your lesson buttons, background colors, sub-lesson colors, and even the lines in the quick jump section of the Sidebar Template, you can customize it all to look and feel exactly like your brand should look.Β 


πŸ™‚ Using the Style Editor for the Overview page of your course

The Overview page of your course is the FIRST page your customer will see. Let's make sure it looks great!

πŸ§‘β€πŸ« Using the Style Editor for the Lesson pages of your course

The lessons are where your teaching-magic happens, so don't skimp on making these pages look great (while also being extremely legible).

πŸ”’ Using the Style Editor for the Login pages of your course (Set Password, Login, and Password Reset)

Yep, that's right, not only do we allow you to customize the content of your Login pages (content changes to these pages are done in the Login Pages section of the main course editor sidebar), but we also let your heart run wild with these admin pages in your course(s).

πŸ’° Using the Style Editor for the Payment pages of your course

Our Payment pages are designed to maximize conversions out of the box but we also want to make sure you can dress them up to your liking! Remember though, the more visual cues you add to a payment page, the less a customer might focus on making a purchase (so customize carefully!)

πŸ„β€β™‚οΈ Using the Style Editor for the Landing pages of your course

We have one Landing page template within our courses and you'd be amazed at how different you can make it look just by changing the colors in the style editor.

⏳ Using the Style Editor for the Expiration bar of your course

If you use our Course Expiration Date feature, you'll want to customize the Expiration bar to match the color scheme of your course.

Note: Feel free to ignore the course layout/lessons below the timer bar within the style editor (it's just there for display only and doesn't relate to your course).

Β 

😍 Here are a couple of existing styled courses created on Teachery for inspiration (using both templates)

Some of the examples shown below use custom CSS. We allow further customization in all course pages and you can learn some CSS tricks here.

Course OVERVIEW pages using the Minimal Template

LESSON pages using the Minimal Template

Course OVERVIEW pages using the Sidebar Template

LESSON pages using the Sidebar Template

Some additional styling goodies and resources:

If you don’t have an existing brand or style/color guide for your course, we highly recommend using Coolors.co to find color styles that look great!

If you don't have an existing logo for your course, we highly recommend Squarespace's Logo Creator. Super affordable and incredibly easy to use.

Did this answer your question?