Welcome to the new website in a box.
We’ve created a new, lighter, fresher and more user-friendly version of the ‘website in a box’ (WIB) for you, with a focus on usability and accessibility. This new release consists of both a brand new website as well as a new CMS (Content Management System) called Drupal that you can use to update the content of the website. This guide will help you use the CMS and also to understand our thinking behind the changes.
The CMS lets you change all the content on the website. You don’t need technical ability or experience to use the CMS but there is quite a lot to learn. Just as you once learned to use Word to create documents, you need to know at least the basics of Drupal (the actual name of the CMS itself) in order to change your website.
Many of the items listed below are ‘one offs’ or have been delivered for you already, but you may need to change something in future, so keep this guide handy!
We have also created a demo version of the new WIB here (http://www.hwdemo.co.uk) so that you can see what to expect.
And there’s a training video for you watch here (http://www.healthwatch.co.uk/website-box-2-training-video) – with a downloadable transcript if you can’t access video or audio. This covers the basics of using the CMS, and we hope you find it useful.
Always remember that there is a wealth of information online if you want to find out more: especially the Drupal.org website itself.
And please email [email protected] if you get really stuck.
Authentication
This is the process you need to go through to access the CMS. Once your new WIB site is put live, you will be sent login info (username and password) by Healthwatch England staff.
The very first time you use this info to login to the CMS it is vital that you immediately change the username and password to your own personal settings! We cannot retrieve your password for you once it’s been changed so use a password that you will remember! A ‘forgotten password’ link will be sent to your email address when you request one, so make sure you add your correct email address ASAP. Please note that if you try and fail to login too often, you will be locked out for a few hours.
Login
1. Click the Login link in the footer or go to www.yourdomainnamehere/user/login. 2. Populate the form with your username and password and click Log in.
Change password
1. Click Hello [your username] in the admin menu. 2. Click the Edit tab.
3. Populate the form with your new username and password and click Save. (Tip! This is where you add your correct email address too)
Forgotten password
Please note that Healthwatch England cannot retrieve your password or username! Any other Admin user in your system can reset it for you. That’s why it’s a good idea to have at least two Administrators (Admins)* for the website (*Admins and other Roles are covered elsewhere in this document).
1. Click the Login link in the footer or go to www.yourdomainnamehere/user/login. 2. Click the Request new password tab.
3. Populate the form and click Save.
4. An email will be sent with a link to reset your password
(Tip! remember that you must add your correct email address when you create your User Account so that you can recover your password).
Content
This section will walk you through how to add, edit and delete the various types of content on your website. This means everything from text to video. And even if you don’t currently have, for
example, any Events within your organisation, we recommend that you simply do not publish these (rather than delete) so that you can use this feature in the future.
Add content (editor or administrator role required)
1. Click Add content in the admin menu. 2. Select the relevant content type. 3. Populate the form and click Save.
(Tip! see below for an explanation of the different content types)
Edit content (editor or administrator role required)
1. Click Content in the Admin menu. 2. Click edit for the relevant item. 3. Edit the form and click Save.
Common fields and fieldsets
Here follows a listing of how to manage commons ‘fields’ or content areas on your new site.
Menu settings (add/edit menu link for the content item)
This is how you add or edit an item to the main navigation that runs across the top of the entire site. ‘Parent’ refers to the main item that is always visible. You have the option to make an item be ‘under’ another (eg. under ‘About us’ you can have submenus like ‘meet the board’ by assigning the latter to the ‘About us’ parent item). Weight refers to where the menu item displays. In the main menu, it’s left to right (1, 2, 3 etc.) and for the sub-menu it’s top down (again 1, 2, 3). (Tip! The menu link title and the page title can (and probably should) be different. This means you can keep the menu title as short as possible without losing the full title on the content itself).
1. Click the Menu settings tab.
2. Check the Provide a menu link tick box. 3. Enter a Menu link title.
4. Select the relevant Parent item and click Save.
Publishing options (editor or administrator role required)
Publishing puts a page ‘live’ so that the public can see it. If you want to delay publication, continue to work on the content later, have other people review it first, etc. you simply save the page but do not publish it! Other people who log in to the CMS can view (and if they have the correct
permissions) edit or publish it. This is a very useful and powerful option for pages that need to be versioned or have different people contribute.
2. Check/uncheck Published and click Save.
Content types
Collection (should be under Content types)
a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words. This is the text that displays in a search engine ‘returns’ page. In the following example the meta description is “Healthwatch England responds to the Health Select Committee's 'After Francis' report. Responding to the….Anna Bradley, Chair of Healthwatch England says.
This is a short, concise description of what content is available on the page and helps the user find the correct information when using search engines such as Google.
c. Body - Displayed full width unless an Image is added, in which case it is displayed next to the image.
d. Image.
e. Pages - Collection of Page items displayed as an accordion. To reference an existing item enter the title into the text box. This is actually an autocomplete field, which means your item name should appear and you can select the relevant result.. Alternatively, click the “add” icon to the right of the field to create and reference a new item.
f. Quicklinks title. Quicklinks are the small blocks of text with an image that are usually on the home page. They let the user zero straight in to a particular area of the site and are a great way to draw focus to the most popular or important areas. We recommend limiting these to four (4) max as they are not meant to replace the main navigation but rather enhance the user experience.
g. Quicklinks - Collection of Quicklink items. To reference an existing item, enter the title into the text box. This is actually an autocomplete field, which means your item name should appear and
you can select the relevant result. Alternatively, click the “add” icon to the right of the field to create and reference a new item.
Event
a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words.
c. Date - Required. Used to order items on the event index page and in the sidebar. d. Location.
e. Link - System or aliased path excluding preceding forward slash, e.g. path not /path. f. Body.
g. Files. Event index a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words.
c. Body - Displayed full width unless an Image is added, in which case it is displayed next to the image.
d. Image. Home
a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words.
c. Slides - Collection of Slide items displayed in a slideshow. To reference an existing item, enter the title into the autocomplete field and select the relevant result. Alternatively, click the “add” icon to the right of the field to create and reference a new item.
d. Quicklinks - Collection of Quicklink items. To reference an existing item, enter the title into the autocomplete field and select the relevant result. Alternatively, click the “add” icon to the right of the field to create and reference a new item.
News a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words. c. Body.
d. Files. News index a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words.
c. Body - Displayed full width unless an Image is added, in which case it is displayed next to the image.
d. Image. Page a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words. c. Body.
d. Files. Profile a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words. c. Image.
d. Body. Profile index a. Title.
c. Body - Displayed full width unless an Image is added, in which case it is displayed next to the image. d. Image. Quicklink a. Title. b. Image. c. Body.
d. Link - System or aliased path excluding preceding forward slash, e.g. path not /path. Resource
a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words. c. Icon.
d. Body. e. Files.
f. Video - YouTube or Vimeo URL (e.g. http://youtu.be/0rTRj8D1ZIA). g. Transcript.
Resource index a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words. Slide
a. Title. b. Image. c. Body.
d. Video - YouTube or Vimeo URL (e.g. http://youtu.be/0rTRj8D1ZIA). Overrides Image field. e. Transcript.
Webform a. Title.
b. Meta description - Summary for search engines. Typically 20 - 30 words. c. Body.
Configure webform (editor or administrator role required) 1. Click Content in the admin menu.
2. Filter by Webform type. 3. Click edit for the relevant item. 4. Click the WEBFORM tab. 5. Click the E-mails tab.
6. Enter an email address and click Add. 7. Click Save e-mail settings.
Rich text editor Create link
1. Select the relevant text or image. 2. Click the Insert/Edit Link tool. 3. Enter a Link URL.
4. Select a Target (optional).
5. Select the button class (optional). 6. Click Insert.
Insert image
1. Click the Insert/Edit Image tool. 2. Click the Browse icon.
3. Click the Upload tab.
4. Click Browse, choose a file and click Upload. 5. Click the Browse tab and select the relevant file.
6. Enter an Image Description, click the Appearance tab and select the caption class (optional). 7. Click Insert.
Copy and paste
1. Click the Paste as Plain Text tool.
2. Paste the content into the rich text editor. All styles should be removed. Insert media
1. Click the Insert/Edit Embedded Media tool. 2. Select the Iframe type.
3. Click the Source tab.
Add custom block (editor or administrator role required) a. Click Structure in the admin menu.
b. Click Blocks. c. Click Add block.
d. Enter a Block title, Block description and Block body. e. Enter CSS class(es) (optional). Possible classes include…
wrapper (white box with 20px padding) wrapper-2 (white box with 10px padding) wrapper-3 (light grey box with 10px padding)
f. Select a region or select none to hide the block. g. Edit Visibility settings and click Save block. Edit block (editor or administrator role required)
a. Click Structure in the admin menu. b. Click Blocks.
c. Click configure for the relevant item. d. Edit the form and click Save block.
Reorder blocks (editor or administrator role required) a. Click Structure in the admin menu.
b. Click Blocks.
Menus
Add menu item (editor or administrator role required) a. Click Structure in the admin menu.
b. Click Menus.
c. Click add link for the relevant menu. d. Enter a Menu link title.
e. Enter a Path and click Save.
Edit menu item (editor or administrator role required) a. Click Structure in the admin menu.
b. Click Menus.
c. Click list links for the relevant menu. d. Click edit for the relevant menu item. e. Edit the form and click Save.
Reorder menu items (editor or administrator role required) a. Click Structure in the admin menu.
b. Click Menus.
d. Drag to reorder the menu items and click Save configuration.
Logo (administrator role required)
Please note that we have automatically added the correct logo with the consistent sizing, quality and preparation to all new Website in a box projects. However, should you want to change it: 1. Click Appearance in the admin menu.
2. Click Settings in the websiteinabox theme section. 3. Uncheck Use the default logo.
4. Populate the form and click Save configuration.
Users
Add user (administrator role required) 1. Click People in the admin menu. 2. Click Add user.
3. Enter a Username, E-mail address and Password. 4. Check the relevant Roles and click Create new account. Edit user (administrator role required)
1. Click People in the admin menu. 2. Click edit for the relevant item. 3. Edit the form and click Save.
Site information (administrator role required)
1. Click Configuration in the admin menu. 2. Click Site information.
3. Edit the SITE DETAILS and click Save configuration.
Google Analytics (administrator role required)
This is a service offered by Google that generates detailed statistics about a website's traffic and web-traffic sources. Google Analytics can track visitors from all referrers, including search engines and social networks, direct visits and referring sites. Not only is it the most widely used website statistics service, but the basic service is free of charge: a premium version is available for a fee, but the basic one is probably sufficient for Healthwatch purposes.
You can find out more about Google analytics online, for example at http://en.wikipedia.org/wiki/Google_Analytics
2. Click Google Analytics.
3. Enter your Web Property ID and click Save configuration.
Maintenance mode (administrator role required)
This lets you take the site ‘offline’ while you do major changes to it – ‘site under construction’ mode. This is not likely to be used unless you decide to redesign or add significant features to your
existing website. Should you need to use Maintenance mode, here is what to do: 1. Click Configuration in the admin menu.
2. Click Maintenance mode.
3. Check/uncheck Put site into maintenance mode and click Save configuration.
Translate the content of your website
Google Translate is a free, multilingual machine-translation service provided by Google Inc. to
translate written text from one language into another. You can use it to view your website content in a number of languages.
However use with caution! You should be aware that because Google Translate uses statistical matching to translate rather than dictionary/grammar rules. Therefore, translated text can often include errors (often hilarious) but then users should not be too surprised.
The ideal is ‘human translation’ of content but this is of course expensive and time consuming.
Go to https://translate.google.com/manager/website/ to get the feature and for directions on how to add this to your website. You will need to sign up for a (free) Gmail account to do this.
For detailed info on GoogleTranslate see the Wikipedia entry here:
http://en.wikipedia.org/wiki/Google_Translate
How to add or change your Facebook feed
The new WIB lets you add a Facebook feed to your website. We’ve provided this but you need to get the code yourself from Facebook (instructions below). We can’t do it for you because you need to login to your Facebook account and get the code for it! We suggest that you place this only on the front (home) page of your site, and only if you actually use it. If the feed is empty or never updated, it’s a waste of valuable screen real estate.
1. Login to your Facebook account 2. Copy your Facebook URL address
3. Go to https://developers.facebook.com/docs/reference/plugins/like-box/
4. Paste your Facebook URL into the ‘Facebook Page URL’ box 5. Leave everything else as is (default settings)
6. Click on the blue GET CODE button
7. You will get a small popup window: select the URL tab
9. Login to the CMS for WIB 10. Click Structure, then Blocks
11. Select Facebook from the list (if Facebook is not enabled on your site already, it will be under the Disabled Section).
12. Ensure you have selected ‘Right Hand Sidebar’ from the dropdown menu 13. Click Save blocks at bottom of this page
14. Go back to Facebook, and select Configure
15. Paste the code snippet you copied earlier into the Body area 16. Save
17. Tip! If you only want the Facebook feed on your homepage, ensure that you tick Only the listed pages under the Show block on specific pages area, then add <front> in the text area – there’s a note under the area that explains this, too
Menu link title versus Titles
Your page title can be different than what is displayed in the navigation Menu along the top. This is so your Menu item can be as short as possible. In this example, the Menu link item is ‘Advocacy’ but the page title is actually ‘NHS Complaints Advocacy’. In this way, you can display both without adding a long (and not nice looking) item to the main menu but still provide information that makes sense to the user.
