UVA Department Site Factory Basics

A department site contains several content types to provide flexibility in how you create pages as well as providing lists of people and events that automatically update when items are added, edited, or removed. Layout is available for several content types. Using layout gives you the ability to add sections with columns (single, two-column, three-column) as well as custom blocks (e.g. related links, quote, etc.). These blocks are pre-styled to appear as outlined below.

Overview

Content Types

  • Article (“News”) – Layout Available

  • Basic Page – Limited Layout Available

  • Event

  • Landing Page – Layout Available; does not have subpages (no left sidebar)

  • Person

What You Can Do On The…

  • Edit Tab

    • edit title,

    • body field (may not be used),

    • path,

    • menu settings,

    • and publish status.

  • Layout Tab

    • Add layout sections (several column layouts available)

    • Add custom blocks and List Views to sections

    • Drag and drop blocks to different sections or columns

    • Edit content of custom blocks

Getting Started

Logging In

You will receive an email notice of your Drupal account activation. It will include your username and a one-time login link. Use the link and then click the "Use the one-time login" button to login and create a password in the "Password" and "Confirm Password" fields.

Remember to click "Save" or your password will not be set.

In the future, you can login to the admin area of your site at http://your-site-url/user/login (for example, http://cacs.virginia.edu/user/login).

Note that your account belongs to you, and only you. Do not share your account information. If others need access, request accounts for them.

Forgot your password? Go to your /user page (i.e., http://mysite.virginia.edu/user) and click on the tab 'Request New Password'.


Create New Content

Drupal breaks content up into types – basic, news, courses, etc. When creating new content, think about the type of content you are adding in order to know which type to choose. When adding or editing content, you will see a page with associated fields and settings. A field with a red asterisk is required.

A basic page is typically a simple page with text, and perhaps an image or two. It will not have multiple columns or more styled elements found using Layout (to use Layout, scroll to the Layout section below starting on Page 8).

To create a basic page:

  1. Go to Content – Add Content
  2. Select Basic Page
  3. Provide a title and optional banner image or feature image (Article)
  4. Provide Body content (for body content, see also section below ‘Using Styles…’
  5. Save (default status is Draft)

Save and Publish

Once you finish creating or editing content, scroll down to the Save button and press Save. If you just want the world to see it be sure the Published option is selected. If you need to keep working on the page before others see it, keep it as Draft.

save and publish screenshot

Add Your Page to the Main Site Navigation

The main site navigation is found across the top of every site page, under your site title. It is how users will navigate to different pages of your site.

Menu Settings Screenshot

To add one of your pages to the navigation:

  1. Add a new page or edit an existing page
  2. In the right-hand column are several options
  3. Click Menu Settings – Provide a menu link
  4. The menu link title is automatically set by your page title; this can be changed if desired.
  5. Description is optional
  6. The Parent Item dropdown tells Drupal where in the navigation to add your page; the default ‘Main Navigation’ selection will appear to add the menu item to the top of your site.
    • You can alternatively choose to place your page under one of the main items; this will create a sub-navigation which includes a dropdown and a left sidebar menu within that section.
  7. Save your page, then view the page and/or homepage and ensure that the menu item to your page displays as desired.

MenuSettings Provide Checkbox Screenshot

Change the Order of Navigation

To change the order that items appear in your main navigation:

Pencil Screenshot
  1. Hover over the main navigation; a Pencil icon will appear to the right of the navigation items

  2. Click the Pencil Icon – Edit Menu

  3. Use the drag handles on the left to move menu items up or down.

  4. You can also drag an item to the right, underneath another item, to make it sub-navigation under that item.

  5. Save your changes.

Menu Items Screenshot

Tip: You can add menu items on this page as well by clicking the +Add Link button at the top left. You’ll need to know either the full URL (example: http://www.virginia.edu) or the path to your website page (example: /about-us)

Adding Documents or Images to Your Page using Media Browser

Add Links to Documents using Media Browser

Adding documents to your Media library then linking to those documents within your webpage content is a two-step process.

  1. Doc Upload png
    Go to Content > Media, then click +Add Media > Document to upload your new document. Alternatively, you can click Bulk Upload to upload multiple documents at once.
  2. Once your document(s) is displaying in the Media library, now you can reference this document from any page on your site. Go into edit mode on that page, then:

    • In the Body field, highlight the text you want linked.

    • link button

      Click the Link icon and begin typing the name or title of your document; a prompt should come up with your document and/or others with similar names. Choose your document and click save.

    • Scroll to the bottom of the webpage and save your work.

Add Images

Media browser button

The media browser button in the WYSIWIG editor allows you to insert images within your basic text.

  1. Click the media browser button
  2. If the image you want is already showing, select it and click Place.
  3. To add a new image to the media page, click Upload – Choose File.
  4. Find the file on your computer, then click Open.
  5. Provide Alternate text for your image (description of what the image is); scroll to the bottom, and give your image a name.
  6. Click Place
  7. Under Image Styles, there are several sizes of images you can choose, which will alter the size of your image. If you want the original, select None.
  8. Your image placement defaults to the left, with no text wrapping around it.  Choose Align – Left, Center, or Right to place your image accordingly, which will also allow text to wrap around the image if size allows.
  9. Click Embed, then save your page.

2. 

Using Styles, Custom Blocks & Lists

Button Styles

In the WYSIWYG editor of any text field, you may format links to appear as several different button styles. To create a button link:

  1. Type the text of the link/button.

  2. Select the text.

  3. Click the insert link button: 

    Body Link Button
  4. Paste in the URL for the link and press Save 
  5. Select the link (click anywhere on the link) and press on the Styles option in the toolbar. 
    Body Styles Tab
  6. Choose the button style you prefer.
    Style Tab Button Selections

 


Add Document Links

Text Format Screenshot
  1. In the WYSIWYG editor of the body or description field, first ensure that your field has the text format ‘Full HTML’ selected (underneath field).
  2. With your cursor placed the body field where you’d like your link to appear, choose the Document Icon
  3. IMPORTANT: the WYSIWYG editor/file upload works best if using Chrome,
  4. Firefox and Safari. Avoid Internet Explorer if you are adding images and/or files to your website.
Paperclip Screenshot

Add Images to Your Basic Page Using Media Browser

The media browser button in the WYSIWIG editor allows you to insert images within your basic text.

Media Browser Screenshot
  1. Click the media browser button
  2. If the image you want is already showing, select it and click Place.
  3. To add a new image to the media page, click Upload – Choose File.
  4. Find the file on your computer, then click Open.
  5. Provide Alternate text for your image (description of what the image is); scroll to the bottom, and give your image a name.
  6. Click Place
  7. Under Image Styles, there are several sizes of images you can choose, which will alter the size of your image. If you want the original, select None.
  8. Your image placement defaults to the left, with no text wrapping around it. Choose Align – Left, Center, or Right to place your image accordingly, which will also allow text to wrap around the image if size allows.
  9. Click Embed, then save your page.
  10. To edit your image selections, simply to back into Edit mode, and double click your image in the WYSIWIG editor.

Use Source/HTML View

If you prefer to use HTML while building your pages, the Source button will switch the WYSIWIG editor to use HTML mode, rather than View mode.

Source Button Screenshot
Revisions and URL Alias

Revisions

Revisions Sidebar

The settings menu on the right side of the edit screen provides options for revisions, menu settings, and URL Alias. Use the Revision log message to leave a note about what you changed. If you need to roll back to an earlier version of your page, this will help you know what changed when. You can view Revisions by selecting the Revisions Tab, which appears in the same row as View | Edit which in edit mode on a page.

 

 

Revisions Tab Screenshot

URL Aliases

The "URL Alias" tab allows you to manually change the URL for this content. Drupal automatically builds the URL based on the content title, so if you want it to be something specific, uncheck "Generate automatic URL alias" and supply your own.

URL Alias Screenshot
Create Pages & Use Layout

To create a page with styled blocks or a different layout/number of columns:

  1. Go to Content – Add Content
  2. Select Article, Basic Page, or Landing Page
  3. Provide a title and optional banner image or feature image (Article)
  4. Optionally provide Body content
  5. Save (default status is Draft)
  6. To add styled features or different column formats, click on the Layout tab.

Add Sections

  1. In the Layout Tab click Add section

    Add Section screenshot
  2. Choose a column layout.

    Column Layout screenshot
  3. Provide an Administrative label (this will not show to site visitors) and press the Add section button.

    Configure Section screenshot

Add Custom Blocks

  1. In the Layout Tab click Add block. 
    Add Block Section screenshot
  2. In the upper right corner click Create custom block
    Choose Block Section screenshot
  3. Choose a custom block type to create.
  4. Complete the form fields for your needs.
  5. Press Save.

Note: Custom blocks may be moved via drag and drop into different sections or in a different order within a section.

Custom Blocks Available

Curated Links

  • Title
  • URL (internal or external)
  • Target
Curated Links Block screenshot

Data Header (can be used as a header for other sections)

Data Header block screenshot

Diagonal Call to Action (Landing Page full width only)

  • Title
  • Caption
  • Link
Diagonal CTA screenshot

Full Width Image (width of content section in which it is placed)

  • Media image
  • Caption

Video

  • Embed with URL

Quote

  • Quote text
  • Author
Quote block screenshot

 

Add News & Events Lists (Views) To a Landing Page
  1. In the Layout Tab click Add block
    Add Block Section screenshot
  2. In the right sidebar select the List (View) you would like to place.
    List View Types block screenshot

List (Views) Types

Events - Card Style (full-width only)

Events List View screenshot

Events - Test List Style

Events List View 2 screenshot

News 1/3 - shows header and first article

News 1/3 Screenshot

News 2/3 - shows articles two and three (skips one)

News 2/3 Screenshot

This allows you to build a section that looks like this:

In the News Screenshot