Guided walkthrough: Create a giving site for your organization

In this article, we show you elements of an example Giving site to inspire you, and help you learn how to create similar sites for your own organization. In this example, the Giving site provides an example of how a page with thoughtful design and messaging can inspire your organization. This example page is also deployed as part of a Human Resources Hub site.

First, if you haven't already created a Communication site, check out the Create your site section in this article.

Once you have your created your site and know how to edit pages, you can use the steps below to add the elements shown.

Example Giving Site

Image of the homepage Customization instructions
Image of the Giving Site landing page 1. Make your site easy to get around Customize navigation to make it easy for people to discover important content on your site. Learn how

2. Inspire with imagery and information Use eye-catching and inspiring images that link to content at the top of the page. Learn how

3. Make a statement Create professional, consistent text with multiple formatting choices. Learn how

Call to action Make it easy for people to take action right away. Learn how

4. Spread the news Share ideas and stories that enhance your message. Learn how

5. Get events on the calendar Add an event calendar to keep people up to date on related events. Learn how

Create your site

To make a site like the one shown here, you'll create a Communication site. To do this, select Create site from the SharePoint start page (or, if you're going to associate this site with an existing Hub site, navigate to the hub site and select Create site there so that the communication site is automatically associated with that hub site).

Image of the Create site option

Next, choose Communication site, and then the Topic layout. Fill out your site name, description, and other information, and select Finish. Then you'll get a template with the same type of layout as the example in this article.

Image of the Communication site panel

For more information, see Create a communication site in SharePoint Online.

Back to top

Make your site easy to get around

You can quickly and easily customize the organization and navigation of your SharePoint site to make it easy for your visitors to navigate the site and find the information they need.

Image of the SharePoint navigation tool bar

  • Add and edit the main menu Easily edit the top menu to link the page to other SharePoint pages or on the Internet.

  • Mega menus When a site is deployed as part of a hub site, you can create powerful mega menus.

For more detailed information on working with navigation, see Customize the navigation on your SharePoint site.

Back to top

Inspire with imagery and information

Let your team know what's most important with high-impact hero images, company branding, and important news. The initial impact of the Giving site home page is created by large and eye-catching images of the Hero web part. The layout used in this example is Four tiles.

Hero layout

Editing the web part presents layout options. The Tiles option, such as the one shown above, presents layouts for between one and five tiles. The Layers option sets each image as a layer with the image next to the title. Up to five layers are possible, so that you can use the web part to fill the entire page.

In this example, the Hero web part is in a full-width section.

Use the Move item Move item icon Move web part button on the left to rearrange the tiles within the Hero web part.

Image of the Hero web part

Customize each tile

When you select a tile, you'll see a toolbar at the bottom of the tile where you can select Edit details where you can change the link and image used. With the larger tile, you can also set call to action text and link. On the same toolbar, you can set focal point for the hover animation, plus zoom in and zoom out of the image.

Image of the Hero web part customization panel

For more details on using the Hero web part, see Use the Hero web part.

Back to top

Make a statement with the text web part

Uniform, professional-looking typography is a feature of this site, and the Text web part provides tools to refine the impact of text used in several locations on this page. In this example, the Text web part is using the Normal text style. Selecting the ellipses (...) at the right end of the formatting toolbar offers additional options.

In this Giving site example shown below, the web part is in a one-column section.

Image of the Text web part

For more details on using the Text web part, see Add text and tables to your page with the Text web part

Back to top

Call to action

In this example, the Giving site has a section using a three-column layout with images and links within the section.

Image of the Call to action set up

Here, the Image web part is paired with a text web part to create a call to action.

Image of the Call to action 2 set up

For more details on using the Image web part, see Use the Image web part.

Working with sections

To create sections, start editing by clicking Edit on the top right of the page.

Image of the Edit option

The + symbol before or after a section will add a section using one of several layouts.

Image of the Section layout panel

Sections make up your page, and are you place one or more web parts. While editing the page, each section will show controls to edit the layout, move, or delete the sections. For information on working with sections, see Add or remove sections and columns on a page.

Image of the Add section icon

Working with web parts

Select the plus symbol Image of the Plus symbol in a section, which may appear before or after a web part in a section, to see the many types of web parts available. For more information on all web parts, see Using web parts on SharePoint pages.

Image of the Add web part icon

Web parts may be edited, moved or deleted within sections. The Edit web part icon opens detailed controls unique to each web part type.

Image of the Edit web part task bar

When your page updates are ready, Selecting Publish to make them visible to your audience.

Image of the Publish option


To manage all of your pages on the site, click Pages on the top menu. For more details on using pages, see Create and use modern pages on a SharePoint site.

Back to top

Spread the news with the News web part

The News web part provides controls to choose the News Source and Layout, and to Organize and Filter the content. Under Layout, there are five options to adjust how news items are presented. In this example, news stories are using the site as the source, and the Top story layout. The stories are presented side-by-side with one large image and two smaller images because only three news stories on the site are published.

In this example, the web part is in a one-column section.

Image of the New web part

For more details on using the News web part, see Use the News web part on a SharePoint page.

Back to top

Add a calendar of events with the Events web part

The Events web part allows you to easily display upcoming events on your Giving page. You can use this web part to draw attention to Giving-related events, ranging from planning sessions to the actual events, and viewers can easily select the event to add it to their calendars.

In this Giving site example, this web part uses the Filmstrip layout.

Image of the Events web part

For more details on using the Events web part, see Use the Events web part.

Back to top

Want more?

Get inspired with more examples and the ability to add an example Giving site with the SharePoint Look Book.