Guided walkthrough: Creating a Giving site for your organization

Guided walkthrough: Creating 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

Sample modern Giving site in SharePoint Online

Number 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

Number 2 Inspire with imagery and information

Use eye-catching and inspiring images that link to content at the top of the page. Learn how

Number 3   Make a statement

Create professional, consistent text with multiple formatting choices. Learn how

Number 4  Call to action

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

Number 5  Spread the news

Share ideas and stories that enhance your message. Learn how

Number 6  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, click 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 click Create site there so that the communication site is automatically be associated with that hub site).

Create Site command

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

Create a SharePoint communication site

For more details, 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.

The Edit option at the top of a modern SharePoint page when working on a site

  • 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 web part button button on the left to rearrange the tiles within the Hero web part.

The layout options for the Hero web part while editing a modern page in SharePoint

Customize each tile

When you click a tile, you'll see a toolbar at the bottom of the tile where you can click 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.

The Hero pane while editing a modern page in SharePoint

For more details on using the Hero web part, see Use the Hero 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.

Section Layout pane in sample modern Giving site in SharePoint Online

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

Sample Image web part input for modern Giving site in SharePoint Online

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.

Edit button on Page top bar

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

Section layouts

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.

Control to add a section.

Working with web parts

Click the plus symbol SPO Plus sign 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.

Web part toolbox

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

The editing tools for web parts while editing a modern page in SharePoint

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

Publish button on Page top bar

Tip: 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.

The News pane when editing the News web part in a modern SharePoint page

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

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. Clicking 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.

Formatting options for the Text web part while editing a modern page in SharePoint

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

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 click the event to add it to their calendars.

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

Sample Events web part input for modern Giving site in SharePoint Online

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.

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

Was this information helpful?

Thank you for your feedback!

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

×