Note - This is an EHQ Enterprise Edition feature.
The Hub landing page is used to collect, organise and promote the various projects that are assigned to your Hub.

Since this is essentially a showcase page for the collection of your projects, it's important to introduce and explain what makes your Hub unique and introduce branding elements that give a personality to your Hub.

There is only one Hub landing page layout, which we call Tarrabool and it works best with the Bondi or Whitehaven templates of your site. Use the detailed steps below to learn how to populate this template for your Hub homepage.

1. Click the Site Management icon on the left navigational bar and select the Hubpage Manager.
Note - You will see this menu item only if you are the site administrator and have our EHQ Enterprise Edition. If you would like to make an inquiry about access please get in-touch with support@engagementhq.com.

2. The Hubpages screen is displayed. Here you can view and edit the existing hubs. Click on the Pen icon to edit the required Hub or click directly on the title of the hub.

3. The selected hub page is displayed for editing.  This is where you can customise your hub landing page.

3. Use this wireframe of the Hub landing page to edit the content of the page. Each content section is referred to as a content card and can be edited by clicking on the card itself, this is described for each card below. Click on Preview, at the top left corner, at any time to see what your changes look like in the front end.
4. Click on the first tile. This can be used to display a Banner for your Hub homepage. 

You can use the following options here:

  • Hide: Every card can be hidden. If the Hide slider is blue, your card is currently displaying information, you have to move the slider to hide it, if not required.
  • Upload Image: Upload an image for the banner. Read the article on Best Image Sizes in EHQ to understand what size images to upload.
  • 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's 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".
  • Save: Ensure that you click the Save button to apply any of the changes.

6. Click on the second tile to add the details of your Hub. This is known as the Freestyle Card.

You can use the following options here:

  • Hide: If this slider is blue, your card is currently displaying information, and you can move the slider to hide it.
  • Title: Enter a title for your hub. This title is displayed in large letters at the top of the page.
  • Description: Enter a description of your page. You must use this space to describe what your Hub landing page is all about. This box accepts basic HTML and basic formatting options if you need to utilize text styling or embed content. 
  • Upload Image: The image or logo is displayed to the left of your description. The maximum width allowed is 350 pixels. You can choose not to display this if you have chosen to display a banner.
  • Alternative 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.
  • Save: Ensure that you click the Save button to apply any of the changes.

7.  Click the third tile to edit the Lifecycle tile. This option will pull through a timeline from a Life Cycle Widget on one of your project pages. Because this lifecycle is a Hub landing page featured timeline, we most often see this utilized when the Hub is dedicated to a single project and all of the associated projects on the Hub are interrelated. Read our help article Outline your project's timeline to understand how to setup a Lifecycle widget. Once a Lifecycle Widget is setup on one of your projects, then simply select assign that widget to be displayed on your Hub landing page using this section.

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.

You can use the following options here:

  • Hide: If this slider is blue, 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 the project where you would like to pull the widget information from.
  • Customize Title: Enter a title for your Life Cycle Widget. The title is displayed in large letters at the top of the widget.
  • Save: Ensure that you click the Save button to apply any of the changes.

8. The next set of tiles are the Card Lists and are used to display and arrange your projects. These can be organised by two in a row, three in a row or four in a row. You can choose to display any or all the cards at a time depending on the projects you would like to showcase.

Note: You will need to first assign a project to the desired HUB to ensure it shows up on your card list, either during project creation or while editing the project's settings. 

Card List

This is feature allows you to display your projects in a matrix structure. You can determine the number of rows and columns on this card list.  
Tip: Choose just 2 in a row to highlight projects by giving them more space on the homepage. Choose 3 or 4 in a row to display other projects that are in progress.

The options available for Card List 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 assign a collection title, select cards and project status, order cards and set a card layout. The different fields in this tab are:
  • Collection Title: Enter a suitable title for your card list.
  • Select Cards: Two options are available in the drop-down menu: Autofill using tags and Manually select projects. If you select Autofill using tags, the below options will be displayed.
  • Select project tags – click on the drop-down menu and select an appropriate project tag.
  • Select project status – you can select all published, archived or all the projects.
  • Order cards by – you can order the cards by the published date or Title (A-Z). By default, it will be ordered by the published date for the project, you can change it to be alphabetically ordered as well.
  • Card Layout – Here you choose the number of rows and columns for your card list if you choose Autofill using tags option or just the number of columns if you choose the Manually select projects option.

If you select Manually select projects as the option for Select Cards, then the below options are displayed, where you can choose each of the projects to be displayed.

Click the Add New Card button to add and customise a project for display on the homepage. The following Card Settings options are displayed. 

You can add a new card by clicking on the Add New Card button. In the Card Settings page, you can select the card type and the project, customise title, enter description, upload image and customise image alt. Once done, click Save. You have to repeat this process of adding a card for all the projects that you would like to add to your homepage.

To delete a card, click on the Recycle Bin icon located at the top-right corner. You will see the icon when you move the mouse over the card.

  • Customisation tab: In the Customisation tab, you can add CTA (Call to Action) details. This is to prompt the visitor to take action on the site. You can toggle on and off published date, lifecycle and project status. You can also customise CTA title, collection and URL. 

Click the Save button to save the changes.

The Widget Cards

The widget cards appear after the card list. These appear at the bottom of the page and there are different widgets to choose from. To learn more about widgets, read our help article on adding widgets to your project.

Widgets can be used to display content from any project page on your landing page. This can be done in an aggregated manner, or for a specific project.

The different options of the Widget Card are:

  • 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: Choose any of the widgets available, if Project is selected, you will only see the widgets from that project, so choose All Projects, to view all the available widgets.
  • Title: Enter a title for the widget card.
  • Show Title checkbox: Choose to show or hide the title of the widget.
  • Number of Items: It is the number of lines (items) shown in the widget. The more you choose the longer the widget gets.
  • Layout: Choose between the different layout options displayed.
  • Settings: Contains Show Date, Show Parent Project and Show Author options. You can select any 2 of these.   

Click the Save button to save the changes.

The contents of the different types of widgets will order 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.

TIP -  Since this is your landing page and the first page your visitors will see, you should maintain this page by updating it regularly when new projects are launched and making sure that all links work at all times.

Did this answer your question?