UVA Faculty & Lab Site Factory Basics

A faculty or lab site contains several content types to provide flexibility in how you create pages as well as providing lists of people, courses, and research projects that automatically update when items are added, edited, or removed. 

Layout is available within the landing page content type. 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.


Content Types

  • News 

  • Basic Page 

  • Publications 

  • Projects 

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

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


    • Embed with URL


    • 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

    Projects - Card Style

    Projects card style screenshot

    Courses - Text List Style

    Courses Text List 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