School home page template

The School home page site is a communication site designed to serve as an internal home page for your school intranet. It is the place where your students and educators can stay up to date on events and news, access school resources, and more. It also looks and works great on any device!

Example of School home page on different devices

In this article, we share the elements that are on the School home page template in the SharePoint look book and how you can customize the site to make it your own. 

Using this template creates a brand new site; it can't be added over an existing site. We recommend that this site is set up and maintained by a designated team responsible for disseminating information to the whole school. This could include IT admins, school leaders, designated staff members, or student leaders. 

Notes: 

Step 1: Add the School home page site template 


First, add the template from the SharePoint look book.  

Note: You must have site owner permissions to add this template to your site.

  1. Go to the School home page in the SharePoint look book

  2. Select Add to your tenant

  3. Enter the following information:

    • Email: Enter your email address where you will receive a confirmation when the template is successfully added to your site.

    • Site URL: This is the location where your site will be added. You must provide an URL that hasn't been used before as this template creates a new site.


Step 2: Customize your site

Once you've added the School home page template, it's time to customize it and make it your own. 

1. Showcase your school colors Use site branding and a logo to inspire school spirit. Learn how

2. Make your site easy to get around Customize navigation to make content discovery easy. Learn how

3. Use imagery to highlight important information At the top of your home page, use eye-catching images that link to the most important resources. Learn how

4. Share resources Share resources for your students, teachers and staff. Learn how

5. Communicate a message Highlight a timely message to students and educators. Learn how

6. Spread the news
Create broad awareness about school announcements, initiatives and achievements. Learn how

7. Keep everyone up to date with events Add an event calendar to keep students, teachers, and staff up-to-date on school events. Learn how

8. Showcase the school mission Highlight your school's mission and values. Share mission-aligned initiatives to increase impact. Learn how

9. Share supplemental information
Populate the branded footer with information about your school, leadership, contact info, and more. Learn how

School landing site template

Step 3: Share your School home page

Now, you are ready to share your site!

  1. Select Share site from the right hand corner.

  2. In the Share site pane, enter the names of people you want to share the site with. You can choose Everyone (except external users) if you would like everyone in your organization to have access to the school landing site. The default permission level is Read only.

    Adding a person in the Share site pane

  3. Enter an optional message to send with the email notification that will be sent when the site is shared, or clear the Send email checkbox if you don't want to send an email.

  4. Select Share.

Step 4: Maintain your site

Present the most up-to-date content your institution has to offer by following these tips:

  • Establish a schedule to review the site.

  • Keep web part content updated to ensure you are leveraging the full value of your landing site.

  • Regularly post news to distribute the latest announcements, information, and status across the institution.  Learn how to add a News post on a team site or communication site, and show others who will be posting announcements how they can use SharePoint news.

  • Check out usage of your site by using the built-in usage data report to get information on popular content, site visits, and more.

Optional: Add the School home page as a tab in a Teams channel

After you've created your site, you can add it to a Teams channel. To do this:

  1. In your team channel, select Add a tab +.

    Screenshot of the Teams menu, pointing to the + for Add a tab

  2. In the Add a tab dialog box, choose Website.

  3. Enter the name you want to use in the Tab name box.

  4. Enter the URL of your School home page.

  5. Post to the channel about this tab is selected by default, and will create a post letting everyone in the team know the website has been added. You can deselect the checkbox if you don't want to do this.

When team members select this tab, they'll see the home page. They can go directly to the site by selecting the Go to website button Go to website button at the top right.

Customizing your site

Showcase your school colors with branding

Highlight school colors

You can quickly and easily customize the look of your SharePoint site to reflect your school's logo and colors. To do this, you can select a theme and customize your site header.

Theme and Header settings

Learn more about how to do this in Change the look of your SharePoint site.

Up arrow key Back to Step 2: Customize your site

Make your site easy to get around with custom navigation

Mena menu navigation style

To customize your top navigation, select Edit on the right of the top menu. To change a link, just select it and make your label or link changes. You can add a link by hovering over a location in the menu where you want to add it, then select the +. When you're done, just select Save to save your changes. Learn more in Customize the navigation on your SharePoint site.

Navigation editing

The School home page template uses mega menu style navigation, but you can change it to a cascade style. Learn how to do this in Create a mega menu on communications sites and hub sites.

Up arrow key Back to Step 2: Customize your site

Use imagery to highlight important information with the Hero web part

Highlight hero web part

The Hero web part brings focus and visual interest to your page. You can display up to five items in the Hero web part and use compelling images, text, and links to draw attention to each. The School home page template uses a Hero in a full-width section with 5 tiles. To make changes to the Hero web part on your template:

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Select the Edit details button Edit details at the bottom right of the tile you want to change.

  3. In the property pane, select Change, and then choose a location from which to get your link: Recent, Stock images, Web search, Your organization, OneDrive, Site, Upload, or From a link.

  4. Select your image, page, or document and select Open.

  5. Under Background image, select Auto-selected image, Custom image or Color block. 

  6. Under Options you can show a Call to action link by switching the toggle to Yes. Then add your Call to action text (for example, "Learn more").

If you want to change the layout of the Hero web part, do this:

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Select the web part Edit button on the left and select the type of layout you want - you can select up to 5 tiles or up to 5 layers.

Learn more in Use the Hero web part.

Up arrow key Back to Step 2: Customize your site

Share resources with Quick links

Highlight of Quick links

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. In the property pane, select a layout, and choose the options you want for that layout. For example, you can choose to Show image in layout for the Compact layout, and you can choose to Show descriptions for List and Button layouts. The School home page template uses Compact and has Show image in layout selected. 

Add links

  1. Select +Add.

  2. Choose a location from which to get your link: Recent, Stock images, Web search, Your organization, OneDrive, Site, Upload, or From a link.

  3. Select your image, page, or document and select Open.

  4. Choose options for your link. The options depend on the settings you've chosen for the layout. For example, if you chose to Show descriptions for a list layout, you can add a description for the individual link. Other types of options for individual links, depending on the layout options, include changing the image, formatting icons, adding descriptions, and adding alternative text. 

Edit links

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Hover over the item you want to edit, and select the Edit item button Edit details pencil at the bottom of the item you want to edit..

  3. Choose options for your link. The options depend on the settings you've chosen for the layout. For example, if you chose to Show descriptions for a list layout, you can add a description for the individual link. Other types of options for individual links, depending on the layout options, include changing the image, formatting icons, adding descriptions, and adding alternative text. 

  4. To remove links, select the X for the item. To reorder links, drag and drop items to new positions using the Move button. You can also reorder links using Ctrl + Left or Ctrl + Right arrow keys.

Learn more in Use the Quick Links web part.

Up arrow key Back to Step 2: Customize your site

Communicate a message with a combination of web parts including Image, Text, and Button

Highlight button

In this template, the Image, Text and Button web parts are being used to draw attention to a timely message. 
 

Image web part

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Open the property pane by selecting the Edit button on the web part.

  3. In the property pane, select Change to choose a recent image or an image from one of several sources such as stock images, your computer, your organization, and more.

  4. Select Open or Add image (depending on where your image is coming from).

  5. Optionally, enter Alternative text.

  6. Optionally, type a caption under the image in the web part.

Learn more about how to Use the Image web part.

Up arrow key Back to Step 2: Customize your site

Text web part

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Change or add text, and format it using the toolbar at the top. For more formatting options, select the ellipses at the end of the toolbar to open the property pane.

Need more information? See Add text and tables to your page with the Text web part.

Up arrow key Back to Step 2: Customize your site

Button web part

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Open the property pane by selecting the edit icon on the web part.

  3. In the property pane on the right, enter your label text in the Label box.

  4. Enter your link in the Link box. Make sure your link starts with http://, https://, or mailto:  If your link is added without one of these protocols, https:// will be added for you.

  5. Under Alignment, choose how you want the button aligned (left, center, or right) within its column on the page.  

Need more information? See Use the Button web part .

Up arrow key Back to Step 2: Customize your site

Spread the news with the News web part

Highlight portal news

Create visually-compelling content with SharePoint news that is distributed across your intranet. Learn more about creating and sharing news.

Add news

To add news posts to your site, do the following:

  1. Select + Add in the News section to start creating your post. You'll get a blank news post page ready for you to start filling out.

  2. Create the news post using the instructions in Build the news post page.

Edit the news web part

To make changes to the layout, the sources for your news, and other options for how news is displayed on your page, you can edit the News web part. The School home page template uses the Side-by-Side layout and has This site selected as the news source, which means all news posts are pulled from those on this site only.

  1. Select the Edit Web part edit button button on the left of the web part to open the property pane and set options such as news source, layout, organization, and filtering. Some of the options you may use first are:

    Layout: You can choose from different layouts for News on communications sites like the School home page template which uses the Side-by-Side layout. Other layouts are Top story, which includes a large image space and three additional stories; List, which shows news posts in a single column; Tiles layout, which shows up to five news items with thumbnails and headlines; and Carousel, which shows a large visual, and allows users to move through stories using back and next buttons, or pagination icons.

    News source: You can specify the source for your news posts. Examples of sources are the site you are on while using the web part (This site, which is what the School home page template uses), one or more individual sites (Select sites) and Recommended for current user, which will display posts for the current user from people the user works with;; the user's top 20 followed sites; and the user's frequently visited sites, among others.

There are many more options you can set to fully utilize the power of the news web part. For more information on all options, see Use the News web part.

Up arrow key Back to Step 2: Customize your site

Keep everyone up to date with the Events web part

Highlight portal events

Add an event

On a published page, you can start adding events.

Note: You can add events on a saved or published page, but not on a page that is in edit mode.

  1. Select Add event.

  2. Give your event a name at the top of the page. Optionally, you can add an image to the title area by selecting the Add image button in the upper left.

    Event page
  3. Choose date and times in the When section.

  4. In the Where section, enter a location or address. If your location is recognized, you have the option to add a map.

  5. In the Link section, you can enter an online meeting link if you have one. Put the link in the Address box, and then add a Display name. If you don't have an online meeting and enter nothing, this section will not appear in the event.

  6. Choose a Category (such as Meeting, Work hours, Business, Holiday, and so on) if you want the event to show when filtered by that category. To add your own category, just enter it in the space.

  7. Provide a description in the About this event area.

  8. If you have people you'd like to highlight for this event (such as contacts, special guests, or speakers) you can add their names below the event description. Only users within your organization can be added.

  9. When you're done, select Save.

Edit the Events web part

  1. If you're not in edit mode already, select Edit at the top right of the page.

  2. Select Edit web part Web part edit button on the left to set options for the web part.

  3. Select a Source for your events: Events list on this site, This site, This site collection, Select sites, or All sites.

  4. Select a date range by which to filter your events in the Date range drop-down list . You can choose All upcoming events (the default), This week, Next two weeks, This month, or This quarter.

  5. Select a layout: Filmstrip or Compact. The School home page template has Filmstrip selected.

For more details about the Events web part, see Use the Events web part.

Up arrow key Back to Step 2: Customize your site

Showcase the school mission with the Text and Image web parts

Highlight images


In the School home page template, image web part and a text web part have been used together to highlight the school's mission, along with mission-aligned initiatives. 
 

Text web part

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Change or add text, and format it using the toolbar at the top. For more formatting options, select the ellipses at the end of the toolbar to open the property pane.

Need more information? See Add text and tables to your page with the Text web part.

Up arrow key Back to Step 2: Customize your site

Image web part

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. Open the property pane by selecting the Edit button on the web part.

  3. In the property pane, select Change to choose a recent image or an image from one of several sources such as stock images, your computer, your organization, and more.

  4. Select Open or Add image (depending on where your image is coming from).

  5. Optionally, enter Alternative text.

  6. Optionally, type a caption under the image in the web part.

Learn more about how to Use the Image web part.

Up arrow key Back to Step 2: Customize your site

Share supplemental information in the footer

Highlight footer

  1. On your site, select Edit on the right side of the footer. The Edit link appears on your footer after you've turned the footer control on. You can add one level of up to eight links or labels.

  2. Select + just above the buttons on the left navigation pane.

  3. On the Add a link dialog box, choose one of the following options:

    • URL to add a link to any item, internal or external to your company. Just enter the address and a display name for the link.

      Add a URL link to the left navigation of a SharePoint team site

    • Header to add a label that is not hyperlinked.

  4. On the Add a link dialog box, in the Address box, enter the URL for the link you want to add or in the Display name box, enter a label name, and then select OK.

  5. To edit an existing link or label, after selecting Edit on the right side of the footer, select the ellipses (...) next to the link that you want to edit.

  6. On the menu, choose one of the following options:

    • Edit to change the link or label

    • Move up or Move down to change the order that the link or label appears on the footer

    • Remove to delete the link or label from the footer

  7. When done making your changes, select Save.


Learn more in Customize the navigation on your SharePoint site.

Up arrow key Back to Step 2: Customize your site

Move or remove an element of your page

Move or remove a web part

  1. If you're page is not already in edit mode, select Edit at the top right of the page.

  2. Select the web part you want to move or remove, and you'll see a small toolbar on the left of the web part.

    To move the web part, click the Move button Move web part button and drag the web part where you want it on your page.

    To remove the web part, click the Delete button Delete web part icon .

Move or remove an entire section of the page

  1. If your page is not already in edit mode, select Edit on the top right of the page.

  2. If you want to move a section, select the Move button Move web part button and drag and drop to the desired location.

  3. To remove the web part, click the Delete button Delete web part icon .

Delete sample content

If you don't want to use the sample news posts that come with the template, here's how you can delete them:

  1. Go to the Site Pages library by selecting the Settings gear Settings gear icon at the top right of the page.

  2. Select Site contents.

  3. Select Site Pages.

    The names of the news posts are:

    • Become a lunch buddy today 

    • Registration for extracurricular activities open

    • New athletics director

    • Alumni give back to Pineview

  4. Select the sample pages you want to delete, and then select Delete on the command bar.

School home page for higher education

Here's an example of how the School home page template can be used to create an internal landing for students, faculty, and staff in higher education. Just change the logo, theme, text, and any other elements you want. The possibilities are endless!

Example of college home page
A subscription to make the most of your time

Need more help?

Expand your Office skills
Explore training
Get new features first
Join Office Insiders

Was this information helpful?

Thank you for your feedback! It sounds like it might be helpful to connect you to one of our Office support agents.

×