Training Library

Drupal is an online webpage managing platform that allows users with little to no coding knowledge or experience to create and edit webpages. This platform makes it easy for users to display and keep their content up to date. Learn more about  Drupal as a content management system.

To create or edit a page, you will need to login to Drupal, follow these steps to login:

1. Enter the domain of where you would like to create a page, or where an existing page already resides.

2. Add /user to the end of the domain. 

3. Log in using your UCCS email and password. 

Make sure when logging on that it is only the domain and not the pathway that you are adding /user to, if you want to navigate to a certain page, after logging in you can either go to the content list (located in the top left corner under "Manage") or enter in the complete URL after signing in. Once you are signed in you should see the login home page with your username displayed. Below is an example similar to what you should see.

A basic webpage structure mainly consists of a page header at the top which will contain UCCS's logo and a main navigation menu, followed by the main content, and ends with the page footer. The main content section is where you will put your content or information. Usually, the header and footer will already be configured for convenience. 

There are many different page templates for users to choose from depending on the type of content they would like to display.

1. UCCS Department Directory 2018 page can be used to list the staff and/or faculty information from multiple departments on one page. 
2. UCCS Event Page 2018 page can be used to display information about an ongoing event including the date, time, and location of the event. 
3. UCCS News Story 2018 page is used to present information about a current news story.
4. UCCS Person Page 2018 page is used to present information about a staff and/or faculty member including their contact information, title, and biography.
5. UCCS Single Page 2018 page is used for anything other than the rest of the page templates available, this page is very flexible with the type of content that can be displayed and is a good "go to" page template.
6. UCCS Staff Page 2018 page is used to list faculty and/or staff information under one department. 

To create a new page follow these steps:

1. Go to the "Manage" tab in the top left corner of the computer.
2. Next you can click on "Content" which will bring you to a list of all your current pages, or content.
3. Next click the blue button that says "+ Add Content". You will then have a list of content types from which to chose from.
4. Select the content type you want and then start adding your content to your new page.
5. Once you have finished adding your content, hover over the bottom of the page with your cursor and a menu will pop up, you will then have to select how you want to save the page by toggling the drop-down menu next to the words “save as:”.

• Saving as a Draft will only be able to be viewed by anyone who is logged in, the page is not considered “live”
• Saving as In Review is like saving as a Draft in the sense that the page can only be viewed by users who are logged in; however, this adds the In Review label so that it can be reviewed and then approved for publishing.
• Saving as Published will make the page “live”, meaning anyone can see the page without having to be logged in

Page editing and revisions will always be available regardless of how the page is saved.

1. To edit an existing page, click on the tab that says “Manage” in the top left corner of your computer screen after logging in, this will bring up new menu options in the secondary menu just below the menu where the tab “Manage” is.

2. Select “Content” from the new secondary menu, this will bring you to the “Content” page, this is where you will find a list of current pages on that site.

3. Once you are on the “Content” page where all pages on that site are listed, you will select the page you want to edit by either scrolling through the listed pages, or by searching for the title of the page in the search bar located just under the blue button labeled “+ Add content”. Note: The search bar is sensitive to spacing, if you cannot find the page you are looking for, make sure you did not add any extra spaces either between words or after the title.

4. Once you have found the page you want to edit, click “Edit” under the “Operations” column for the page listed.

5. Edit the page.

6. To save changes, hover over the bottom of the page and select save, you can either leave the page saved as however it was originally saved, or you can move the page to another save type: either Draft, In Review, or Published.

7. If you make changes but do not want to save them, click on the “View” tab at the top of the editing page, this will keep the page the way it was when it was most recently saved.

Web pages can also be deleted, however it is recommended to archive pages rather than delete. Content on deleted pages cannot be recovered.

To archive a web page follow these steps:

1. To archive a web page, navigate to the page you would like to archive either by following steps 1-2 previously mentioned on how to edit a web page or by entering the URL of the page you want to archive after being logged in.

2. Once you have found the page you want to archive, click on the name of the page (written in blue text) to bring you to the actual page. If you entered the URL you should already be on the page.

3. In the top right corner of your computer screen, click on the button that says “Tasks”, this will pull up a drop-down menu.

4. From that drop-down menu, select “Archive”. Your page is now archived.

Note: Pages can only be archived if they are saved as Published.

WYSIWYG is an acronym for What You See Is What You Get. It is a system that allows you to see what the end result is or looks like while the content (such as a webpage, document, or slide presentation) is being created.   

All types of text boxes will have this feature built in, it is the formatting menu at the top of every text box. Here is what the WYSIWYG can do:

• Starting from the left you will have "B" which stands for bold, click this icon to make your text bold. 
• Moving right, there is an italic "I", click this icon to make your text italic.
• Next, there is an underlined capital "U", click this icon to underline your text. 
• Beside the underline icon, there is an "S" with a line through it, click this icon to strike through your text. 
• To the right there is an "x²" with a superscript, click this icon to add a superscript to your text. 
• Similarly, you can also add a subscript, click the icon that is an "x₂" to add a subscript. 

• You can also remove all formatting by clicking on the icon that looks like an italic capital T underlined and with a subscript similar to this: "T_x". 

• Next to the remove formatting icon will be your 4 paragraph formatting options. The first option is to align your text to the left, displayed by the icon as lines aligned to the left. Next is to center your text displayed as lines that are centered. Following that is the right align icon displayed by lines aligned to the right. Lastly is a series of lines that are aligned on all sides, press this icon to justify your text. 

• After the paragraph formatting options, there is a link icon, press this button to add a link to your text, or if you have a link you can click the unlink icon to the right of the link button to unlink text. 
• You can also make your text into a list, click on the icon that has two dots with lines off to the side, this will turn your text into a bullet list. 
• Similarly if you click on the icon that has numbers with lines off to the side this will turn your text into a numbered list. 

• Next there is an icon that is a set of quotation marks, click this icon to add a quote to your text. 
• Next to the quotation marks, there is an icon that looks like a paperclip, click this button to attach a file to your text. 
• Next to the paperclip there is an icon that looks like an image, click this icon to attach a photo with your text
• Next to the photo there is an icon that looks like a table, click this icon to add a table with any number of columns and rows.
• After the table option, there is an icon that looks like lines with a bold line in the center, click this icon to insert a horizontal line within your text 
• After that, there is an icon that looks like multiple photos, click this button to insert media from the media library

• Next is indent options, these buttons look like an arrow pointing to and away from a vertical line with horizontal lines on the other side. Click the first option to decrease the indent of your text, the other option is to increase the indent of your text. 

• After the indent options there is the word "Format" or "Normal" with a carrot next to it, click this to view a list of format options and then select which option you would like to use for your text. 

• After the format button, there is an icon that has a dashed square with two rectangles on the bottom and side of it, click this option to show blocks.
• Next to the show blocks icon, there is a button that says "Source", click this to access and edit the code section of your text. 
• The last icon is a circle with a figure inside, click this icon to check the accessibility of your text.

Adding media to your page is a great way to organize your content. Media types include Files, News Story, and Single Page and are listed below.

1. Audio File 
2. Document
3. Event - Contact info
4. Image
5. Instagram
6. Media - Call to Action
7. News Story - Byline
8. News Story - Image
9. Single Page - CTA Card
10. Single Page - Duo Tone CTA
11. Single Page - Hero Image
12. Single Page - Icon Card CTA
13. Single Page - Image Slider
14. Single Page - Knockout
15. Single Page - Mini Bio Card
16. Single Page - Page Header 
17. Tweet
18. Video 
19. Video File

To add media, follow the steps listed below

1. Hover with your cursor over the "Content" tab on the top left corner of your screen after being logged in, this will pull up a drop down menu.

    

2. From the drop down menu hover with your cursor over "Media", this will bring up a side tab that says "Add media", click on this button.

   

3. This will then bring up a list of media options for you to choose from, select the desired media type.

   

4. After selecting your media type, fill in your content and Save your edits.

   

5. Navigate to the page where you would like to place the media. Select the corresponding content row of your media type. (For example if you made a Single Page - Page Header media, then you will select Single Page - Page Header content row on the page you would like to place it and then start typing in the name of your media in the provided text box)

   

6. Select your media and save the page. Your media has now been placed.

   

Note: most content row types will tell you the type of media needed.

You may customize the UCCS Single Page 2018 by stacking and combining different Row Types to display your content and images. Different content row types are:

1. Single Page - Page Header
2. Single Page - Hero
3. Single Page - Hero Slider
4. Single Page - Section Header
5. Single Page - CTA Cards Row
6. Single Page - Duo Tone CTA
7. Single Page - Custom
8. Single Page - Image Slider
9. Single Page - Success Stories
10. Single Page - Content Media Slider
11. Single Page - Image Media Slider
12. Single Page - Accordion Row
13. Single Page - List
14. Single Page - Content Cards
15. Single Page - Bullet List
16. Single Page - Jumbo Button
17. Single Page - Icon CTA Row
18. Single Page - Icon Cards Row
19. Single Page - Webform

Note: Not all content rows will be available on all page type templates.  Only the UCCS Single Page 2018 page template allows full use of all row types.

To add a content row, follow the steps listed below:

1. After selecting your page template, you will be brought to the editing page. Note: Depending on the page template there may already be content rows for you to fill in. All pages will automatically have a row for you to fill in the Title.
2. Under the Title content row there will be a drop down menu to select and add a row.

   

3. Once the row is added, you may fill in the content fields, add Media or images depending on the Row Type you selected.

   

4. You may add, move or remove rows as you build your page.

   

   

5. You may Save your page as Draft, Publish to the Web or place as In Review if your department has a content approver.

   

Note: All pages must have a Title and a type of content row with content in order to be saved.

View more information about specific content rows

Adding photos is a great way to make your content more visually appealing. There are also many different ways to add a photo to your page, to learn how to add a photo follow the methods listed below. 

Accessibility Best Practice: Images that contain text and informational charts, such as flyers, need to also have that information written out on the page for users who may be using a screen reader. For short descriptions, use the alt text attribute in your image. When longer descriptions are needed, display the content in a paragraph near the image.

Note: Images large in size can cause poor page performance, try to keep image sizes around 200kb or less for optimal page performance.

Uploading a photo using the "Image" media (recommended) 

This method of adding a photo is recommended because the image will always be able to be referenced in the media library. Media can also be deleted if needed while files cannot. 

1. After logging in, navigate to the top left of your computer screen and click on "Content" under the "Manage" tab, This will bring you to the page where all content is listed for that domain.

   

2. Click on the tab that says "Media" on the top left side of the page, this will bring you to a list of all media for that domain.

   

3. Next, click the blue button labeled "+ Add media", this will bring you to a list of media types.

   

4. Select "Image" from the list of media types, this will bring you to the "Image" media editing page

   

5. On this page, select "Choose file" in the content row labeled "Image" at the top of the page.

   

6. Select the image you would like to upload from your computer.


7. Please enter a brief description of the photo in the "Alternative text" box provided below your selected photo for accessibility purposes.

   

8. Add a name for the photo in the "Name" text box provided below your photo, adding a caption is optional.

   

9. Save the photo and it will appear in the media library under the name you provided.


10. Navigate to your page and use any row with the Text Editor feature to place your image on the page via the Media Browser icon. In this example, we are using the UCCS 2018 Custom Row.

    

11. Use the Media Library's filter feature to view all images

    

12. Select and embed your image in your row

    

PDF's are a great way to share information with multiple users. Uploading a PDF is similar to uploading an image, follow these steps listed below to learn how.

1. After logging into your webpage, navigate to the top left of your computer screen and click on "Content" under the "Manage" tab, This will bring you to the page where all content is listed for that domain.

   

2. Click on the tab that says "Media" on the top left side of the page, this will bring you to a list of all media for that domain.

   

3. Next, click the blue button labeled "+ Add media", this will bring you to a list of media types.

   

4. Select "Document" from the list of media types, this will bring you to the "Document" media editing page.

   

5. On the "Document" media editing page, click on the grey bar under "Document" that says "Choose File".

   

6. Select the PDF you would like to upload from your computer files.
7. Below where you added your document, type a name for the document under "Name" in the text box.

   

8. Click on the blue button labeled "Save" at the bottom of the page. Your document has now been uploaded and can be found under the name you listed in the media list. 
9. After saving, go back to your document by either clicking on the name written in blue text, or by clicking edit on the far right side.

   

10. Once you are back in the "Document" media editing page click on the file name of the document in blue text, this will open your PDF in a new window.

    

11. Copy the URL of the document from the new window by either right clicking on your mouse, or by pressing Ctrl + C on your keyboard. 

    

12. Navigate back to the page you would like to upload your document to, either by searching for it in the content library list or by entering the URL of the page. 
13. Some types of content rows will have a specific place to add the PDF from the media library. If not and you are uploading the PDF to a type of text box (such as a Single Page - Custom) you will want to find and click on the "Source" button towards the right hand side of the text formatting menu at the top of the text box. This will allow you to access the code part of the text box.

    

14. After clicking "Source", paste the URL of the PDF that you copied earlier, you can only paste by pressing Ctrl + V, then format the URL as follows:
15. Add "<a href=" before the URL
16. Add quotes around the URL itself

    

17. Remove the first part of the PDF's URL that has the the domain of the website the page lives in. The domain of the website the page lives in will automatically appear on any URL, so to get the correct pathway you have to remove the domain. The correct URL of the document should always start with "/sites" followed by the rest of the URL.
18. Add ">" after the URL, "</a>" should automatically appear after. Your cursor should also automatically appear between the two carrots while the rest of the URL, including "<a href=", should become highlighted.
19. Type some kind of word/phrase that will reference the PDF where the cursor is (between the two carrots), this can either be the name of the PDF or other common phrases like "click here", this word or phrase will be what appears in your text and will be written in blue text so users know that it is an active link. *Note: if you do not add a word or phrase your document will not appear in the text and will not be accessible. * The final code should look something like this: <a href=”/sites/pdf-url”>Click Here</a>

    

20. After you have finished the formatting of the URL, you can click the "Source" button again to toggle it back to text, you should see your reference word or phrase appear in blue text.
21. Once you have finished adding the URL, save the page. You have successfully uploaded your PDF.

Page URL's are important for organizing and navigating a website. It is recommended to create your own URL for each page so that all pages on a site follow a clear pathway. Follow the steps below to learn how to choose a URL for a page.

1. When creating a new page, a URL has not been assigned until you save it. If you do not manually type a URL for the page, one will be automatically generated.
2. Before saving a new page, go to the menu on the right side of the page, click on the blue text that says "URL ALIAS" and the URL menu will expand.

   

3. Uncheck the box next to the text that says "Generate automatic URL alias"

   

4. After unchecking the box, you will be able to enter in your own URL for that page in the provided text box below "URL alias"

   

Note: all URL's have to start with "/". Do not enter the domain name when entering your URL, domain names are automatically added to any URL for the site you are working in. 

If you would like to change a URL on an existing page, follow the same steps listed previously. Keep in mind that when you change a pages' URL that any other place where the previous URL was listed will now result in a broken link and will have to be updated to the current URL. 

Menus are a great way to keep a site easy to navigate and organized. To learn how to create or edit existing menus, follow the steps listed below:

1. To add a menu, click on the "Manage" tab at the top left of the page after logging in. 

   

2. Under "Manage" hover over the tab labeled "Structure" with your computer mouse and a drop-down list will appear. Click on "Menus" towards the bottom of the list, you will then be brought to the "Menus" page where you will see a list of different types of menus.

   

3. The most common menu type used on this page is the "Main navigation" menu, to add a menu here, click "Edit menu" on the right-hand side next to "Main navigation" on the list. This will bring you to the Main navigation menu page.

   

   

4. On this page, you will be able to see the list of current links on the menu, or no links if none have been made yet. To add a link, click on the blue button near the top left side of the page labeled "+ Add link". 

   

5. You will then be prompted to add information about the link you are adding.

   The Menu Link Title is the name of the link that will appear to the user.

   The Link is the page address you want the link to go to.  Simply start typing the name of the page and it will automatically search the content library from which you can select the desired page.

   Note: It is important to make sure the box labeled "Enabled" is checked, otherwise your link will not appear in the menu

   

6. You can also nest links under other links in a menu. To do this you can select the "Parent link" from the drop-down bar towards the bottom of the page and select the link you would like to nest under. Otherwise, leave the parent link as "<Main navigation>.

   

7. Press the blue "Save" button at the bottom of the page and your link is now added. 
8. To check that your link was added, or to change the order of your links click on "Main navigation" again and you will see your new link in the list of links for that menu. To change the order of the links, simply click and hold on the arrows next to the name of the link on the left side and drag.

   

9. Press "Save" again if you moved the order of the links, otherwise they will revert back to the way they were originally saved. Your menu should now appear on your page or pages.

   

Blocks are used to place things like additional menus and banners on just one or multiple pages across your site in order to convey information or organize your page. To learn how to place a block, follow the steps listed below.

1. After logging in, click on the tab that says "Manage" in the top left-hand corner of your computer screen, a secondary menu will appear below.

   

2. Hover with your computer mouse over the tab labeled "Structure" from the secondary menu and a drop-down menu will appear. Click on the first option labeled "Block layout" from the drop-down menu, this will take you to the block layout page where you can see all of the blocks available or currently placed.

   

3. To place a block, find the section where you would like to place it and click on the grey button that says "Place block". You will then be prompted to choose from a list of blocks or create a custom block to place.
   
   In this example, we are going to place a Secondary Navigation Menu on our page in the Row 

   

4. From the Place Block list, select the custom block or menu that you would like to insert.

   

5. Uncheck the "Display title" box. If this is left checked, the Block's title will be shown to the user on the page.

   

6. You may click the tab that says "Pages" to configure what pages the block will appear on, simply type the page URLs of where you would like them to appear. You may also enter the page URLs where you do not wish the block to appear by selecting the appropriate checkbox below.
   
   In this example, this menu will on show on pages that sart with "/training".

   

7. Click the blue "Save block" button and your block is now placed.

   

8. On the Block Layout page, you will now see your new menu placed successfully.

   

9. Our new menu will also appear on the site.

   

Forms are a great way to communicate personalized information. To learn how to upload and use a form, follow the steps listed below.

1. After logging in, click on the tab that says "Manage" in the top left hand corner of your computer screen, a secondary menu will appear below it.

   

2. Hover with your computer mouse over the tab labeled "Structure" from the secondary menu and a drop down menu will appear.
3. Click on "Webforms" listed at the very bottom of the drop down menu, you will then be brought to the Webforms page where you will be able to see a list of current webforms.
4. To add a new webform, click on the blue button labeled "+ Add webform" near the top of the page.
5. You will then be prompted to give your new webform a title, you also have the option of adding a "Administrative description", this is not required. You can also choose if the webform is open or not by selecting the corresponding option. 
6. After you have chosen a title, click the blue button that says "Save" at the bottom, you will then be taken to your new webform's page.
7. You can then add various elements by clicking on the blue button labeled "+ Add element", which will take you to a list of elements for you to choose from. 
8. Select the element you would like to add, then you will be prompted to add a title. In the same window you can configure the element further if needed.
9. Click the blue "Save" button to save your element. 
10. Once you have added all of your elements, click the blue "Save elements" button at the bottom of the page.
11. To add the webform to a page, add a "Webform" content row.
12. Select your webform and then save the page. Your webform is now available on your page.

There are other ways to customize and organize your page by using Custom User Interface Elements. These Interface Elements are:

1. Buttons
2. Tables
3. Framework
4. Embedded PDF