Розміри банерів на Хорошоп залежать від типу банерної лінії: одинарний банер Block має ширину 2880 px і висоту 432, 864 або 1152 px залежно від висоти S, M чи L, а Wide Block має ширину 3840 px. Це розміри для Retina-екранів, і довідка Хорошопу дозволяє завантажувати зображення вдвічі менші по кожній стороні без втрати якості. Вузький банер над шапкою має висоту 30, 40 або 50 px.
Дані старі й зібрані на сайті університету, а не магазину, але висновок з них досі корисний: банер бачать, однак на нього клікають рідко, і майже вся увага дістається першому слайду. Тому розмір це лише половина справи. Друга половина в тому, щоб банер з першого погляду пояснював одну пропозицію.
Які розміри банерів на Хорошоп?
Банерна лінія це блок на сторінці, у якому стоїть банер певного типу. Тип визначає, скільки зображень у рядку і якого вони розміру. Розміри нижче взято з довідки Хорошопу, вони ж показуються у правому верхньому куті поля для завантаження.
| Тип | S (низький) | M (середній) | L (високий) |
|---|---|---|---|
| Block | 2880 × 432 | 2880 × 864 | 2880 × 1152 |
| Wide Block | 3840 × 576 | 3840 × 1152 | 3840 × 1536 |
| 2x (два в рядку) | 1440 × 432 | 1440 × 864 | 1440 × 1296 |
| Wide 2x | 1920 × 576 | 1920 × 1152 | 1920 × 1728 |
| 3x (три в рядку) | 960 × 480 | 960 × 960 | 960 × 1440 |
| Wide 3x | 1280 × 640 | 1280 × 1280 | 1280 × 1600 |
| Block Plus (лише головна) | немає | 1920 × 864 або 960 × 432 | немає |
- Де змінювати. Лінії на головній налаштовуються в Сайт → Дизайн → Редактор дизайну, пункт «Головна сторінка». На сторінках каталогу є дві лінії, «Зверху» і «Знизу».
- Відступи між банерами. Без відступів, S (10 px), M (16 px) або L (22 px). Якщо відступ увімкнено, тримайте важливі елементи щонайменше за 10 або 15 px від краю зображення.
- Слайдер. В одній лінії можна розмістити до 16 банерів. Навігація стрілками і булетами з’являється в Block, Wide Block і великому Block Plus, якщо банерів більше одного.
- Збережіть старі зображення. Довідка радить зберегти поточні банери перед зміною лінії: після застосування змін попередні зображення можуть бути видалені.
Яка висота банера над шапкою?
Наскрізний банер над шапкою видно на всіх сторінках, і за довідкою Хорошопу він має три висоти: S (30 px), M (40 px) або L (50 px). Він може бути текстовим, графічним або комбінованим, текст підтримує HTML і CSS. Над шапкою показується лише один банер, найвищий у списку, а якщо у нього ввімкнено кнопку «Закрити», після закриття відвідувач побачить наступний.
На телефоні цей банер стоїть під шапкою, а фонове зображення на вузьких екранах обрізається з боків. Тому для мобільної версії безпечніше або писати повідомлення текстом, який переноситься на новий рядок, або зробити окремий банер з налаштуванням «лише мобільна версія».
Який розмір банера для мобільної версії?
На головній сторінці мобільної версії за замовчуванням показуються ті самі банери, що й на комп’ютері, але можна завантажити окремі. Хорошоп рекомендує для телефону типи Block, 2x і 3x, а розміри зображень ті самі, що й для ПК. Банери 2x і 3x на телефоні відображаються слайдером. На сторінках каталогу мобільна версія показує банери десктопної.
Звідси практичне правило: банер шириною 2880 px на екрані телефону стискається до ширини екрана телефону, тобто приблизно до 360 або 400 px. Текст, який читається на моніторі, тут стає дрібним. Якщо на банері більше п’яти-шести слів, зробіть окремий мобільний варіант з крупнішим текстом.
Як зробити банер на сайт, який читається?
- Одна пропозиція. Банер відповідає на одне питання: що покупець отримає. «−20% на взуття до неділі» працює краще за список із трьох акцій.
- Текст у безпечній зоні. Важливі слова і кнопку тримайте ближче до центру, бо краї обрізаються на вузьких екранах і перекриваються відступами.
- Контраст. Світлий текст на строкатому фото губиться. Підкладіть під текст однотонну плашку або затемніть фото.
- Вага файлу. Банер на першому екрані часто стає найбільшим елементом сторінки, від якого залежить швидкість завантаження. Google радить, щоб найбільший елемент з’являвся за 2,5 секунди або швидше, тож стискайте зображення перед завантаженням.
- Альтернативний текст і посилання. У новому інтерфейсі для кожної мовної версії задаються альтернативний текст, назва зображення і посилання, куди веде клік.
Як підготувати банер: порядок дій
- Оберіть місце і тип лінії. Головна, верх чи низ каталогу, над шапкою. Від цього залежить розмір.
- Візьміть розмір з таблиці. Розмір показується і в адмінці, у куті поля завантаження. Можна робити макет у повному розмірі, а експортувати вдвічі менший.
- Зробіть мобільний варіант. Перевірте, чи читається текст на ширині телефону. Якщо ні, підготуйте окремий банер для мобільної версії.
- Стисніть файл. Зображення для першого екрана має бути якомога легшим без помітної втрати якості.
- Заповніть атрибути. Альтернативний текст, назву і посилання для кожної мовної версії сайту.
- Подивіться на живому сайті. Відкрийте сторінку на комп’ютері і на телефоні і перевірте, що текст не обрізаний і не налазить на кнопку.
Коли замість банера краще інший формат?
Банерна лінія стоїть на одному місці сторінки, і покупець, який зайшов одразу в картку товару, її не побачить. Для деяких задач є формати, що видно на будь-якій сторінці:
- Коротке повідомлення на весь сайт. Біжучий рядок угорі сторінки з окремими кольорами для комп’ютера і телефону. Відвідувач може закрити його, і рядок не повернеться протягом заданої кількості годин. Що в нього писати, розібрано в статті про біжучий рядок акцій.
- Пропозиція з промокодом і дедлайном. Попап з купоном або таймером, який з’являється у вибраний момент, а не стоїть на одному місці.
- Нагадування про виграний приз. Банер з призом закріплюється внизу екрана і показує код, виграний у колесі фортуни, з кнопкою «Копіювати код».
Банер не має кричати. Він має за секунду пояснити одну пропозицію і не заважати покупцеві дістатися до товару. Чим більше на ньому тексту, тим менше людей його прочитають.Візуальні віджети для Хорошоп
Часті питання
Який розмір банера на головну сторінку Хорошоп?
Залежить від типу лінії. Одинарний Block має 2880 × 432, 2880 × 864 або 2880 × 1152 px для висот S, M і L, а Wide Block 3840 px завширшки. Це розміри для Retina-екранів, тож можна завантажувати зображення вдвічі менші по кожній стороні, наприклад 1440 × 432 для Block M.
Який розмір банера для мобільної версії сайту?
Для головної сторінки мобільної версії Хорошоп рекомендує типи Block, 2x і 3x з тими самими розмірами, що й для ПК. Банери 2x і 3x на телефоні показуються слайдером. Окремі мобільні банери можна завантажити, обравши для них версію сайту «Мобільна».
Яка висота банера над шапкою на Хорошоп?
Три варіанти: S (30 px), M (40 px) або L (50 px). На мобільній версії висота збільшується автоматично, якщо текст не вміщується в один рядок, тому фонове зображення варто завантажувати із запасом по висоті. Показується лише один банер над шапкою, найвищий у списку.
Чому банер обрізається на телефоні?
Широкий банер на вузькому екрані зменшується, а фонове зображення банера над шапкою обрізається з боків. Тримайте текст і кнопку ближче до центру, пишіть повідомлення текстом замість картинки або зробіть окремий банер лише для мобільної версії.