Инструкция по размещению баннеров в слайдере
Баннеры размещаются на главной странице сайта. Это не просто элемент оформления «чтобы было повеселее». Баннер призван обратить внимание посетителя на какой-то контент. Например, ссылка с баннера может вести на анонс конференции или новость о крупном проекте.
Как создать баннер
Чтобы добавить баннер на страницу, выберите в редакторском интерфейсе основной колонки главной страницы виджет «Слайдер» и перетащите его мышкой в рабочую область. Далее нажимаете на кнопку «Добавить запись», в открывшемся окне заполняете необходимые поля.
Заголовок. Несколько слов, кратко и емко описывающих тему. Если заголовок будет слишком длинным, вместе с текстом анонса он может не поместиться на мобильной версии.
Анонс. Более детально раскрывает тему баннера. Задается обычным шрифтом, поэтому его длина может быть больше, чем у заголовка.
Как на мобильной версии скрыть часть анонса
Если вы видите, что на экране мобильного текст анонса не помещается полностью, оберните его в тэг <span class="is-desktop">и этот текст будет скрыт для мобильных</span>.
Если нужно наоборот, отображать какой-то фрагмент текста только на мобильном и скрывать для больших экранов, используйте <span class="is-mobile">…текст…</span>
Как оформить баннер
Существует два варианта оформления баннера: заливка цветом и фоновая картинка.
По умолчанию редактор предлагает стиль Amethyst и другие градиентные фоны. Вы можете выбрать тот, который наиболее подходит под цвет вашего сайта. Старайтесь избегать кричащих цветов.
Если вы хотите использовать в качестве фона картинку, то в поле «Стиль» выбираете «Свой баннер»
Фон сплешки. Это фоновая фотография баннера. Выбирая изображение, ориентируйтесь на фотостиль Вышки. Размер: обычные пропорции горизонтально ориентированного фото 1600 px по ширине. Перед загрузкой картинки необходимо оптимизировать. Подробно о том, почему важно оптимизировать фото, можно прочитать здесь.
На этой странице вы найдете ссылки на бесплатные фотобанки и фотографии нашего университета. Используя их, вы можете быть уверены, что не нарушаете авторские права.
На баннерах нельзя размещать изображения с готовым текстом — с большой вероятностью он будет обрезаться на различных устройствах. Похожая рекомендация относится к композиции: следует следить, чтобы на экране мобильного отображались все значимые части фотографии или иллюстрации.
Если фоновое фото достаточно светлое и текст на нем теряется, его можно затемнить.
Как затемнить фоновое изображение
Можно воспользоваться программой Photoshop или бесплатным онлайн-фотошопом. Открываем изображение в программе, выбираем в верхнем меню — Изображение — Коррекция — Кривые или используем горячие клавиши Ctrl + M. Далее с помощью изменения точек кривой затемняем изображение до нужного уровня.
Стили CSS. В этом поле можно установить позиционирование фонового баннера на странице. Чем меньше значение, тем ниже будет изображение. Значение первого класса (в примере выше это .vp) должно быть уникальным для каждого баннера и написанным на латинице. Так, .vp — cокращение от «Высший пилотаж». Используйте следующий код, заменив первое значение:
background-position: 50% 25%;
}
CSS класс. Чтобы стили работали, скопируйте значение первого класса из Стилей CSS, но без точки (в примере это vp).
Темный текст. Устанавливаете, если фон сплешки светлый.
Как скрыть/удалить баннер
Если вам нужно скрыть баннер, делаете его неактивным, убрав галочку «Слайд активен». Чтобы совсем удалить неактуальный баннер, необходимо нажать на крестик в правом углу и сохранить изменения.