The Appearance Editor has a lot of sections with multiple layouts for each section. This means the images will have to be of the correct dimensions or they will appear cropped or blurry. In this article, we have mentioned the exact dimensions for all the templates on the different sections of the appearance editor.
Banner Images
When banner images do not have any content like overlays, titles, and call-to-action buttons, they will scale to fit the width of the browser window automatically. It will take the original height of the image.
When the banner has content, the height of the banner can be adjusted. Make sure the banner has enough height to accommodate the content in the overlay. It is best to keep the content to the minimum to ensure users can scroll through the content fast. Also, it will render well on desktop as well as mobiles the same.
If the banner has graphics or text on it along with the title and description, it is best to use layout 6 which has the image at the top and the content below it.
Note: The design of the banner layouts 1 to 5 is set to fit the background image as fill. Hence, wider resolution images will get cropped on all devices.
If you would like banner images to display as a whole, we recommend you use Layout 6.
Project Image sizes
The projects sections have a lot of layouts for you to choose from. The below options show the exact dimensions for the images as per the layouts shown in the screenshots.
Note: 1. The ratio of the images on project cards display differently based on the screen type. For example: Since the display in the mobile view is smaller than the desktop, the project image might be cropped. In such cases, we recommend you avoid having any text or info on the image and only use decorative images in this section.
2. The suggested size is a recommendation only but will not always be an exact fit dependent on project & widget titles, content and buttons size.
Option 1
This is for layouts 1 & 3 of the projects section.
200px width & 235px height is the recommended dimension.
Option 2
This is for layout 2.
488px width & 192px height is the recommended dimension.
Option 3
This is for layouts 4,5, & 6.
488px width & 262px height is the recommended dimension.
Option 4
This is for layout 7 of the projects section.
488px width & 188px height is the recommended dimension.
Option 5
This option is for both layouts 8 & 9.
Large tile: 698px width & 820px height and for the smaller tiles, 385px width & 328px height are the recommended dimensions.
Note : We no longer support a transparent section at the bottom of the bigger project cards'
Option 6
This is for the final 2 layouts, that is 10 & 11.
310px width & 195px height is the recommended dimension.
Featured Image Sizes
The Featured section of the appearance editor only has a few layouts to choose from.
Option 1 is for layouts 1 & 2
1024px width & 235px height is the recommended dimension.
Option 2 is for layout 3.
620px width & 440px height is the recommended dimension.
Slider Image sizes
Similar to the Featured section, the Slider section also has a few layouts to choose from.
Option 1
This is meant for layout 1 of the slider.
820px width & 392px height is the recommended dimension.
Option 2
This is for layouts 2 & 3.
495px width & 392px height is the recommended dimension.
Note: The Slider and Banner images have different feature settings. Banners have the option to 'display full banner' whereas sliders do not.
Hence we recommend using a slider with the key information in the slider title and description, the image should be generic and decorative, not with text or important messages.
Site Logo
The recommended size for the site logo is 150px width and 50px height.
Contact our support team if you need any further assistance via chat or email support@engagementhq.com