Уважаемые пользователи, просим вас не печатать статьи и инструкции по использованию сервисов ВГТУ. Материалы постоянно изменяются и дополняются, поэтому бумажные версии очень быстро потеряют свою актуальность.

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

Материал из ВГТУ:wiki
Перейти к навигации Перейти к поиску
Строка 4: Строка 4:
 
Баннер состоит из фоновой картинки и текста, который накладывается сверху.
 
Баннер состоит из фоновой картинки и текста, который накладывается сверху.
  
[[Файл:Slider-example.png|безрамки]]
+
Текст выравнивается по левому краю.
 +
 
 +
[[Файл:Slider-big.jpg|безрамки]]
  
 
== Требования к баннеру ==
 
== Требования к баннеру ==
Строка 25: Строка 27:
  
 
=== Баннер с текстом на картинке===
 
=== Баннер с текстом на картинке===
 
 
На компьютере:
 
На компьютере:
  
 
[[Файл:Slider-bad-1.png|безрамки]]
 
[[Файл:Slider-bad-1.png|безрамки]]
  
На телефоне:
+
На телефоне информация по краям теряется:
  
 
[[Файл:Slider-bad-1-mobile.png|безрамки]]
 
[[Файл:Slider-bad-1-mobile.png|безрамки]]
  
=== Баннер с элементами по краям ===
 
 
[[Файл:Slider-bad-2.png|безрамки]]
 
  
  
 
Короткая ссылка на эту страницу: https://s.cchgeu.ru/wikislider
 
Короткая ссылка на эту страницу: https://s.cchgeu.ru/wikislider

Версия 14:02, 7 ноября 2022

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

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

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

Текст выравнивается по левому краю.

Slider-big.jpg

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

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

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

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

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

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

Примеры баннеров с нарушениями

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

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

На компьютере:

Slider-bad-1.png

На телефоне информация по краям теряется:

Slider-bad-1-mobile.png


Короткая ссылка на эту страницу: https://s.cchgeu.ru/wikislider