The Farida theme boasts a simple and elegant design style, a comfortable and versatile page layout, and supports a variety of configurable cards, which can effectively showcase your brand characteristics. This article will guide you through the recommended sizes for each card in the Farida theme to ensure your images look their best.
Understanding image sizes
The dimensions provided in this guide are suggestions, as monitor resolutions vary. Previewing images on different screens is recommended.
When preparing images for mobile, ensure they appear clear and sharp. If a recommended size seems too small, enlarge the image proportionally to maintain quality. For example, if 358 x 358 pixels is recommended, an image of 716 x 716 pixels can be used while preserving clarity.
Recommended sizes for each card type
To ensure your website looks its best, we'll guide you through the ideal image sizes for each section type in the Farida theme. Using the correct dimensions makes your site visually appealing and improves the user experience. The table below provides the recommended sizes for various sections, helping you optimize your content for maximum impact.
| Card / Section | Aspect ratio (Desktop) | Aspect ratio (Mobile) | Optimal size (Desktop) | Optimal size (Mobile) |
| Collection list | 3.6:1 | 2:1 | 1440x400 | 390x195 |
| Slider | 2.4:1 | 0.8:1 | 1440x600 | 390x488 |
| Featured collection | 1:1 | 1:1 | 620x620 | 358x358 |
| Featured collection 2 | 1:1.3 | 0.8:1 | 550x715 | 390x488 |
| Featured collection 4 | 1:1 | 1:1 | 620x620 | 358x358 |
| Accessories list | 1:1 | 1:1 | 280x280 | 171x171 |
| Image with text | 1:1 | 1:1 | 620x620 | 358x358 |
| Image with text 2 | 1:1 | 1:1 |
Image 1 - 460x460 Image 2 - 280x280 |
Image 1 - 250x250 Image 2 - 148x148 |
| Gallery | 1:1 | 1:1 | 400x400 | 171x171 |
| Large image with text box | 3.6:1 | 0.8:1 | 1440x400 | 390x488 |
| Overlay text columns | 1.6:1 | 1.5:1 | 800x500 | 358x238 |
| Recommended images and text |
Image 1 - 3.2:2 Image 2 - 1:1.3 |
Image 1 - 1.5:1 Image 2 - 1:1.2 |
Image 1 - 672x420 Image 2 - 500x650 |
Image 1 - 390x260 Image 2 - 390x468 |
| Text columns with images | 1:1 | 1:1 | 400x400 | 358x358 |
| Banner grid | 1:1.1 | 1:1 | 608x668 | 358x358 |
| Three banner grid | Each image - 1:1 | Each image - 1:1 | Each image - 620x620 | Each image - 358x358 |
| Text with icons | 1:1 | 1:1 | 36x36 | 36x36 |
| Slider | 2.4:1 | 0.8:1 | 1440x600 | 390x488 |
| Split slideshow | 4:3 | 1:1.2 | 782x586 | 390x468 |
| Multiple columns | 1:1 | 1:1 | 397x397 | 358x358 |
| Timeline | 1.5:1 | 1:1 | 600x400 | 358x358 |
| Scrolling text | 2:1 | 2.4:1 | 160x80 | 144x60 |
| 1:1 | 1:1 | 206x206 | 332x332 | |
| Logo | Unlimited | Unlimited |
These guidelines help ensure optimal image display across various devices, enhancing your website's visual appeal and user experience.
Comments
Please sign in to leave a comment.