Landing Page "Blocks" Template Design

See it in Action!

Landing Page

The blocks template is a unique page template that allows you to easily change the style of your page with a few simple clicks. Instead of the entire page being designed as a whole unit, your information is chunked into individual blocks of content that can be moved to create new layouts.

Within these layout variations, new content can be added quickly and easily, and the items on the page can be arranged and rearranged:

  • moved up, down, left, right
  • moved to a "more featured" size or position
  • moved to a "less featured" size or position

Moving content from a large feature to a smaller entry is quick, easy, and gives the page a fresh, new look even during slower news periods.  In addition, this database of information displayed on the page will also be readily available to use on the other landing pages (like Campus Life, Faith & Service, Academics, etc.) with a simple click. 

Row Options

The blocks template is set up so that you can add multiple pieces of content to each “row” in order to form different layouts and styles for your page. Depending on the selections you choose and the number of items in the row, the formatting will change. Click the “Show Caption” checkbox on the first item in the row to get the alternate layout (Showing caption gives you more space for text, where the default layout is much more image-based). Here are the options:

Advanced Options

A few advanced options are built into the blocks structure.

  1. Contentlet: This allows a piece of content from another page to be placed in a row. Contentlets let the Web Team create custom content for your page. If a Block is using this contentlet field, it needs to be the only item in the row. Contact the Web Team if you would like to use this feature.

    This feature on the Student Activities website is a custom “block” designed to put posters from the upcoming SAC events right on the page.  This is custom-coded to update the events as they get closer. To achieve this, we designed this piece and then put the ID number of the block into the contentlet field to show it on the page.
  2. Gallery Path: This advanced option allows you to put in the url to the folder where you have images stored. A random image will be selected from that particular folder to display on the page. Each time the page is refreshed, a different image from that gallery may be displayed.


    Want something like this on your site? Contact Web Development to get started!