You can customize the modern SharePoint site layout using both SharePoint Change the look controls or Modern ShortPoint Theme Builder options.
In this article we will show you how you can update the layout and manage site elements using SharePoint Change the look controls, and how to customize even more using Modern ShortPoint Theme Builder, including Hide the elements feature.
TABLE OF CONTENTS
- Before we begin
- This article is for you if
- SharePoint Change the Look
- ShortPoint Modern Theme Builder
- Coming Soon: SharePoint App Bar
Before we begin
This article is focused only on the site layout customizations. Changing the site theme is not covered here.
This article is for you if
- You use SharePoint on Office 365 environment.
- You use Modern SharePoint experience.
- You have ShortPoint installed on your Modern SharePoint site(s).
- You are a ShortPoint User with an active license.
SharePoint Change the Look
Change the look is the SharePoint functionality that helps to customize the look of the SharePoint site.
You can access the Change the look settings under the Settings options in the top right corner of your SharePoint site:
The Change the look available options depend on the user's SharePoint version, experience and site type.
- For the Modern Team sites you can modify the site theme and header.
- For the Modern Communication sites it is also possible to change the navigation layout and the site footer.
Change the look - Modern Team Sites | Change the look - Modern Communication Sites |
Note:
You may check more details about the Change the look in the Microsoft SharePoint official documentation.
Site Header
Click Header from the Change the look controls:
Here you can modify the SharePoint header options:
- Change the header Layout (choose between Minimal, Compact, Standard and Extended);
- Change the header Background;
- Add a Site Logo to be displayed in the header.
It is also possible to hide the site title by clicking the Site title visibility toggle:
Site title is visible | Site title ishidden |
Please note that hiding the site title will not hide the site logo.
Site Navigation
Click Navigation from the Change the look controls:
Here you can modify the navigation Menu style. Choose between Mega menu and Cascading options:
Important:
1. The Mega menu style is available only on the SharePoint Hub sites associated with Microsoft Teams or on Communication sites.
2. Mega Menu is not supported on the sites with the classic publishing feature(s) turned on.
It is also possible to hide the site navigation by clicking the Display site navigation toggle:
Site navigation isvisible | Site navigation is hidden |
SharePoint OOTB Site Footer
The SharePoint site footer supports the following elements:
- 8 links or labels
- Footer logo
- Footer name
Here is an example of the SharePoint footer:
You can click Edit button inside the SharePoint footer (1) and then use the plus button (2) to add the link or label for navigation:
Click Footer from the Change the look controls:
Here you can modify the SharePoint footer options:
- Change the footer Layout (choose between Simple and Extended);
- Add a Logo to be displayed in the footer;
- Add a Name to be displayed in the footer;
- Change the footer Background.
By default, the SharePoint footer will be enabled on your Modern Communication site pages. To disable it, switch off the Enable toggle. This will remove the SharePoint footer from your page and close its customization options:
SharePoint Footer is enabled | SharePoint Footer is disabled |
Note:
To know more about the SharePoint footer, please check the Microsoft SharePoint official documentation.
ShortPoint Modern Theme Builder
Using ShortPoint Modern Theme Builder allows you to customize out-of-the-box SharePoint modern page elements and settings without having to do coding. This is most useful especially since Modern sites no longer support a master page.
Site Header
Open the ShortPoint Theme Builder to modify the SharePoint site header.
From here, you can navigate to the Header section:
Here you can modify the SharePoint Page header options:
- Customize the site’s browser tab by editing its title and adding your own favicon;
- Add a Logo and adjust its spacing (paddings and margins);
- Change the header Background;
- Modify the background, text, icons, and hover over action of the Command Bar;
- Add dividers using the Before & After settings;
- Control the header height by using Paddings & Margins.
After you are done customizing your header, don't forget to Publish your changes.
Site Navigation
Open the ShortPoint Theme Builder to modify the SharePoint site navigation.
From here, you can navigate to the Menus section:
Then, choose what navigation you would like to modify:
- Hub Menu. The navigation of your hub. It is only shown on the hub-associated sites.
- Primary Menu. The main top menu of your sites.
- Side Menu. The left side, quick launch menu, only available for the Teams sites.
- Hub/Primary Sub Menu. The sub menu, or the drop-down, items of your Hub and Primary menu.
Here you can modify the menus options:
- Select the menu alignment using the General Layout;
- Change the menu items Background & Colors for the navigation links;
- Add dividers using the Before & After settings (available only for the Hub Menu);
- Control the menu and menu items height by using Paddings & Margins.
Note:
For Hub/Primary Sub Menu you can only change the items background and colors for the navigation links.
After you are done customizing your menus, don't forget to Publish your changes.
ShortPoint Site Footer
You can build a footer from the ShortPoint Generator or copy a template from our demos library and use ShortPoint Modern Theme Builder to attach the footer content in the way you want.
Note:
Find more detailed steps on Getting Started with ShortPoint Footer for SharePoint in our Knowledge Base.
Once you have created a footer you would like to add to your site, open the ShortPoint Theme Builder to enable and customize its look.
From here, you can navigate to the Footer section:
Here you can modify the ShortPoint footer options:
- Select your footer from the created in Generator footer options, and set it to full-width using the General Layout;
- Change the footer Background;
- Add dividers using the Before & After settings;
- Control the footer height by using Paddings & Margins.
After you are done customizing your footer, don't forget to Publish your changes.
Hide Elements with ShortPoint Theme Builder
Using ShortPoint Theme Builder you are not only able to customize the out-of-the-box SharePoint elements on your site pages, or add a beautiful footer, but also hide some of those elements.
If you'd like to hide some elements, you can do this in the General Settings > Elements.
From here choose where you would like these changes to apply - All Sites, Root Site, Home Page only etc.:
Then, you can choose what elements to hide on your pages:
- Focus Mode. You can enable this option to collapse the SharePoint top suite bar. Using the arrow icon you can always expand it when it's needed.
Focus Mode is not enabled | Focus Mode is enabled |
- Hide Header. Having this option enabled, the site header will no longer visible on your sites.
Header is visible | Header is hidden |
- Hide Menu. Use this option to hide the site menu only.
Site Menu is visible | Site Menu is hidden |
- Hide Hub Sites Menu. Use this option on hub-associated sites to hide the Hub Sites Menu.
If your site is not associated with the hub, enabling this option will not change anything there.
Hub Sites Menu is displayed | Hub Sites Menu is hidden |
- Hide Logo. Use this option to hide the site logo.
Site Logo is visible | Site Logo is hidden |
- Hide Site Info. Use this option to hide the site title.
Site Info (Site Title) is visible | Site Info (Site Title) is hidden |
- Hide Page Title. Use this option to hide the page title.
Page Title is displayed | Page Title is hidden |
- Hide Followers. Use this option to hide the site followers.
Site Followers are shown | Site Followers are hidden |
- Hide Author. Use this option to hide the page author.
Page Author is shown | Page Author is hidden |
- Hide Members. Use this option to hide the site members.
Site Members are shown | Site Members are hidden |
- Hide Side Panel. Use this option to hide the side panel - the quick launch menu on the Teams sites.
As the side panel is only available for the Teams sites, enabling this option for the Communication sites will not change anything there.
Side Panel is shown | Side Panel is hidden |
- Hide Search. Use this option to hide the site search bar.
Search is visible | Search is hidden |
- Hide Footer. Use this option to hide the ShortPoint footer.
You cannot hide the SharePoint footer using this option. Please hide it with the Change the look controls instead.
Footer is displayed | Footer is hidden |
- Hide Floating Actions. Use this option to hide the floating actions, for example the Get mobile app and Feedback buttons.
- Hide Bottom Actions. Use this option to hide the bottom actions: Likes, Views, Save for later and Comments (if enabled).
Bottom Actions are shown | Bottom Actions are hidden |
Don't forget to Publish your changes.
Note:
Check our Getting Started with ShortPoint Theme Builder - Modern SharePoint Sites (Part 2) article to get more familiar with its options.
Coming Soon: SharePoint App Bar
Some of you might have noticed a small left side menu on the modern SharePoint sites:
This is a new feature from SharePoint, called the app bar. It will feature the global navigation in the SharePoint modern communication and team sites.
The standard release of the feature is planned for mid-March through mid-April 2021.
You can check more about this new feature in the official Microsoft documentation.
How to Disable the SharePoint App Bar
It is not possible to permanently disable the SharePoint app bar. However, users can temporarily disable it in the SharePoint tenant using the PowerShell. This temporary solution will be working until the 31st of October 2021.
To temporarily disable the SharePoint app bar, please do the following:
- Download the latest version of the SharePoint Online PowerShell.
- Open the SharePoint Online PowerShell and run the following command:
Set-SPOTemporarilyDisableAppBar $true
Notes:
1. You need to run this command with the administrator privileges.
2. Do not forget to establish the connection using the Connect-SPOService command first.
Q: Can I disable the SharePoint app bar with ShortPoint?
A: Not yet. Currently, you cannot disable the app bar with ShortPoint.
Stay tuned. Soon it will be possible to hide the SharePoint app bar using ShortPoint Theme Builder. This feature has already been added to our roadmap. We recommend using the PowerShell command till this solution becomes available for our users.
You can check more about disabling this feature in the official Microsoft documentation.
Related articles: