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
- Click the edit button on the top right of the page:
- 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.
- In the Full-width section you will be asked to choose a web part. Choose Image:
- Select/upload the image and republish the page:
Add a full-width HoverPoint to a Commincation page
- Follow steps 1 and 2 in the section above.
- Instead of the Image web part, choose HoverPoint:
- 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: