Page tree
Skip to end of metadata
Go to start of metadata

The purpose of this documentation is to give a brief overview of how to use the CMS to update and create content for your website.

Here are some suggested quicklinks to add to your bookmarks for reference:

CMS Login:

https://stg15.umes.edu

It is recommended to use the Google Chrome browser for making changes to your website; although, Firefox and Edge should work as well.

Login to the site

There is also a link on the IT Homepage to login to the new website just under the existing login option:


Enter your UMES User ID and Password and click "LOGIN"


Click the "workarea" button.

Creating a basic web page for your site

1) Make sure the "Content" tab is selected.

2) Find your website folder under the "_WEBSITES" folder.

3) You should see a ROOT folder for your website and 2 Sub-Folders called "Content" and "Pages" just beneath the main ROOT folder for your website.

  • The "Content" folder is where all content for the website is saved / edited. Any Text, Images, Documents Etc is maintained in this folder. Basic web pages are created here.
  • The "Pages" folder is for advanced pages and features which link multiple items in the "Content" folder on a single page.


4) Click on the "Content" folder"


5) In the next step, we will create a basic page for the website.

6) Select "New" --> "HTML Content"

 

7) Enter a "Title" for the web content item and some text. 

8) Once your are done entering your content, click "PUBLISH"

9) Done! You should see a new item in the "Content" Folder with the "Title" you entered in step 7.

Creating an advanced web page for your site

1) Click the Pages folder for your website. In the example below, my website is called "SampleWebsite".

2) Click "NEW" --> "Page Layout"

3) Two page builder layout templates have been created to assist in building the overall webpage presentation.

  • There is a "Content with Tabs" style layout (Example) that you can start with OR
  • You can Select the "Content with Banner" layout (Example) that provides for a rotating banner at the top of the page (The rotating banner is an optional feature, but you must select the appropriate template for your page, if you wish to use one)

4) For this example, I will select "ContentWithBanner.aspx" and click "Next"

5) Give the webpage a "Title" and check "Content Searchable" NOTE: Since this is the actual webpage, we will mark it as "Content Searchable"

6) Click "Next"


7) Click the "Summary" Tab and enter a short summary of the description of the information to be on the web page. NOTE: We are not using the Metadata tab at this time.

8) Click "Finish"

9) You should see the below message. Click "OK" to go to the page builder tool and to begin assembly of the web page.

10) You will be directed to a webpage that looks like the below. You will notice there is an "Ektron toolbar" at the top of the page which has some functions to edit the page.


11) Click the "design" button and the "PageBuilder" toolbar will appear. 


12) Click "Widgets" to retrieve the list of available widgets to add to the page.


13) You can click and drag the "PageBuilder" dialog box anywhere on the screen or close it out at any time by choosing the  X  icon.


14) Click the "Content Block" Widget and then click "Place Here" where the content block should appear on the page. For this example, I will place the content block widget in the center of the page.


15) Once that's done, when you hover your mouse over the region where you placed the content block widget, you will see the content block is there with some additional options:

  • Click the "Pencil" Icon to "Edit" the content block.


16) The content block widget dialog box displays. Next, we will browse to the HTML content block we created in step 6 above.


17) In this example, I browse to the "SampleWebsite --> Content" Folder. Click on the HTML content block created in Step 6. and click "Save".

18) You'll see that the content block has been inserted on the page.

19) If you would like to edit the HTML text of the content block, you can do so via the workarea OR by:

  • Click "content" at the top of the Ektron toolbar. this changes the page to content mode rather than design mode. 
    • Content mode allows you to edit and make changes to the actual content (text, images, etc) of the page widgets.
    • Design mode allows you to change the layout and positioning of the widgets that contain the content.
  • Hover your mouse over the content block and click the  "menu icon"  --> choose "Edit" Note: Make sure to "Publish" your content after editing it in order to see the change reflected on the web page.


20) Click "design" at the top of the Ektron toolbar to add some more widgets to the page. Click "Widgets".



Adding a navigation menu to your site.

1) Let's add the "UMES_NavMenu" widget on right side of the page.


2) Next, let's create the content for a navigation menu for our site. Click the "workarea" button to browse to the workarea.

3) Click your website ROOT (IE SampleWebsite) ---> then click  "VIEW" --> "Menu"

4) Click on the menu item


5) Click "ADD ITEMS"

7) "Content Item(s)" are pages / documents that have previously been created - Click "Next"

8) Click on the "Content" or "Pages" folder and then check the items you want to appear on the menu and click "ADD"

9) You can change the order in which the menu items appear by clicking the    icon

10) Use the arrows to reorder the items and click "UPDATE"

11) Finally, we need to get the MENU ID. Click your website ROOT (IE SampleWebsite) and click "VIEW" --> "Menu" 

12) Click and highlight the menu ID and choose copy.


13) Go back to the "WORKAREA"

  • Select your Pages folder


  • Select your page --> Choose "Edit Page Layout"  (Your page may also be in another tab if following these steps entirely)

14) Make sure the page is in "design" mode and choose the "pencil" icon to edit the menu widget.


15) Paste in the "Menu id" that we copied in step 12 above. Click "Save"

16) You should see the menu items appear on the side at this point. NOTE: If you do not see a menu item, it may be that the page has not been published yet.



17) You can check your page's status by reviewing the "Status" column in your site's ROOT folder. The Status should have "A" listed which means it's in a published-approved state. If you see an "O" or "I" it means the page is currently being worked on / edited.

The "switch to view" option at the top of the Ektron toolbar will display your webpage in a normal view mode and more closely resembles what your website will look like to an actual viewer of the page. Your page must be in edit mode to make changes.


Adding / Uploading an image or document(s)

1) Click the "workarea" button to browse to the workarea.

2) Select your website's "Content" folder and choose "NEW" --> "HTML Content"  

3) Give the "HTML Content" a title

4) Click the "Insert" Tab and then click the "Library" icon

5) Make sure "Images" is selected in the drop down and click "ADD LIBRARY"

6) Click "Choose File"

7) Browse to an Image you want to upload and select the file and click "Open"

8) Give the Image a Title (you can copy and paste the File name or give it your own title) and click "ADD LIBRARY"

9) The image will then be inserted in the HTML content --> Click on the Image to select it (you should see a small light blue border around the image once it's selected) --> Click the "Review" tab --> Click the "Inspector" icon to make adjustments to the image"

10) On the "Inspector" tool, you can change the size of the image, add a hyperlink on the image and make other adjustments as needed.

NOTE: You can use the inspector tool on other pieces of content to make some advanced edits and adjustments as well.


To add a document through the library:

1) Click in the HTML content space where you want to add a document ---> Click the "Insert" Tab and then click the "Library" icon

2) Change the drop down from "Images" to "Files" and click "ADD LIBRARY"

3) Click "Choose File"


4) Browse to a document you want to upload and select the file and click "Open"


5) Give the document a Title (you can copy and paste the file name or give it your own title) and click "ADD LIBRARY"


6) You'll see that the document has been inserted and a hyperlink to the document has already been set up automatically.

7) Again, you can use the "Inspector" tool to edit the link or other properties if you wish.


8) Click "PUBLISH" to make sure our changes are saved.

Finding the web address (URL) / Link to your page

There are 2 quick ways to find what the page URL / Web Address 

1) While in "EDIT Page Layout" Mode, if you look at the top of the screen in the browser address bar you will see the page web address.

  • We replace the  stg15.umes.edu   part with  https://www.umes.edu
  • Ignore the characters beginning with the ?  in the web address. I.E.

OR

2) Click your "Pages" folder --> Click the page which you want to find the URL for.

3) Click the "Aliases" tab and you'll see the Alias for the page. I.E.

4) So, the web address for this example would be https://www.umes.edu/SampleWebsite

Creating a rotating image banner for your site 

1) Click the "workarea" button to browse to the workarea.

2) Select your website's "Content" folder and choose "NEW" --> "Smart Form" --> "Image Gallery"   NOTE: Smart Forms are structured pieces of content that have defined settings that we fill in to create the content which is displayed on the page.


3) Give the banner a "Title"


4) Give the first slide a title and click the "Pencil" icon to enter a description / caption text


5) Click "SAVE" after entering a description.

6) Next, click the "Image" icon to insert an image.  In most cases, image size / width should not exceed 1400px. You can adjust the actual size of the image with image editing tools such as "Paint", "Microsoft Office Picture Manager", "Adobe Photoshop" etc. Please note the image will auto size according to screen resolution size / device due to the new responsive design. It is also best if the file sizes of images that are used for the banner are 1mb or less. Photos for banners should NEVER exceed the 2mb size except in very rare instances. 

7) Browse to the website content folder containing the image you want to use for the banner and double click its filename to insert the image into the slide.


8) You can insert another slide by clicking "slide" link just below the image we inserted in the previous step.

9) Repeat steps 1-7 above to insert another image in the rotating banner. 4-5 slides is a recommendation for using this feature.


10) Once you are finished creating the banner, click "PUBLISH"


11) Finally, let's place the rotating banner on the page: Go back to your page in design mode and insert a content block widget at the top right.


12) Choose the "pencil" icon and edit the content block widget.


13) Browse to your website's content folder and select the rotating banner smart form - content block we created above:

14) Click "Save"


15) You should see that the banner has now been inserted on your page:

16) When you are done editing your page: click "Page Action" in the Pagebuilder toolbar

17) Click "Publish" This will put the page in a published status and will be moved to the live site.


Creating a page using the tabular layout

1) Click the "workarea" button to browse to the workarea.

2) Go to your "Pages" folder and select "NEW" --> "Page Layout"

3) This time, select the Content with Tabs layout option and click "Next"

4) Give the page a "Title" --> check "Content Searchable" and click "Next"



5) Click the "Summary" tab and fill in a description of the page and click "Finish":

6) Click "OK"

7) Click "design" on the Ektron toolbar --> The pagebuilder toolbar should load --> Click "Widgets" --> Click the Content Block widget and insert it onto the center of the page. In the center drop zone.


8) Click the "workarea" button to load the workarea.


9) Click on your website's content folder and select  "NEW" --> "Smart Form" --> "Tabular"


10) The Tabular Smart Form will load. Examine the below image, This shows how the smartform and each section correlate to what is displayed on the page.  In most cases, image size / width should not exceed 1400px. You can adjust the actual size of the image with image editing tools such as "Paint", "Microsoft Office Picture Manager", "Adobe Photoshop" etc. Please note the image will auto size according to resolution screen size / device due to the new responsive design. It is also best if the file sizes of images that are used for the banner are 1mb or less. Photos for banners should NEVER exceed the 2mb size except in very rare instances.


11) Fill in the necessary fields to build the tabular layout.


12) You can insert an additional tab by selecting the icon next to "CONTENT TAB" and choosing "insert Below"

13) When you are finished creating your tabular content click "PUBLISH"



14) Go back to the "design" mode of the page you created using the "Department" Tabular layout. Click the "pencil" icon and edit the content block widget we inserted in step 6 above.


15) Browse to and find the tabular Smart Form - Content Block we created above and click "Save".


16) You will see that the tabular based content has been inserted on the page: NOTE:  Your webpage must have been created using the template designed for the tabular content to use this feature.


17) When you are done editing your page: click "Page Action" in the Pagebuilder toolbar


18) Click "Publish" This will put the page in a published status and will be moved to the live site.


Copying a page

1) You can copying a page once it has been published by:

  • Click "design" to open the "PageBuilder" dialog box
  • Click "Page Action" to expand it's options
  • Click "Copy / Save As..."  NOTE: If this option is greyed out you may need to "Publish" the page first and then do these steps.



2) Enter a page "Title" --> Check "Content Searchable" --> Click "Next"

3) Click the "Summary" tab and enter a description --> Click "Finish"


This saves time by creating a brand new copy of the page with the "menu" / "rotating banner" widgets etc..already in place. Then, you can make a couple quick edits to have another page up and running quickly. For example, you may just need to swap out the middle section of the page with a different content block and/or widget and your next page is all set.




  • No labels