Drupal Guide

Getting Started with Drupal

student working on a laptop while sitting in an armchair

Using Drupal can be daunting at first, but with our guide, we can help you settle into using Drupal. This guide is designed to help walk you through the steps of using Drupal from day to day. We also provide training resources to help you. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Basics

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 log in to Drupal. Follow these steps to log in:

  1. Visit the domain where you want to create or edit the page.
  2. In the address bar, add /user to the end of the website's domain name (e.g., oit.uccs.edu/user).
  3. Log in using your UCCS email and password.

Important: Make sure when you are entering the URL, that /user is the only text after the domain name.

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.

The typical webpage layout consists of the site header and footer, a menu, and page content. The site header and footer are preset for you and cannot be changed. The main content section is where the content will go.

Users can use different page types to create different effects along with row types. To learn more about page types visit our page types. To learn more about row types visit our row types page. 

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.Drupal list of page types
  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:”.

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 them. 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.

  • 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 

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 "x2" 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 "x2" 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: "Tx".

 

  • 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.

Advanced

Page URLs 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 based on the page title.
     
  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 URLs 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 on.

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 page's 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. 

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 an "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.