Уроки 1с-Битрикс Как настроить баннер на сайте

Приветствую друзья, сегодня мы с вами разберемся как работать с банерами на сайтах 1с битрикс, на решениях от компании Аспро, в данном примере будет решение «Аспро: Максимум – интернет магазин», и мы с вами разберем как добавить баннер, какой лучший баннер выбрать, какие бывают типы баннеров.

Итак, давайте начнем. Чтобы осуществить работу с баннерами, нам нужно в первую очередь перейти в панель управления сайтом. Переходим в администрирование, открываем вкладку контент.

 Далее у нас есть такая группа, она называется «реклама». Мы разворачиваем эту группу. Здесь у нас есть под папка, называется «баннеры сверху». Открываем ее. В ней еще четыре папочки. Нам нужна «основные баннеры» Переходим в нее. Здесь мы с вами видим три элемента. Вот эти три элемента-это и есть наши баннеры.

Их здесь может быть гораздо больше, в данном случае их три. Наши все три баннера активны. При желании их можно деактивировать. Зачем это нужно? Например, Вы сделали какой-то баннер под какую-нибудь сезонную акцию, сейчас будет 14 февраля, потом 23 февраля и 8 марта. Вы сделали баннер, разместили. Праздник прошел, зашли в админку нажали кнопочку «деактивировать» баннер отключен. На следующий год можете его опять включить.

Далее, переходим с вами непосредственно в «баннер». То есть нажимаем кнопочку, проваливаемся в элемент. В нашем случае, баннер состоит из трех частей. Начну я с небольшой экскурсии в типы баннеров.

Мы можем с вами делать баннер как делались они раньше. То есть одной картинкой. Например, я открою картинку. Вот баннер, одна картинка. То есть сплошная.

Но в современных сайтах, в таких готовых решениях, как АСПРО Максимум или Аспро: корпоративный сайт 3.0, или какие-то другие решения от готовых сайтов АСПРО, вышедшие за последние три года. В них можно использовать баннеры в несколько слоев. Что это значит?

 Например, берем отдельно с вами задний фон какой-то, то есть картинка задним фоном. Вот одна картинка.

И мы берем еще одну картинку, на прозрачном фоне, которая будет спереди. Сайт, эти две картинки совмещает, и мы с вами получаем целостный образ.

Смотрим на сайте и видим такую композицию. То есть, есть задний фон и на переднем плане девушка.

Для чего это нужно? Это нужно для того, чтобы нам, на мобильных устройствах, баннер отображался нормально, и не нужно было делать отдельный баннер для мобильных устройств.

На нашем сайте можно сделать и так, и так. То есть можно поставить дополнительно отдельный баннер для мобильных устройств, а можно его и не ставить, использовать баннер, многослойный. Кроме того, это нам позволяет сделать следующее: мы можем с вами НЕ фотошопить какой либо текст  вот как на ниже представленном баннере. 

То есть здесь текст нарисованный и он в фотошопе был наложен отдельным слоем. И нарисованный текст поменять нельзя. Нужно опять открывать фотошоп, нужно опять открывать исходник, текст пере сохранить и пере заливать. А использование многослойного баннера дает нам возможность, просто изменить какое-либо слово или вообще весь текст поменять целиком. Изменить расположение этого текста, сделать какой-нибудь дополнительный заголовок и поставить динамические кнопки прямо на  сайте без дополнительных телодвижений. 

Как узнать размер необходимых, графических элементов на картинке?

Мы с вами открыли наш банер. Вот у нас здесь есть поле фон, в который мы добавляем фон. Наводим мышкой. Видим здесь указан размер, здесь вот объем в килобайтах и размер 1920 на 634.

В основном для всех решений на АСПРО и в том числе Аспро: Максимум, это стандартный размер по крайней мере для фона.

Что касается активной картинки, то тут рекомендованная высота 480 пикселей, но можно использовать и побольше, 500, и в некоторых случаях 550 А по ширине и допустимый размер, по моему опыту, где-то 650-700 пикселей, но не больше. Если установить больше картинка будет смотреться не очень красиво.

И так, все что нам нужно сделать, это подобрать две картинки, вставить их в отведенные для них блоки (как показано на картинке выше). Это первое действие. 

Написать заголовок, добавить текст, кнопки, выбрать цвет текста, расположение текста, ставим кнопки суда. То есть пишем текст для кнопок. И ставим ссылку, куда будет человек нажав на кнопку попадать.

В нашем случае стоит каталог, одежда, женская одежда. Можем одну кнопку сделать, можем две кнопки сделать. В принципе здесь почти все, единственное, что необходимо сделать, это выбрать тип баннера, если он у вас не будет установлен. То есть это можно сделать это из справочника, нажав вот на эти три точечки, у нас откроется справочник, нам нужно «на главный основной баннер».

У вас на сайте номер этого элемента(ID) может отличаться, но вот эта надпись у вас будет скорее всего такая же «на главной основной баннер».

Для того чтобы демонстрация была полная, давайте я добавлю новый баннер. Тем более картинки у нас для этого уже есть. Нажимаем вот эту синенькую кнопочку. Добавить баннер.

Пишем здесь какой-то текст. «Баннер для демонстрации». Выбираем здесь тип баннера, «на главный основной баннер». Выбрать.

Выбираем активную картинку. Выбираем фон. Переходим к кнопке текст. Текст баннер напишем и добавим какой-нибудь текст. Нажимаем кнопочку... Давайте еще добавим с вами кнопочку «тест». И ссылку поставим «каталог». Нажимаем «сохранить».

Проверяем у нас активность есть, баннер для демонстрации, переходим на сайт и обновляем нашу главную страницу. Ищем наш баннер. Вот он появился наш баннер. Но нету текста, нету кнопки. Сморим сюда, что-то я видимо забыл нажать. У нас с вами здесь стоит расположение текста, стоит только картинка. Поэтому мы с вами ставим текст слева, нажимаем сохранить и обновляем баннер. Как видим у нас появился текст, у нас появилась кнопка и вся наша картинка. Все баннер готов.

Что еще можно здесь посмотреть? Мы с вами так же можем настроить отображение этого баннера на мобильных устройствах. То есть если мы с вами сожмем экран браузера или откроем сайт на смартфоне, то мы увидим, что у нас пропала активная картинка но остался текст, осталась кнопка и задний фон. На остальных баннерах тоже самое. Как это все можно еще настроить?

Для этого мы переходим с вами в админку. Переходим в настройки решения Аспро Максимум, здесь есть кнопочка Аспро, нажимаем её, переходим в настройки и здесь у нас открывается панель с настройками решение.

Здесь есть кнопка мобильная версия. И вот здесь «тип главного баннера в мобильной версии» выбираем. У нас выбрана опция «без активной картинки», давайте поставим с полем снизу заголовком и текстом. Сохранили. Обновили. Посмотрим, что у нас получится.

Видим у нас уже появилась картинка, текст у нас уже не на бэкграунде, вот на этом на картинке, а вот здесь снизу и с кнопками. Так же и здесь, так же и здесь. То есть на мой взгляд это оптимальный вариант.

Если же вы хотите использовать, например, какую-то отдельно нарисованную картинку под мобильный баннер, то выбираем пункт «отдельная картинка». Сохраняем. Обновляем опять наш сайт. Нажимаем браузер и вот здесь наш баннер идет той картинкой отдельно там указано.

Еще что может быть полезно знать.

Например, если у вас тип баннера другой, то есть, другая конфигурация главной страницы а как известно, в данном решении можно по-разному настраивать главную страницу. Для этого вы можете точно посмотреть, какие вам нужны размеры. Размер заднего фона и активной картинки.

Пишем в Яндексе АСПРО Максимум документация, или сразу переходим по данной ссылке. У нас с вами открывается страница с документацией по решению. Переходим в пункт «требования к графическим материалам» и здесь смотрим, что нам нужно. В нашем случае это размеры баннеров: «основной и маленький баннеры». В зависимости от того какой тип баннера у нас выбран. Здесь вы можете посмотреть все необходимые размеры. У меня здесь написан и размер фона, и размер боковой колонки, размер активной картинки. То есть все здесь очень хорошо расписано, ребята из Аспро прекрасно постарались. Для того чтобы и нам интеграторам и вам пользователям облегчить жизнь.

Вот на этом у меня все, благодарю вас за внимание!