Editing and Publishing an Office 365 Communication Site – The Hero Web Part

In our previous installments, The Basics of the Office 365 Communication Site, The Components of the Office 365 Communication Site, and Creating an Office 365 Communication Site, we built upon the basics of a Communication Site to understanding how a Communication Site is created and shared. In this installment, we will now look at how to customize the Communication Site through adding, deleting and customizing the building blocks, referred to as web parts, of your page.

Web Parts – Customizing

As discussed in Part 2 of this series, there are three site designs that are made available when creating the Communication Site.  The three are Topic, Showcase, and Blank.  Each web part can be included, excluded and customized to your needs.   There are four web parts that are included, by default, in both the Topic and Showcase site designs.  With the Blank site design, you choose which web parts are to be included. 

Types of Web Parts

There are five different types of web parts, each with a specific function.  These web parts include:  Hero, News, Events, Document and Image Gallery. 

1.  Hero Web Part

The Hero web part in the Topic site design consists of a five-tile layout, but the number of tiles is customizable and can range from one to five.  In addition to this, links, images, and text for each tile can be changed.

The Hero web part in the Showcase site design defaults to a vertical layout with three layers but can range from one to five layers if customization is chosen.  

Changing the Hero Web Part Layout

To change the layout in the Hero web part for the Topic site design:

1. Click Edit – found at the top right of the page;
2. Click Edit Web Part – found at the top left of the page.  Select the layout you want.  As the Topic site design was chosen, you can choose the number of tiles to be displayed and the layout is visually presented under the number of tiles.

Changing the Hero Web Part Layout

To change the layout from a grid to vertical layers in the Hero web part for the Showcase site design:

1. Click Edit – found at the top right of the page;
2. Click Edit Web Part – found at the top left of the page.  Select the layout you want.  As the Showcase site design was chosen, you can choose the number of layers to be displayed and the layout is visually presented under the number of layers.
    

Changing the Image, Text, and Links for Each Tile or Layer

To change the image, text, and links for each tile for the Topic and Showcase site designs:

1. Click Edit – found at the top right of the page;
2. Click Edit Details – found at the bottom right of the tile or layer that you want to change;
3. Click Change in the toolbox.  Choose a location from where to get your content:

    

    

    

    

    

   1. Recent:  listed here will be your recently opened documents, images, and pages;
   2. OneDrive:  obtain a link for a document or image that you have stored on OneDrive;
   3. Site:  obtain a link for a document, image, or page from a Site that you specify;
   4. Upload:  upload an image or document from a personal device;
   5. From a Link:  manually enter the link to a document, image, or your page from OneDrive for Business or SharePoint Online;
4. Select your image, document, or page.  Click Open;
5. In the Toolbox and under Image, select Custom Image or Color Only (this option is available only for the Tiles layout).  An image will automatically be selected from the page or document that you are linking to when Auto-Selected is activated;
6. For the image, enter in Alternative Text;
7. Click on Options, and if you decide to, you can show a Call to Action Link by switching the toggle to Yes.  Next, add your Call to Action Text.  The Call to Action link is available only for the largest tile in a tiled layout; and
8. For the layered layout, there is an option to show a Topic heading.  Click on Options and switch the toggle for Topic Heading to Yes. Key in your Topic Heading Text. 

Reordering Tiles or Layers

Tiles and Layers can be reordered by moving them where you would them to go:

1. Click Edit – found at the top right of the page; and
2. Click and hold the Move Item button.  Drag the tile or layer where you want. 

Columnizing the Hero Web Part

The Hero web part is designed to span across the full width of the page.  If you choose to have the Hero web part span partially across the page, then you would add a column to the page and place the Hero web part into that column. 

1. Click Edit – found at top right of the page;
2. Above the Hero web part, hover your mouse until a line with a circle appears:

3. Click on the + sign in the green circle;
4. Select One Column under the Section Layout; and
5. Use the Move Web Part button, found on the left side of the web part, to drag the Hero web part into the column you had just added. 

Adding and Empty Hero Web Part to a Page

You can add an empty Hero web part, even if the page is not a Communication Site page.   

1. Click Edit – found at top right of the page;
2. Above the Hero web part, hover your mouse until a line with a circle appears:

Click the + sign in the green circle.  Choose Hero web part;

3. Click the Edit button for web parts.  Select the type of layout you want. Options include a grid from 1 to 5 tiles or 1 to 5 vertical layers;
4. Click Select Link for each tile you want to change;
5. Click Change in the toolbox.  Choose a location from where to get your content:

    

    

    

    

    

   1. Recent:  listed here will be your recently opened documents, images, and pages;
   2. OneDrive:  obtain a link for a document or image that you have stored on OneDrive;
   3. Site:  obtain a link for a document, image, or page from a Site that you specify;
   4. Upload:  upload an image or document from a personal device;
   5. From a Link:  manually enter the link to a document, image, or your page from OneDrive for Business or SharePoint Online;
6. Select your page, image, or document.  Click Open;
7. In the Toolbox and under Image, select Custom Image or Color Only (this option is available only for the Tiles layout).  An image will automatically be selected from the page or document that you are linking to when Auto-Selected is activated;
8. For the image, enter in Alternative Text;
9. Click on Options, and if you decide to, you can show a Call to Action Link by switching the toggle to Yes.  Next, add your Call to Action Text.  The Call to Action link is available only for the largest tile in a tiled layout whereas, in a layered layout, it is available for each layer; and
10. Under Options, a Topic heading can be added for each layer by switching the Topic Heading to Yes for layered layouts.  Once switched to Yes, add your Topic Heading Text.

The Hero web part is the most configurable and contains the main content that you want to share with your audience. This is where features, announcements, status updates and news are shared.  Combining intriguing headlines and attention-grabbing images, the Hero web part seduces the audience to engage by reading, responding and participating. In our next installment, Part 5:  News, Events, Documents and Image Gallery, we will examine the last four web parts to complete the customization of your Office 365 Communications Site.