How to Customize the Look and Feel of Your Course with MemberPress Courses Classroom Mode

Online courses are rapidly growing in popularity. If you’re planning to release your own, it’s important to consider how you can make your lessons stand out as unique, high-quality learning opportunities.

Fortunately, MemberPress Courses offers several ways to customize your course and help it attract students. With our Classroom Mode feature, you can select colors, add course logos, and even incorporate your own CSS while keep your classes easy to navigate.

In this article, we’ll introduce MemberPress Courses and its Classroom Mode setting. Then we’ll walk through all the customization options available. Let’s dive in!

An Introduction to MemberPress Courses

Courses is an add-on for MemberPress that enables you to easily create and sell online classes. With it, you can craft your lesson content using a simple interface similar to the default Block Editor.

It also includes a visual curriculum builder so you can clearly see how your modules are organized.

MemberPress Courses also comes with a Classroom Mode feature, which displays your lessons in a self-contained interface:

Classroom Mode gives your course pages an easy-to-navigate style that enables your students to follow along without distractions. This is the feature you'll use to customize the look and feel of your classes.

How to Customize the Look & Feel of Your Course with MemberPress Courses Classroom Mode (4 Key Tips)

Before you start customizing, you'll need to make sure Classroom Mode is enabled. It should be turned on by default, but you can verify this by heading to your WordPress dashboard and navigating to MemberPress > Settings > Courses:

Simply toggle the feature on. You'll notice that when Classroom Mode is enabled, several options for colors and your logo appear.

While you can adjust these features from this screen, you can also use the WordPress Customizer by clicking on the link at the top of the Courses settings page:

This enables you to preview your changes as you make them. With that out of the way, it's time to start customizing!

1. Add Your Logo

The first customization you may want to make is adding a logo. This could be your company logo, or one specific to your business' courses. Either way, if your goal is to become a thought leader in your field, you'll want a recognizable visible representation of your brand.

To add a logo to your course, simply click on the Select image box at the bottom of the Customizer sidebar. This will open your WordPress Media Library, where you can either upload a new image or choose an existing one.

Click on the Choose image button to make your selection and set the image as your logo:

The image will now appear at the bottom of the sidebar and will be visible along the top navigation bar for all your MemberPress courses. If you ever want to remove or change your logo, simply click on the appropriate button in the Customizer sidebar.

2. Customize Your Course Colors

Another key branding element you can customize are your course colors. There are four options you can use to make up your color scheme: Brand, Accent, Progress, and Menu Text:

If your brand has a style guide that specifies certain colors, you'll generally want to stick to those. This will provide consistency across your website and other channels for a cohesive design that minimizes confusion for students and other users.

Just click on Select Color next to each option and use the color picker to choose your desired hue:

You can also directly enter the colors' hex codes if you can't get them quite right using the picker. If you ever want to go back to the default MemberPress colors, you can simply select the Default button for each of them.

3. Set a Featured Image

If you're familiar with WordPress, then you may know about featured images from using them in your blog posts. They're useful for giving prospective readers an idea of what your content is about before they click through to the full article.

MemberPress Courses enables you to add featured images for your classes, too. Although this isn't technically a feature of Classroom Mode, it is a simple way to spruce up your educational content, especially if you offer multiple courses and want to make them feel distinct.

To set a featured image for a course, head back to your WordPress dashboard and navigate to MemberPress > Courses. From here, click on the course you want to edit.

Then click on the Featured Image dropdown on the right side of the editor, just like you would for a blog post. Click on the Set featured image box:

Choose your image from your Media Library, or upload a new one. We recommend using images that are at least 640px x 480px to ensure the best quality. When you're done, make sure to click on Update to save your changes.

4. Take Customization Further with CSS

Finally, if you have existing brand assets you want to use (or you're a web developer and want to design your own), you can implement them in your course using custom code. You can apply CSS to the Complete and Previous buttons in your courses, as well as the breadcrumb navigation links.

To add CSS classes for these elements, navigate to MemberPress > Settings > Courses. You'll find the CSS fields at the bottom of the page:

Enter the names of the CSS classes you want to apply to each item and click on Update Options to save your changes.

Conclusion

Whether you’re preparing to launch your first course or looking to refresh an existing one, MemberPress Courses has you covered. Not only do we make it simple to create your lessons and structure your curriculum, but it’s also easy to customize your course to speak to your audience.

Classroom Mode enables you to customize your course pages' logo and colors. You can also set featured images for each class and use CSS to further change their look and feel.

Do you have any questions about customizing your MemberPress course? Let us know in the comments section below!

If you liked this article, be sure to subscribe to our newsletter in the box up to your right!