Demystifying Design - Part 2: The Basic Layout
UNDERSTANDING WIDGETS
Our Website Editor allows you to create your own website layout. The elements of the page that actually form this layout are called “widgets”. Unlike Content Items, widgets appear on every page of your website. Widgets are typically used for things like a Header Banner, Menu and Contact Information. It is important that they stay static throughout the website’s pages so that the user is able to easily navigate your website. For example, if the menu changed positions from one page to another, users may have trouble finding where to click for more information. You want to make it as easy as possible for users to find the information they need on your website. Furthermore, consistency of layout helps ensure your branding is maintained throughout the visit. After all, if one page looks completely different from another, it may confuse the visitor as to whether they are still on your site.
In the Website Editor, you can place widgets into different sections of your website to form the layout. You do this by going to Template/Layout > Place Widgets.
With the above window showing, you can choose which area you’d like to add the widget into. You’ll notice that you cannot click on the Content area – that’s where the content that changes from page to page will go. Also note that the Left and Right areas will add widgets beside the Content area. Adding widgets in those areas will extend the overall width of your layout.
Click the first “empty slot” pull-down to insert one of the available widgets. Different areas will have different options for the widgets you can place. The widgets will display in the order you place them.
Here, I am choosing to place a Drop Down Menu underneath the Header Banner in the Top area. Once it’s selected, click on the orange Apply Changes button.
This is what it looks like on the website:
To edit a widget, click “edit” near the top left-hand corner of the widget. This will allow you to change the look and properties of the element, or add your own information into it.
If you want to remove a widget, you can click “hide” near the top left-hand corner. This will hide it from view on your website, but retain the information stored within the widget. For example, if you insert your slogan into the Rich Text 2 widget, that slogan will stay associated with that widget even when it is hidden. This allows you to move Rich Text 2 into a different section, and have the slogan display once moved.
COMMONLY USED WIDGETS
| Widget Name | Use |
| Rich Text Box 1, 2, 3, 4 | Add your own text, images, or HTML code |
| Web Code 1,2,3,4 | Add your own HTML code (often used for social media applications, web statistics tracking, etc.) |
| Contact Information 1, 2 | Display your contact information; options 1 and 2 are formatted differently so choose based on your preference |
| Header | Choose an image to feature throughout the website |
| Flash Header | Choose a flash header (rotating/animated photos) to feature throughout the website, generally used instead of the static banner in the Header option above |
| Drop Down Menu | Navigation bar with page links that drop down when you hover the mouse (or “mouse-over”) on the menu heading, or “Category” |
| Horizontal Menu | Navigation bar with page links displaying below Category headings |
| Menu | Vertically displaying navigation bar, for use on the Left or Right areas |
| Portrait | Displays your photo & contact information for use on the Left or Right areas |
| Date | Displays the current date; 3 options for display are available |
| Listings Gallery | Displays your office’s listings in a rotating strip (or your own listings, depending on what your Broker of Record approves); will appear vertically if added into the Left or Right areas, horizontally otherwise |
| Category Page List | Displays links to all pages in the current Category |
| Home Top Bookmark Nav | Displays handy links to Home, top of the page, quick bookmarking, and Privacy Policy, generally used in Very Bottom area. |
| Weather Button | Shows current temperature in selected city, for use on the Left and Right areas |
For a full list of the available widgets and their uses, check out our Online Manual Article. Remember, widgets appear on every page, so consider wisely what information you want to add into them.
Next week I’ll discuss how to add the finishing touches on your website to make it one-of-a-kind!
Authored by Tara, Client Relations