Телефон отдела продаж
Email отдела продаж
Email тех. поддержки
Не нашли ответ на свой вопрос
Просмотров: 16274

Блок с баннерами на главной странице (Коллаж)

Баннерный блок на главной странице
Блок с баннерами на главной странице (Коллаж)

Коллажи на главной странице берутся из инфоблока. В административной панели сайта он находятся по пути:
Администрирование – Контент – Информация - Блок с баннерами на главной

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

Располагаются они на сайте по порядку сортировки (по возрастанию)

Способы замены логотипа

Детальная картинка – это сам баннер
В детальное описание сам текст

На сайте это выглядит так:

Способы замены логотипа

Размеры картинок

1 ) 358 ширина, 478 высота.

2 ) 357 ширина, 228 высота.

3 ) 357 ширина, 228 высота.

4 ) 263 ширина, 478 высота.

5 ) 444 ширина, 228 высота.

6 ) 444 ширина, 228 высота.

Учитывайте, что область картинки на которой располагается текст, не должна содержать сложный фон и должна быть контрастна цвету текста, чтобы сохранить читабельность текста и кнопки.

Размещение текста на баннере

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

Текст черного цвета

<div class="text-wrap">
     <a href="#" class="name">Заголовок</a>
     <div class="descr">Описание</div>
     <a href="#" class="btn-simple btn-micro">Текст кнопки</a>
</div>
	

Текст Белого цвета

Нужно добавить класс блоку с текстом text-wrap-white
<div class="text-wrap text-wrap-white">
     <a href="#" class="name">Заголовок</a>
     <div class="descr">Описание</div>
     <a href="#" class="btn-simple btn-micro">Текст кнопки</a>
</div>
	

Кнопка по умолчанию в цвете выбранной вами цветовой схемы, можно сделать черной добавив класс btn-black

<a href="#" class="btn-simple btn-black btn-micro">текст кнопки</a>
	

Важно знать:

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

Если Вы напишите слишком длинное название на кнопке, то она станет некрасивой и растянутой.

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

Если вы обновились, то вам нужно разместить сам компонент, на главной странице. Для этого нужно использовать компонент bitrix:news.list с шаблоном indexBanners
Ниже пример вызова компонента

<?$APPLICATION->IncludeComponent("bitrix:news.list", "indexBanners", array(
   "ACTIVE_DATE_FORMAT" => "d.m.Y",
      "ADD_SECTIONS_CHAIN" => "N",
      "AJAX_MODE" => "N",
      "AJAX_OPTION_ADDITIONAL" => "",
      "AJAX_OPTION_HISTORY" => "N",
      "AJAX_OPTION_JUMP" => "N",
      "AJAX_OPTION_STYLE" => "Y",
      "CACHE_FILTER" => "N",
      "CACHE_GROUPS" => "Y",
      "CACHE_TIME" => "36000000",
      "CACHE_TYPE" => "A",
      "CHECK_DATES" => "Y",
      "DETAIL_URL" => "",
      "DISPLAY_BOTTOM_PAGER" => "N",
      "DISPLAY_DATE" => "Y",
      "DISPLAY_NAME" => "Y",
      "DISPLAY_PICTURE" => "Y",
      "DISPLAY_PREVIEW_TEXT" => "Y",
      "DISPLAY_TOP_PAGER" => "N",
      "FIELD_CODE" => array(
         0 => "ID",
         1 => "CODE",
         2 => "XML_ID",
         3 => "NAME",
         4 => "TAGS",
         5 => "SORT",
         6 => "PREVIEW_TEXT",
         7 => "PREVIEW_PICTURE",
         8 => "DETAIL_TEXT",
         9 => "DETAIL_PICTURE",
         10 => "DATE_ACTIVE_FROM",
         11 => "ACTIVE_FROM",
         12 => "DATE_ACTIVE_TO",
         13 => "ACTIVE_TO",
         14 => "SHOW_COUNTER",
         15 => "SHOW_COUNTER_START",
         16 => "IBLOCK_TYPE_ID",
         17 => "IBLOCK_ID",
         18 => "IBLOCK_CODE",
         19 => "IBLOCK_NAME",
         20 => "IBLOCK_EXTERNAL_ID",
         21 => "DATE_CREATE",
         22 => "CREATED_BY",
         23 => "CREATED_USER_NAME",
         24 => "TIMESTAMP_X",
         25 => "MODIFIED_BY",
         26 => "USER_NAME",
         27 => "",
      ),
      "FILTER_NAME" => "",
      "HIDE_LINK_WHEN_NO_DETAIL" => "N",
      "IBLOCK_ID" => "64",
      "IBLOCK_TYPE" => "info",
      "INCLUDE_IBLOCK_INTO_CHAIN" => "N",
      "INCLUDE_SUBSECTIONS" => "Y",
      "MESSAGE_404" => "",
      "NEWS_COUNT" => "6",
      "PAGER_BASE_LINK_ENABLE" => "N",
      "PAGER_DESC_NUMBERING" => "N",
      "PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
      "PAGER_SHOW_ALL" => "N",
      "PAGER_SHOW_ALWAYS" => "N",
      "PAGER_TEMPLATE" => ".default",
      "PAGER_TITLE" => "Банеры",
      "PARENT_SECTION" => "",
      "PARENT_SECTION_CODE" => "",
      "PREVIEW_TRUNCATE_LEN" => "",
      "PROPERTY_CODE" => array(
         0 => "",
         1 => "",
      ),
      "SET_BROWSER_TITLE" => "N",
      "SET_LAST_MODIFIED" => "N",
      "SET_META_DESCRIPTION" => "N",
      "SET_META_KEYWORDS" => "N",
      "SET_STATUS_404" => "N",
      "SET_TITLE" => "N",
      "SHOW_404" => "N",
      "SORT_BY1" => "SORT",
      "SORT_BY2" => "SORT",
      "SORT_ORDER1" => "ASC",
      "SORT_ORDER2" => "ASC",
      "STRICT_SECTION_CHECK" => "N",
      "COMPONENT_TEMPLATE" => "indexBanners"
   ),
   false,
   array(
   "ACTIVE_COMPONENT" => "Y"
   )
);?>
 

Данный код, нужно вставить в файле index.php в корне сайта (главная страница)

Увеличить

Над компонентом dresscode:offers.product

Увеличить

После того, как вы вставите код, вам нужно будет настроить компонент на ваш инфоблок.

Увеличить
Комментарии
Очень хочется иметь возможность просто повесить картинку без текста и кнопок. При этом нужно при клике на ней переходить на нужную страницу. Как это реализовать?
Цитата
Андрей написал:
Нашел сегодня баг. На мобильной версии, когда баннеры сворачиваются, кликая по заголовкам (т.к. кнопки Перейти в раздел исчезают), переходит в раздел, настроен по дефолту через XML файл. В настройках элемента нету свойства, которое б отвечало за активную ссылку, которая вешается на заголовок на банере. Пойду ковырять  шаблон компонента, опять костыли(
Элементы на баннере, в том числе и заголовок - это все детальное описание слайда т.е. там же вы можете указать ссылку.
Пример текста с первого слайда
Код
            <a href="/brands/" class="name">Apple -отличная техника для жизни</a>
            <div class="descr">Пример посадочной страницы на основе бренда. Создавать подобное можно почти где угодно</div>
            <a href="/brands/" class="btn-simple btn-micro">Перейти к бренду</a>
Нашел сегодня баг. На мобильной версии, когда баннеры сворачиваются, кликая по заголовкам (т.к. кнопки Перейти в раздел исчезают), переходит в раздел, настроен по дефолту через XML файл. В настройках элемента нету свойства, которое б отвечало за активную ссылку, которая вешается на заголовок на банере. Пойду ковырять  шаблон компонента, опять костыли(
     Поддерживаю Кирилла! Очень надо!
Отлично! Получилось обновиться без каких-либо проблем.
Не лишним для новичков будет описание добавления  XML файла компонента + прилагающуюся к нему папку в папку uploads на сайте, а также сам процесс импортирования.
Гость, дополнили статью.
Каким компонентом вывести баннеры на главную страницу? Для тех кто обновляет сайт, а не ставит с нуля.
 
Текст сообщения*
Популярные теги
каталог корзина 4.00 настройка карточки товара свойства баннеры на сайт цены карточка товара включение тегов добавление тегов создание тегов производители настройка тегов характеристики товара теги установка готового решения баннеры формы бренды оформление заказа выпадающее меню слайдеры загрузка картинок в меню торговые предложения обратная связь настройка каталога коллекции настройка меню настройка производителей замена баннеров почтовые шаблоны свойства товаров настройка свойств SKU замена главного баннера умный фильтр кастом замена графики скидки политика конфиденциальности замена картинок услуги изменение шаблона logo замена логотипа выбор города Наши предложения цветовая гамма типы цен ошибки настройка брендов загрузить логотип активация купона лого заменить лого логотип загрузка логотипа ТП список товаров почта видео уведомления окно куки иероглифы lang маркер группы доставок фильтр по параметрам ПД .htaccess ПКД картинки под левым меню robots.txt сменить цвет сайта ссылки новый слайдер чат для сайта custom концентратор виджет настроек улицы оптимизация сайта изменение верстки lazy load местоположения гугл пейдж спид фильтрация по наличию $_SERVER['HTTPS'] подгрузка брендов сменить цветовую схему старая цена О компании шаблон корзины email администратора правила работы с корзиной баннеры слева оптовые цены изменение заголовков LiveId села многосайтовость настройка согласий в формах 152-фз поиск ssl счетчики обновление шаблона шаблон оформления Facebook купоны на скидку боковые баннеры Вконтакте ускорение сайта отзывы пейдж спид изменение функционала Liveinternet Мой Мир@mail.ru Дополнительные фотографии 1с 8.3 кастомизация Twitter соответствие законодательству Бонусы таймер обновления языковые файлы facebook pixel разделы на главной курьером внесение изменений отзывы о магазине переименовать кнопку Livejournal скорость загрузки надписи настройки компонентов доработка шаблона хит продаж пользовательские поля кастомизация шаблона yandex сортировка таймер обратного отсчета обновления измененного шаблона замена каталога Яндекс Google Разные профили цен для разных пользователей лайфхак

Оставить обращение в тех. поддержку

Ваше обращение будет обработано в течение 48 часов с момента регистрации. Обращения обрабатываются: по будним дням с 12:00 до 18:00 (МСК). Правила оказания технической поддержки Вы можете посмотреть здесь

Ваше имя?*
Электронная почта*
Тема обращения*
Адрес сайта*
Логин и пароль от системы администрирования*
Описание проблемы*
Защита от автоматического заполнения
Введите символы с картинки*

* - обязательные поля

Сообщение отправлено
Ваше сообщение успешно отправлено. В ближайшее время с Вами свяжется наш специалист
Закрыть окно