Designing Your Homepage

Did you know that it takes about 50 milliseconds (that's 0.05 seconds) for site visitors to form an opinion about your website that determines whether they like your site or not and whether they'll stay or leave? 

0.05 seconds is not a lot of time. So what can you do to optimize their first impression of your site? Good design plays a big part. Attractive content and layout, responsive design and easy navigation all contribute to good design principles. 

Your Public Dashboard homepage is the first page that greets your site visitors. Let's take a look at your PD homepage configuration options and see how we can apply good design.

Page Settings - Homepage

The Homepage settings on the left are separated into sections that correspond to the live preview on the right. Anytime a page setting is changed on the left, it will be reflected on the right side of the page. For a breakdown of the sections, have a look at the terminologies used in the Anatomy of the Envisio Public Dashboard article. To understand what each icon means, check out the list of Iconography used.

Header

The Header consists of your logo, navigation menu (if enabled in Site Settings), and search bar. By default, it is positioned above the banner image. However, you have the option of moving the header inside the banner image by clicking on the move (down-arrow) icon. 

Here's an example of the homepage with the Header in the default position (above the banner).

Here's an example of the homepage with the Header inside the Banner:

Tip
If you choose to go with the Header within the Banner look, for a stunning effect, use a darker banner image or overlay a darker background color on the banner image, and upload a transparent logo.

Banner

The Banner section contains the banner image (Or you can set a solid background color instead of using an image), banner text (Add a welcome message that tells your site visitors what the site is about), and News Feed. If you do not wish to use a hero image for your site, you can hide the Banner.  

News Feed

The News Feed ticker allows you to highlight important news to your site visitors. You can create up to 5 tickers and optionally include Html links in your feed to take your visitor to an external page. You also have the option of choosing to position the feed above the banner.  By default, it is positioned below the banner. Note that the text color of the news feed is hard-set to white.

To use HTML links, enclose the hyperlinked text within square brackets and the URL within round brackets. Take care to ensure there's no space between the square brackets and round brackets. Here's an example: 

For more information, visit our [website!](https://www.envisio.com)

This is how it'll display:

Tip
If you're not able to see your news feed, check that the background color of the news feed is not set to white.

Page Body 

The Page Body consists of Intro Section, Main Section and Sub Section.

The Intro Section and Sub Sections contain WYSIWYG editors that allows you to enter text or add content (eg. video, image, chart) that you'd like to share with your visitors. You can customize the background color of these sections to break up the sections if you like.

The Main Content section is made up of your top-level plan elements. By default, it displays the plan element description, status and progress bars. You can set the column display of this section from 1 to 5 to best display the number of top-level goals in your plan as well as customize the background color. Other options include:

• Display progress on homepage
  By default, the progress bar is set to display on the homepage below the goal images. You can hide the progress bar on the homepage by toggling this option off.
  
  
• Card title position
  By default, the card title overlaps on the goal images. If you'd rather not display a title, you can choose None. Or if you have a long title that doesn't fit in on the goal image, you can set the card title to display below the goal image using the Bottom option.
  
  
• Display card description
  The card description displays the goal description. By default, this is set to display. However, if you would like to hide it on the homepage, you can toggle this option off. 
  
  
• Feature image
  On each of the goals that you are displaying on your dashboard, you can use images to represent the goals. To upload the images, click on the upload icon for each goal in Feature Image. For best results, select images that are sharp, use great colors that match the theme of your site. Check out our image guide.
  
  
• Feature text
  Goal descriptions from Plans are automatically populated in Feature text. However, you might want to change the description to provide more explanation or re-word it for external audience.  You can make changes to the description in Feature Text and any changes made in Public Dashboard stays in Public Dashboard. When you run subsequent syncs from Plans, if you wish to keep the current data, make sure to select the 'Current' column for those sections when reviewing the Synced data.

All the above settings combined with the global font family, font size and navigation options form the building blocks you need to easily create a well-designed dashboard with good design principles. So, let your creative juice flow and have fun.

You can generate a preview of your site to check your design or share the link to get others' input before hitting Publish. 

Tip
In the design phase, it is not uncommon to generate a preview of your site at least 10 times before you're happy with it.

Working with the WYSIWYG editor

The Intro Section and Sub Section provides you with the ability to customize your site with any content you'd like to share with your community. The content you add here will not be affected by data syncs. Some of the things you can do to further enhance your site are:

• Embed videos to further communicate your accomplishments
• Insert images to showcase the project that's been completed.
• Use icons as buttons and hyperlink it to another site or pdf that one can view or download.

The possibilities are endless. 

How to enable Tooltip on Images?

When using images, you can use the Alternative Text option to display text as a tooltip when one hovers over the image. To add a tooltip, first insert an image, then click on the image to bring up the additional popup, then click on Alternative Text.