Configuring site title

Example of site title with prefix and suffix options

This is available only to Site Administrators. If you require a Site title change, please log a helpdesk ticket for the CMS team. Site titles fall under UQ guidelines.

​To configure your site's title go to Configuration > System > Site Information

Admin menu showing location of Site Information section

Standard site title

The 'Site name' is the official name of the site. This will display by default if none of the other options below it are specified. It is unaffected by the prefix or suffix options.

Site title settings

Prefix and suffix options

The prefix and suffix options can be used to lead in site title with the org unit type, or define a sub-system of the org unit. For instance 'School of' or 'Faculty of' are prefixes, while 'Intranet' or 'Newsletter' are suffixes.

The 'Site heading prefix' will sit above the Site heading if it is specified. You may choose to display the prefix in either a small or default font size. Small is recommended for most prefixes.

The 'Site heading' is used to override the 'Site name'. It must be specified in order to use a Prefix or Suffix, and it can be the same as the 'Site name'.

The 'Site suffix' will sit below the Site heading if it is specified. You may choose to display the suffix in either a small or default font size.

Click Save configuration at the bottom of the page to apply your changes.

Building a homepage
Drupal Template: 
UQ Base Template

This functionality is available to Site Coordinators and Administrators only.

A homepage has multiple roles; it acts as a portal into key areas of the site, and showcase the latest and most important things your audience/s should know about. The homepage is usually where visitors spend the least amount of time, but come back to the most often, so they should be simple and focus on the highest value information.

A good homepage represents what the visitors need to know and do on the site. Visitors are visiting with a purpose, therefore, your homepage content and design should reflect what your visitors need.

Starting with promoted content

A freshly created Release 1 starter site will come with a basic homepage. This uses the DS Inception module to easily place content into a variety of available layouts.

While there are many different ways to lay out a homepage, in this tutorial we will focus on creating the following:

Finished homepage with banners and promoted content


Step 1

Before we can create a homepage we need some content on the site. These will be featured on the homepage so visitors can click through to these pages.

Firstly install the content types you'll need. Go to Central Things Manager in the admin menu.

Click the Install Things tab and select the Basic Page content type. Click install and the site will setup the content type for you (this only needs to be done once). Return to the homepage.

You can now build pages so start by creating a page that represents four large sections in your website, eg. About, Study Options, Current Students, and Contact. (You can always change these later or use ones that make more sense to your site)

Add some text to the Summary and Body fields.

For each page, open the Publishing Options tab on the edit screen and tick 'Published' and 'Promoted to front page'. This won't do anything just yet because we still need to display them on the homepage.

Add a Featured Image and click Save.


Step 2

On the homepage, select Add Element on one of the Inception drop zones and select View. This will add a "view" element.

Adding a view to an Inception zone

This will bring up a list of the available Views to use on the site.

Inception add View element screen

We want to select from the List with Lead set, and choose the Title, Summary, Image option.

Selecting Title, Summary, Image option from the List with Lead view

This View is pre-configured to display any 'promoted to front page' nodes in a grid layout. You now have a hompage that displays a grid of promoted pages, allowing visitors to navigate into the key sections of your site.

Step 2 showing promoted items in a grid


Step 3

We are using the List with Lead view but we haven't added our lead text yet, it's just using a default to show us where this will sit. Now lets put some introductory text to the left of our grid of promoted items.

Hover over the view and click on the Cog icon in the element toolbar. This will bring up the settings from when we added the view.

Inception toolbar for a View element

Expand the Custom View Options to reveal a Custom Header field. This is where you can enter your lead text. It might be providing context to the featured items in the grid, or it might be a short summary of the purpose of the site.

Save the changes then jump back to the homepage to see how it looks. The text is now displaying on the left column and the promoted items have moved across the accomodate.

It's working but it looks a bit plain, so now we add a style class and configure the columns to fit the number of promoted items we have.


Step 4

Click the Cog icon in the element toolbar again. This time we will use the Additional classes field to set the style class we want to use. There are a few style variations available for this View but we want to use 'reversed' for now. This will put a light grey background behind the promoted items and block them out with some subtle detailing.

Save changes and return to the homepage.

Congratulations you have just built your first functioning homepage in the UQ Drupal platform!

Next: Featuring content with banners

Blocks

This functionality is only available to Site Coordinators and Administrators.

What are Blocks?

Blocks are distinct chunks of content or functionality that can be placed on pages. They are not the page themselves, but can be added for instance to the sidebar of a page. Multiple blocks can be added to the same page.

They could be static chunks of content or they might pull in content from somewhere else to display in the context of another page.

Example of a static content block in the sidebar second region

Why use Blocks?

Blocks would be used (example here).

Block of content

To add supporting content to an existing page, say in the sidebar, a content block is a good solution.

In the admin menu, go to Stucture > Blocks > Add block

Adding a block via the admin menu

Like a page, blocks have a Title and a Body. The title is optional however and can be left black or set to <none>. The Block description is its administrative name so you can tell which block it is. This does not display to any front-end users.

Add your content to the Body as you would on a page, using the WYSIWYG editor.

Where to display

Use the Region Settings options to select where on the page the block should appear. In the UQ Base (default theme) drop down list select the region you want. For instance 'Sidebar second (navigation)'.

In the Visibility Settings you can select which page/s or content types the block should appear on, as well as which security roles can see the block.

For instance if you wanted the block to only show on the About page then you would put the relative path url (e.g. about) for that page in the Show block on specific pages field and tick the Only the selected pages option. You can come back at any time to change where the block displays.

Edit existing blocks

Hover over an existing block and it will display the admin cog icon Block edit cog icon at its top right corner. Click this and select Configure Block to bring up the block edit screen.

Views

This functionality is only available to Site Coordinators and Administrators.

 

What are views?

Views are used to select, sort and display content in various ways.

Examples of what you can do with Views:

  • Create a list of all the events running on a site, each list item then links to a full page of the event. Display this list as a block on the homepage and again on the events page.
  • Create an index of all your content pages that is sortable and contains multiple columns of data, such as author, date created and taxonomies.

You can add in filters based on dynamic input (conditional filters) and join one piece of content with another if they share a piece of information (relationships).

Why use views?

Views is very useful when there is a need to display content that frequently changes. For example, an event list would need a view. Otherwise, the site maintainer will need to manually unpublish events once they have passed. And if you have more than one event feed on the site (eg. one on the homepage, another on an events page), the site maintainer will need to update two different spots.

 

Display Suite

UQ Base DS layouts

The following layouts have been created for Display Suite using the grid classes of UQ Base so that they play nicely and are responsive.

One column

One column

Two column

Two column

Two column (eight | four) stacked

Two column eight four stacked

Two column stacked

Two column stacked

Three column stacked

Three column

Three column stacked reset

Three column stacked reset

Four column stacked

Four column stacked

DS Inception
Drupal Template: 
UQ Base Template

Display Suite (DS) Inception is a module created for UQ to allow users to easily build engaging homepages. It ties in with Display Suite to use the DS layouts, and allows users to drag and drop content blocks into the different regions.

Inception view

A drop zone for each region in the DS layout is highlighted with a yellow box.

Elements can be added to each zone using the drop down menu. Select the type of element you want to add and the options screen to select that element will appear.

Inception drop zones and add element menu

Once elements are added they can be dragged around to different zones. The element will become semi-transparent and the selected zone will highlight a darker yellow to indicate which one you are dropping the element into.

When you drop the element into another zone it will resize to fit that space.

Moving an element to another drop zone in Inception

Once one or move elements are moved you will need to save the changes. A black strip will appear along the bottom of the page whenever there are changes to save.

Saving changes in Inception

Removing elements

Hovering over an element will display a toolbar above it. This gives options for configuring the element, editing, changing access permissions, and removing the element from the inception page.

Inception element toolbar

Element toolbar

  • Cog = Change config of the element in Inception
  • Pencil = Edit the element
  • People = Change access permissions for who can see the element. This allows individual elements to only display for certain user roles
  • Recycle bin = Remove the element from the Inception page. It doesn't delete the block, just removes it from Inceptions list of elements.

Preview mode

Preview lets you see the content of the page without the Inception drop zones and admin information in the way. This lets you quickly see what end users will see without having to logout.


Scratch

The scratch zone is a temporary zone for holding elements that won't display on the page. It is accessed via the scratch tab that sticks to the right side of the browser.

Inception scratch zone closed

Clicking scratch will open the zone to show you the elements held there. Elements can be dragged onto scratch to take them off the page, or dragged from scratch back onto one of the page's drop zones.

The red circle indicates the number of elements currently in scratch.

Inception scratch zone open


Page options & changing layout

Inception is a content type which means it acts like any other node and has some of the same properties. Clicking the Edit Page Options / Layout button will open the page settings for the Inception page.

You can change the title, menu options, url alias, and published state.

The whole Inception page can be deleted by clicking the Delete button on the Page Settings screen. This won't delete any of the blocks displayed in Inception, only the Inception page itself. This cannot be undone.

How to create banners
Drupal Template: 
UQ Base Template

So we have a list of promoted pages but we want to also display some featured pages. It might be an announcement, or an event, or course that needs to be highlighted. We're now going to use banners to feature some items above our list.

Completed feature banners example

Step 1

Once again we need some content pages to feature, so create three pages: Introductory workshop, How to apply, and Activity schedule. (You can change these later or use ones that mean something more to your site)

  1. For each page, open the Publishing Options tab on the edit screen and tick 'Promoted to front page' and 'Featured'.
  2. Add a Featured Image 
  3. Add a Feature Caption, this will be displayed on each coloured button
  4. Add a Title, this displays in a grey box across the image.

Step 2

On the homepage, select Add Element on the top Inception drop zone and select View.

From the list of Views select Starter Banners and pick the Tall Banner with action buttons option.

This View is pre-configured to display up to three items that are set to Promoted to front page AND Featured.


Read more information on banners and to see a demo of all the available prebuilt banners

Google Analytics

At UQ we use Google Analytics to track traffic statistics on our websites. Analytics is setup by Web Services and access granted to web administrators or marketing managers for individual sites. The setup of Analytics is factored into new website development, however old websites may have been setup without Analytics. If you require Analytics to be set up or access to an existing account given to a new user please submit an email request to webservices@uq.edu.au.

Getting access

You must create a Google account to access the Analytics service using your UQ email address by going to http://www.google.com/analyticsAccess to Google Analytics is only given to UQ email addresses, that is, an address that ends in @uq.edu.au. It is recommended to use a generic email address such as bel@uq.edu.au rather than an individual's email so that access can be used by multiple people and doesn't need to change when a staff member leaves the organisation.

Once you have access you can view the reports by logging into your Google account and going to the Analytics product on your account. You can also return there by going straight to http://www.google.com/analytics.

Understanding the data

Google Analytics gives you a huge amount of data to analyse and you can really learn a lot about the effectiveness of your website from it. At a basic level there are a few things you should look at to determine how your site is doing:

Visitors Overview

This is the first page of Analytics and shows you the basic traffic stats.

  • Visits - This is the total number of visits the site has received in the time period. This includes repeat visitors.
  • Unique Visitors - This is the total number of unique people who have visited the site. This is based on the computer IP address they came from to determine uniqueness. So if Bob accessed the site from work and from home he would be counted as 2 unique visitors.
  • Pageviews - This is the total number of views of pages in the site. This differs from Visits because each visitor will usually visit multiple pages. 
  • Pages/Visit - This is the average number of pages that each visitor viewed on the site in one session of using your site. This is a good indicator of how engaged visitors are with the site so the higher number the better.
  • Avg. Time on Site - This is the average amount of time each visitor spent on the site. This also indicates how engaged users are with the site. When you compare to the number of pages per visit you can get an idea of whether users are reading each page in depth or skimming over them.
  • Bounce Rate - This is the percentage of visitors who came to the site and then left without going any further into your site. These usually represent users who came to your site looking for something but immediately decided this was not the right site. It could be they hit the back button, closed the browser, or loaded a bookmarked site instead. There will always be a percentage of visitors who bounce and the lower the number the better. Anything under 40% is really good. 41% - 55% is average. A bounce rate of 70% or more means there is a problem and you need to work out what is attracting users to your site and then why they are leaving.
  • New Visits - This is the percentage of total visits to the site that are new ones instead of return visits.

Benefits of using Google Analytics

By using Google Analytice you will:

  • Know your audience
  • Trace the customer path
  • See what they are up to on your website

Google Analytics helps you analyze visitor traffic and paint a complete picture of your audience and their needs. Google Analytics shows you the full customer picture across ads and videos, websites and social tools, tablets and smartphones. That makes it easier to serve your current customers and win new ones.

How to add Google Analytics to a UQ Drupal site

Analytics is setup by Web Services and access granted to web administrators or marketing managers for individual sites. If you a an external developer, please contact webservices@uq.edu.au and we will provide you with an Analytics code to use on your site.

Below, are instructions on how to attach your unique Analytics ID to Drupal.

  1. Go to Configuration > Sytem > Google Analytics
  2. Enter the unique ID into the first field once you've obtained it from Web Services.
  3. You can specify if there are any pages you don't want tracked in Analytics, see the screenshot below.


 

UQ Base Regions
Drupal Template: 
UQ Base Template
UQ Base theme
Webforms

PLEASE NOTE Web Forms will be deprecated soon.
Please use Checkbox instead. 

How to use Checkbox for your form or survery. 

This information will remain here until Webforms are replaced. 

 

Webforms allow you to capture specific fields of information from users. They can be used for contact forms, surveys, and registration.

Forms should be used when you need to ensure that users provide specific bits of information. However, a form should be kept simple and to the point so as not to discourage users from completing them.

Creating a webform

A form is also a node of its own, rather than being placed on an existing website.

  1. Go to Content > Add content > Webform
  2. Add a Title for the node and any Body copy that you want to display above the form. This might be general contact details or an explaination of who the form submits to and when the user can expect a response by.
  3. Add the form to a menu if you want it to be accessible as part of the navigation (e.g. Contact page). It can be left out of the menu if you want users to go through other pages/steps before reaching the form (e.g. Registration or Survey)

Adding fields

Once the form node is created you can add fields to the form. Each field is on its own row and consists of a label and a field type. There are a range of field types available such as text field, email, date, checkbox, drop down list.

In this example we will create the following fields for a contact form: Name, Email, Phone, Enquiry

  1. In the first label field type 'Name'
  2. Selet the 'textfield' Type
  3. Tick the Mandatory field because we need to know who is contacting us.
  4. Click Add. This will bring up the advanced settings for the field where you can set various optional parameters. If you don't need to set any parameters then just click Save Component at the bottom to finish adding the field to the form.

Adding a Name field to a form

Advanced textfield parameters

  • Default value - Prefils the field with a value. Allows you to use Tokens to populate user and dynamic values (see the Tokens list toggle below the Default Value field).
  • Description - Displays small help text below the field.
  • Unique - Checks if the same value has been entered in another field in the form and flags a validation error to the user if duplicates exist.
  • Max length - Sets a character limit on the field. For instance a postcode field could be limited to 4 characters.
  • Width - Sets a pixel width on the field. Entering '200' will make the field 200 pixels wide.
  • Prefix text placed to the left of the textfield - Can be used to indicate the kind of value e.g. $ symbol for a Donation field.
  • Postfix text placed to the right of the textfield - Can be used to indicate the kind of value e.g. pm after a Time field.
  • Label display - Displays the label above or beside the field, or hides the label.
  • Disabled - The field will display but users cannot enter any values or interact with it. Mandatory fields that are disabled will prevent the form from being submitted if it doesn't auto-populate some value.
  • Private - The field will only appear to users who can edit the field.

Add the rest of the fields

  1. Type 'Email' in the label field
  2. Select 'E-mail' as the field type. This will validate that a real email address has been entered when the form submits.
  3. Tick the Mandatory field because we need to be able to reply.
  4. Click Add and then Save Component.

 

  1. Type 'Phone' in the label field
  2. Select 'Textfield' as the field type.
  3. Don't tick Mandatory as the user should be able to decide if they provide their phone number.
  4. Click Add and then Save Component.

 

  1. Type 'Enquiry' in the label field
  2. Select 'Textarea' as the field type. This allows multiple lines of text to be entered by the user.
  3. Tick the Mandatory field so they can't submit a blank enquiry.
  4. Click Add and then Save Component.

Setting recipient/s

Now that our form fields are built we can configure where the form submits to. Go to the 'Emails' tab at the top right.

  1. Enter an email address for the form to send the submission to. This might be a generic contact for your unit e.g. webservices@uq.edu.au
  2. Optional - Set the subject line for the form submission.
  3. Optional - Set the sender address. Because we capture an email address in the form we can use that value as the sender address, or leave it as default to have it sent from the site admin address.
  4. Optional - Set the sender name.
  5. The email template will automatically include all of the field values in the form. You can customise the template if you want to include other information or display the results in a specific format.
  6. Save email settings.

Setting confirmation message and completion events

Once the form submits the user needs to receive some notification that the form has submitted successfully. Go to 'Form Settings' at the top right.

  1. Enter a message in the Confirmation Message field to tell users that the form has submitted successfully and how long before they can expect a reply. You can take this opportunity to lead them on to something else which might help them or they might be interested in.
  2. Alternatively, the form can redirect them to another existing page on submit instead of the confirmation message.
  3. Optional - You can set a limit on the total number of submissions. This is useful for registrations when there are a limited number of seats available.

Demo