7. How to Manage Banners

The Banners section lets you upload, localize, and control the display of your website’s header graphics across multiple screen resolutions and languages.

The Banners section is designed to store banners for your websites. In this section, you can:

1. Add banners for different language versions of the website.
2. Add banners with different resolutions.
3. Add descriptions to the banners.
4. Activate and deactivate banners.
5. Delete banners.

To add a new banner:

1. At the top of the page, click the language tab (English, Bulgarian, Spanish, etc.) to switch to the version of your site you’re editing (e.g., “English” is highlighted when active).
2. Drag the image or click to view the images on your computer in the block with the appropriate resolution. The available resolutions are:
   1444 to 1920 px
   1024 to 1444 px
   640 to 1024 px
   375 to 640 px
3. Upload images for all resolutions.

If you need alt-text or contextual notes:

1. Click the + Add description button in the top-right corner.
2. A description field appears under each banner slot—enter your text (e.g., “Homepage hero for summer campaign”).
3. Descriptions are per‐language, so switch tabs to localize.
4. Activate the entire set by checking the Active toggle in the upper-left.
5. Deactivate by unchecking it—this hides all banners for that language until you’re ready to go live.

Note: Banners can only be activated once they are set for all resolutions.

To update one resolution:

1. Hover over the banner slot and click Delete (🗑️) in its top-right.

2. Upload a new image into the now-empty drop zone.

You can delete any single slot independently without touching the others.

Best Practices & Tips

1. Consistent Styling: Use a single design template cropped to each resolution, rather than entirely different visuals—this preserves brand style across devices.

2. Optimize File Size: Compress images to balance quality and load speed (aim for ≤ 150 KB per banner).

3. Test Viewports: After uploading, preview in different browser widths to confirm the correct banner is served.

4. Language Checks: Always switch tabs and proof your descriptions and any embedded text on the banners themselves.

5. Version Control: When replacing assets, keep old files archived locally in case you need to roll back.

By following these steps, you’ll maintain a responsive, localized banner library that adapts beautifully across devices and languages.