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.

 

Image
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

 

Image
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

 

Image
call to action links

 

Description: Horizontal link blocks with image backgrounds

Call to Action List Video Tutorial


Traditional Teaser

 

Image
Traditional Teaser

 

Traditional Teaser Video Tutorial


Ribbon Teaser

 

Image
ribbon teaser

 

Ribbon Teaser Video Tutorial


Flip Teaser

 

Image
flip teaser

 

Flip Teaser Video Tutorial


Wedge

 

Image
wedge teaser

 

Wedge Video Tutorial


Accordion

 

Image
accordion

 

Accordion Video Tutorial


Tabbed Nodes

 

Image
tabbed nodes

 

Tabbed Nodes Video Tutorial


Slide Show Teaser

 

Image
slide show teaser

 

Slide Show Teaser Video Tutorial


Blank WYSIWYG

 

Image
blank WYSIWYG

 

Blank WYSIWYG Video Tutorial


BP Paragraphs

 

Image
traditional teaser no hero image

 

BP Paragraphs Video Tutorial


View Sample Layouts View a list of Drupal Homepage Elements