The Coral Bay template provides a modern-looking, user-friendly landing page that can feature multiple images, various card styles and widgets to display content from project pages. This article focuses on managing the Coral Bay landing page, the page that your visitors view before they access 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 Coral Bay and you would like to change your theme then please get in-touch with our support team via mailto:support@engagementhq.com and we will arrange to help you through this process.

If your current theme is Coral Bay, you can edit it by clicking on Site Management > Homepage Manager located on the side navigation bar. 

Like all the themed templates, Coral Bay consists of different boxes which we refer 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 Freestyle Card

This will be the first image and text seen by visitors to your page. So use this space to grab their attention and call them to action. This card will appear at the top of the page with an image on the left and text on the right (as indicated in the preview at the bottom of this article).

The options available for Freestyle 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 maximum width allowed is 350 pixels.
  • 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. 

Custom Cards

Below the Freestyle card are a set of custom cards. These cards can be used to direct a visitor to a hub landing page, a project page, a specific tool within a project or to a custom link. 

The options available for Custom Cards 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 and content, customise title, description, image ALT, Call to Action, and upload image. The different fields in this tab are:
  • Select Project: Depending on your card style, you can link through to a project.
  • Select Content: This option is visible for select survey, news feed, story, forum topic, brainstormer and map card type. 
  • Customize Title: You can customise the title of your card. This is a mandatory field. You can NOT have cards without titles.
  • Customize Description: This description may auto-fill from your project or tool. We recommend you amend it here. If your card or tile is small, there won't be much space for text. Make sure it is precise and entices the reader to click.
  • Upload Image: Upload an image that is displayed. The small cards image is 360 by 360 pixels. Make sure the image you upload does not exceed 0.2MB.
  • 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.
  • Customize Call to Action: This card style has a call to action. Keep it short and make sure the wording you use is actually a call to action.
  • Customisation tab: In the Customisation tab, you can select card type, 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.

  • Select Card Style - Click on the radio buttons to select the card style. This determines the placing of the image and text on the card. An example of the first two card styles on the front end is shown below.
  • Set Configurations: You can set the project card configuration by selecting or unselecting Show Date, Show Tool Type, Show Parent Project and Show Location checkboxes. Please note that the configuration options vary based on the type of card selected in the Select Card Type drop-down menu.

Click the Save button to save the changes.

Lifecycle Widget Card

Following below the custom cards is the Lifecycle Widget Card. This card just displays the Lifecycle widget in a project. Read the article on Outline your project's timeline to understand how to set up a Lifecycle widget in any of your projects. After the widget is set up in your project, select it so that it can be displayed on your homepage. This widget is fixed to be third in line. However, you can hide any widgets located above the Lifecycle widget to make it appear higher. The following figure displays the Lifecycle Widget.

The different fields in this screen 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.
  • Select project: Click on the drop-down menu and select the required project. Please note that only published projects are visible in the drop-down menu.
  • Customise title: Enter a title for your Lifecycle widget. The title is displayed in large letters at the top end of the widget.

After entering details in the fields, click the Save button.  

 

Banner Card 

Another advantage of using Coral Bay theme is the banner. This feature is responsive and looks good on all devices as the banner will automatically adjust to the screen it is displayed on. The following image displays the Banner.

Options available for banner 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.
  • Click to upload: Click this option to upload the banner. Supported formats are *.png and *.jpg. Refer here for the best image size.
  • Enter alt 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".

You can change or hide a banner, but you cannot delete it. Click the Save button to apply the changes.

The Widget Cards

Below the Banner card are widget cards which can be used to display/showcase a widget from a project. Read the article on adding a widget to learn more about a widget, types of widgets and how to add a widget in a project. This widget card allows you to select the type of widget to be displayed on the homepage by using the Select Widget Type drop-down box. In the example below the Videos widget is selected.

The different options on the Widget 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.
  • Select Project: The project from which you want to source the content. If you choose 'All Projects', EHQ takes the latest items from across all your projects (only works with some widgets).
  • Select Widget from Project: Click on the drop-down menu and select the appropriate widget type.
  • Title: Click to enter/edit title of your card. You can also opt not to display the title at all by unselecting the Show Title checkbox. The illustration below indicates how the widget card is displayed at the front end when the Show Title checkbox is selected and unselected.
  • Number of Items: It is the number of lines (items) shown in the widget. The more you choose the longer the widget gets.
  • Layout: Select a suitable layout option by clicking on the radio button. The layout options are different for different widgets.

Click the Save button to save the changes.

Read the article on Outline Key Dates to learn how to add key dates into your project. You can increase the number of key dates to be displayed in the landing page by clicking on the plus (+) button and selecting the Catalog option.  

The below figure illustrates the Key Dates card.

To delete a widget card, click on the Recycle Bin icon located on the top right end of the card, as indicated in the figure below.

 

The different types of widgets will order content automatically by the following logic. This cannot be changed:

  • Key Dates: By date, oldest first. It will work with a rough 2 to 3 ratio. That means if you have 5 dates displayed, it will pick 2 dates that are in the past and 3 that are in the future. If you display 10 dates, it will pick 4 dates from the past and 6 from the future.
  • Related Projects: Picks the projects you have selected in the associated project and orders them by published date, oldest first.
  • Photos: Ordered by date when uploaded, newest first. 
  • Videos: Ordered by date when uploaded, newest first. 
  • Documents, Important links and FAQs: Ordered by date when created, newest first.

If you've selected a particular project in the Select Project drop-down option, the widget will automatically pull information from that particular project page. However, if the selected option is All Projects, the information will be picked from all projects on the site randomly.

You can re-order the widget cards by dragging and dropping them, as illustrated at the end of this article.

Custom or Freestyle Widget Card

The Custom or Freestyle Widget card is similar to the custom widget in your project pages. Use this card for those widgets that you have created on your own and are not available in EHQ. It accepts HTML and other basic formatting. Be careful not to insert any in here without checking with us first. 

The options available in the Custom or Freestyle Widget card are:

  • Title: Enter a suitable title in the box.
  • Description: Enter a description for the widget. You can format the description using the formatting options. 
  • Settings: Select or unselect the Show Title checkbox to show or hide the title. If the checkbox is not checked, the Title box is disabled.

Click the Save button to save the changes. To add more of these freestyle or custom widgets cards, click on the plus (+) sign and select the Custom option, as indicated in the figure below.

The Lifecycle Widget Card

The Lifecycle widget is the same as your Lifecycle widget in any project. You set up the widget in the project and then simply select this widget to be displayed on your homepage. 

To add more of these Lifecycle Widget cards, click on the plus (+) sign and select the Lifecycle option, as indicated in the figure below.

Saving and Previewing

When you make changes, ensure to save them before moving on. All changes are applied immediately after you click the Save button. Ensure that all cards work the way they have to. Ensure that the image quality is good, check text for typos and click on call to action and images to ensure that they navigate to where you want them to.

NOTE: A card cannot be saved as long as it is hidden. Ensure that you show the card by clicking on the Unhide option before you save it. 

Click the Preview button to view how your homepage has changed. The below illustrations indicate how Coral Bay’s landing page appears in the back end and front end.

Drag and drop cards and widgets

In this template, you can rearrange cards and widgets as per your choice by dragging and dropping. Only top cards like freestyle cards will always remain in the same place at the top of the template and cannot be moved.
Any of the cards can be dragged and dropped into another position for a card and any of the widgets can be dragged and dropped into another widget position 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.

 

Did this answer your question?