Homepage Element Tutorial Videos

Training Videos

Certain Drupal elements are placed on a website home page using a different editing system than the editing system used on your interior basic pages. However, some of these elements can also be added to your basic pages, following the instructions in these videos. These elements can be used to improve the overall aesthetics of a web page, as well as the functionality of your content by making it more scannable by your end users.

Keep in mind, you'll want to set standards within your own website so that your primary navigation pages feel more important than a page beneath your primary navigation. In most cases, many of these elements are best used on your primary navigation landing pages. However, tabs and accordions can be helpful on your detail pages that reside at lower levels in your website.

Getting Started - The Basics

Please watch this video prior to any specific element video because provides basic background knowledge that serves as the foundation of all other instructions.

What is a Node ID? Another must-know! 

We never link to a fully spelled-out URL when linking to another page in the www.kent.edu family. Instead, it is critical to always link to a node ID to prevent broken links from occurring and to protect the overall health of your website.


node ID


Node ID Video Tutorial

Access Training Clips for Specific Drupal Homepage Elements

The below set of videos can be referenced to help you include elements into your paragraph bundles on your home page. Be sure to watch the "getting started" and "node ID" videos first (located above), as well as attend a Drupal I training prior to using these elements. 

Hero Slider


hero slider


Description: Large sliding carousel of images. These can link to a full story or just include images.

Hero Slider Video Tutorial

Call to Action List


call to action links


Description: Horizontal link blocks with image backgrounds

Call to Action List Video Tutorial

Traditional Teaser


Traditional Teaser


Traditional Teaser Video Tutorial

Ribbon Teaser


ribbon teaser


Ribbon Teaser Video Tutorial

Flip Teaser


flip teaser


Flip Teaser Video Tutorial



wedge teaser


Wedge Video Tutorial





Accordion Video Tutorial

Tabbed Nodes


tabbed nodes


Tabbed Nodes Video Tutorial

Slide Show Teaser


slide show teaser


Slide Show Teaser Video Tutorial





Blank WYSIWYG Video Tutorial

BP Paragraphs


traditional teaser no hero image


BP Paragraphs Video Tutorial

View Sample Layouts View a list of Drupal Homepage Elements