Homepage Design & Setup

  • Content Editing, Website Design

The NATSCI-MURA-BOOTSTRAP_V3 theme provides departments and programs within the College of Natural Science with multiple options for designing and setting up their homepage. These options include: a hero image, giving badge, multiple layouts, modern news layout, modern event layout.

Jump to:

Homepage layout

There are multiple layout options available for department and program homepages. These options include:

  • 1 column layout
  • 2 column layout
  • 3 column layout

The number of columns refers to the area on the homepage in which you can supply editable text and/or add components.

1 column layout

1 column layout example

The 1 column layout is the most flexible in terms of the homepage layouts provided. The single column allows for full use of the avaialble area, where you can insert text, pictures, etc., or it can be sub-divded into additional columns if you prefer.

To select the 1 column layout:

  1. Edit your homepage.
  2. Select the "Layout" tab.
  3. Select "Department_Home_1_Column.cfm" in the "Layout Template" dropdown.
  4. Save and Publish the page.

Selecting the 1 column layout in Mura

2 column layout

1 column layout example

The 2 column layout divides the homepage content areas into two columns. The left column contains the content area for inserting text, pictures, etc., while the right column allows the for the inclusion of components and feeds.

To select the 2 column layout:

  1. Edit your homepage
  2. Select the "Layout" tab
  3. Select "Department_Home_2_Column.cfm" in the "Layout Template" dropdown
  4. Save and Publish the page

Selecting the 2 column layout in Mura

In addition to having 2 columns, the background color of the right column can also be changed fromt the default white. To change the background color:

  1. Edit the homepage.
  2. Select the "Extended Attributes" tab.
  3. Scroll down to the "Department Homepage Column Color" heading.
  4. Select the "Column 2 color" dropdown.
  5. Select the desired color.
  6. Save and Publish the page.

Selecting the 2nd column color in Mura

3 column layout

1 column layout example

The 3 column layout divides the homepage content areas into three columns. The left column contains the content area for inserting text, pictures, etc., while the middle and right column allows the for the inclusion of components and feeds.

To select the 2 column layout:

  1. Edit your homepage.
  2. Select the "Layout" tab.
  3. Select "Department_Home_3_Column.cfm" in the "Layout Template" dropdown.
  4. Save and Publish the page.

Selecting the 3 column layout in Mura

In addition to having 3 columns, the background color of the center and right columns can also be changed fromt the default white. To change the background color:

  1. Edit the homepage.
  2. Select the "Extended Attributes" tab.
  3. Scroll down to the "Department Homepage Column Color" heading.
  4. Select the "Column 2 color" dropdown or the "Column 3 color" dropwdown.
  5. Select the desired color for that column.
  6. Save and Publish the page.

Selecting the 2nd and 3rd column color in Mura

Homepage Hero Image

The homepage layouts are equipped with a feature known as "Homepage Hero Image". This feature replaces the carousel feature that was found in the previous design, and is the large image you see at the top of the homepage By default, the homepage is setup to display the latest news article from your news feed in this area. Using the default functionality, the "Homepage Hero Image" will look similar to the following:

Homepage hero image example

Using the default functionality, there are some additional options available to you, such as turning the title/summary on and off, and providing an alternative URL when clicking on the image. To set these additional options:

  1. Edit the homepage
  2. Select the "Extended Attributes" tab.
  3. Scroll down to the "Homepage Hero Image Options" heading.
  4. To hide the title and summary, in the "Display title and summary with Hero Image?" select No.
  5. To use an alterative URL, enter the URL in the "Alternate URL" textbox.

Homepage Hero Configuration

Alternatively, a full-width image can replace the news article, which will extend to the top of the screen, behing the MSU wordmark and search box, and from the left to right edge. Using this functionality, the "Homepage Hero Image" will look similar to the following:

Homepage hero image full-width example

This functionality provides a static "promotional" graphic for your homepage. To use this feature:

  1. Upload the image you wish to use as your hero image to "File Manager". The image should be 1200px wide by 500px tall.
  2. Right-click on the image in "File Manager" and select "View".
  3. Right-click on the image once it opens and select "View Image"
  4. The image should open in your browser, with the URL of the image in your address bar. Copy the URL.
  5. Edit the homepage.
  6. Select the "Extended Attributes" tab.
  7. Scroll down to the "Homepage Hero Image Options" heading.
  8. In the "Use Hero Image as news item?" dropdown, select No
  9. In the "Alternate Hero Image URL" textbox, paste the URL of the image that you copied in step 4.
  10. If you wish to add a heading and sub-heading to the hero image, such as in the example above, enter that text in the "Alternate Hero Image Heading" and "Alternato Hero Image Sub Heading" textboxes.
  11. Save and Publish the page.

Homepage Hero Configuration

Homepage Giving Badge

The homepage provides the ability to include a "GIVE NOW" badge, a semi-transparent clickable element that allows you to link to MSU's online giving platform. If you choose to use this option, the badge will appear in the top right of the "Homepage Hero Image".

Give now badge

To enable the giving badge:

  1. Edit the homepage.
  2. Select the "Extended Attributes" tab.
  3. Scroll down to the "Homepage Giving Options" heading.
  4. In the "Display 'Give Now' badge on homepage?" dropdown, select Yes if you wish to display the badge.
  5. In the "URL that the giving badge should link to." textbox, enter the appropriate URL to the MSU online givigng platform.

Giving badge setup

Modern News

The layouts available for department and program homepages provide the option of displaying news in a "Modern Layout". This layout displays 3 news items in a card format with hover effect. The title of the news story is layered over the top of the associated image.

Modern News Example

To enable the modern news layout:

  1. Edit the homepage.
  2. Select the "Extended Attributes" tab.
  3. Scroll down to the "Department Homepage News Options" heading.
  4. In the "Display department news in modern layout?" dropdown, select Yes.
  5. Save and Publish the page.

Modern News Setup

Modern Events

The layouts available for department and program homepages provide the option of displaying events in a "Modern Layout". This layout displays 4 events with a hover effect. The event date, time and title are displayed.

Modern Events Example

  1. Edit the homepage.
  2. Select the "Extended Attributes" tab.
  3. Scroll down to the "Department Homepage Events Options" heading.
  4. In the "Display department events in modern layout?" dropdown, select Yes.
  5. Save and Publish the page.

Modern Events Setup