If you’ve checked out the Microsoft Lookbook, you know that it’s possible to make home pages and content pages with a professional look easily and quickly.
Have you seen the video of the Microsoft SharePoint design team “Building a beautifully designed intranet with SharePoint – latest design and branding capabilities“? (https://youtu.be/Dc07NIiDJAI?t=1316).
Very interesting and I was surprised to see this wave in the content overview page.
Would you be able to add this effect to your page?
Here is how to do it.
Add some style... make the wave
Let’s start with a page available in the site templates, I chose the Department template. Let’s see the “Our Vision” page.
We will add a wave under the colored section.
I used this site to generate transition images: https://app.haikei.app/
From this site, you can create a “Wave”. I recommend a custom size of 2560 x 200 px. Select the background color corresponding to the color of your background to continue. In my example, it is a blue #4F6bed (hexa) and we choose the Fill in white (#ffffff).
As an example, here is the SVG of this demonstration:
Once the SVG is saved, we will create a new section under the section we want to style. We need to select a “Full-width section” and then insert our image (SVG) in this section.
Here is a recording that demonstrates the addition of the image.
Notice that the image will adapt to the screen, the responsive feature remains functional.
Without exaggerating, you can also try other variations, as for example with the “Stacked Waves”.
You can simply flip the image to transition to the top of the section. Here is a complete top/bottom collection for the 3 colors of the Teal theme now default in SharePoint Online.
