Code Snippet Explanation

This code snippet allows you to create an HTML page header containing a large background image, title, short description, and button - all left aligned. It is accessible and mobile responsive out of the box. 

There is HTML at the top of the snippet to edit the text contents, button destination URL. Below that, you'll find a set of CSS variables you can use to control the background image and common stylings of the header such as colors.

Note: You'll need to already have a background image hosted on a public URL to use this snippet. You can also host these using the Skilljar TinyMCE editor by clicking the insert image button, upload an image from your computer and then save the URL it generates to use in the code snippet below.

Installation Instructions

Step 1: Navigate to the Catalog Page object you want to install this code snippet on and scroll down to "Display Settings" > "Header HTML".

Step 2: In the TinyMCE editor, click the "source code" button to open the HTML editor. Below is what this button looks like: 



Step 3: Copy and paste the code from the snippet below into the editor and then edit the HTML and CSS variables to your liking.

Here's what it looks like:

Snippet Code - Add to HTML Source Code of Catalog Page Header

<!-- START Page Header with BG Image and Left Aligned Text -->
<div class="tt3-background">
  <div class="tt3-wrapper">
    <!-- Text section of header -->
    <div class="tt3-text-section">
      <h1 class="tt3-title">Welcome to Demo Academy</h1>
      <p class="tt3-sub-title">Brand new to Demo? Our onboarding courses will help you plan, design, and launch a world-class training program.</p>
      <a href="BUTTON_LINK_HERE" class="tt3-cta-button button">Get Started</a>
    </div>    
  </div>
<div>
<style>
/* Below you will find global CSS variables you can edit to control hero styles */
body {
  --hero3-background-image: url(https://everpath-course-content.s3-accelerate.amazonaws.com/instructor%2F18mdppw3prvnxlpfsl7akpcj0%2Fpublic%2F1716335230%2Fmountains.1716335230688.png); /* hero background image */
  --hero3-background-color: #A9BBC5; /* hero area background color */
  --hero3-text-color: #000000; /* hero area text color */
  
  /* hero button stylings */
  --hero3-button-text-color: #FFFFFF; /* button text color */
  --hero3-button-background-color: #EF4753; /* button text color */
  --hero3-button-hover-text-color: #FFFFFF; /* button hover background color */
  --hero3-button-hover-background-color: #b6313b; /* button hover background color */
}

/* hero background styles */
.tt3-background {
  background: var(--hero3-background-image);
  background-color: var(--hero3-background-color);
  margin-bottom: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* text and image wrapper */
.tt3-wrapper {
  margin: auto;
  padding: 50px;
  min-height: 450px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* text section of hero */
.tt3-text-section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Title styles */
.tt3-title {
  color: var(--hero3-text-color);
  font-weight:600 !important;
  font-size: 40px !important;
  margin-bottom: 20px;
}

/* sub title styles */
.tt3-sub-title {
  color: var(--hero3-text-color);
  width: 100%;
  font-size: 20px !important;
  margin-bottom: 10px;
  max-width: 600px;
}

/* hero button styles */
.tt3-cta-button {
  font-size: 18px;
  color: var(--hero3-button-text-color);
  background-color: var(--hero3-button-background-color);
  align-self: baseline;
  margin: 20px 0;
  padding: 12px 24px;
}

/* hero button hover styles */
.tt3-cta-button:hover {
  color: var(--hero3-button-hover-text-color);
  background-color: var(--hero3-button-hover-background-color);
}

/* change header width to 100% for fullscreen support */
.catalog-center-width.one-col-full {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
}
/* remove default padding */
.storefront .top-row {
  padding: 0;
}

/* remove the 6px of left padding that catalog-header normally has */
.catalog-center-width .catalog-header {
  padding: 0;
}

/* fix edges of hero content to align with tiles on widescreen view */
@media only screen and (min-width: 1213px) {
  .tt3-wrapper {
    width: 1260px;
  }
}
</style>
</div>