Applying design elements in EngagementHQ

There are many ways to create an impressionable design using EngagementHQ. This article highlights the places where you will need to apply your branding and design elements.

If you are building a new EngagementHQ site from scratch, you might be interested in working through our Getting Started Collection for advice on planning and mapping your site, as this can influence some of your design decisions.

Your homepage is the key page for driving participation with your projects and is the place where you create your first impressions. Analysis of online user behaviour shows us that the homepage is the single biggest determining factor influencing participation in projects.

On your homepage, make sure you have a collection of projects with relevant project images, an appropriate color palette as well as clear and optimized banner images.

To preview the available homepage templates, click on Appearance > Homepage Manager > Templates. In the image below, the selected theme is Bondi. In the image below, the selected theme is Bondi.

Select the template that will allow you to best achieve your project goals based on the design elements incorporated in each template. To understand these better, check out our Understanding EngagementHQ Templates resource to help you make your decision.

Project images should be applied to every new project. These images are used by EngagementHQ as featured images that appear on the homepage of your site. 

This is one of your main places to apply your project branding.

When you link a project to your homepage using the Appearance editor, the homepage will automatically look for the project image associated with that project.

You should decide whether you want these project images to be of people and places, graphics or text and iconography. These images should always be squares of 750px x 750px.

To make sure that you have attached project images to each project, simply select your project from the Projects list and click on it.

On the project page, click on the settings button.

The following Settings page is displayed. Click on the Image tab, upload the necessary image for your project page and click the Save button. You can enter a caption and description for your image and select a layout.

Banner images are a great way to influence the design of your site. When using banner images on your homepage, you will need to decide on banner size. This banner will need to be 1440px wide and can be any height you choose. 

We recommend making banners on your homepage at least 300px in height to create a good impact on your projects and other information. Read about best image sizes in EngagementHQ here.

Banner images are applied in several different places.

When a banner is added in the section 'Project Banner Override' (under Appearance > Logo, Icons and Images) and if the toggle 'Show site banner on project pages' is enabled, it will replace all the banners on project pages. This can be controlled by turning the toggle off.

Simply visit Appearance > Homepage Editor > Sections > Banner and click on the banner field shown on the homepage wireframe.

If you wish to hide the Banner title and description, enable the toggle 'Display full banner image'. By turning this on, only the image will be visible.

Note: Fixing a focal point on the image will help retain the image in any window.

Hub page banners are available via the Hub Page editor in EngagementHQ. Only some sites have access to this functionality.

Below is an example of a Hub Page displaying a banner image. If you wish to hide the Banner title and description, enable the toggle 'Display full banner image'. By turning this on, only the image will be visible.

Hub page banners should speak directly to the theme or collection of projects that make up the hub.

There are two places to apply color and font elements. For Site level settings, click on Appearance > Global Styles. From here you can apply your brand colors and adjust your title and content fonts for your site.

For settings at the project level, click on Appearance > Project Styles > Color.

In order to access site-level image settings such as Logos and Icons, click on Appearance > Logo, Icons & Images.

For more information on colors used on project pages, check out our Understanding Colors article here.

By using these simple branding devices, you should be able to put together a site that reflects your community as well as your branding guidelines.

Why not check out our Design Tips for EngagementHQ article.