Introduction
SharePoint design has come a long way recently but, for a lot of people, it still looks like SharePoint. In this post, we’ll look at at how site owners can easily make a more appealing design for their audience.
The starter page template
For this post, we will start with a new communication site. There are already templates that you can choose from, but let’s start with vanilla option.
SharePoint web parts
The page is already populated with some commonlyused web parts:
- A hero section
- News
- Events
But we want more, especially because the hero and events content can be quite static and the news wont appear for readers unless there are news articles to display.
Custom themes
By default, SharePoint has a selection of colour themes but the chances are they won’t match your company’s style.
Fortunaately, you can make your own theme. There are a few ways to achieve this
Brand centre
The easiest way is to use the new site brranding option, available from the settings menu
Selecting this option will open a new page that looks like this
From here, you can add a new theme to set your colour palette and even choose custom fonts. You can get more detailed instructions from this Microsoft page
Flexible sections
Flexible sections are a great way for you to start getting creative. Unlike other sections, they allow you to drag and drop web parts to suit your desired layout.
These sections are especially useful for hero sections, giving promincence to your most important content.
Addingthe flexible section
- Edit the page
- Add a section at the top and choose the fleible option
Editing the section
Now the section has been added, you can choose a design for it from the properties pane.
In this example, I’ve chosen a background image from the ‘Add background’ option.
This option lets you choose a background colour, pattern or image. The image can be from an existing file, an upload or an image from the web.
Once you’ve chosen your background, you can start to add content.
You can’t directly add web parts to a flexible section, so you’ll need to create a new section beneath to add your web parts.
From here, you can drag your web part into the flexible section and drop it anywhere within the grid canvas
