Whitehaven is one of our popular templates. It provides an image-centred landing page as well as a very modern looking project page. As with other templates, the difference in the project pages is very subtle. This help article focuses on managing the Whitehaven landing page. It is the page your visitor sees before accessing a project.
Read our article on Best Image Sizes in EHQ guide for information on the best image sizes to use for this template.
NOTE: If your current theme is NOT Whitehaven and you would like to change it, then please get in-touch with our support team via firstname.lastname@example.org and we will arrange to help you through this process.
If your current theme is Whitehaven, you can edit it by clicking on Site Management > Homepage Manager located on the side navigation bar.
Whitehaven-themed template consists of different boxes referred to as cards or tiles. Click on any of the cards/tiles to edit them. Below is a description of each of the different types of cards used in this template.
The Top Card
The Top Card is displayed at the top of the homepage. It is a freestyle card. It cannot be moved from this position, while the cards below can be re-arranged by dragging and dropping.
The options available for the Top Card are:
- Hide: Every card in this template can be hidden. If the slider is blue then your card is currently showing, if grey then it is hidden.
- Title: Give your site a title. The title is displayed in large letters at the top end of your page.
- Description: Enter description of your page. This space should be used to describe what your site is all about. This box accepts basic HTML. You can format the entered description using the provided formatting options. Feel free to play around with it.
- Upload an Image: The image or logo will be displayed to the left of your description. The image can NOT be wider than 1140 pixels. When you upload an image, make sure to keep the file size below 0.2MB.
- Alternative Text: The alt text for your image is used for accessibility and search engine optimisation. You can leave this as it is, however, it is better to give a meaningful alt text. The text should describe in a few words what can be seen in your image, e.g. "company logo".
- Settings: Under Settings, you have the following checkboxes:
- Show Title: You can toggle on and off the title by selecting or unselecting the checkbox. Unselecting this checkbox, disables the Title box and you cannot edit it.
- Show Logo: You can toggle on and off the logo by selecting or unselecting the checkbox. Unselecting this checkbox, disables the Alternative Text box and you are not allowed to edit it.
Click the Save button to save the changes.
The Other Cards
The main characteristic of Whitehaven is its images. Each image is controlled through a card/tile. The bigger tiles have larger images compared to the smaller tiles. You can have as many or as few tiles as you want. You can interchange the position of the cards by dragging and dropping them, this is illustrated at the bottom of this article. However, the arrangement of the big and small tiles of the template layout will always be the same.
The Big Cards
Depending on your settings, this card will have different names like Project, Survey, News Feed, Story, Forum Topic and Brainstormer, but, in this case, we are linking through to a project and the card is called Project Card.
The options available for Project Card are:
- Hide: You can hide or show any card. If the slider is blue then your card is currently showing, if grey then it is hidden.
- Details tab: In the Details tab, you can select project, customise title, upload image and customise image ALT. The different fields in this tab are:
- Select Project: Depending on your card style, you can link through to a project or tool or even use an external link to link anywhere else.
- Customize Title: You can customise the title of your card. This is a mandatory field. You can NOT have cards without titles.
- Upload Image: Upload an image that is displayed. Since this is a big tile, the image must be square and 750 by 750 pixels is ideal. The overall file size must be below 0.5MB.
- Customize Image ALT: The alt text images in your tiles are very important for accessibility reasons. You can leave this as it is, however, it is better to give a meaningful alt text. The text should describe in a few words what can be seen in your image.
- Customisation tab: In the Customisation tab, you can select card type and card style, and set configurations.
The different fields in this tab are:
- Select Card Type: Depending on your card style, you can link to a project or tool or even use an external link to direct to some other page or website. Options available are project, survey, news feed, story, forum topic, brainstormer, map, custom and hub. If you wish to link directly to a tool with the project, for example, if the brainstormer/ideas tool is selected the card is called a Brainstormer Card. An example of what the Brainstormer Card looks like is given below. Having this card directly in the homepage will take the visitor directly to the Ideas tool where they can contribute towards the consultation. Similarly, a Survey Card is below. This card is to direct users straight towards a survey for your consultation.
Click the Save button to save the changes.
The Small Cards
While you only have a few big cards, there are several small cards available. Their management is exactly the same. However, the small cards have more than one design to choose from.
The Details tab for the small cards is displayed below. You can change the project, customise title, upload image and customise image ALT in this tab.
The Customisation tab for small cards is displayed below. Here, you can select card type and card style, and configure settings.
After entering details in the fields, click the Save button. You can add more Big and Small cards by clicking on the plus (+) sign, as indicated in the figure below.
Saving and Previewing
When you make changes, ensure to save them before moving to the next step. Click the Preview button to view how your homepage has changed. The below illustrations indicate how Whitehaven’s landing page appears in the back end and front end.
Drag and drop cards and widgets
In this template you can rearrange cards as per your choice by dragging and dropping.
The big cards can be dragged and dropped into another position of a big card and any of the small cards can be dragged and dropped into another position of a small card. Just click and drag the card you would like to move into its new place. You will see that the position of the two cards is interchanged. This is illustrated below.