Hero Code

Hero Code is useful to layer text and other content on top of full width inline images in a gallery. It is great for marketing or landing pages where you want to focus more on a big picture “feeling” with your images and less on text details.

This class can be used in any gallery on any page and requires the full width inline layout. The main code is a class added to a DIV container, and within that container, any other code can be used including buttons, responsive images, embedded videos, etc.

The Top Gallery image above contains a simple example. 

Instructions

  • In the Gallery, select the Full Width Inline Layout.
  • Add an image. 
  • Hover over the top right corner of the image to see the three dot menu; click on that and select Edit. 
  • Click Source to view the code. 
  • Copy and paste the hero code you want from the options below.
    • The highlighted section in the Sample defines the alignment and can be swapped with another alignment option. 
  • Add the content you want to appear on top of your image.
    • Text styles optimized for this layout are Heading 2 (<h2> </h2>) and Paragraph (<p> </p>).
    • Mix and match other elements, such as Button Links and embedded videos, for best effect.
  • Make sure you close the DIV container with </div> after your content. 
  • Save Changes in the image editor, Save again in the page editor, and preview your page to review your work!

Hero Code Sample

<div class="hero-content left">
    <h2><strong>This is the title...</strong><br />
    This is a subtitle</h2>
 
    <p>THIS IS TEXT.</p>
    <a class="btn btn-primary btn-lg text-right" href="LINK">Button</a>
</div>

Additional Code Options

Left Alignment

class="hero-content left"
class="hero-content top left"
class="hero-content bottom left"

Right Alignment

class="hero-content right"
class="hero-content top right"
class="hero-content bottom right"

Center Alignment

class="hero-content center"
class="hero-content top center"
class="hero-content bottom center"

Other Text Alignment Code
These can be used on any code throughout the website. 

class="text-right"
class="text-center"

 

 

We are always happy to assist with training.

Contact Tentaroo
Schedule a Training