Hello and welcome to Mr Tompkins Ed Tech. Today I’ll be taking a look at building
modern pages in SharePoint Online using the wide range of web parts now available. In
my day job, I work in a school, and I’m using Office 365 to develop a virtual learning
environment or VLE. So today I’ll be making some resource pages for students. But the
techniques are transferable and I’m sure that whatever your own field happens to be,
you will find something useful to take away. So lets get started. I’m in the humanities
subsite and I’m going to make a resource page on the Vietnam war. Firstly I need to
create the page itself, so lets open the site pages library, and create a new site page.
The other options here are for the older sharepoint page types, but we are going to be creating
what’s called a modern page, which is a new page type introduced last year. If this
option is not showing in your subsite, you might have to enable site pages first by going
to “site settings” and then “manage site features”.
OK the new site page template has loaded up. Lets name the page. I’m going to call this
one “History – the Vietnam War”. I can add a banner to the top of my page by clicking this icon
– it’s giving me various SharePoint locations or I can simply upload an image file from my hard drive.
Once placed, this second icon allows me to reposition the image focal point. I think it looks about there.
Ok so now we have a nice heading, lets move
on to the page itself. This little plus symbol is for adding layout sections to divide up
your page and to provide some underlying structure to add the various web parts to.
I’m going to start off with “One Column” and then I’m going to add the text web part,
which should then span the full width of the page. I’m going to use this to add a page
introduction. I’ve just grabbed some text from Wikipedia for now. Across the top here,
there is a handy toolbar for formatting the text how you want it and for adding hyperlinks.
Underneath this, I’ll add a two column section. Now these modern pages are fully responsive,
so these will appear two columns on a wider display like an ipad or a pc, but on a mobile
screen it will collapse to one column. On the left I’m going to add a highlighted
content web part. This is one of the most powerful and also most complicated web part
you can add to a modern sharepoint page, allowing you to build dynamic pages, by pulling in
content from other parts of sharepoint. I will do a separate video on the highlighted
content web part along with some ideas on how to use it, so watch out for that. For
this one I’m just going to keep things simple and use it to pull in any documents in this
site with the word "Vietnam" in the title.
Clicking on the pen icon allows you to edit the web part. Here I can select a source – in
this case I’m going to use “this site”. I can specify particular document types but
I’m going to leave it as “Any”. Next I can create a filter, so Title includes the
word “Vietnam”. There are some options to sort what it finds – lets go for trending
for now. There is a choice of layouts for this web part. I think the cards look right
for this one. Below this, there are some options for limiting the number of documents the web
part will serve up, and whether to hide the web part if it doesn’t find anything. It’s
automatically added the title "Trending Documents" for the web part, but I can change this to
whatever I want. Lets call it “Resource on the Vietnam War”.
In the right hand column, I’m going to add an image slideshow using the “Image Gallery”
web part. I have a folder of photos in the document library, so I can drill down to that
and select all the images from that folder for this gallery. These can be shown as a
series of tiles, or as a carosel, which Ithink I'm going to go for here. Again, it's really easy to create a
title for the web part.
Underneath that I’m going to use the "Bing Maps" web part to show where Vietnam is in the world
This is a dynamic map, so once I have placed it,
students will be able to zoom in and out for a much better perspective of where vietnam is,
or more details of the regions of the country inside.
Next I’m going to add in some videos which I have previously uploaded to "Office 365 Video".
I’ve already created a video just about this feature, which you can find out more
about by clicking the card on your screen now. I simply need to copy the url from the
address bar for my Office 365 Video resource, create an Office 365 Video web part, and paste
in the link. The links web part creates media rich tile
including images and a text extract from the linked webpage. I’m adding one here linking
to another website where students can find further information about the Vietnam War.
To finish the page off, I’ll add a "People" web part to include all the history teachers contact details
So students can get hold of their teachers if required.
The completed page only took a few minutes to create and the overall result is really
rather pleasing. Modern pages are a great way to curate content stored across Office
365, easily pulling together related content into attractive clean media rich pages. You
can just as easily use the highlighted content web part to create an index page with thumbnails
of all your other pages. If you liked the video, please give it a thumbs
up, and why not let me know in the comments below how you would like to be using SharePoint
modern pages in your workplace or business. Please don’t forget to subscribe if you
like my content. Small channels really need your support right now, and I would encourage
you to throw them a lifeline and subscribe to any and all that you enjoy. You’ll also
get notified when I upload the next video looking at the highlighted content web part
in much more detail. Until then, thank you very much for watching and I hope see you next time.
Byebye.
## Subscribe to Mr Tompkins Ed Tech for regular updates!##