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.
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 the layout which has the image at the top and the content below it.
Project Image sizes
The projects sections has a lot of layout for you to choose from. The below options show the exact dimensions for the images as per the layouts shown in the screenshots.
Note : 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 to avoid having any text or info on the image and only use decorative images in this section.
This is for the layouts 1 & 3 of the projects section.
200px width & 235px height is the recommended dimension.
This is for layout 2.
488px width & 192px height is the recommended dimension.
This is for layouts 4,5, & 6.
488px width & 262px height is the recommended dimension.
This is for layout 7 of the projects section.
488px width & 188px height is the recommended dimension.
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.
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
235px width & 1024px 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.
This is meant for layout 1 of the slider.
820px width & 392px height is the recommended dimension.
This is for the layouts 2 & 3.
495px width & 392px height is the recommended dimension.
The recommended size for the site logo is 150px width and 50px height.