Adding Content to your Professional
Digital Portfolio
Creating a new page
We are going to start by creating a brand new
page that we will use during this tutorial to learn
to upload and display information. At the end of
this tutorial you will delete this page.
1. As this new page will be a part of your
Portfolio we need to click on the Portfolio link
– top-right of the Dashboard page, (Figure 1).
Figure 1: Portfolio link
2. On the resulting page, you need to click on the
Create page green button to create a new
page, (Figure 2).
Figure 2: Create page
3. You are now presented the start of your new
page, (Figure 3). It does not quite look like a
portfolio page, because we are in edit mode.
We need to start by setting the page title and
description. Input the following details (italics
is just to show the items you need to type in):
 Page Title – My first portfolio page
(PLEASE DELETE)
 Page Description – This is my first
attempt at creating my own web page
in Mahara. I can create these pages
at any time if I wanted to share
additional information that cannot be
included in the portfolio pages that I
have already downloaded.
Figure 3: Page title & description
Click on the green Save button to save your
additions.
Centre for Professional Education | University of Warwick | 1
4. You can now start putting your page together.
You will notice you are immediately presented
with the Edit content page. But we actually
want to start by defining the layout of our
page first. Click on the Edit layout tab, (Figure
4) to do this.
Figure 4: Edit layout
5. For your custom pages, you can select any
layout you want, but please consider the size
of the screen the user of your device will be
using when accessing this page. Select the
three, column layout with the wide middle
column, (Figure 5) and click on the green Save
button.
6. You have now returned to the Edit content
part of our new page. You cannot see the
three columns you asked for yet. Click on the
Text box button, (keep your finger pressed on
the mouse button) from the list of items you
can insert on the left of the preview area and
drag it to the preview area, (Figure 6).
Figure 5: Three-column layout
Figure 6: Dragging a Text Box
As you do that you will notice that the three
columns you requested are there on the page,
waiting for you to drag content into them.
7. You are now presented with the Configure
panel of the text box that you have just
inserted, (Figure 7). Insert the following
information:
 Block Title: Reflections
 Block Content: You can insert your
reflections in this box. Please
remember to read the ‘Writing for the
Web’ page before writing your text
copy.
Figure 7: Inserting text
Note the various text-editing tools you can
use to format your text
Centre for Professional Education | University of Warwick | 2
8. Scroll down to the bottom of this Configure
panel. Click on the check box beneath
Retractable, (Figure 8). This will enable the
user to collapse the panel, if they wish to hide
the content.
It also helps to cut down on the user having to
scroll too much to get to text boxes further
down the page.
Figure 8: Making sure the panel can be 'collapsed'
Click on the green Save button to return to
the original edit screen.
9. You will notice once you have returned to the
main Edit screen that you now have your first
text box, in the left column. You can click on
the Gear cog, (Figure 9) to return to the text
box configure panel if you need to modify the
title or description that you just inserted.
The garbage icon lets you delete this text box.
Once you have confirmed the delete, all of
the content will be gone, so please be
careful.
Figure 9: Configure & Delete the text box
10. To view what the actual page looks like click
on the Display page tab, (Figure 10).
Figure 10: Display page
11. To return to edit the page click on the grey
button, located top-right of your page ‘Edit
this page’, (Figure 11).
Figure 11: Edit this page
Centre for Professional Education | University of Warwick | 3
12. Repeat steps 6 to 11 and insert two more text
boxes in the other two columns. Make sure
that you use the following block titles:


Middle column: Evidence
Right column: Development plan
Uploading files
We have now created our page and can start to
look at uploading files, so they can be accessed on
this page
1. Click on the Dashboard link to return to the
home page for your Professional Digital
Portfolio, (Figure 12).
Figure 12: Returning to the Dashboard
2. Under Create and collect please click on the
icon called ‘Upload your files’, (Figure 13)
Figure 13: Upload your files
3. You have now been directed to the Files view
where you can create folders and upload files.
Let’s start by creating a folder for this tutorial.
Remember to give all files and folders
meaningful names. Click on the text box
beside the Create folder button and type in
Tutorial 1 – please delete, (Figure 14)
Click on the grey Create folder to complete
the process.
Figure 14: Creating a folder
Centre for Professional Education | University of Warwick | 4
4. You have just created the folder that we are
going to use during the session. This is the
folder that is going to contain our entire
collection of tutorial files for this tutorial. To
delete it simply click on the dustbin beside the
folder name, (Figure 15).
Figure 15: Deleting a folder
5. Create a Word document, PowerPoint
presentation and save them under My
Documents on your computer (Just include
some very basic information in each). Once
you have done that. Return to this screen and
click on the name of the new folder that you
have created, (Figure 16).
Figure 16: Clicking on folder name
6. You are now in the folder you have created
and you can start uploading the files you
created in PowerPoint and Word now.
Click on the Upload file box and use the grey
Browse button to locate the files you want to
upload, (one at a time)
Figure 17: Uploading files
Centre for Professional Education | University of Warwick | 5