How to Model an E-learning Course Page

E-learning has become an essential part of nowadays education system. If you're planning to start teaching and inspire learners from your courses - it's necessary to have rich and SEO-enabled content on your website. This guide will showcase how to build a practical and straightforward content model for the video course pages.

Page structure

Static Fields
Dynamic Zone

Hero Banner section will be in the static zone, so whenever you create new pages - the design and structure will remain the same.
Hero banner:

  • Image field hero banner image with responsive views.
  • Key Text field text that will be displayed on the hero banner.
  • Key Text field with Link for the CTA button label and link to another page.
1 of 5
< PreviousNext >

"Course details" slice is designed to give general information about the course.
Non-repeatable zone:

  • Title field with h2 heading for the title of the section.
  • Rich Text field with multiple formatting options for the general information of the course.
2 of 5
< PreviousNext >

"Course details" slice. The repeatable zone will showcase information like the length, price, language, subject of the course.
Repeatable zone:

  • Image field with 20x20 dimensions for small .svg icons.
  • Key Text field small sentence/number to complete the section where no additional formatting options needed.
3 of 5
< PreviousNext >

"Instructors" slice - this section will highlight the creators/teachers of the course.
Repeatable zone:

  • Image field with 72x72 dimensions for instructor's picture.
  • Key Text field to describe the role or short biography of teachers.
4 of 5
< PreviousNext >

"Instructors" slice - in the non-repeatable zone we'll have a heading and subheading along with a CTA to enroll/purchase the course.
Non-repeatable zone:

  • Title field with h3 heading for the subheading title of the section.
  • Rich Text field with multiple formatting options for the general information of the course.
5 of 5
< PreviousNext >

We highly recommend checking out other content modelling examples for video courses homepage and authors/instructors that will help you to build a complete video course website.

How to set it up in Prismic

  • Create a new repeatable Custom Type
  • Copy the JSON below and paste it under the "JSON Editor" of this new Custom Type
CopyExpand/Collapse

What editors will see

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call