Web Editing Guide
A word from the webmaster
Welcome to the new CU Webteam! Within this web editing guide, you will find all of the instructions you should need for any type of basic editing project you encounter. If for any reason you can't find the information you are looking for below, please don't hesitate to reach out to me. By phone at 580-581-6711 or email at firstname.lastname@example.org.
Getting logged in
If you are interested in getting an account created to begin editing the website, there are a few steps you will need to complete first.
- Speak with your Supervisor. Get them involved, and let them know that you want to start editing the website. If they approve your request, then continue to step 2.
- Read and review the guidelines set forth in the Web Management Policy.
- Download, print and complete the W3 Web Representative Form. This will need to be signed by the Dean or Supervisor, the Vice President and yourself.
- Once your W3 Web Representative Form is completed, return the original signed document to the Office of Public Affairs, Administration Building, Room 150.
Contact the Cameron University webmaster at email@example.com and request your username and password.
- Navigate to https://www.cameron.edu/login
- Enter your Username and Password
- Select "Login"
Create and edit a page
- Navigate to the bottom menu of the editor interface.
- Select the link titled "Pages"
- The "Pages" section displays a list of top-level pages. In the right-hand column labeled "Controls", you can choose to "Edit" the page, or you can choose "Add Subpage". If you need to go deeper in the hierarchy, simply click the chevron in the left-hand column on this page. This expands the next layer of pages.
- If you select "Edit", you will have the option to edit the Title, Path, Redirect, Department, and you can select "Published" or "In Nav".
Path: This will edit the URL extension for example - cameron.edu/path
Redirect: If you would like this page's URL to redirect to another website/page, enter the entire address here. (Including http://www.) Note: For the redirect to work the "Published" must be selected and there must be a "Path" entered.
Department: Select your department. This will determine what department has the permission to edit this page. If your department is not offered in the drop down list, please select "Global".
Published: If this box is checked, then the page is live and can be viewed by the public. If this is unchecked, the page will be in draft mode meaning it can be edited still but only users that are logged into the site will be able to view it.
In Nav: If this box is checked, then the page will be included in the navigation belonging to the previous page within the page hierarchy. If this box is unchecked, it may still be viewed but will not display within any navigation menus.
If your page is a top-level page do not select "In Nav"!
*Important Notice: In order to save your edits or your new page, make sure to click the orange button that reads "Save Changes" within the editor's interface menu at the bottom of the screen.
- Navigate to the bottom menu of the editor interface.
- Hover over the "Page Controls", then select "Versions" from the pop up menu.
- At the top of the new pop up dashboard on the right side of the screen, select "Duplicate Current Version". By doing this you will create a draft version of the current page. This will be the page you will edit.
- Once you are finished with editing your version, go back to the "Versions" panel and select "Request Publish".
- This will send the Web Manager a notice to review your version with the option to approve or deny.
- If for any reason your edited version is approved or denied within 48 hours, please contact the Web Manager at 580-581-6711 or by email firstname.lastname@example.org.
You will find the Page Controls at the bottom of your site editing interface.
Important: Be sure to click "Save Settings" at the bottom of the page controls pop up in order to save your changes.
Page Controls will give you a few important options: Settings and Layout.
Click the Settings link and you will find the page settings.
Navigation Title - Title of links to this page in dynamic navigation menus.
Redirect URL - Here you can add a redirect path. Leave this blank for no redirect.
Title - This will edit the large page title just above the navigation, as well as the title displayed on the browser tab.
Meta Tags - Meta tags are essentially little content descriptors that help tell search engines what a web page is about.
Scripts and Tags - In this section, you will be able to edit the code for the header and footer. If you need help with updating this with the correct code please contact the webmaster at email@example.com.
Click the Layout link and you will find the Layout settings. The layout settings are where you will determine where to place your content blocks. The content blocks are where you will put your content on your page.
Layout Root - The Layout Root option will give you several templates to choose from. For most pages, you will want to choose "Basic". This will add a main body content block, as well as a sidebar with a contact box.
Other Layout Root options that are important to note are the following:
Basic Staff Layout - This is used for staff pages.
Basic no Sidebar - Same as the Basic layout, but no sidebar for a contact box.
Basic without Hero - Same as the Basic layout, but no hero image (the large header image at the top). It is important to note that this should only be used for special circumstances. Our goal is to be consistent.
Below the Layout Root options, you will see the page's components. For example: If the Basic layout is selected, you will see the main section as well as the Sidebar section.
Within these sections, you can select to "Add Component". The components can also be re-arranged by dragging and dropping.
To remove a component from your page, simply click "Remove" next to your component on the Layout settings.
Contact Sidebar - This is the contact box.
Form - Choose this to place a form. The form will need to be created on the Forms section that can be found by selecting More on the site editing interface at the bottom. Once your form is created and saved you will be able to add that form to your page using this component.
Staff - This component will add the staff listing section to your page.
Table - The table component will populate a table for you to use on your page. In order to remain consistent with the website's design, please select the following options on your table:
- Hover over the table and click the editing icon.
- Hover over the table to view the setting options.
- Select Fullwidth, Bordered, and Striped.
Three Column - This will add three mobile-friendly columns to your page.
Two Column - This will add two mobile-friendly columns to your page.
Simply highlight the text you wish to format and click the relevant button.
If your page has several sections, it is best to separate them using headings. The different levels of heading are used to designate subsections within a section. For example, blackberry is a type of berry, so it gets a level 3 heading underneath "Berries" which gets a level 2 heading.
To create a heading:
- Simply type the name of the heading, then highlight it. (The text editor menu will pop up)
- Make your selection by selecting one of the following options: P/H1/H2/H3/H4/H5/H6
- Headings are used for accessibility, text-readers more specifically. Deter from using headings as visual changes.
Heading examples (Typically, you should only need h1 - h3):
- Highlight the text you wish to for your link.
- Click the anchor icon in the center of the text editor pop up.
- Paste or type a link in the pop-up field (including http:// or https:// )
- Select "Open in new window" if the link will be to another website besides cameron.edu.
- Select "Button" if you would like your link to display as a button.
- Press "Enter" or click the checkmark.
- Click the editing icon in the top right of the content block to begin editing.
- In order to add an image, place the cursor where you would like the image to be shown.
- Click the Add an image icon.
- This will prompt the "File Selection" pop-up.
- Navigate within the File Manager and locate the appropriate folder for your files. See "Managing the File Manager" for help finding the appropriate location.
- Click "Upload file" and choose the desired image.
- Select "Start Upload"
- Once the upload is complete, select the checkbox on the left of the image you just uploaded.
- Click Select.
- Once you have the image on your page, a few editing options become available.
- Click the image and the image editing pop up will display.
- To make your image a link click the anchor icon in the pop-up. Paste or type your link in the entry field. Click the checkmark to complete.
- Most of the other options on the image editing pop up are irrelevant, except for the icon that displays like a picture frame.
- Click the picture frame icon. Within this, you will be able to edit the image size, position, as well as enter the "Alt Text". Alt Text is mandatory for every image due to accessibility rules outlined in WCAG 2.0.
Alt Text - Also called "alt tags" and "alt descriptions," alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.
- In order to add a list to your page, you will first need to type out the information you will want to display as a list, pressing enter after each line that will become a list item.
- Highlight those lines of text, then on the editing pop up choose either the Ordered List option (1,2,3,etc.) or the Unordered List option (bullet points).
- In order to make a List item become a sub list item, simply place the cursor in front of the list items text and press tab.
When creating a new page, the default layout used is titled "Basic". It will have a placeholder contact box in the sidebar/left-column.
Hover your cursor over the contact box to display the 2 pop up buttons at the top of the box: one is labeled "Switch Card" and the other has an editing icon.
First choose "Switch Card". This will prompt the "Select Contact Card" screen. Here you can type in the name of your department. Most departments already have a contact box created so it should be fairly easy to find the one you are looking for.
If no Contact Card has been created for your department, type in the name that you would like your Contact Card to be titled as, and select the orange button at the bottom labeled "Create _ _ _ _ _".
If you are creating a new card, and follow the previous step above you will now see your new Contact Box placeholder.
Click on the contact information to place your cursor and begin editing the card. Its important to follow the format in the placeholder text.
The text settings: Headings are <H4> headings and the text is <p> paragraph
Once you have completed this, click the save button at the bottom of the site editing interface.
Important Note: Editing a Contact Card will push the changes to all other pages site-wide that use the same contact card.
FILE ATTACHMENTS AND UPLOADING DOCUMENTS
- Click File Manager on the bottom navigation bar of the site editing interface.
- Navigate to the folder you will need to store your file in, or alternatively create a new folder if you don't find the folder you are looking for.
- Important to note if you create a new folder - The folder name should have no capitalization or spaces. If you require a space, simply use a dash.
- Once you have found your folder, click "Upload File(s)" and select your file.
- Click "Start Upload".
- In order to access the new file select the checkbox to the left of the file name.
- From here you will have new options available: Delete, Rename, Make Private, Download or Open.
The first step in creating your new form is to click "Forms" from the "More" tab on the site editing interface at the bottom. On this page, you will find all of the site forms. To create a new form click the "Create Form" button at the top right of the Forms page.
Next, you will be prompted to add a "Title". Once you've entered your title click "Create Form".
The form creation interface has 3 tabs (Form, Settings, Notifications)
This page is broken down into the following sections:
Form Title - This is the title of your form
Description (Optional) - Explanation of the form, what its for, etc.
Sections - Here is where your form fields will go.
Closing Comments (Optional) - This is a place for you to add any closing comments associated with the form.
*Make sure to click "Save" at the bottom of the page in order to save your form.
You can divide your form into sections if you'd like. Also, you can give your sections a title (optional).
Next, you will add a field. Your options for the types of fields to use are the following:
Text - This will be the basic text field. You can ask for information that will generally use less than 50 characters in a user's response.
Checkboxes - Checkboxes will allow the user to select multiple options.
Radios - Radios will allow the user to select one option.
Text Area - You will use this option for answers/information that requires more than 50 characters.
Dropdown - The dropdown field option will allow the user to click a dropdown menu and select one option.
Photo - You will use this field if you are requesting the user to upload a photo.
File - You will use this field if you are requesting the user to upload file types other than a photo (pdf, word doc, etc.)
Date - This option will allow the user to use a date picker to select a date from.
Time - This option will allow the user to use a time picker to select a date from.
SSN - The social security option will allow the user to submit their SSN confidentially.
Select the 2nd tab labeled "Settings" at the top of the form creation page.
*Be sure to save when you finish
Availability - This section will give you the options to Publish or Schedule the start date for the form.
General - This section will give you the options to "Require Recaptcha", "Require Receipt" and Edit the Submit Button label.
- Require Recaptcha - This confirms that the user is not a spam bot.
- Requires Receipt - This will send the user a receipt of the form. Important to note: In order to use this there must be at least one text field with email validation selected.
- Submit Button Title - Edit the text on the submit button to display your personalized call-to-action.
Form Completion - Here you can edit the message that will be displayed once the user successfully completes the form.
This is the section that you will use to edit who receives the notifications/submissions for your form.
- Select "Add recipient" then enter their Name and Email Address.
- You may enter more than one recipient in this location.