what size do teachable course hero header images need to be

Full Answer

What size image do I need for the hero section?

Your web page needs a new image for the hero section or top part of your page. You want this image to be large enough for any size screen but not so large that it will significantly slow down the load time on your page.

What is the best size for a header image?

You know the first thing is to get the dimensions of the image right. If your image is going to be header/hero background image you'll want it to be long and not too tall. I make my header images 1600 x 500px.

What is a header and why do you need one?

For websites selling products, the header is a useful tool for showcasing popular products and promotions. Carousels or sliders are frequently used to rotate through featured products or sections serving as a launching point into key parts of the site. Zara’s header serves almost as a roadblock, highlighting a carousel of collections.

How do I change the size of the hero and background images?

You can swap out your hero and mobile images in your CSS like this: This would show your mobile image on any screen smaller than 768px wide. If the screen size is larger than 768px it would show your background image.

How do you edit a Teachable header?

To change the text of the homepage heading and description, as well as your school name, navigate to the Settings section of your school admin....[back to top]Customize Your HomepageLog in to your Teachable school.Click Site.Select Pages. ... Click the Edit button next to Homepage (the default homepage).

What formats can you upload to Teachable?

We recommend using either 1920x1080 or 3840x2160 (MP4, M4V or AVI) video, no larger than 2 GB. Generally, we also recommend that you compress your videos as much as possible.

How do you customize Teachable?

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.

Can I embed a Teachable course on my website?

For embedding via Iframe, kindly choose “Quick Embed” option. Other options are WordPress plugin or API integration or SDK integration in case that is your preferred option. “Quick Embed” option is good to embed on HTML editors , 3rd party websites like teachable etc.

Is Thinkific or Teachable better?

Bottom line: Thinkific wins for overall course website capabilities, managing bulks sales and content, and quiz/testing capabilities. Teachable wins for student engagement and interactivity, ease of navigation, selling/conversion tools, and customer support.

What is better Teachable or Kajabi?

‍Bottom Line: If you want a robust functionality for testing your students, sending surveys, or simply designing a more interactive learning experience, Kajabi is one of the best Teachable alternatives. Kajabi is everything your online business needs.

What size is Teachable banner?

The recommended header background image size is 1440x780px (JPG, PNG).

Is Teachable customizable?

Personalize the look and feel of your Teachable school.

How do you add custom HTML to Teachable?

Go to your form's site and copy the embed HTML. In your school admin, add a Custom HTML block to your site, sales, or thank you page. Paste in the embed code from your form's site. Publish your page.

Can you integrate Teachable to WordPress?

Teachable + WordPress Integrations Zapier lets you send info between Teachable and WordPress automatically—no code required. Triggers when an admission in Coaching is disabled. automatically do this!

How do you embed on a Teachable?

In the admin sidebar, select the course into which you want to embed content. If the course is not displayed, click View All to see all courses in your school. Click Curriculum and select a lecture, or create a new lecture. Insert the embed code snippet in the Add Custom Code tab of the lecture editor and click Save.

Can you add Teachable to Wix?

Wix Automations + Teachable Integrations Zapier lets you send info between Wix Automations and Teachable automatically—no code required. Uses of your pre-defined automation rules as a trigger. automatically do this! Create a new user in your Teachable school.

What is featured course block?

The Featured Course block displays other courses in your school. The featured courses appear in the same order as they do in your the Courses section of your admin area, where they can also be reordered. The block can also be renamed by changing the text in the Heading field.

What does "self contained" mean in Teachable?

Each of these blocks are self-contained, meaning that the editing and formatting in one block do not affect other blocks. There are many types of blocks available on Teachable, some of which, are available only on specific types of pages.

Can you enroll in a course with two pricing plans?

Instead of being forwarded immediately to checkout when the enroll button is clicked on the sales page, the user is scrolled to the bottom of the page where all pricing plans are displayed. The user must then select an option and click the Enroll in Course button again to advance to the checkout page.

How to create a course in Teachable?

To create a course on your school: From your Teachable admin area, click the Courses tab in the admin sidebar. Alternatively, you can press the plus icon next to Courses and skip to step 3. Click New Course. This will bring you to the new course area where you can input course details, including the Course Title and Course Subtitle.

What is a course image?

Similarly, you can set different images to use on the iOS app (as different dimensions are recommended): Course Image - A small image that is used to represent your course across your school; it appears to your students in the sidebar of the course curriculum and in the course directory of your school.

What is a subtitle in a course?

Subtitle - You can use this to add additional information about the course content. The subtitle will appear beneath the course name in your course directory. Categories - Categories make it easier for students to find the specific type of course they want when they’re looking through your school.

Can you create a course after you create a school?

After you create your school, you'll be prompted to create your first course. However, you don’t need to do this right away. You can always come back later to create your first course—or add additional courses—at any time.

Your go-to sizing guide for hero background images

If your image is going to be header/hero background image you'll want it to be long and not too tall. I make my header images 1600 x 500px.

Size those full page background images correctly too

If you're creating a full page background image you'll want these images to be a bit taller. I make these images 1600 x 1000px or sometimes 1920 x 1200px. I usually do both sizes and then compress them. If the larger image compresses well and isn't too large (still under 400kb) I go with the 1920 x 1200px sized image.

Don't forget how an image might look on mobile

You will want to look at your image on both desktop and mobile. These image sizes typically look best on desktop. So, take a look at them on smaller screens to make sure it still looks good.

Use my Sketch template

To make things easier for you feel free to download the sketch template I use. It has an artboard for the header image, a full page image and a mobile image.

Image Optimization

Once you know the height and width of your image you want to shift your focus to minimizing the size of the image so that it doesn't have a significant negative impact on page load times.

Image Compression Tools

If you haven't done this a thousand times already you should do this for every single image you put up on your website. Every time you do this you are in essence speeding up the load time of your web pages.

Summary

Download this sketch template to know what size to make any hero image on your website.

Our Solution

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

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).

Before and After

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

What are the principles of a website header?

Website Header Key Principles. 1. Branding. Begin with creating an image, graphic, or other visual concepts that show the essence of your product or service. The graphic should show the brand of your business and have a logo as well.

What is a header on a website?

For websites selling products, the header is a useful tool for showcasing popular products and promotions. Carousels or sliders are frequently used to rotate through featured products or sections serving as a launching point into key parts of the site.

What is Zara header?

Zara’s header serves almost as a roadblock, highlighting a carousel of collections. The carousel indicators (dots) are shown vertically in the bottom right while the header fills the screen 100% with navigation overlayed at the top. Its a striking look. Internet.org is another example of a full-frame header with muted top navigation.

What is Atlassian's header?

Big, bold, unconventional: Atlassian. Atlassian’s header is big and bold. Perhaps a nod to its namesake, Atlas the Greek Titan God who “carried the heavens upon his shoulders”. Atlassian’s blue brand is featured throughout hyperlinked copy, call to action buttons and imagery.

How to get image size of a website?

Enter the URL of your website on Chrome Browser and use Inspect to get the exact image size using the following steps: Right + Click / Control + Click (Mac) on the web page. Click Inspect. Click on the 3 dot menu so you can view the Elements at the bottom so the page view is not responsive.

Why do we use image carousels?

An image carousel is used commonly in website headers because they achieve a number of things: Communicates one piece of content at a time to avoid confusion. Relies heavily on visual communication (which is best because people generally scan content, as opposed to read content) Gives prominence to important content.