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.

Homepage Editor

 All changes to Coral Bay are done in the ‘Homepage Editor’, which you can access through the Site link on the top navigation bar of EHQ and then by selecting Theme from the drop-down menu. 

The following Theme page is displayed.

Click on Themes in the Theme page to select the Coral Bay template. 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 support@engagementhq.com and we will arrange to help you through this process.

If your current theme is Coral Bay then you will be allowed to edit the page.

Click on Edit your Homepage to edit the Coral Bay template. 

The Coral Bay template consists of several boxes that we refer to as cards or tiles. Click on any of the cards/tiles on the left and the right hand panel to edit will appear. Below is a description of each of the different types of cards used in this template.

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 on the card icon (see below).


You can use the following options here:

  • Show: Every card in Coral Bay can be hidden. If the Show slider is green (), your card is currently displaying information, and you can move the slider to hide it.
  • Customize Title: Enter a title for your site. This title is displayed in large letters at the top of the page.
  • Customize Description: Enter a description of your page. You must use this space to describe what your site is all about. This box accepts basic HTML. Feel free to play around with it if you feel comfortable.
  • Upload Image: The image or logo is displayed to the left of your description. The maximum width allowed is 350 pixels.
  • Customize Alt Text: The alt text for your image is used for accessibility and search engine optimization. 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 the title and the logo.

Make sure that you click the Save button to apply the changes.

Custom Cards

The next row of cards below the freestyle card at the top 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. 

  • Use External URL: Select this option to provide a link to an external URL or custom link from the card. If this option is selected a content URL field is seen, as in the card above.
  • Content URL: This field is displayed only if the Use External URL checkbox is selected. Here, you can link to an external URL on the web (rather than with EHQ) by specifying the link in the text box.

If you unselect the Use External URL checkbox, the custom card changes to project card as displayed in the figure below.

  • Customize Title: You can customize the title of your card. This is a mandatory field. You cannot have cards without titles.
  • Upload Image: Upload an image to be displayed. The recommended image dimensions is 360 by 360 pixels. Make sure the image you upload does not exceed 0.2MB. You can change the image by clicking on the Change Image option.
  • 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 provide a meaningful alt text. The text should be a short description about what can be seen in your image.
  • Settings: The settings button is used to customize the card type as required. Use the options provided here to determine if the card should link to a project or a tool within the project. Click on the settings option as below.

The following screen is displayed.

  • Select Card Type: This can be used to select a project or a tool within a project. To link directly to a project, select Project from the dropdown menu. The card will now be called a Project card.

 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 is 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. To direct users straight towards a survey for your consultation.

You have to select Survey in the Settings Card Type for getting a survey card.

  • 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 are shown below.
  • Set Configurations: The options seen here will be different based on the card type selected. You can toggle on and off any of the options from being displayed on the front end. 

Make sure that you click the Save button to apply the changes.

An example of a Survey card and a project card on the front end is shown below.

At any time you can re-order the order of the displayed cards by dragging and dropping as illustrated at the bottom of this article.

Life Cycle Widget Card

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

You can use the following options here:

  • Show: If the Show slider is green (), your card is currently displaying information, and you can move the slider to hide it.
  • Select Project: Click on the drop-down menu and select a project.
  • Customize Title: Enter a title for your Life Cycle Widget. The title is displayed in large letters at the top of the widget.

Ensure that you click the Save button to apply the changes.

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.

You can use the following options here:

  • Show: If the Show slider is green (), your card is currently displaying information, and you can move the slider to hide it.
  • Upload Image: Upload an image for the banner. Check out our Best Image Sizes in EHQ guide for information on the best image sizes to use for this template.
  • Customize Alt Text: The alt text for your image is used for accessibility and search engine optimization. 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".

Ensure that you click the Save button to apply the changes.

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, the 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 dropdown box. In the example below the News List widget is selected. 

 You can use the following options here:

  • Show: If the Show slider is green (), your card is currently displaying information, and you can move the slider to hide it.
  • Select Project: Select 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 Type: Click on the drop-down menu and select the appropriate widget type.
  • Customize Title: Click to customize the title of your card. You can also opt not to display the title at all by unselecting the Show Title checkbox.
  • Number of Items: Enter the number of lines (items) shown in the widget. The more you choose the longer the widget gets.
  • Select Layout: Click on a radio button to select the required layout. The layout options will be different for different widgets.

Ensure that you click the Save button to apply 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 highlighted in the picture below.

The following image displays the Key Dates card.

The different type 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 dropdown, 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 as illustrated at the bottom of this article.

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. Click the Preview button to see how your homepage has changed. 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 before you save it.

Drag and drop cards and widgets

In this template you can re-arrange cards and widgets as per your choosing by dragging and dropping. Only the top cards freestyle card 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 it's new place. You will see that the position of the two cards are interchanged. This is illustrated below.


Check out our coral bay demonstration site in action.

What's Next? Customise your site colours as described in the article on Primary and Secondary Colours.

Did this answer your question?