EngagementHQ is a responsive platform, so the homepage will fit the screen of whichever device is used. We have the following guidelines for image sizes for each section, but we always recommend previewing your homepage on multiple devices. We recommend using file sizes of 500 KB, with a maximum file size of 1 MB for all images.
You can edit the images in homepage sections in the Edit Image tab. You can:
Crop using the ratios 16:9, 4: 3, 1:1, or Free
Rotate clockwise or anticlockwise
Flip vertically or horizontally
Reset to start again
You can also use the Images by Unsplash tab to search for and select from our built-in stock image gallery. These images are royalty free, and are useful for background or decorative images
For each Appearance Editor section, a dimension (width x height) is given for the available layouts. These layouts are listed in the order they appear when you add a new section.
Set an image focal point where available so that the selected area will be visible regardless of the device.
Banner Section
Banners without content scale to fit the browser width using the image's original height. For layouts 1-5, you can specify the height of the banner, but it must fit the content. Layouts 1-5 fit the background image as fill and will crop wide images. Banner images with text or graphics in them are best used with layout 6
Layout 1: 1440 px x 400 px
Minimum height is 350 px
Layout 2: 1440 px x 400 px
Minimum height is 350 px
Layout 3: 1440 px x 400 px
Minimum height is 350 px
Layout 4: minimum 716 px x 500 px
Layout 5: minimum 716 px x 500 px
Layout 6: 1440 px x 400 px
Minimum height is 350 px
Projects Section
The Projects section has many layouts and the ratio of the image shown may be dependent on the card content. Due to responsive design, project images can get cropped and display differently on smaller devices. Use decorative images and avoid images with text.
Layout 1: 200 px x 235 px
Layout 2: 488 px x 192 px
Layout 3: 200 px x 235 px
Layout 4: 488 px x 262 px
Layout 5: 488 px x 262 px
Layout 6: 488 px x 262 px
Layout 7: 488 px x 188 px
Layout 8:
Large tile: 698 px x 820 px
Small tile: 385 px x 328 px
Layout 9:
Large tile: 698 px x 820 px
Small tile: 385 px x 328 px
Layout 10: 310 px 195 px
Layout 11: 310 px 195 px
Featured Section
The Featured section has three layouts:
Layout 1: 1024 px x 235 px
Layout 2: 1024 px x 235 px
Layout 3: 620 px x 440 px
Project Showcase Section
These images are sourced from the project page; if there is no image, the card will show your brand color. Due to responsive design, project images can get cropped and may display differently on smaller devices. The ratio of the image shown may be dependent on the card content.
Layout 1: 200 px x 235 px
Layout 2: 488 px x 192 px
Slider Section
Slider images should be decorative and avoid having text; add text in the title and description fields.
Layout 1: 820 px x 392 px
Layout 2: 495 px x 392 px
Layout 3: 495 px x 392 px
Register Banner Section
The Register Banner section has three layouts, and the dimensions may vary depending on the content you add.
A general guideline is 1440 px x 400px.
Who's Listening Section
The Who's Listening section has four layouts. Because these images generally depict people, it's best to select a 200 px x 200 px square image that focuses on the face.
Section Icons
These icons are used in the Documents, Key Dates, Lifecycle, FAQ, and Important Links sections. We have a range of pre-loaded icons (depicted below) but if you upload your own, we recommend using an image of 48 px x 48 px.
Logos, Icons, and Images
The Logos, Icons & Images component of the Appearance Editor contains:
Logo: 150 px x 50 px
Favicon: 15 px x 15 px
Background Image: Appears in a tile pattern outside of content areas on all pages, except for the homepage. Dimensions depend on the image selected
Project Banner Override: 1440 px x 300 px