Create your own Content, Commerce, and Community platform by starting with a site that looks and feels like you.
We’ll start in the Design tab of Maestro. You can navigate to it via the Admin Bar, demonstrated below.
Once inside the Design tab, you’ll have access to all of the major tools to set your stream apart visually. Notice that there are Global Settings, like colors, fonts, and logos, which apply across the site. Below the Global Settings, you can set the Channel Background which is specific to each channel you use.
Note that you can further fine-tune these details, and even set a channel-specific logo, through the use of the Editor. Think of Design as the base “look and feel” on your site, while the EDITOR builds on top of it.
- Essential Design Resource: Placement Guide - utilize this visual placement guide to see which primary assets are needed for Maestro, as well as their specs.
- Essential Design Resource: Color Guide - check out this detailed look at which color choices affect which components across your Maestro instance.
Logo, Title and Fonts:
In Design's Global Settings you’ll start by adding your Logo & Title. Each Channel will have this logo, unless overridden in Editor. You can set upload a Desktop Logo and Mobile Logo, add a link to the logo, or even create a Text Logo.
Under Fonts, you’ll find a wide variety of choices. There are two font types to assign:
- Header Font: found in Panel Titles, Navigation, etc.
- Content Font: found in Chat, User Names, etc.
Once your logo and fonts are added, click SAVE in the top right of the admin bar.
Picking Your Colors
Colors are in three groupings: Panel, Navigation, and Footer.
- Panel: these are the primary colors that appear on your Channels. Be sure to use colors with a little bit of contrast so that text and icons are visible across your site.
- Navigation: this adjusts the upper Navigation section as well as your Channel Select.
- Footer: here you can adjust the colors of the footer, at the bottom of your Channel.
These changes are site wide. While selecting colors, the site will change in real-time to show you a PREVIEW. This is not live until you hit SAVE. Once you have selected your colors, hit SAVE in the top right of the admin bar.
Hint: If any text, icons, etc. aren’t showing up on your site you may have text and background colors that are too similar in color. Try adjusting to colors with a greater contrast. Consider also checking the "Login" modal and your Entitlement Gate (if applicable) to ensure colors function in all areas.
The Channel Background can be adjusted in Design under Current Channel Settings, which applies only to the Channel you are currently on. You can note the Channel by looking at the “slug” in the URL in your browser (e.g. sapphire.maestro.io/yoursite/yourchannel or watch.yoursite.com/yourchannel).
Each Channel can have its own background image or color. If you want the same background on each channel, you will need to add it to each channel. If you do not have an image, simply select a background color. Grid Text color applies only to channels set up in grid mode.
Note: Background images do NOT appear on Mobile, so it will pull from the Background Color.
Using the Editor
The Editor can be used to further customize your site. You can use it to adjust the Navigation links, add a Countdown, add Channel Navigation, edit the Social section, edit the Footer, as well as access the Sidebar (more on that below).
To utilize the Editor, simply click Editor from the Admin bar, hover over a section and click Edit.
To set up the Navigation:
- Hover over the navigation section and click Edit
- Click Add to add a new item
- The Channel Specific toggle allows you to have different navigation per channel. Toggle this on BEFORE adding your items
- Add text or an image (to make it look more like a button)
- Add the URL
- Note: If linking within the site, the format should be /pageslug, not the full URL
- Click Add
- Click Save
- Click Publish to push changes live
Note: we do not recommend adjusting the video from the Editor. You will do this in Channels, which is described below.