TEMPLATE
Hero Banner: Technical image sizes
Desktop for Hero Banner: Desktop png format, size: 1600 x 1200 pixel, resolution 72 pixel, 626 KB. In general, the images should be up to 650 KB, this applies to hero banners, otherwise the size should be between 100-500 KB. Please resize the images with TinyPNG, if the image is too heavy.
Link: https://tinypng.com
Mobile for Hero Banner: 1200 x 1600 pixel, resolution 72 pixel
Main size for mobile 900 x 1200
Our system compresses the images automatically. This means that the image quality is improved and adjusted again after the images have been uploaded into media library.
Example below
Parallax image
Technical image sizes
SCC Class "parallax", you will find the code in "Advanced" properties in backend.
Image size: 1400 x 1050 pixel, resolution 72 pixel, 626 KB
VIDEO Tempale
Technical image sizes
We place the links as code in the "Load from URL" section in builder.io frontend. The example is shown in the following illustration.
Link example:
https://player.vimeo.com/progressive_redirect/playback/968600018/rendition/1080p/file.mp4?loc=external&log_user=0&signature=09b4fce66b34b53c1dd7fef475fbd9fb7d72208b694306a777673a7b7eb1bcc4
Thundnail image size: 1671 x 940 pixel, 72 pixel, 361 KB
THE CRAFTSMANHIP AND EXPERTISE BEHIND THE MONOLITH
Craftsmanship was at the centre of the creation of the Monolith.
Product card Tempale
Technical image sizes
1400 x 1050 pixel, resolution 72 pixel, maximum hight 832 pixel, aspect ratio 1,4
The product slider looks different in the brand landing because the width of the brand landing page is 1600 pixels.
Brands Landing Example
Image cards Template
Technical image sizes
Image size: 1600 x 1089 pixel, resolution 72 pixel
An overview of the product images, e.g. 1-4 images in a "card" container. We often use it in PDP or landing pages, as example please have a look on Monolith Humidor page.
Blog Post Template
Technical image sizes
Image size: 1437 x 958 pixel, resolution 72 pixel
Picture carousel Template
Technical image sizes
Image size: 1200 x 900 pixel, resolution 72 pixel
Here I have created a copy that you can change yourself, you can create copies of the symbols and customise them yourself. Here below is a copy, this can be changed. in general we are not allowed to change smbols, because this change then takes place on the whole website, so it is recommended to create a copy first and then change it.
The sections look different, within Brand's landing page the section looks narrower as the width is limited to 1600 pixels. Outside of brands landing like this carousel the page looks wider as it takes on the width of the screen and adapts responsively to the page.