Category Archives: New Template 2016

Image Callouts

An image callout can include two, three, or four linked images in a row. Your site must be using the top nav, responsive layout for it to function. A Go button will be displayed over the image when hovering and they may or may not have a section title above them or additional text or links below them. The title beneath the image becomes centered with a special font type and size.

Figure 1
Figure 1
Figure 2
Figure 2
Figure 3
Figure 3

Continue reading


Homepage Full Width Impact Statement

This widget can be used for a site homepage, generally beneath the main image. Your site must be using the top nav, responsive layout for it to function. It will stretch across the entire screen width, automatically centers the text, and gets a gray background and yellow line beneath. You could include links in the statement also. These styles cannot be changed.impact-statement

 

 

  1. Create a Highlight that includes the text with any links or buttons in the callout section.
    1. The button is not automatically styled. A default button will be gold filled. To create the outline button your must format it as “blank.”
      1. Create the button.
      2. Click on the Source Code icon.
      3. Find the code that includes ” . . . a class=”button” href= . . .” and change “button” to be “button-blank” (with quotation marks).
  2. Slot the Highlight in the Academic Banner slot of the Generic (Page) item using the Callout template. It is generally slotted after the main page image.

Homepage Full Width Image with Statement

This widget can be used as the main image for a site homepage. Your site must be using the top nav, responsive layout for it to function. It will stretch across the entire screen width and includes a statement in the center (Figure 1), towards the left (Figure 2), or within a caption button (Figure 3). This statement could include links and buttons also.

Figure 1
Figure 1
Figure 2
Figure 2
Figure 3 (Caption Closed)
Figure 3 (Caption Closed)

Continue reading


Responsive Mobile Page Layout

The new CMS template that includes top navigation also includes behind-the-scenes code to make all pages responsive. A responsive site adjusts the layout of the webpage to fit the device it is being viewed on. It may scale images and tables or move page pieces into a different order. Page pieces refer to the left navigation, main image, content area, and right sidebar as discussed in the New Template Page Layouts post.

How these pieces move can influence where you put certain content on your page. For example, you may want to put important information in your right sidebar so it is visible to the user right away. While that will be the case on a desktop, that right sidebar will become the bottom element on a mobile phone. If your users tend to be on mobile, this would not work the way you intended.

For the most part, as the screen size shrinks, pieces will be moved to the bottom from right to left, bottom to top. Following are two examples showing how the pieces will move based on screen size.
Continue reading


Responsive Top Nav Page Layouts

With the change to new templates that include top navigation there are also some changes to how you can choose to layout your page. Previously, you had up to two columns available for content. That is increased to 4 in the new layout options. These layouts also vary on different size screens due to the responsive page design.

Page Pieces

There are a number of ways you can layout a webpage within the CMS. The different arrangements are created based on the components you add and which slots you use when making or editing a page. First, let’s start with the various elements.
Continue reading


Enhanced Image Sizes in Preparation for New Templates

As a part of the new CMS template upgrade, the image editor sizes have been enhanced—some sizes added, existing sizes made larger, and some sizes phased out. These changes can be seen in different size options in the image editor, different slot names, and different template names.

Existing images will continue to work. The new sizes will provide greater flexibility and quality and the new names will be more intuitive and consistent across the system. Although vertical images are difficult to use on the web, any ‘horizontal’ image can be cropped vertically if needed.

Continue reading