How to Change the Yellow Banner at the Top of a Course

This article goes over how to replace the yellow banner in the hero section of a course with your own background image. It also shows how to removing the course title, description, and start button in the hero section of a course product.


Content

How to Change the Yellow Banner in Your Course Hero Section

Steps:

  1. Go to the left side menu and click on Memberships.
  2. Hover over Courses at the top of the page.
  3. Click on Products.
  4. Choose the course you want to update.
  5. Click on Customize to open the course customizer.

  1. In the customizer, click on Sections on the left side.
  2. Select Hero on the left side.

  3. Click on the default placeholder background image. You can replace the yellow banner with a solid color, or upload your own custom image:


    1. Choose a new background color:
      • Select a color from the options.
      • If you have a specific hex code, enter it in the provided field.
      • Click OK.
      • Click Save at the bottom to apply the new background color.
    2. To replace the background with an image:
      • Click on the Hero background section again.
      • Click on Choose File.
      • Select the desired image on your computer and double-click it.
      • Click Upload.
      • Click Save at the bottom to update the hero section with your new image.

Removing the Course Title, Description, and Start Button From the Hero Section of a Course Product

/* Removing ALL content in the hero section -- this will remove the course title, description, and button. */
div#hero-section {display: none;}

/* To remove ONLY the Title in the hero section */
div#product-title {display: none;}

/* To remove ONLY the Description in the hero section */
div#product-description {display: none;}

/* To remove ONLY the Button in the hero section */
div#product-status {display: none;}

Steps:

  1. Go to the left side menu and click on Memberships.
  2. Hover over Courses at the top of the page.
  3. Click on Products.
  4. Choose the course you want to update.
  5. Click on the 'Details' tab at the top of the product page.
  6. Scroll down to the 'Advanced' section.
  7. Scroll down to the 'Custom CSS' input area.

generated-image-at-00:00:59


  • Use the provided CSS code to remove elements:
    • To remove everything in the hero section, paste the full CSS code.
/* Removing ALL content in the hero section -- this will remove the course title, description, and button. */
div#hero-section {display: none;}
    • To remove only the title, paste the specific title removal CSS code.
/* To remove ONLY the Title in the hero section */
div#product-title {display: none;}
    • To remove only the description, paste the specific description removal CSS code.
/* To remove ONLY the Description in the hero section */
div#product-description {display: none;}
    • To remove only the button, paste the specific button removal CSS code.
/* To remove ONLY the Button in the hero section */
div#product-status {display: none;}

generated-image-at-00:01:07

  • After entering the desired CSS code, click 'Save'.
  • Refresh the product page to see the changes take effect.