This is our final post in my series about the example Intranet Marketing site. In this post I just wanted to cover some of the simple design tricks I am using when I build out the site. These are very simple items, but over time I have found that users like the simple look and feel. So consider these easy changes that can have a big impact.
The first thing to note is that these changes can be done on wiki pages by just editing the text styles. If you are using a web part page, you can achieve the same effect you just have to start by inserting a content editor web part and then make your changes within the web part.
The primary goal of what I want to accomplish with these changes is to create a simple visual for users when they access the page to draw their eyes to specific areas. Below are two home pages that I will be using in my example, the first is the Marketing home page that we have been using in this series.
The second is another areas home page. The big difference between the two styles is the use of images in this one. I avoided using images in the headers on the marketing site because I didn’t want to compete with the existing images on the home page.
The effect to get the bold and underlined headings just involves using the existing styles when configuring the text. When the page is in edit mode, insert your cursor where you want the text to be.
First, insert your picture.
Then use the settings in the Ribbon to configure the size and style of your image. Keeping all the header images you use the same size is a good idea for consistency. Another key setting is to change the position to middle so it aligns properly with the text.
Next, add your title next to the image. Highlight the specific text and use the Ribbon to set the Markup Style to Header 1.
The text will be updated in appearance. You may notice that the image becomes off centered though. If this happens repeat the position configuration for the image that we completed above. For the last step, just move your cursor past your title and insert the Markup Style called Horizontal Line. This will place the line directly below the header and image you just added.
Now, you can add the web part to the page and simply hide the chrome on the web part. This will display the web part content, but not the standard header. In design view you will see both, but when you browse the site you will only see the content.
Design View:
Browser View:
So there you have it, a simple way to add some splash to your page. Hopefully you have enjoyed this series on the sample Intranet site! I will start a new series soon so check back for new content later.
Jennifer Ann Mason 