Skip to main content
< All Articles

How to build a cool Intranet Landing Page using Modern Page experience in SharePoint

Posted on September 13, 2017
SharePoint

When the Modern pages came out almost a year ago, I have written a blog post on how to bypass them. That is because when they first came out – they were buggy, had limited set of supported web parts and could not really be used for anything useful, in my opinion. A lot has changed since then! Modern pages are now more functional, and provide support or have similar functionality as classical pages. With this post, I would like to demonstrate to you how I built a cool-looking Intranet Landing Page in SharePoint using modern page functionality! And you know what? I am never coming back to classical Wiki Page! I am so much in love with my creation!

First of all, here is my new baby!

Intranet Landing Page

This is what my Intranet Landing Page looked like in Classical, Wiki page experience:

Intranet Landing Page

Let’s go ahead and build it together! Before we proceed, I suggest that you check out this post that talks about best practices for SharePoint Page Design. Though the mechanism of creating a page has changed, the best practices still apply.

Step 1: Add a new Page

To add a new, modern page, just click on Gear Icon > Add a page

Intranet Landing Page Modern Page3

Once you do, a new, modern page will be created, and you can now customize it.

Intranet Landing Page Modern Page4a

NOTE: Modern Pages are not yet supported on site collections with publishing features enabled. So in case you are creating a new page and it defaults to Classical – that would be one of the reasons.

Step 2: Customize page, add Web parts

As I stated above, not all web parts or functionality is supported with the modern web pages. So at the moment, you cannot replicate all of the functionality you might have on your main landing page (i. e. ability to embed social media feeds or have a slide show or Script Editor). That said, these are the most common staples of the Intranet landing page with the corresponding functionality/web parts in the modern page experience:

Banner

What cool website can survive these days without an overused stock banner image? :-)  SharePoint is no exception these days with the development of Modern pages and Communication Sites! Modern Page allows you to splash your screen with a huge banner/hero image.

Intranet Landing Page Modern Page5

Announcements

Announcements web part is not supported on the Modern Page, but a great replacement would be to use a News Web Part, that is available with the Modern experience.

Intranet Landing Page Modern Page6

And this is how a News Web Part looks like on a page.

Intranet Landing Page Modern Page7

Calendar

Calendar is supported on the modern page as well but is called Events and has a nice looking interface.

Intranet Landing Page Modern Page8

And this is how it renders once added to a page and populated with some events.

Intranet Landing Page Modern Page9

By the way, individual event editing is totally cool as well and not like anything we had with the classical calendar. You can also add a stock image/banner to each event as well. Here is a screenshot.

Intranet Landing Page Modern Page10

Video

In case you want to embed a video on your landing page, you can use Embed Web Part which allows you to embed YouTube and any other sites you wish.

Intranet Landing Page Modern Page11

Intranet Landing Page Modern Page12

By the way, there are dedicated web parts to embed videos from Office 365 as well. So if you are hosting videos on Office 365 Video Portal or Microsft Stream, use those.

Intranet Landing Page Modern Page13

Map

In case you want to highlight Company address or locations, you can utilize Bing Map Web Part.

Intranet Landing Page Modern Page14

Intranet Landing Page Modern Page15

Employee of the Month

In case you want to highlight particular people (i.e. Employee of the Month), you can use People Web Part. Clicking n a person brings up a summary people card and then you can drill down all the way to User’s Delve profile. Neat!

Intranet Landing Page Modern Page16

Intranet Landing Page Modern Page17

Intranet Landing Page Modern Page18

Links

In case you want to highlight link(s), you can use either Link Web Part or Quick Links Web Part.

Intranet Landing Page Modern Page19

Intranet Landing Page Modern Page20

Additional web parts for your consideration

You might want to embed a PowerBI Report Web Part to show off the company’s’ recent sales or Image Gallery Web Part with photos of drunk employees from the latest BBQ party. As new web parts are added to Modern Page Experience, I am sure there will be some additional ones we can utilize for the main landing page.

Intranet Landing Page Modern Page21

Step 3: Make new page the homepage

By default, the Out of the Box classic page located in SitePages Document Library (SitePages/Home.aspx) is the homepage. We need to make our new modern page the Homepage (meaning that when users click on Home they are routed to the modern page experience). To do this:

  1. Make sure your Modern Page is Saved and Published (unpublished pages cannot be made Homepages) Intranet Landing Page Modern Page22
  2. Navigate to SitePages Document Library (Gear Icon > Site Contents) Intranet Landing Page Modern Page23
  3. The Site Pages library houses all the pages you created on your site. Click the ellipsis next to your modern page and choose Make Homepage. Mazel Tov! Your new page now is THE homepage! Intranet Landing Page Modern Page24

So the final product looks like this below. As I built this, I could not help myself but remind that this is still SharePoint! How can you not love SharePoint?

Intranet Landing Page

About Me

I’m Greg Zelfond, a U.S. based SharePoint consultant, and I provide affordable out-of-the-box SharePoint consulting, training, and configuration assistance to small and medium-sized businesses all over the world.

Need help?