How do I build a unit landing page?

A "unit landing page" looks like the following:

Sample unit landing page
Our website allows you to create beautiful landing pages with no knowledge of HTML or programming necessary. For example, the main CSE landing page. You have a choice of 14 building blocks (linked below) that are highly customizable and can be placed in any order and combination of your choice.
 

Landing page building blocks

Creating a landing page

In order to create a unit landing page:

  1. Go to https://cse.umn.edu/manage

  2. Under “Content” select “Create unit landing page”

Unit Landing Page Example

To create a Banner Header, use the

add banner header

button on the Unit Landing Page edit form.

The fields allow you to change the components of the banner header.

Banner example
  • The Banner is the background image.

  • The Leadin is the text that will appear under the page title on a background, which color you will also be able to choose. Background color options are Gold, Grey and Red.

    • Gold = Black leadin text and red callout circle. Gold Icons should be used.

    • Grey = White leading text, gold callout circle. Black Icon should be used.

    • Red = White leading Text, Gold Callout. Black Icon should be used.

  • Callout is optional, and allows you to change the icon and the text in the circle, as well as to link it to a page.

Widgets

You can build your landing pages by placing and rearranging widgets. These are options on every widget:

  • Widget angle (None, Slope Left, Slope Right). Sets the top angle of the widget

    Image slope example
  • Background style (red, peach, tan, light gray, grass, blue, slate, image).

  • Background Image.

  • Image Crop Position. Allows to choose the area of the image that will be preserved during cropping.

Block Placer

Allows to add pre-defined blocks to the page. The options will vary and block placer in general will be rarely used.

Buttons

Allows to add buttons or text with buttons. If using text with buttons the buttons can be placed above, below, to the right or the left of the text. Button colors will depend on the background style being used. Light or no backgrounds will have maroon buttons, dark or image backgrounds will have gold buttons.

Button widget example
Button widget example

By the Numbers

By The Numbers allows a user to add unlimited number stats to a page. A user can choose if the description is displayed inside of or below the circle and if the circle background is an image or plain color. If no image is used on the circle background, the background color will be dependent upon the main background style chosen for the widget.

By the Numbers widget
By the Numbers widget

Carousel (slideshow)

The Carousel widget allows a user to place a slideshow of images on the site.  Because the slider is full width (optimal image size is 1800x900), there are no background options available for this widget.

Carousel (slideshow) widget example

Department Events

The Department Events widget allows you to place a block of Department specific events on a page. You can choose how the date is styled or to display just text, whether the list will be horizontal or vertical, which fields to show, how many events to list (up to 12), and adding intro text and a link to an all events or archive page.

Department Events widget example
Department Events widget example

Department News

The Department News widget allows you to place a block of department specific news on a page. You can choose small of large images, whether the list will be horizontal or vertical, which fields to show, how many articles to list (up to 12), and adding intro text and a link to an all news or archive page.

Department News widget example
Department News widget

Links & Files

The Links & Files widget allows a editor to add a list of links and/or files. Links may be accompanied by text and can be placed above, below, to the left of, or to the right of the text. Links & files will automatically split into two columns.

Links & Files widget example
Links & Files widget example

 

Numbered List

The Numbered List widget allows you to place a specially styled numbered list on the landing page. The list allows intro and additional text and the numbered item colors will change depending on the background style used.

Numbered List widget example
Numbered List widget example

Portal Group

The Portal Group widget allows you to place an unlimited number of portals (text and image link) on a landing page. The portals can be in columns of two, three, or four and can have the text either overlaid on the image or underneath of it. The user can add an intro and additional text as well.

Portal Group widget example
Portal Group widget example

People Profile Group

The People Profile Group widget allows you to place an unlimited number of People Profiles on a landing page. The profiles can be displayed as a slider, list with circle images, or list with rectangle images.

People Profile Group widget example
People Profile Group widget example

Testimonial Group

The Testimonial Group widget allows you to place an unlimited number of testimonials on a landing page. The testimonials can be displayed in slider or list format.

Testimonial Group widget example
Testimonial Group widget example

Text

The Text widget allows you to place a block of text on the page. Text can be formatted full width, or on just the left or right 50% of the widget. Text can be given a dark background when an image widget background is used and the text size can also be increased.

Text widget example
Text widget example

Text & Media

The Text & Media widget allows you to place a block of text with accompanying images or videos on the page. Text size can be increased to 22px. Media can be placed above, below, to the left of or the right of the text. Buttons can be added below wherever the text is placed. When placed above or below the text, media can be displayed in up to three columns and media corners can be rounded. Media titles can also be displayed above each media entity.

Text & Media widget example

 

Text & Media widget example