Dismiss Notice

Register now to be one of the first members of this SharePoint Community! Click here it just takes seconds!

Dismiss Notice
Welcome Guest from Country Flag

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

Discussion in 'SharePoint Blogs' started by SharePoint Maven, Sep 13, 2017 at 9:28 AM.

Thread Status:
Not open for further replies.
  1. SharePoint Maven

    SharePoint Maven Guest

    Blog Posts:
    0
    0
    0
    0
    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!

    [​IMG]

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

    [​IMG]

    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

    [​IMG]

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

    [​IMG]

    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? [​IMG] 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.

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]

    Calendar


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

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    [​IMG]

    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.

    [​IMG]

    Map


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

    [​IMG]

    [​IMG]

    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!

    [​IMG]

    [​IMG]

    [​IMG]

    Links


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

    [​IMG]

    [​IMG]

    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.

    [​IMG]

    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)[​IMG]
    2. Navigate to SitePages Document Library (Gear Icon > Site Contents)[​IMG]
    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 home page![​IMG]

    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?

    [​IMG]

    The post How to build a cool Intranet Landing Page using Modern Page experience in SharePoint appeared first on SharePoint Maven.

    Continue reading...
     
Thread Status:
Not open for further replies.

Share This Page

LiveZilla Live Chat Software