Banner with News

Turn your intranet into actionable information center using Banner with News web part.

You might be also interested in Carousel with Expanding Quicklinks (with targeting)

Setting up the web part

On the page where you need the web part, add a Full-width section
image

and then add this web part:
image

Adding a news post
---Adding news posts manually (default)

Use this option when you want to direct users to posts hosted outside of SharePoint (such as press releases).

In web part properties, click either Add/Remove Main Post or Add/Remove Sidebar Posts buttons to manage respective news as shown below:

You can populate news titles and links to pages either in SharePoint or elsewhere

To add the Main News Posts
Enter the data as shown below:

The main post allows you to play a video from YouTube by specifying the video URL like this:
image
Or if the video is on Stream, add the embed code like this:
image

To add the Sidebar Posts

---Pulling news posts automatically from the Site Pages library

Only the Sidebar news can be pulled automatically from the Site Pages library.

To enable this, turn on this toggle:
image

The web part will automatically pull the last 3 news from the Site Pages library on the current site.

Setting welcome message

If you’d like to use the currently logged-in username at the top of the banner, use any of these keywords in web part properties:
image

  • {firstname} to show current user’s first name
  • {lastname} to the last name
  • {fullname} to show the full name

Here is how the {firstname} will look like for the user named “Steven”

Updating banner styles

You can change these style options:

Colors & Styles

You can also change the height of the whole banner to fit more news:

Font Settings

Labels & Language

Video not showing?

Unless your video is from YouTube, you must add the link in iframe format like this:
image

To get the iframe formatted link from Stream:

  1. Go to your video in Stream
  2. Click Share as shown here and select Embed code:
    image
  3. Now simply click Copy embed code
    image