Code Snippet Explanation

This code snippet allows you to create an HTML page header containing a title, short description, and button in the left column and an image on the right column. 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, and image. Below that, you'll find a set of CSS variables you can use to control common stylings of the header such as colors.

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 Simple Page Header with Button and Image -->
<div class="tt1-background">
  <div class="tt1-wrapper">
    <!-- Text section of header -->
    <div class="tt1-text-section">
      <h1 class="tt1-title">Welcome to Demo Academy</h1>
      <p class="tt1-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="tt1-cta-button button">Get Started</a>
    </div>
    <!-- Image section of header -->
    <div class="tt1-image-section">
      <img class="tt1-image" width="285" height="306" src="https://skilljar-public.s3.amazonaws.com/skilljar-academy/skilljar_illustration-skillet_skV2_LinkedIn.png" alt=""/></div>
  </div>
</div>
<div>
<style>
/* Below you will find global CSS variables you can edit to control hero styles */
body {
  --hero1-background-color: #133D76; /* hero area background color */
  --hero1-text-color: #FFFFFF; /* hero area text color */
  
  /* hero button stylings */
  --hero1-button-text-color: #FFFFFF; /* button text color */
  --hero1-button-background-color: #EF4753; /* button text color */
  --hero1-button-hover-text-color: #FFFFFF; /* button hover background color */
  --hero1-button-hover-background-color: #b6313b; /* button hover background color */
}

/* hero background styles */
.tt1-background {
  background-color: var(--hero1-background-color);
  margin-bottom: 20px;
}

/* text and image wrapper */
.tt1-wrapper {
  gap: 30px;
  margin: auto;
  padding: 50px;
  min-height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

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

/* image section of hero */
.tt1-image-section {
    display: flex;
    width: 40%;
    justify-content: center;
    align-items: center;
}

/* Title styles */
.tt1-title {
  color: var(--hero1-text-color);
  font-weight:600 !important;
  font-size: 40px !important;
  margin: 8px 0 20px 0;
}

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

/* hero button styles */
.tt1-cta-button {
  font-size: 18px;
  color: var(--hero1-button-text-color);
  background-color: var(--hero1-button-background-color);
  align-self: baseline;
  margin: 20px 0 !important;
  padding: 12px 24px;
  border-radius: 3px;
}

/* hero button hover styles */
.tt1-cta-button:hover {
  color: var(--hero1-button-hover-text-color);
  background-color: var(--hero1-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) {
  .tt1-wrapper {
    width: 1260px;
  }
}

/* for mobile - hide hero image and fullscreen text */
@media only screen and (max-width: 815px) {
  /* hide image */
  .tt1-image-section {
    display: none;
  }
  
  /* set text section to 100% width now that image is hidden */
  .tt1-text-section {
    width: 100%;
  }
}
</style>
</div>