Design: Manage Site Settings

Anatomy of Your Envisio Public Dashboard

Similar to most website design tools, we use standard terminologies to describe the makeup of our site. The image below shows the anatomy of the Envisio PD homepage that will help you learn about the terminologies used throughout the admin console. 

Site Settings

Before you start customizing your content, we recommend going through your Site Settings. To access Site Settings:

1. Click on the 3 dots to the right of the Last Sync.
2. Select Settings and it will land you on Site Settings.

Default Font Family and Font Size

Setting a default font family and font size allows you to maintain font consistency throughout your site. For areas of your site where you’d like to use a different font, you can still set the text font through the WYSIWYG editor. Envisio offers 13 font families for you to choose from:

• Arial
• Georgia
• Lato
• Montserrat
• Nunito Sans
• Open Sans
• Oswald
• Raleway
• Roboto (Default)
• Source Sans Pro
• Tahoma
• Times New Roman
• Verdana

Logo

You can upload your organization’s logo by clicking on the upload icon. For the best result crop your logo close to the image shape leaving little to no white space around it.

Navigation Position

Your site navigation menu is based on the top-level Goals you have enabled for display on the homepage. When you first enable PD for your plan, Envisio automatically creates the navigation menu from the first 40 characters of your Goal description. You can edit the menu in the Navigation Label field under each Goal's Feature Text on the homepage. There are 3 navigation position settings: None, Top and Right. By default, the Navigation Position is set to Top meaning it appears in the header. None will hide the navigation menu altogether. Right will display a hamburger menu on the right side of the screen. However, on smaller devices, even if the position is set to Top, it will display a hamburger menu to the right, similar to the Right setting, due to a responsive design.

Navigation Text Color

You can change the navigation text color to contrast your header background or the banner background or image depending on which option you choose to position your header.

Header Background Color

When designing your site, you have the option of moving the header (consisting of logo, search bar and navigation) into the banner or above the banner (default).  If you elect to keep the header, you have the option of either leaving it white (default), or you can choose a background color that represents your brand.

Child Page Header background

In the child pages (pages descending from the home page), you have the option of uploading a background image for the header bar. Some suggestions include a textured image, gradient image using two of your brand colors (see example here). Just remember to check against the Navigation Text Color if you've turned on Site Navigation.

Footer Text and Background Color

You can customize the content of your footer by using texts and links. This is a great place to include your organization's Contact Info, Terms & Conditions of Use, Privacy Policy, etc. 

Tip
Set a Footer Background Color that compliments your header to make your site pop.

 

Measure Columns

If you are displaying measures/KPIs/metrics on your site, you can pick how many measures will appear across a page (1-3). The setting will apply as default throughout the site, but you can always change the display settings for specific cases via CSS overwrite (see below).

 

Page Body Width (%)

By default, this is set to 98%. If you want a wider margin on either side of your dashboard’s content, just tweak the number until you get the perfect look.

 

Set Mobile Banner Height

The banner image on the home page is mobile responsive. However, this might not provide the best experience if you have a large amount of content in the banner text. You might notice the banner text overlaps with the next section below it. To counter this, you can manually adjust the banner height for mobile by entering a number between 0 and 1000px. To return to default, set it to zero.

CSS Overwrite 

We tried to provide all the common design options and there will be times when we cannot. In those cases, you can use our CSS editor to add custom CSS code, for even more control over the look and feel of specific aspects of your dashboard.

Next article: Design: Manage Content Settings