Whitehaven is one of our popular templates. It provides an image centered landing page as well as a very modern looking project page. As with other templates, the difference in the project pages are very subtle. This help article focuses on managing the Whitehaven landing page, that means the page your visitor see before they enter a project.
Read our article on Best Image Sizes in EHQ guide for information on the best image sizes to use for this template.
All changes to Whitehaven are done in the 'Homepage Editor', which you can access through the Site tab by clicking Theme.
The Theme page is displayed to enable you to edit your homepage. The Whitehaven themed template consists of different boxes. We refer to them as cards and tiles.
Click on any of the cards/tiles on the left and the right hand panel to edit will appear.
The Top Card
This will be displayed at the very top of your homepage. It has an image to the left and text to the right as shown in the preview below. This card cannot be moved from this position, while the cards below can be re-arranged by dragging and dropping,
You have different options here:
- Hide or Show: Every card in Whitehaven can be hidden. If the text reads 'hide', your card is currently showing, hence you can hide it.
- Title: Give your site a title. The title will be displayed in big letters on top of the page
- Description: Change the description of your page. This space should be used to describe what your site is all about. This accepts basic HTML. Feel free to play around with it if you feel comfortable.
- Upload 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: You can toggle on or off your title and the logo.
Make sure to hit save if you want your changes to be applied.
The Other Cards
The main characteristic of Whitehaven are 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 might be called something else, but, in this case, we are linking through to a project and the card is called Project Card.
- Show: You can hide or show any card.
- Settings: Click on settings to change the card style and make further changes (see below).
- Select Project or Tool: Depending on your card style, you can link through to a project or tool or even use an external link to link anywhere else.
- Customise 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, we need the image to be square. 750 by 750 pixels is ideal. Keep an eye on the overall file size. It must be below 0.5MB.
- Customise Image Alt: The alt text images in your tiles 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.
When you click on Settings you can make further changes.
- Select Card Type: This is where you can determine where this tile links too, a project or a tool within a project.
- Select Card Style: Currently there is only one style available for the big tile. However, more styles will be added in the future.
Set Configurations: The title will always show, but beyond that you can make a few changes. You can show the status of a project (e.g. open or closed), you can include the date of when the project was last published and you can include the lifecycle stage. This feeds through from your project and will only work if you have a lifecycle enabled in the corresponding project.
If you have selected a different type here, e.g. a tool, you will have slightly different options.
The Small Cards
While you only have a few big cards, there are plenty of little cards available. Their management is exactly the same. However, the small cards have more than one design to choose from. Click on the Settings link.
Then select from one of the four display options in Select Card Style.
You can change the card type in the Select Card Type dropbox provided. It can link directly to a project or to a tool within a project as well, like a survey or forum or Idea.
Saving and Previewing
When you make changes, ensure to save them before moving on. Click Preview when you are done to see how your homepage has changed.
A word of caution, all changes will be applied immediately. You should make sure that you check straight away to make sure it all works like you expected. In detail, that means looking at the images to make sure their quality is good, screening the text for typos and clicking the call to action and the image to make sure they go to where you want them to go.
NOTE: A card cannot be saved as long as it is hidden. If you try to save a hidden card, it will NOT save. Show the card before you make a change.
Drag and drop cards
In this template you can re-arrange the big and small cards as per your choosing by dragging and dropping. Only the top most free style card will always remain in the same place at the top of the template and cannot be moved.
Any of the other cards can be dragged and dropped into any place of your choosing. Just click and drag the card you would like to move into it's new place. You will see that the position of the two cards are interchanged. This is illustrated below.
Check out our whitehaven demonstration site in action.
What's Next? Customise your site colours as described in the article on Primary and Secondary Colours.