Skip to main content

Your Hero Image is your brand.

Create a lasting impression with your learners by implementing the Hero Image widget onto numerous Thought Industries page layouts. The Hero Image widget will display a large image on your page. You can also add text by using the Title and Subtitle fields, or a call-to-action button to link the image to a URL.

By using CSS, you can take your Hero Image to the next level! Set the location of the text and CTA button, as well as the look and feel of the image.

Here is some inspiration!

Like what you see? Download the CSS Block attached below to learn how.

These CSS Blocks are designed for a default Thought Industries instance with no existing Custom Code, so any customizations you’ve added may generate conflicts.

 

If not okay to add then remove at will but here is the css I use to make a hero widget not take up a full page or make up its dimensions regardless of resolution/sizing of the original image.  I find this works great using a hero image standard of 1200 to 1500 x 400 to 600 maintaining aspect ratio.

 

Also try a GIF.  It adds appeal.  Hope this helps.

 

/* Dashboard Hero Image One Size For All */
.hero {
  min-height: 50vh; /* 50% of the viewport height, can adjust as needed */
  width: 100vw;
  display: flex; /* Changed to flex for centering */
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0; /* 10px top and bottom padding, 0 left and right */
}
.hero img {
  object-fit: cover; /* Ensures the image covers the space without distortion */
  width: 100%;
  height: 100%;
}

 

Reply


Terms & ConditionsCookie settings