Locked lesson.
About this lesson
Add three YouTube videos, a Twitter Feed, Weather, and World Clock information to the web page.
Exercise files
Download this lesson’s related exercise files.
7.07 adding-content-to-a-web-page - Exercise.docx748.5 KB 7.07 adding-content-to-a-web-page - Exercise solution.docx
59.8 KB
Quick reference
Adding Content to Web Pages
We can make web pages more dynamic by adding different types of content like videos, feeds, geographical information, etc. to our web pages.
When to use
Add dynamic content to make web pages more engaging and informative.
Instructions
Web pages would be a little boring if all we can add are text and images. Fortunately, we can add a variety of different content to our pages like YouTube videos, Twitter feeds, image galleries and so much more.
Adding YouTube Videos
Let's add 3 YouTube videos to our page.
- Click Edit.
The first thing to remember about web pages is that they are divided into sections. In each section, we specify a column layout.
- Click the plus on the far left-hand side to add a new section.
- Choose the column layout, three columns.
- Click the plus in the first column.
- Click YouTube.
- Go to YouTube, find a video, and press CTRL+C to copy the link.
- Go back to Sharepoint and press CTRL+V to paste the link.
- Click underneath the video and add a caption.
- Repeat this process to add two more YouTube videos.
Adding a Twitter Feed
- Click the plus sign to add a new section.
- Select one-column layout.
- Add a new section, one-column layout
- Click the plus sign.
- Select Twitter.
- Type in the Twitter username e.g. @Microsoft
Adding Weather and Timezone Information
- Click the plus sign to add a new section.
- Select two-column layout.
- Click the plus sign in the first column.
- Select Weather.
- Search for 'London' or a city of your choice.
- Add a title for the web part e.g. 'Weather'.
- Click the plus sign in the second column.
- Select World Clock.
- Search for 'London' or a city of your choice.
- Click Republish
Hints & tips
- Web parts will adhere to the column layout of the section they are contained in. Use sections to divide the page into different column layouts.
- 00:03 So now that we have our web pages,
- 00:05 let's explore the different types of content that we can add.
- 00:09 Because let's face it, it would be a little bit boring if the only thing we
- 00:13 could have on our web pages is a static image and some text.
- 00:17 There's so many different types of content that we can add these days,
- 00:20 to make it a lot more dynamic.
- 00:22 So things like videos, Twitter feeds, other types of feeds, weather information.
- 00:27 And even other content that we have in SharePoint, so libraries and lists.
- 00:33 So, let's take this London page as our example.
- 00:36 Let's put it into edit mode,
- 00:37 by clicking the Edit button in the top right hand corner.
- 00:40 And now let's start exploring how we can change the look and feel and
- 00:44 add in different pieces of content.
- 00:47 Now the one thing you need to remember when it comes to the design of these
- 00:51 different pages, is it works in sections.
- 00:54 So, in order to change the column layout, you must add a new section.
- 00:59 So for example, this header area here, I can tell already that this is
- 01:02 a one column layout, because it stretches the entire width of the page.
- 01:07 Whereas in this next section, I have a two column layout.
- 01:12 So if I want to add in some more content underneath here, and
- 01:15 I want it to be in a one column layout.
- 01:18 I would need to make sure that when I add a new section, I select one column.
- 01:23 Now what I want to add is three YouTube videos.
- 01:26 So for this, I want a three column layout.
- 01:30 So I want to add these, kind of in the middle just here.
- 01:34 Now one thing you'll notice, is that over in the left hand side,
- 01:37 at the end of each section, you have this little plus.
- 01:41 So this is where you can add in a new section.
- 01:44 If I click the plus, I then get to choose the column layout that I want for
- 01:49 the next section.
- 01:50 So I want three columns.
- 01:52 So let's select it.
- 01:53 And now that is exactly what I have.
- 01:56 I'm going to put a YouTube video in each one of these columns.
- 01:59 What you'll also notice,
- 02:01 is that I have a little plus sign at the top of each of these columns.
- 02:05 And when we click the plus, this opens up a whole world of different types of
- 02:10 content that we can add into our page.
- 02:12 You can see here YouTube videos, I can add in Buttons, Texts, Twitter feeds.
- 02:18 If I scroll down, I have different types of mixed media that I can add.
- 02:22 So things like images, hero templates, links, galleries.
- 02:25 I can choose document libraries, lists to add in, different types of feed.
- 02:30 I could add a countdown timer to my page which can be quite helpful sometimes.
- 02:36 I can add in a list of upcoming events or even a group calendar.
- 02:41 I have some data analysis tools, even regional information.
- 02:45 So if I want to display the weather, or maybe some time zones,
- 02:48 I can do that as well.
- 02:49 So tons and tons of different types of content that you can add.
- 02:53 Now we're going to add a YouTube video, and let's click it.
- 02:56 It opens up a pane on the right hand side and it is a simple case of copying and
- 03:01 pasting in the link to the YouTube video.
- 03:03 So I've got one that I prepared earlier.
- 03:06 So let's jump onto YouTube.
- 03:08 I'm just going to add this one here, London in 4K.
- 03:12 I'm going to grab the link at the top here, Ctrl C to copy and
- 03:16 then Ctrl V to paste that in.
- 03:18 And after a couple of seconds, you'll notice that it loads,
- 03:22 I can simply close this down and there we go.
- 03:25 I can even add a caption, so I'm going to put London in 4k underneath.
- 03:30 Let's add our second YouTube video, is exactly the same process.
- 03:35 I'm going to go back and grab something else from here.
- 03:38 So let's just go back, and I'm going to say, top ten things to do in London.
- 03:43 Let's grab that URL Ctrl C to copy that.
- 03:46 Ctrl V to paste, and then click on close.
- 03:50 And now I have my second video.
- 03:52 Let's add a caption.
- 03:58 And then I can add my third YouTube video.
- 04:01 And this time, let's just do, things to know before you go to London.
- 04:06 Ctrl C to copy the link, Ctrl V to paste in and
- 04:11 then close that down and add caption.
- 04:16 So it really is as simple as that.
- 04:20 If I want to add in some other pieces of content,
- 04:23 I can scroll down and maybe I want to add some content underneath here.
- 04:27 I can just simply add a new web part in this column.
- 04:30 I don't have to necessarily add a new section, but
- 04:33 just be aware that it will take on the properties of the section above.
- 04:36 So, if I add a new web part, it's going to be in a two column layout.
- 04:40 So maybe I now want to add a new section, I want a one column layout.
- 04:45 And in here, I want to add a Twitter feed.
- 04:48 So I'm going to click the plus to add my web part.
- 04:51 I'm going to select Twitter, and then all you need to do,
- 04:54 is type in the Twitter account that you want to add.
- 04:57 I can see by default it's going to give you the Microsoft Twitter account.
- 05:01 Now, just for demonstration purposes, I'm going to leave it on Microsoft.
- 05:04 I'm going to click close and you can see that now,
- 05:07 I can see the Microsoft Twitter feed.
- 05:10 Now I have quite a few tweets showing in there.
- 05:12 So if I maybe just want to show the last one or two,
- 05:16 I can simply edit the web parts.
- 05:18 And I can say the maximum number of tweets to show is, let's say one and
- 05:23 click on close.
- 05:24 So hopefully,
- 05:25 you get the idea as to how easy it is to add in different pieces of content.
- 05:30 Now this time I want to have a two column layout, so let's do a new section.
- 05:34 I'm going to click the plus and I'm going to add in some weather information.
- 05:40 So let's select weather, and
- 05:41 all I need to do here is type in the weather that I want to display.
- 05:45 So I'm going to display it for London, and I could carry on going adding different
- 05:49 locations, but this is just the London page.
- 05:52 I'm going to add a title, so let's just say weather and I'm done.
- 05:57 In the second column, I'm going to click the plus.
- 05:59 And this time, I'm going to add in some time zone information.
- 06:03 So, let's say world clock.
- 06:06 Once again, I just need to type in the location, which is London.
- 06:10 And I'm going to get the time.
- 06:12 Once you're happy with all of the changes that you've made,
- 06:16 click on republish, and there we go.
- 06:18 So, I very much encourage you to have a little play around with this.
- 06:21 Play around with different sections, different column layouts and
- 06:24 adding in different types of web parts.
- 06:26 So you get a real understanding of what they all do, and
- 06:29 how they can be helpful to you.
Lesson notes are only available for subscribers.