How to add full-width Images or HoverPoints to a page

This article explains how to add full-width images and/or HoverPoints to a page. You should keep in mind the following:

• Full-width sections can ONLY be added to Communication workspaces due to restrictions from the Microsoft base templates.
• Even in a Communication workspace, you will only be able to add the Full-Width section if you are not using the Vertical section on the right hand side of your page.
• To add full-width images to a Communication workspace you will need at least Member access in order to both edit the page and upload the image.
• You should ensure you upload a high resolution image so it looks good on all devices and screen sizes. The recommended minimum image size to use in a full-width zone is 1680 x 53px.

You can use full width images as page dividers, banners, or to provide static information. If you'd like to take this to the next level, you can configure a HoverPoint in a Full-width section instead of an Image.

Add a full-width image to a Communication page

1. Click the edit button on the top right of the page:
   
   
2. Select the area where you want the image to be placed and add a full width section:
   
   Note: If the Full-width section is greyed out, this is because you have a Vertical section already on the page, which will need to be removed before continuing. If it does not appear at all it is because you are not in a Communication workspace.
   
   
3. In the Full-width section you will be asked to choose a web part. Choose Image:
   
4. Select/upload the image and republish the page:
   
   
   

Add a full-width HoverPoint to a Commincation page

1. Follow steps 1 and 2 in the section above.
2. Instead of the Image web part, choose HoverPoint:
   
3. Configure your HoverPoint as normal. For more information please read the linked article: HoverPoint web part

See below an example from our Builqo demo using a HoverPoint in a full-width section: