Try ShortPoint nowIn Part 1, you learned what ShortPoint Theme Builder is and how to launch it. Part 2 will explore how to use it to create gorgeous SharePoint sites and the features you can customize.
NOTEThis article focuses on SharePoint pages with the Modern experience. If you want to customize classic pages (including on-premise environments), you may access our support article on Getting Started with ShortPoint Theme Builder - Classic SharePoint Sites (Part 1).
TABLE OF CONTENTS
Prerequisites
- You need to have ShortPoint SPFx version 7.0.2.xx or later installed on Microsoft Office 365 (SharePoint Online) or SharePoint 2019 environment.
- You must be a ShortPoint Designer with an active license.
Customizing SharePoint Sites Using Theme Builder
Click Get Started to learn how to customize your site using Theme Builder :
NOTETo see all the features you can modify in Theme Builder, check out Theme Builder Features.Theme Builder Features
Below are the features you can customize inside ShortPoint Theme Builder:
A. General Settings
Options under general settings allow you to modify the layout of the page, hide elements, and customize borders. Here is an example of how you can customize your SharePoint site pages using the General Settings in Modern ShortPoint Theme Builder:
 | General Layout | allows you to incorporate a unique layout style into your page. For more details, check our article on General Layout Theme Builder Options for Modern SharePoint Sites. |
 | Elements | allows you to hide/unhide out-of-the-box SharePoint site elements for all sites or selected site pages and subsites. |
 | Move To Top | allows you to add a scroll-back-to-top button for easier navigation on your modern pages. |
 | Dividers & Corners | allows you to modify the paddings and margin values. |
B. Branding
Options under branding allow you to modify the theme color of the page. Here is an example of how you can customize your SharePoint site pages using the Branding Settings in Modern ShortPoint Theme Builder:
 | Color Palette | allows you to modify the SharePoint theme color by using the color picker tool or adding a hex color code. All the Fabric Palette Colors introduced by Microsoft are also available in all ShortPoint Color Pickers. |
 | Advanced Colors | allows you to further customize the primary color of the page. |
 | Color Theme Tool | allows you to save theme colors and use them for other pages. Learn more about this feature in SharePoint Color Palette and Themes Tool. |
C. Fonts & Typography
Options under fonts & typography allow you to choose the fonts used on your page. Check out Fonts and Typography Theme Builder Options for Modern SharePoint Sites to learn more about it. Here is an example of how you can customize your SharePoint site pages using the Font & Typography Settings in Modern ShortPoint Theme Builder:
 | Base | allows you to change the base font. It's a global option that will change the font of everything on your site, including navigation elements, the header, and so on. |
 | Menus | allows you to change the font of the different menus in SharePoint. |
 | Body | allows you to change the font of the text located under the header. |
 | Headings | allows you to change the font for all the headings on your page. |
 | Advanced Headings | allows you to specify the font for each heading (e.g font for heading 1, font for heading 2, and so on). |
 | Site Title | allows you to change the font of the site title. |
 | Page Title Area | allows you to change the font of the Page title including the name of the author, publishing date, and the text above the title. |
 | Web Parts | allows you to change the font of the web parts on your page. |
 | Links | allows you to customize the color of the links. |
 | Footer | allows you to modify the font of the footer. |
D. Background
Options under background allow you to modify the background image/color of the page. Here is an example of how you can customize your SharePoint site pages using the Background Settings in Modern ShortPoint Theme Builder:
E. Header
Options under Header allow you to customize the out-of-the-box SharePoint page header design. You can check out How to Customize Your SharePoint Site Header Using ShortPoint Theme Builder to learn more about it. Here is an example of how you can customize your SharePoint site pages using the Header Settings in Modern ShortPoint Theme Builder:
 | Logo | allows you to customize your site’s favicon and page title. |
 | Background | allows you to add a background image/color to the Header. |
 | Command Bar | allows you to customize the background and color of the command bar. |
 | Before & After | allows you to add dividers before/after the header. |
 | Paddings & Margins | allows you to control the Header’s height by changing the padding and margin values. |
 | ShortPoint Shortcuts | allow you to hide ShortPoint shortcuts in the command bar. |
F. Footer
Options under Footer allow you to add a footer you created using ShortPoint Generator. You can learn more about creating footers in Getting Started with ShortPoint Footer for SharePoint. Here is an example of how you can customize your SharePoint site pages using the Footer Settings in Modern ShortPoint Theme Builder:
 | General Layout | allows you to add the footer you created. |
 | Background | allows you to add a background to the footer. |
 | Before & After | allows you to add dividers before/after the footer. |
 | Paddings & Margins | allows you to control the Footer’s height by changing the padding and margin values. |
G. Menus
Options under Menus allow you to customize layouts and colors of different menus in SharePoint. Here is an example of how you can customize your SharePoint site pages using the Menus Settings in Modern ShortPoint Theme Builder:
 | Hub Menu | allows you to edit the layout of the hub menu. |
 | Primary Menu | allows you to edit the layout of the primary menu. |
 | Side Menu | allows you to edit the layout of the side menu. |
 | Hub/Primary Sub Menu | allows you to edit the layout of the hub/primary sub menu. |
H. Mobile Settings
Options under Mobile Settings allow you to make specific customizations that will be applied only to mobile devices.
I. Utilities
Options under Utilities allow you to restore your site to its original state, add Custom CSS or JavaScript codes, and add Custom CSS Fonts.
 | Custom CSS | allows you to add custom CSS codes. Find more information in our How to Apply Custom JavaScript/CSS article. |
 | Custom JavaScript | allows you to add custom JavaScript codes. Find more information in our How to Apply Custom JavaScript/CSS article. |
 | Import / Export | allows you to import/export a theme. Access our article on Export and Import Customizations to learn more. |
 | Custom Fonts | allows you to add custom fonts from Google Fonts, Fonts.com, and Adobe Typekit. Check out our folder dedicated to custom fonts in our Knowledge Base. |
 | Reset | allows you to reset your site to its original state. |
J. Get Support
This section allows you to get immediate support by clicking the Get Support button or searching our Knowledge base.
That’s it! These are all ShortPoint Theme Builder features you can access and use to create stunning designs for your SharePoint modern sites.
Related Articles:
- Getting Started with ShortPoint Theme Builder - Modern SharePoint Sites (Part 1)
- Getting Started with ShortPoint Theme Builder - Classic SharePoint Sites (Part 1)
- Getting Started with ShortPoint Theme Builder - Classic SharePoint Sites (Part 2)
