Course banner as a header of the Units & footer

Owned by Esteban Etcheverry
Last updated: Nov 14, 2022
1 min read

Header

We can add a Course Banner in all elements

  1. Create the banner image; Recommended Image size: 3200 × 600px

  2. Save the images file as: course_banner.png

  3. Go to Studio and navigate to the Unit and Add an HTML / Raw HTML component.

  4. Insert the following code:

<p style="text-align: center;"><a><img src="/static/course_banner.png" alt="open-edx" width="100%" margin-left:="" auto="" margin-right:="" class="center" /></a></p>

 

5. Save the component and you will see the banner on top of the content section.

6. Copy these steps in all the content Units where you want to see the course banner.

 

 

 

Footer

We can add a Course Banner in all elements

  1. Create the banner image; Recommended Image size: 3200 × 600px

  2. Save the images file as: course_footer.png

  3. Go to Studio and navigate to the Unit and Add an HTML / Raw HTML component.

  4. Insert the following code:

<p style="text-align: center;"><a><img src="/static/course_footer.png" alt="open-edx" width="800" margin-left:="" auto="" margin-right:="" class="center" /></a></p>

  1. Save the component and you will see the banner on top of the content section.

  1. Copy these steps in all the content Units where you want to see the course banner.