skip to main content

How to Build & Edit

Getting Started

Logging In

  1. Go to https://my.engr.illinois.edu/sitemanager.
  2. Log in using the "Illinois Login" option.
  3. Once logged in, you will see all of the sites you have access to. This view shows the Site Name, Production URL, and Development URL as well as the number of Pages and the number of Sections in your site. Click on the name of the site to edit it.

Setup Tab

Setup contains the unique information about the site like name of the site, template, styles and other framework essentials. You may not need to visit this tab often, but there are some helpful functionalities located here.

Clear the cache. Use this feature when new content needs to be pushed out immediately to the live website.

Check for broken links. Click the "Check Site" button near the top to identify broken or questionable links throughout the website. Each section or page that is linked opens in a new tab allowing you to run the site check once, then click off to edit any pages or sections that need fixing in other tabs.

Books

Books are collections of similar content types. Books are used when content needs to be filtered, displayed differently from standard pages, or delegated to other people for editing.

  1. Select "Books" from the top-right menu.
  2. Select "New Book" from the options under the menu.
  3. Select the type of book you would like to add from the dropdown.
  4. Give the book a descriptive title.
  5. Choose "Prod" from the status dropdown. Note that by default, the book's status will be set to "Hidden."
  6. Select "Save" from the sticky menu on the right side of the screen.
  7. When you return to the Books landing page, you will see a new card for your book. Drag and drop the cards to reorder them.
  8. To add content to the book, select the book title.
  9. To edit the book itself, click the gear icon in the top-right corner of the card. 

Some important fields to note are:

Book Title
Give your book a title that identifies the type of content it contains.

Editors
Give specific individuals or groups access to the book by adding their netid or AD group name.

Status
By default, the status will be "Hidden" which means that content in the book will not be seen on either the development or production sites. Change the status to "Dev" or "Prod" depending on which site you want the content of the book to be available to.

Base Path
The base path specifies where content in the book lives within the hierarchy of the site. For example, if the base path is "/news" all content in the book will be children of the /news page.

Page Template
The page template contains the HTML for how the content of the book will be displayed on the site.

Fields
This is a list of all the fields that can be filled in on the edit page for content in the book. These fields are often used to populate the page template.

Templates
Using HTML, you can create custom templates to display the content in the book across other areas of the site.

Pages

Pages are the foundation of your content. They form the outline (architecture) of a site, and are made up of Sections of content. A Page usually contains at least one Section but can have many Sections.

The List View for Pages contains the Page Title, Path, Status of the page, the Date the page was made Available, and how many Sections are in that particular page.

There are three dropdown options on the page list view: Book, Folder, and Status. By default, the Book dropdown will be set to "Standard Pages" when you navigate to the pages list view. Select a different option if you want to view content in another book. The Folder dropdown allows you to filter down to pages under a certain section of the site. For example, choosing "/admissions" from the folder dropdown will show the admissions landing page and all of its children. Use the Status dropdown to find pages based on their availability. You can also find a page by using the search box.

To edit a page, select the page title of the page you want to edit.

Page Properties
These properties define the page name, path, status, and menu properties for each page in your site. You can also use predefined classes to define the type of page (home, landing, remove navigation, remove breadcrumbs.

  • Page Title
  • Path
  • External Link
  • Status
  • Date Available
  • Date Expires
  • Editors
  • View Development website
  • View Production website

Menu Options

  • Include in Menu
  • Submenu Options
  • Optional Menu Label

Body Class
Apply a body class to the page to determine what type of layout is needed for this page. There are styles for layout for 

  • Home: home page
  • landing page: large image at top of page
  • no hero: removes large image at top of page
  • Storied: changes layout to feature story layout
  •  Fullscreenhero: fills the viewable area of the browser

Hero Band Options 
(optional* You can choose to add unique images to display at the top of each page. All pages have a hero image by default.)

  1. Hero Image

    1. The way the image displays is determined by the Body Class selected in the Page Properties.

    2. If no image is selected, it will use a default image.

  2. Subtitle

    1. Subtitle will display below the page title

    2. If left empty it will not display

  3. Hero Link Label

    1. Text that will show up as an action button

    2. If left empty it will not display

  4. Hero Link

    1. The full path link where the button (link label) should go to when clicked

    2. If left empty it will not display

Sections

  • Page Sections (This includes all of the content sections that make up a page.)
  • Section Preview (Same thing as Page Sections, but displayed visually.)

  1. Go to Pages

  2. Select “New Item” from the top-right menu of the Page editor

  3. Add Page Title

    1. The Page Title will display on the top section of a webpage. It is important for search engines to be able to find the website content. Good titles are descriptive and concise. If a page is included in the menu, you may want to select an alternative Title to display in the menu. You can do  this using the “Optional Menu Label” field.

  4. Set the Path

    1. The path is where this page will show in the website and determines the URL. 

    2. The path is used to create the Menu

    3. Paths should always start with a “/”

    4. Do not use an ending “/” in the page path. 

    5. Do not include file extensions (.html etc.)

  5. If page should link to another site immediately, add it in the External Link field (if not, leave blank)

  6. Change Status to Dev (if you are building new content not ready for the public site OR to Prod so that the page is accessible on your production (or live) website.

  7. Include in Main Menu. Change to to YES if the page should be included in the site navigation menu, or NO if the page should not show in the menu.

  8. Press SAVE (the floppy disk icon)

  9. Add a section. Press the “Add new section +” button to add a new section from the Section Showcase.

  10. Select a section template that matches appears suitable for the content you want to create. (Select “Preview Section Options” to see all sections in a webpage).

Sections

Sections are the building blocks of the pages on your website. We have created a variety of section templates to help you in developing your content for beautiful, effective pages.

  1. Navigate to the page that needs to be edited.
  2. Select the “Add new section”button () located just above Page Sections. 

    1. A selection menu will slide in from the left side of your browser.

    2. Section templates are listed by category. The list can also be filtered by category.

    3. Scroll through the options until you find the design that suits your content.

    4. To view all of the Section Showcase designs, view the section previews.

  3. Select the section template that suites your content. The new section will be created, added to your page, and your browser will take you to the section editor.
  4. Add a Section Title.

    1. Give the Section a meaningful Title. Sections have default names based on the template from which they were created.

    2. Tip: Name the section so that the section is relevant to where it will display. (Ex. About - Content. Then all of the team will know what the section refers to and where the section is within the site.)

  5. Edit the content.

    1. Click in the content area. It is outlined in blue when the mouse hovers over that area.

    2. Tip: Remember that the Page contains the title of the page. You do not need to repeat it here. If this section needs a content title because it will show on multiple pages, make it distinct from the title of a page.

  6. Press the SAVE icon.
  7. Return to the page that was being edited by clicking on the Page Title at the bottom of the Section editor. Here you will also find a list of pages that the Section is included in.
  8. Repeat until the entire page is complete.

To edit an existing Section:

  1. Navigate the page that contains the section you wish to edit.
  2. Select the Section to update in either the Page Sections table or the Section Preview.
  3. Edit the content.

    1. Click in the content area. It is outlined in blue when the mouse hovers over that area.

  4. If extra formatting is needed for the sections, select the GEAR icon.

  5. Press the SAVE icon.
  6. Return to the page that was being edited by clicking on the Page Title at the bottom of the Section editor. Here you will also find a list of pages that the Section is included in.

While on a Section, select the Gear icon located to the far right at the top of the page. 

This will open up all of the settings available for that section. You can change the base-Template being used, publish Status, an Auto-Expire date, and view previous versions. 

You can also change the widths, styles, padding, background images, and color scheme for the whole Section or just for individual columns in the Section. Each individual component can be adjusted.