Homepage Lower Banner (Below Courses)

Code Snippet Explanation

This code snippet allows you to create a banner below the courses section on the homepage with configurable title, paragraph text, and call to action button. There are versions for a banner with only text, and a banner with an image on the left of the text.

Installation Instructions

Step 1: Navigate to the Code Snippets section of your domain Theme and paste the below code at the bottom of the Global Code Snippet.

Text Only Version

Snippet Code - Add to Global Code Snippet in Theme:

<!-- START Catalog Lower Banner Text Only Home Page Snippet -->
<div class="catalog-lower-wrapper">
  <div class="catalog-lower-content-wrapper">
    <h2 class="catalog-lower-title">Stuck? We are here to help!</h2>
    <p class="catalog-lower-text">Having an issue with a course, webinar, or other content in Skilljar Academy? Our education specialists are here to help.</p>
    <a href="BUTTON_URL_HERE" class="catalog-lower-cta-button" target="_blank" rel="noopener">Get in touch</a>
  </div>
</div>
<div>
<style>
/* Below you will find a collection of CSS variables you can use to edit styling */
body {
  /* Lower banner stylings */
  --lower-background-color: #E1E9ED; /* page background color behind banner */
  --lower-banner-background-color: #FFFFFF; /* banner background color */
  --lower-banner-text-color: #000000; /* banner text color */
  
  /* Lower banner button stylings */
  --lower-button-background-color: #0065CC; /* banner text color */
  --lower-button-background-hover-color: #133D76; /* banner text color */
  --lower-button-text-color: #FFFFFF; /* banner text color */
}
.catalog-lower-wrapper {
  max-width: 100%;
  color: #002951;
  background-color: var(--lower-background-color);
  padding: 65px 15px;
  margin-top: 50px;
  display: none;
  justify-content: center;
}

.catalog-lower-content-wrapper {
  gap: 10px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 1000px;
  background-color: var(--lower-banner-background-color);
  box-shadow: 0 2px 12px 1px rgba(0,0,0,.15);
  padding: 36px 48px 48px;
}

a.catalog-lower-cta-button {
  background-color: var(--lower-button-background-color);
  border-radius: 4px;
  color: var(--lower-button-text-color);
  font-size: 16px;
  padding: 12px 16px; 
}
.catalog-lower-title{
  color: var(--lower-banner-text-color);
}
.catalog-lower-text{
  color: var(--lower-banner-text-color);
}
a.catalog-lower-cta-button:hover{
  background-color: var(--lower-button-background-hover-color);
}
a.catalog-lower-cta-button:focus{
  box-shadow: 0 0 0 3px #50aedc;
}

/* add left padding to banner for widescreen view filter bar support */
@media only screen and (min-width: 875px) {
  .catalog-filters .catalog-lower-wrapper {
      margin-left: 350px;
  }
}
</style>
</div>
<script>
/* This Javascript checks if we are on the homepage and if so, adds the banner below courses */
document.addEventListener('DOMContentLoaded', function() {
    var catalogRoot = document.querySelector('.sj-page-catalog-root');
    if (catalogRoot) {
        var skilljarContent = document.getElementById('skilljar-content');
        var catalogLowerWrapper = document.querySelector('.catalog-lower-wrapper');
        
        skilljarContent.parentNode.insertBefore(catalogLowerWrapper, skilljarContent.nextSibling);
        catalogLowerWrapper.style.display = 'flex';
    }
});
</script>
<!-- END Catalog Lower Banner Text Only Home Page Snippet -->

Image and Text Version

<!-- START Catalog Lower Banner With Image Home Page Snippet -->
<div class="catalog-lower-wrapper">
  <div class="catalog-lower-content-wrapper">
    <div class="catalog-lower-image-wrapper">
      <img class="catalog-lower-image" src="https://skilljar-public.s3.amazonaws.com/skilljar-academy-v2/pageImages/helpDesk.png" alt="Help Image">
    </div>
    <div class="catalog-lower-text-wrapper">
      <h2 class="catalog-lower-title">Stuck? We are here to help!</h2>
      <p class="catalog-lower-text">Having an issue with a course, webinar, or other content in Skilljar Academy? Our education specialists are here to help.</p>
      <a href="BUTTON_URL_HERE" class="catalog-lower-cta-button" target="_blank" rel="noopener">Get in touch</a>
    </div>
  </div>
</div>
<div>
<style>
/* Below you will find a collection of CSS variables you can use to edit styling */
body {
  /* Lower banner stylings */
  --lower-background-color: #E1E9ED; /* page background color behind banner */
  --lower-banner-background-color: #FFFFFF; /* banner background color */
  --lower-banner-text-color: #000000; /* banner text color */
  
  /* Lower banner button stylings */
  --lower-button-background-color: #0065CC; /* banner text color */
  --lower-button-background-hover-color: #133D76; /* banner text color */
  --lower-button-text-color: #FFFFFF; /* banner text color */
}

/* No need to edit anything below this line */

.catalog-lower-wrapper {
  max-width: 100%;
  color: #002951;
  background-color: var(--lower-background-color);
  padding: 65px 15px;
  margin-top: 50px;
  display: none;
  justify-content: center;
}

.catalog-lower-content-wrapper {
  gap: 50px;
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  max-width: 1000px;
  background-color: var(--lower-banner-background-color);
  box-shadow: 0 2px 12px 1px rgba(0,0,0,.15);
  padding: 36px 48px 48px;
}
.catalog-lower-image-wrapper {
    display: flex;
    min-width: 330px;
    justify-content: center;
}
.catalog-lower-image {
    max-height: 350px;
}
a.catalog-lower-cta-button {
  background-color: var(--lower-button-background-color);
  border-radius: 4px;
  color: var(--lower-button-text-color);
  font-size: 16px;
  padding: 12px 16px;
}
.catalog-lower-title{
  color: var(--lower-banner-text-color);
}
.catalog-lower-text{
  color: var(--lower-banner-text-color);
  padding-bottom: 20px;
}
a.catalog-lower-cta-button:hover{
  background-color: var(--lower-button-background-hover-color);
}
a.catalog-lower-cta-button:focus{
  box-shadow: 0 0 0 3px #50aedc;
}
/* add left padding to banner for widescreen view filter bar support */
@media only screen and (min-width: 875px) {
  .catalog-filters .catalog-lower-wrapper {
      margin-left: 350px;
  }
}
@media only screen and (max-width: 1033px) {
  .catalog-lower-image {
      max-height: 200px;
  }
  .catalog-lower-content-wrapper {
    gap: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
</style>
</div>
<script>
/* This Javascript checks if we are on the homepage and if so, adds the banner below courses */
document.addEventListener('DOMContentLoaded', function() {
    var catalogRoot = document.querySelector('.sj-page-catalog-root');
    if (catalogRoot) {
        var skilljarContent = document.getElementById('skilljar-content');
        var catalogLowerWrapper = document.querySelector('.catalog-lower-wrapper');
        
        skilljarContent.parentNode.insertBefore(catalogLowerWrapper, skilljarContent.nextSibling);
        catalogLowerWrapper.style.display = 'flex';
    }
});
</script>
<!-- END Catalog Lower Banner With Image Home Page Snippet -->

Code Snippet Explanation

This code snippet allows you to create a banner below the courses section for page builder pages by pasting the code directly into an HTML / Text Block widget.

Installation Instructions

Step 1: Navigate to a Page Builder Page and click "Add Content to Page". Select "HTML/Text Block".

Step 2: Paste the code directly into the HTML source code in TinyMCE. Be sure to overwrite the code that is already there (select all -> paste code).

Text Only Version

Snippet Code - Add to Page Builder "HTML/Text Block" widget.

<!-- START Catalog Lower Banner Text Only -->
<div class="catalog-lower-wrapper">
  <div class="catalog-lower-content-wrapper">
    <h2 class="catalog-lower-title">Stuck? We are here to help!</h2>
    <p class="catalog-lower-text">Having an issue with a course, webinar, or other content in Skilljar Academy? Our education specialists are here to help.</p>
    <a href="BUTTON_URL_HERE" class="catalog-lower-cta-button" target="_blank" rel="noopener">Get in touch</a>
  </div>
</div>
<div>
<style>
/* Below you will find a collection of CSS variables you can use to edit styling */
body {
  /* Lower banner stylings */
  --lower-background-color: #E1E9ED; /* page background color behind banner */
  --lower-banner-background-color: #FFFFFF; /* banner background color */
  --lower-banner-text-color: #000000; /* banner text color */
  
  /* Lower banner button stylings */
  --lower-button-background-color: #0065CC; /* banner text color */
  --lower-button-background-hover-color: #133D76; /* banner text color */
  --lower-button-text-color: #FFFFFF; /* banner text color */
}
.catalog-lower-wrapper {
  max-width: 100%;
  color: #002951;
  background-color: var(--lower-background-color);
  padding: 65px 15px;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.catalog-lower-content-wrapper {
  gap: 10px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 1000px;
  background-color: var(--lower-banner-background-color);
  box-shadow: 0 2px 12px 1px rgba(0,0,0,.15);
  padding: 36px 48px 48px;
}

a.catalog-lower-cta-button {
  background-color: var(--lower-button-background-color);
  border-radius: 4px;
  color: var(--lower-button-text-color);
  font-size: 16px;
  padding: 12px 16px;
}
.catalog-lower-title{
  color: var(--lower-banner-text-color);
}
.catalog-lower-text{
  color: var(--lower-banner-text-color);
}
a.catalog-lower-cta-button:hover{
  background-color: var(--lower-button-background-hover-color);
}
a.catalog-lower-cta-button:focus{
  box-shadow: 0 0 0 3px #50aedc;
}

/* add left padding to banner for widescreen view filter bar support */
@media only screen and (min-width: 875px) {
  .catalog-filters .catalog-lower-wrapper {
      margin-left: 350px;
  }
}
</style>
</div>
<!-- END Catalog Lower Banner Text Only  -->

Image and Text Version

<!-- START Catalog Lower Banner With Image  -->
<div class="catalog-lower-wrapper">
  <div class="catalog-lower-content-wrapper">
    <div class="catalog-lower-image-wrapper">
      <img class="catalog-lower-image" src="https://skilljar-public.s3.amazonaws.com/skilljar-academy-v2/pageImages/helpDesk.png" alt="Help Image">
    </div>
    <div class="catalog-lower-text-wrapper">
      <h2 class="catalog-lower-title">Stuck? We are here to help!</h2>
      <p class="catalog-lower-text">Having an issue with a course, webinar, or other content in Skilljar Academy? Our education specialists are here to help.</p>
      <a href="BUTTON_URL_HERE" class="catalog-lower-cta-button" target="_blank" rel="noopener">Get in touch</a>
    </div>
  </div>
</div>
<div>
<style>
/* Below you will find a collection of CSS variables you can use to edit styling */
body {
  /* Lower banner stylings */
  --lower-background-color: #E1E9ED; /* page background color behind banner */
  --lower-banner-background-color: #FFFFFF; /* banner background color */
  --lower-banner-text-color: #000000; /* banner text color */
  
  /* Lower banner button stylings */
  --lower-button-background-color: #0065CC; /* banner text color */
  --lower-button-background-hover-color: #133D76; /* banner text color */
  --lower-button-text-color: #FFFFFF; /* banner text color */
}

/* No need to edit anything below this line */

.catalog-lower-wrapper {
  max-width: 100%;
  color: #002951;
  background-color: var(--lower-background-color);
  padding: 65px 15px;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.catalog-lower-content-wrapper {
  gap: 50px;
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  max-width: 1000px;
  background-color: var(--lower-banner-background-color);
  box-shadow: 0 2px 12px 1px rgba(0,0,0,.15);
  padding: 36px 48px 48px;
}
.catalog-lower-image-wrapper {
    display: flex;
    min-width: 330px;
    justify-content: center;
}
.catalog-lower-image {
    max-height: 350px;
}
a.catalog-lower-cta-button {
  background-color: var(--lower-button-background-color);
  border-radius: 4px;
  color: var(--lower-button-text-color);
  font-size: 16px;
  padding: 12px 16px;
}
.catalog-lower-title{
  color: var(--lower-banner-text-color);
}
.catalog-lower-text{
  color: var(--lower-banner-text-color);
  padding-bottom: 20px;
}
a.catalog-lower-cta-button:hover{
  background-color: var(--lower-button-background-hover-color);
}
a.catalog-lower-cta-button:focus{
  box-shadow: 0 0 0 3px #50aedc;
}
/* add left padding to banner for widescreen view filter bar support */
@media only screen and (min-width: 875px) {
  .catalog-filters .catalog-lower-wrapper {
      margin-left: 350px;
  }
}
@media only screen and (max-width: 1033px) {
  .catalog-lower-image {
      max-height: 200px;
  }
  .catalog-lower-content-wrapper {
    gap: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
</style>
</div>
<!-- END Catalog Lower Banner With Image -->