Used to make the Hero row for the K18 theme.  This contains a hero image and knockout text

Step-by-step guide

Hero Rows are a great way to provide a dramatic visual first impression for site visitors.  Hero Rows will span the entirety of the screen and set the tone for the entire site. Hero Rows are typically only used on the home page of your site.

Hero Rows are made up of two different types of Media,  the SINGLE PAGE - HERO IMAGE media & the SINGLE PAGE - KNOCKOUT media.


I. Creating a Hero Image media type

  1. A Hero Image is one of the types of media you may create for your Hero Row.  From your Drupal dashboard, hover over CONTENT in your top menu bar and then click on ADD MEDIA



      2. From the available Media list, scroll down and select SINGLE PAGE - HERO IMAGE



      3. The Hero Image is fairly straightforward in its configuration options.  Options marked with a red * are required. 

Main Configuration Options

Name:  This is the name of your specific Hero Row media and will not be displayed to the end-user.

Image:  The image will be displayed edge to edge on the screen.  For best results, please follow these guidelines:

  • Your image should be cropped to be at least 1600px to 1920px wide. 
  • The file size for your image may not exceed 1 MB.  However, for delivering web content as fast as possible, you would ideally like to compress your image so it is around 300 KB or less.
  • For the fastest web content delivery, it is recommended that you use a .jpg or .jpeg file type. 
  • Since a Hero Image may have text over your image, please avoid using images where text may be placed over people’s faces.


Alt Text:  Alt Text, or Alternative Text, is a required field once you upload an image.  The Alt Text is what will be read by a screen reader for individuals who may be visually impaired and unable to see your image.  Please provide a brief, but accurate description of your image.

Hero Text: The Hero Text will appear in large, bold font on a gold overlay over your image.

Sidekick Text:  The Sidekick Text allows for an additional, smaller headline, or descriptive text, under the main Hero Text.



Main CTA Button:  The CTA (Call To Action) button will appear over the center of your image.  Typically a call to action serves as the main action you would want a user to take when visiting your page.   Examples might be “Apply Now!”, or “Donate”.  In the URL field, you may enter a web link such as ”https://www.uccs.edu” or connect a page you've already created for your site by just typing the page name. 


      4. Publish and save your new Hero Image media




II. Creating a  Knockout media type

  1. A Knockout is a large decorative text where the letters appear to be cut out and you can see the background behind the letters.  From your Drupal dashboard, hover over CONTENT in your top menu bar and then click on ADD MEDIA


      2. From the available Media list, scroll down and select SINGLE PAGE - KNOCKOUT



      3. The Knockout media type is fairly straightforward in its configuration options.  Options marked with a red * are required. 


Main Configuration Options

Name:  This is the name of your specific Knockout media type and what will be displayed on the site.

Image:  The image will be displayed edge to edge on the screen.  For best results, please follow these guidelines:

  • Your image should be cropped to be at least 1600px to 1920px wide. 
  • The file size for your image may not exceed 1 MB.  However, for delivering web content as fast as possible you would ideally like to compress your image so it is around 300 KB or less.
  • For the fastest web content delivery, it is recommended that you use a .jpg or .jpeg file type. 


Alt Text:  Alt Text, or Alternative Text, is a required field once you upload an image.  The Alt Text is what will be read by a screen reader for individuals who may be visually impaired and unable see your image.  Please provide a brief, but accurate description of your image.


      4. Publish and save your new Knockout media




III.  Creating your Hero Row using your Hero Image and Knockout media

  1.   From your Drupal dashboard, hover over CONTENT in your top menu bar and then click on ADD CONTENT.



      2. From the available Content list, scroll down and select UCCS SINGLE PAGE 2018


      3. Give your new page a title and under CONTENT ROW use the drop-down to click and select “Add Single Page - Hero”



       4. Using the Hero Image and Knockout dropdown menus, select the Hero Image and Knockout media you created in the steps above.



       5. Publish and save your Hero Row



      6. Bask in the warm glow of your achievement!



How to Make a Single Page - Hero Slider Row

Used to make the Hero Slider row for the K18 theme.  This contains a multiple hero image and knockout texts.

Step-by-step guide

Instead of a single Hero media, a Hero Slider contains multiple Hero medias. Follow the steps listed below to add a Hero Slider content row.

1. Follow the above steps to create a Hero media.

2. Navigate to the page where you would like to add your Hero Slider.

3. Select "Hero Slider" from the content row list.

4. Select your Hero media previously created from the toggle listed under "Hero Image".

5. Click "Add Single Page - Hero" to add another Hero media.

6. Continue this process until you have added all of the desired Hero media.

7. Save the page, you have now successfully created a Hero Slider.



Content by label

There is no content with the specified labels