Every page starts from a single template.

The template gives you many options to build a layout that is best for the content. Page content is created in a building block model allowing users to add, delete and shift content in a number of formats. Familiarize yourself with these key content areas so that you can confidently build pages.

In addition, please review the site-nav, where you may change your office's address and phone number.

If you have questions about adding or editing tables, or a top navigation, please contact jennymartin@umsl.edu or womblest@umsl.edu.

Headers and Navigation

header and navigation elements

  • Header - All templates have the same header for brand consistency across all umsl.edu websites. The header includes the UMSL logo followed by the name of the website. Consistent calls to action of Apply Now, Request Info and Give are also included, as well as a sitewide search option.
  • Display Name - set the name that will appear in the left navigation and breadcrumbs.
  • Title - appears in search results and browser tab. "| UMSL" will automatically appear after the title:
    browser tab
  • Title Header - displays directly below the page header
  • Image Header - choose between image only or image with caption
  • Left Navigation - displays on pages where "Include in Left Navigation" is set to "Yes"
  • Right Callout Area - includes related links and/or right callouts if "Display Right Callout/Related Links Navigation is set to "Yes".


Page Columns

Select from one, two, or three column layout blocks to build page content. This section is "Content with 1 Column". The lines of text span the full width of the page body.


This content is arranged in 3 columns. On mobile, the columns will stack vertically.

Typically the more columns, the shorter the content. Try not to pack too much information here.

You can also put pictures here. Please use small images with less than 300px width.



Slideshow

You may add anywhere from 2 - 11 slides to give your page a dynamic and visually striking element.

We recommend keeping the Headline and Descriptive Text short.

Slideshow images should be sized to a consistent height and width before uploading them, otherwise the text and images jump around on the page as content rotates.

Please use pictures with a landscape orientation. The images in this slideshow below are all 800px width by 450px height.

Set an External or Internal Link and include custom Link Text to give a call to action to your site visitors.

slideshow in the content management system



Accordion Content

Accordion content allows users to expand and collapse content with just a click, and is great for complex information that you wish to simplify for site visitors. You may add pictures and other elements to the accordions. Please note that content folded into accordions will not be accessible to search engines, although the titles of the accordions will.


An accordion can house more detailed information such as course curriculums, biographical information, schedules and more.

concert.jpg

Suggested image sizes

  • Banner Photo - start with 1250px width by 375px height. For site visitors, the bottom edge of the image will be cropped differently by various screen sizes.

  • Group shot - a medium image should be about 600px width by 400px height. A larger image can work, depending on how much space your site has. Please let us know if you have questions about an especially large image, or if you notice an image distorting on mobile devices.

  • Headshot - Size can vary, but work best in a 2:3 aspect ratio. For smaller images, this is 100px width by 150px height. Medium is 200px width by 300px height.

  • Square images - An image with a 1:1 aspect ratio. Depending on length of accompanying text, a good place to start with square images is 300px width by 300px height. 

This example text is called Lorem Ipsum. Designers use it as filler text.

Vivamus eleifend suscipit sem. Aliquam sem arcu, pellentesque at mauris non, porta porttitor sapien. Mauris luctus dolor at massa pharetra, sit amet luctus dolor tempor. Aliquam vitae augue egestas mauris accumsan feugiat sit amet vitae purus. Suspendisse vel orci et sem placerat bibendum eget vel tortor. Nunc sollicitudin massa eget risus efficitur ornare.

Mauris auctor nulla eget nibh imperdiet luctus.

Aenean hendrerit metus sed enim suscipit, a viverra lorem placerat.

Suspendisse commodo faucibus turpis, ut dictum ligula efficitur quis.

Proin in lacinia lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et maximus massa.

Sed non purus pharetra, mattis risus cursus, aliquam ligula.

In hac habitasse platea dictumst. Proin nec enim risus. Curabitur ornare ultricies augue vel tincidunt.


Image Gallery

The Image Gallery option allows you to upload one or more images to display on a page as thumbnails with captions. End users can click on the image thumbnail and a full size image opens in the browser window. Choose the same image for both "Full Size Image" and "Thumbnail Image". You do not need two sizes of the same photo. Please ensure that your photos are 500kb or less in size, or reach out for assistance.

image gallery in cms



Site-nav Block

Here you may change the office name, address, and phone number, as well as add a secondary phone number. Please reach out to our office if you'd like assistance obtaining accurate Map Coordinates.

If no secondary number is chosen, the template will default to our "Admissions Toll Free" number.

Site Nav Editing