Требования к баннеру для слайдера: различия между версиями

Следующая правка →

ВизуальныйВики-текст

Версия от 08:18, 23 марта 2022

На главной странице cchgeu.ru есть слайдер с баннерами, у него есть некоторые особенности.

Устройство баннера

Баннер состоит из фоновой картинки и текста, который накладывается сверху.

Чтобы ваш баннер смотрелся аккуратно и информация не терялась, просьба учитывать требования к макету.

Требования к баннеру (фоновой картинке)

Формат файла: JPG;
Размер: 1920х420 пикселей;
Не должно быть текста, иначе он будет обрезаться на мобильных устройствах;
Нежелательно размещать значимые элементы, особенно слева и справа по краям;
Рекомендуется использовать цвета брендбука.

Требования к тексту

Текст не должен быть слишком длинным.

Примеры баннеров

Можно открыть https://cchgeu.ru и посмотреть, как выглядят баннеры на компьютере и телефоне.

Баннера с текстом на картинке:

Так баннера с текстом на картинке выглядит на телефоне:

Пример баннера с элементами по краям:

@@ Строка 1: / Строка 1: @@
 На главной странице cchgeu.ru есть слайдер с баннерами, у него есть некоторые особенности.
+==== Устройство баннера ====
+Баннер состоит из фоновой картинки и текста, который накладывается сверху.
+[[Файл:Slider-example.png|безрамки]]
 Чтобы ваш баннер смотрелся аккуратно и информация не терялась, просьба учитывать требования к макету.
-Баннер состоит из фоновой картинки и текста, который накладывается сверху.
 ==== Требования к баннеру (фоновой картинке) ====
@@ Строка 9: / Строка 12: @@
 # Формат файла: JPG;
 # Размер: 1920х420 пикселей;
-# На картинке не должно быть текста, иначе он будет обрезаться на мобильных устройствах;
+# Не должно быть текста, иначе он будет обрезаться на мобильных устройствах;
-# На картинке нежелательно размещать значимые элементы, особенно слева и справа по краям;
+# Нежелательно размещать значимые элементы, особенно слева и справа по краям;
 # Рекомендуется использовать цвета брендбука.
@@ Строка 17: / Строка 20: @@
 ===== Примеры баннеров =====
-Можно открыть https://cchgeu.ru и посмотреть на примеры баннеров на компьютере и телефоне.
+Можно открыть https://cchgeu.ru и посмотреть, как выглядят баннеры на компьютере и телефоне.
+Баннера с текстом на картинке:
+[[Файл:Slider-bad-1.png|безрамки]]
+Так баннера с текстом на картинке выглядит на телефоне:
+[[Файл:Slider-bad-1-mobile.png|безрамки]]
+Пример баннера с элементами по краям:
+[[Файл:Slider-bad-2.png|безрамки]]