EKTRON 101: THE BASICS
Table of Contents
INTRODUCTION 2
TERMINOLOGY 2
WHY DO SOME PAGES LOOK DIFFERENT THAN OTHERS? 5
LOGGING IN 8
Choosing an edit mode 10
Edit in context mode (easy editing) 10
Edit mode (advanced editing) 11
TEXT EDITS 13
Adding and changing text 13
Adding headers 14
Font colors 14
LINKS 15
Creating a link 15
Removing a link 18
UPLOADING A PDF OR DOCUMENT 19
HOW DO MY CHANGES APPEAR ON THE SITE? 22
RESOURCES 23
Questions?
Marketing & Creative Services
INTRODUCTION
Ektron CMS400.NET is a web content management system that Hamline has purchased to create, edit, and organize web pages.
A web content management system is a computer application designed to simplify the publication of web content to websites and mobile devices, allowing content creators to create, submit and manage content without requiring technical knowledge.
The web teams in Marketing Communications and Information Technology Services work together to manage the Hamline website in Ektron and to provide access to, training for, and best practices in web design and web content management.
Marketing Communications and Information Technology Services rely on assistance from web editors across the university to assist with building and updating specific pieces of the university website.
Some web editors are Hamline employees whose job duties include website management for their particular department or school. Other web editors are volunteers who assist the department’s primary web editor with small updates.
TERMINOLOGY
Web terminology is complex and can be a mystery to first-time web editors, especially because terms can vary based on the content management system AND the way the website has been designed. Here are some helpful definitions for terms you will hear in the context of Hamline’s website.
Common web terms
Page: An individual page within either the website or a section site.
URL: Also known as the address of a particular page. This is the “www.hamline.edu.....” text in the address bar of your browser.
Browser: The particular application you are using to view a website. The most common browsers are Internet Explorer, Firefox, and Chrome.
Link: A word, phrase, or image that takes you to another page when clicked.
Page elements
Hamline webpages are built using individual blocks of content, which sometimes have their own unique terminology. Please see the screenshot below, it points out the names of many of these elements.
NOTE: Some of these elements you will be able to edit – some you will need to contact Marketing Communications or your office’s primary web editor for assistance.
Right Menu: The list of links that appears on the right column of a section site. Marketing Communications must make any changes or additions to your right menu. The individual links in the menu are called menu items.
Top Menu: The ever-present horizontal drop-down of links at the top of all Hamline webpages. Marketing Communications has control over the top menu.
Title Bar: The colored bar across the top of the page that displays the department name. This is required on all pages.
Main Content Block: A block that holds the main text and content of the page in the middle column.
Contact Us Block: The box that appears below the right menu that includes address, email, and phone contact information for the department.
NOTE: The contact us block is actually the same piece of content on all pages in your website – if you change the text on one page, that change will appear on all other pages automatically!
Banner: An image or series of images that live at the top of Front Page and Program Page types. Program Page banners include text and links to other areas of that office’s site. Banners are required on Front and Program pages.
Feature Box: Small boxes that appear along the bottom of a Content, Front, or Program page. These are designed to help promote announcements, events, etc. and require a pre-sized image, text, and a link to the featured page. These are optional.
Form: Also referred to as a webform. A form is a series of fields on a page that users fill out and submit. The most common is a web-to-email form where the user enters content that generates an email to a Hamline person or office.
News list: A listing of news items, generally from the Hamline Newsroom or Inside Hamline.
Events list: A listing of events from the university events calendar.
WHY DO SOME PAGES LOOK DIFFERENT THAN OTHERS?
There are several different page layouts that have been created for Hamline University. Sometimes web editors can use different page layouts (also called page types) to change the appearance of a page.
Generally speaking, these page types are all made up of the same blocks or pieces, just laid out in a different way.
NOTE: The page type will NOT affect how you make basic edits to the text!
Content Page
The majority of the pages you will encounter are content pages. Content pages are the simplest page layout and contain fewer design elements than other pages.
Example of a content page:
Note: Sometimes content pages will have a photo at the top of the middle column.
Program Page
Program pages are one of the more complicated page layouts in the Hamline website. Not only do they have a program banner spanning the top of the page, but they also have a row at the bottom of the page that hold special blocks of content. Program pages were also designed to function as department or office homepages. They should be used sparingly for that purpose.
Example of a program page layout:
Front Page
Front page layouts look much like a content page, except that they have a long and skinny photo across the top of the page (a front banner).
Front pages were designed to be used for a department or office’s homepage. They should be used sparingly for that purpose.
Example of a front page layout:
Other pages
These are the three most common page types in the Hamline website. There are many other page types that you might encounter:
Page 4
School page
Policy page
Portal page
Blank page
News item
Athletics page
Home page
Page 4
LOGGING IN
Ektron can be accessed at http://www.hamline.edu/login.aspx You can save this as a Bookmark or Favorite in your web browser for easy access, or you can always find a link by going to the Faculty & Staff page and looking under the Logins section.
Enter your Novell Username and Password in the appropriate fields and click the Login button.
You will be taken to a page with three buttons: logout, workarea, and preview.
For now, don’t click on any of these buttons!
The only time you’ll need to click on one of the above buttons would be when you need to upload a PDF or Word document. Please skip down to Uploading a PDF.
Getting to the page
The easiest way to make text, link, and image edits is by navigating to the actual page you want to change. If you know the URL of the page you want to edit, type in the URL in your address bar. If not, go to the homepage and navigate to the page you wish to edit.
The page will take a moment to load in edit mode. You will know it’s ready when you see silver access points () appear on the page.
How do I get into edit mode?
Silver access points appear in the top left corner of content blocks that you have permission to edit. Hovering your cursor over the silver access points displays a dropdown menu that you will use to access edit mode:
Choosing an edit mode
When you hover your cursor over one of the silver access points, a dropdown list should appear. There are many different options, but only two that you will ever use: edit in context and edit:
Edit in context: this is the “easy editing” option. In this mode, you make your changes right in the page. In this mode, you can:
1. Edit text, including bolding and italicizing
2. Edit links
3. Add a photo
Edit: this is the “advanced editing” option, with many more text editing options than you get with “edit in context.” The content block will open in the Ektron workarea in a new window. The text and images appear in a WYSIWYG (“what you see is what you get”) editor, similar to Word.
We suggest that you stick to the easy editing option (edit in context), unless you can’t make your change with the available editing options.
Edit in context mode (easy editing)
Once you’ve selected Edit in context, the page will refresh to display the editing options at the top of the content block:
These options include:
Page 4
Save
Spellcheck
Create Link
Break Link
Insert Image
Bold
Italicize
Cancel
Page 4
Your editing options in context are limited. You can add or change text, make or break a link, upload and add an image, and bold or italicize text. Any other changes will need to be made in the workarea by choosing edit mode.
Edit mode (advanced editing)
When you hover over the silver access point and choose Edit, you’ll have access to more text editing options than you get with Edit in context.
The content block will open in the Ektron workarea in a new window. The text and images appear in a WYSIWYG (“what you see is what you get”) editor, similar to Word:
Saving your changes
At the top of the page, you’ll see a gray toolbar with the following buttons:
This is how you will save your changes once you’ve made them. There are three important buttons:
Publish () will save your changes and close the window. You will be redirected to your page, which will refresh and display the changes you have made. When you Publish, your changes will go live within ten minutes or less.
Save () will simply save your changes but not close the window. Save regularly to prevent loss of data.
Cancel () will cancel any changes you have not saved and close the window.
You will also see several tabs underneath the gray toolbar. You should always work in the Content tab:
The WYSIWYG editor
To make edits in the advanced editing mode in Ektron, you will use the WYSIWYG (What You See Is What You Get) blue toolbar:
There are many more buttons here than you will generally ever need or want to use. The important buttons for you to locate are, from left to right:
Page 4
Spellchecker
Insert Link
Remove Link
Add Header
Bold
Italic
Numbered List
Bulleted List
Page 4
TEXT EDITS
Adding and changing text
NOTE: You can add and edit text in either Edit in context or in Edit.
Type in text
Place your cursor in the content block and start typing. You can highlight words or phrases and click the Bold or Italicize buttons to add formatting.
Copy and paste text from an outside program:
1. Copy or cut the content you want to paste
2. Right click in the page where you want to paste text
3. Select “paste plain text”
4. A popup window will appear: paste your content here and click OK.
Why do I have to choose “Paste plain text?”
Microsoft Word and other outside applications add a lot of invisible coding to text. This coding will get pasted along with your content into Ektron. This results in a number of issues with your text; the font and styling will not follow Hamline brand guidelines, you will be unable to change the font and styling on the text, the Word coding will break other elements on the page, your text and copy will no longer meet accessibility requirements for certain browsers and screenreaders, etc.
Any text additions or edits you make must follow Hamline’s editorial guidelines. Please keep a copy of the guide with you when you work on your website. You can find a copy of the guide at www.hamline.edu/styleguide/.
Adding headers
NOTE: You can add headers only in Edit.
Headers are an important aspect of your content because they allow a viewer to scan text quickly and easily. They also are clues that search engines like Google look at to understand what your page is about.
There are three sizes of header available in Ektron:
Header 1
The largest header size, this should only be used ONCE on every page as the “title” at the top of the main content block.
Header 2
Can be used multiple times within the main content block. It is especially good when used as a subhead for dividing content into sections that contain multiple subsections
HEADER 3
The smallest header size, this appears in all capital letters. It can be used multiple times within the main content block, or as the primary header for contact or related links blocks.
To format text into one of these sizes, follow these steps:
1. Highlight the text you would like to resize
2. Click on the Apply Style box. You’ll see the options pictured.
3. Click the appropriate header size.
4. You can also select the “Normal” setting from the drop-down
box. This will turn larger sized text back to the default size.
Font colors
All font colors have been precoded by Marketing Communications to be consistent with Hamline’s brand. Changes in font color should not be made by web editors, as this will disrupt the color uniformity built throughout the site.
LINKS
NOTE: You can add and remove links in either Edit in context or in Edit. The process is the same in both modes.
Creating a link
There are three different types of links you might want to create:
1. Link to a page
2. Link to a file
3. Link to an email address
LINK TO ANOTHER PAGE
1. Highlight the text you want to link, then click on the Hyperlink Manager (). The Hyperlink Manager box will appear.
2. Copy and paste in the URL of the page you want to link to in the URL field:
3. If you are linking to a non-Hamline page, please select New Window in the Target drop-down.
4. Click OK.
LINK TO A FILE
1. Highlight the text you want to link, then click on the Hyperlink Manager (). The Hyperlink Manager box will appear.
2. Click on the gray button with the three dots to the right of the URL field:
3. In the popup window that appears, there’s a dropdown field in the middle of the upper gray bar – make sure that “Files” is selected: