hrustalev.com
Услуги
  • Дизайн для сайта
    • Логотип для сайта
    • Иконки для сайта
    • Баннеры для сайта
  • Наполнение сайта
    • Составление текстов для товаров и услуг
    • Ручное добавление товаров на сайт
    • Размножение текстов
    • Перенос контента на новый сайт
    • Очистка сайта от демо-контента
    • Выгрузка товаров на сайт из прайс листа
  • Настройка готового сайта
    • Установка готового сайта
    • Замена базовых элементов для сайта
    • Настройка пунктов меню
    • Настройка разделов каталога
    • Настройка SSL сертификата
    • Подключение платежной системы к сайту
    • Настройка Многосайтовости
  • Оптимизация сайта для SEO
    • Установка счетчиков посещаемости сайта
    • Уменьшение веса картинок на сайте
    • Регистрация сайта в поисковых системах
    • Оптимизация скорости сайта Google Page Speed
    • Настройка файлов индексации
    • Заполнение мета тэгов страниц
  • Продвижение и маркетинг
    • Оптимизация рекламы Яндекс Директ
    • Юзабилити и seo видео-аудит
    • Создание рекламной кампании Яндекс Директ
    • Сбор поисковых запросов для сайта
    • Настройка магазина для Яндекс Маркета
    • Настройка магазина для Google Merchant
    • Наращивание ссылок-упоминаний для сайта
  • Комплексные услуги для сайта
    • Дополнительные услуги
    • Контекстная реклама
    • Продвижение сайта по словам
    • Подготовка к продвижению
    • Индивидуализация сайта
Готовые сайты
  • Сайты для бизнеса
    • Универсальные сайты
    • Ремонт и строительство
    • Сайты для мед учреждений
    • Сайты для авто-мастерских
    • Агентства недвижимости
    • Сайты для салонов красоты
    • Бары, рестораны, кафе и доставка еды
    • Готовые сайты разной тематики
  • Готовые интернет магазины
    • Универсальные готовые магазины
    • Недорогие магазины на редакции «Старт»
    • Одежда, обувь, сумки, аксессуары
    • Готовые магазины разной тематики
  • Посадочные страницы
    • Лендинг с каталогом
    • Ремонт и строительство
    • Красота и здоровье
    • Лендинги разной тематики
  • Купить 1С-Битрикс
    • Лицензии для интернет-магазинов
    • Лицензии для корпоративных сайтов и услуг
    • Хостинг для 1с-Битрикс
Наши работы
  • Проекты сайтов: 2022
  • Проекты сайтов: 2021
  • Проекты сайтов: 2020
  • Проекты сайтов: 2019
  • Проекты сайтов: 2018
  • Проекты сайтов: 2017
  • Проекты сайтов: 2016
  • Проекты сайтов: 2015
  • Проекты сайтов: 2014
  • Проекты сайтов: 2013
  • Проекты сайтов: 2012
Компания
  • О компании
  • Партнеры
  • Производители
  • Вопрос ответ
  • Лицензии
  • Реквизиты
  • Отзывы
Пресс-центр
Контакты
Ещё
    Задать вопрос
    Личный кабинет
    Корзина0
    +7 (925) 247-20-24
    Заказать звонок
    info@hrustalev.com
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    • YouTube
    +7 (925) 247-20-24
    Заказать звонок
    hrustalev.com
    0
    Личный кабинет

    Услуги
    • Дизайн для сайта
      Дизайн для сайта
      • Логотип для сайта —
      • Иконки для сайта —
      • Баннеры для сайта
    • Наполнение сайта
      Наполнение сайта
      • Составление текстов для товаров и услуг —
      • Ручное добавление товаров на сайт —
      • Размножение текстов —
      • Перенос контента на новый сайт —
      • Очистка сайта от демо-контента —
      • Выгрузка товаров на сайт из прайс листа
    • Настройка готового сайта
      Настройка готового сайта
      • Установка готового сайта —
      • Замена базовых элементов для сайта —
      • Настройка пунктов меню —
      • Настройка разделов каталога —
      • Настройка SSL сертификата —
      • Подключение платежной системы к сайту —
      • Настройка Многосайтовости
    • Оптимизация сайта для SEO
      Оптимизация сайта для SEO
      • Установка счетчиков посещаемости сайта —
      • Уменьшение веса картинок на сайте —
      • Регистрация сайта в поисковых системах —
      • Оптимизация скорости сайта Google Page Speed —
      • Настройка файлов индексации —
      • Заполнение мета тэгов страниц
    • Продвижение и маркетинг
      Продвижение и маркетинг
      • Оптимизация рекламы Яндекс Директ —
      • Юзабилити и seo видео-аудит —
      • Создание рекламной кампании Яндекс Директ —
      • Сбор поисковых запросов для сайта —
      • Настройка магазина для Яндекс Маркета —
      • Настройка магазина для Google Merchant —
      • Наращивание ссылок-упоминаний для сайта
    • Комплексные услуги для сайта
      Комплексные услуги для сайта
      • Дополнительные услуги —
      • Контекстная реклама —
      • Продвижение сайта по словам —
      • Подготовка к продвижению —
      • Индивидуализация сайта
    Готовые сайты
    • Сайты для бизнеса
      Сайты для бизнеса
      • Универсальные сайты —
      • Ремонт и строительство —
      • Сайты для мед учреждений —
      • Сайты для авто-мастерских —
      • Агентства недвижимости —
      • Сайты для салонов красоты —
      • Бары, рестораны, кафе и доставка еды —
      • Готовые сайты разной тематики
    • Готовые интернет магазины
      Готовые интернет магазины
      • Универсальные готовые магазины —
      • Недорогие магазины на редакции «Старт» —
      • Одежда, обувь, сумки, аксессуары —
      • Готовые магазины разной тематики
    • Посадочные страницы
      Посадочные страницы
      • Лендинг с каталогом —
      • Ремонт и строительство —
      • Красота и здоровье —
      • Лендинги разной тематики
    • Купить 1С-Битрикс
      Купить 1С-Битрикс
      • Лицензии для интернет-магазинов —
      • Лицензии для корпоративных сайтов и услуг —
      • Хостинг для 1с-Битрикс
    Наши работы
    • Проекты сайтов: 2022
    • Проекты сайтов: 2021
    • Проекты сайтов: 2020
    • Проекты сайтов: 2019
    • Проекты сайтов: 2018
    • Проекты сайтов: 2017
    • Проекты сайтов: 2016
    • Проекты сайтов: 2015
    • Проекты сайтов: 2014
    • Проекты сайтов: 2013
    • Проекты сайтов: 2012
    Компания
    • О компании
    • Партнеры
    • Производители
    • Вопрос ответ
    • Лицензии
    • Реквизиты
    • Отзывы
    Пресс-центр
    Контакты

      hrustalev.com
      Услуги
      • Дизайн для сайта
        Дизайн для сайта
        • Логотип для сайта —
        • Иконки для сайта —
        • Баннеры для сайта
      • Наполнение сайта
        Наполнение сайта
        • Составление текстов для товаров и услуг —
        • Ручное добавление товаров на сайт —
        • Размножение текстов —
        • Перенос контента на новый сайт —
        • Очистка сайта от демо-контента —
        • Выгрузка товаров на сайт из прайс листа
      • Настройка готового сайта
        Настройка готового сайта
        • Установка готового сайта —
        • Замена базовых элементов для сайта —
        • Настройка пунктов меню —
        • Настройка разделов каталога —
        • Настройка SSL сертификата —
        • Подключение платежной системы к сайту —
        • Настройка Многосайтовости
      • Оптимизация сайта для SEO
        Оптимизация сайта для SEO
        • Установка счетчиков посещаемости сайта —
        • Уменьшение веса картинок на сайте —
        • Регистрация сайта в поисковых системах —
        • Оптимизация скорости сайта Google Page Speed —
        • Настройка файлов индексации —
        • Заполнение мета тэгов страниц
      • Продвижение и маркетинг
        Продвижение и маркетинг
        • Оптимизация рекламы Яндекс Директ —
        • Юзабилити и seo видео-аудит —
        • Создание рекламной кампании Яндекс Директ —
        • Сбор поисковых запросов для сайта —
        • Настройка магазина для Яндекс Маркета —
        • Настройка магазина для Google Merchant —
        • Наращивание ссылок-упоминаний для сайта
      • Комплексные услуги для сайта
        Комплексные услуги для сайта
        • Дополнительные услуги —
        • Контекстная реклама —
        • Продвижение сайта по словам —
        • Подготовка к продвижению —
        • Индивидуализация сайта
      Готовые сайты
      • Сайты для бизнеса
        Сайты для бизнеса
        • Универсальные сайты —
        • Ремонт и строительство —
        • Сайты для мед учреждений —
        • Сайты для авто-мастерских —
        • Агентства недвижимости —
        • Сайты для салонов красоты —
        • Бары, рестораны, кафе и доставка еды —
        • Готовые сайты разной тематики
      • Готовые интернет магазины
        Готовые интернет магазины
        • Универсальные готовые магазины —
        • Недорогие магазины на редакции «Старт» —
        • Одежда, обувь, сумки, аксессуары —
        • Готовые магазины разной тематики
      • Посадочные страницы
        Посадочные страницы
        • Лендинг с каталогом —
        • Ремонт и строительство —
        • Красота и здоровье —
        • Лендинги разной тематики
      • Купить 1С-Битрикс
        Купить 1С-Битрикс
        • Лицензии для интернет-магазинов —
        • Лицензии для корпоративных сайтов и услуг —
        • Хостинг для 1с-Битрикс
      Наши работы
      • Проекты сайтов: 2022
      • Проекты сайтов: 2021
      • Проекты сайтов: 2020
      • Проекты сайтов: 2019
      • Проекты сайтов: 2018
      • Проекты сайтов: 2017
      • Проекты сайтов: 2016
      • Проекты сайтов: 2015
      • Проекты сайтов: 2014
      • Проекты сайтов: 2013
      • Проекты сайтов: 2012
      Компания
      • О компании
      • Партнеры
      • Производители
      • Вопрос ответ
      • Лицензии
      • Реквизиты
      • Отзывы
      Пресс-центр
      Контакты
        0
        hrustalev.com
        0
        hrustalev.com
        • Мой кабинет
        • Услуги
          • Назад
          • Услуги
          • Дизайн для сайта
            • Назад
            • Дизайн для сайта
            • Логотип для сайта
            • Иконки для сайта
            • Баннеры для сайта
          • Наполнение сайта
            • Назад
            • Наполнение сайта
            • Составление текстов для товаров и услуг
            • Ручное добавление товаров на сайт
            • Размножение текстов
            • Перенос контента на новый сайт
            • Очистка сайта от демо-контента
            • Выгрузка товаров на сайт из прайс листа
          • Настройка готового сайта
            • Назад
            • Настройка готового сайта
            • Установка готового сайта
            • Замена базовых элементов для сайта
            • Настройка пунктов меню
            • Настройка разделов каталога
            • Настройка SSL сертификата
            • Подключение платежной системы к сайту
            • Настройка Многосайтовости
          • Оптимизация сайта для SEO
            • Назад
            • Оптимизация сайта для SEO
            • Установка счетчиков посещаемости сайта
            • Уменьшение веса картинок на сайте
            • Регистрация сайта в поисковых системах
            • Оптимизация скорости сайта Google Page Speed
            • Настройка файлов индексации
            • Заполнение мета тэгов страниц
          • Продвижение и маркетинг
            • Назад
            • Продвижение и маркетинг
            • Оптимизация рекламы Яндекс Директ
            • Юзабилити и seo видео-аудит
            • Создание рекламной кампании Яндекс Директ
            • Сбор поисковых запросов для сайта
            • Настройка магазина для Яндекс Маркета
            • Настройка магазина для Google Merchant
            • Наращивание ссылок-упоминаний для сайта
          • Комплексные услуги для сайта
            • Назад
            • Комплексные услуги для сайта
            • Дополнительные услуги
            • Контекстная реклама
            • Продвижение сайта по словам
            • Подготовка к продвижению
            • Индивидуализация сайта
        • Готовые сайты
          • Назад
          • Готовые сайты
          • Сайты для бизнеса
            • Назад
            • Сайты для бизнеса
            • Универсальные сайты
            • Ремонт и строительство
            • Сайты для мед учреждений
            • Сайты для авто-мастерских
            • Агентства недвижимости
            • Сайты для салонов красоты
            • Бары, рестораны, кафе и доставка еды
            • Готовые сайты разной тематики
          • Готовые интернет магазины
            • Назад
            • Готовые интернет магазины
            • Универсальные готовые магазины
            • Недорогие магазины на редакции «Старт»
            • Одежда, обувь, сумки, аксессуары
            • Готовые магазины разной тематики
          • Посадочные страницы
            • Назад
            • Посадочные страницы
            • Лендинг с каталогом
            • Ремонт и строительство
            • Красота и здоровье
            • Лендинги разной тематики
          • Купить 1С-Битрикс
            • Назад
            • Купить 1С-Битрикс
            • Лицензии для интернет-магазинов
            • Лицензии для корпоративных сайтов и услуг
            • Хостинг для 1с-Битрикс
        • Наши работы
          • Назад
          • Наши работы
          • Проекты сайтов: 2022
          • Проекты сайтов: 2021
          • Проекты сайтов: 2020
          • Проекты сайтов: 2019
          • Проекты сайтов: 2018
          • Проекты сайтов: 2017
          • Проекты сайтов: 2016
          • Проекты сайтов: 2015
          • Проекты сайтов: 2014
          • Проекты сайтов: 2013
          • Проекты сайтов: 2012
        • Компания
          • Назад
          • Компания
          • О компании
          • Партнеры
          • Производители
          • Вопрос ответ
          • Лицензии
          • Реквизиты
          • Отзывы
        • Пресс-центр
        • Контакты
        • Корзина0
        • +7 (925) 247-20-24
        info@hrustalev.com
        Москва, м. Тимирязевская ул. Яблочкова 31, 3
        • YouTube
        • Главная
        • Пресс-центр
        • Обучение 1с-Битрикс
        • Уроки 1с-Битрикс Как настроить баннер на сайте

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

        14 февраля 2022
        Обучение 1с-Битрикс

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

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

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

         Как настроить баннер на сайте

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

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

         Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

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

         Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

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

        Как настроить баннер на сайте

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

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

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

        Как настроить баннер на сайте

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

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

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

        Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

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

         Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

            Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

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

         Как настроить баннер на сайте

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

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

         Как настроить баннер на сайте

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

         Как настроить баннер на сайте

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

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

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

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

        © Автор статьи: Хрусталёв Кирилл
        Копирование материала только с указание ссылки на источник.
        https://hrustalev.com

         

        Поделиться
        Назад к списку
        Услуги
        Дизайн для сайта
        Наполнение сайта
        Настройка готового сайта
        Оптимизация сайта для SEO
        Продвижение и маркетинг
        Комплексные услуги для сайта
        Готовые сайты
        Сайты для бизнеса
        Готовые интернет магазины
        Посадочные страницы
        Купить 1С-Битрикс
        Компания
        О компании
        Партнеры
        Производители
        Вопрос ответ
        Лицензии
        Реквизиты
        Отзывы
        Проекты
        Пресс-центр
        Контакты
        +7 (925) 247-20-24
        Заказать звонок
        info@hrustalev.com
        Москва, м. Тимирязевская ул. Яблочкова 31, 3
        • YouTube
        Политика конфиденциальности
        © 2022 Все права защищены.
        0

        Ваша корзина пуста

        Исправить это просто: выберите в каталоге интересующий товар и нажмите кнопку «В корзину»
        В каталог
        Заказать звонок
        Написать сообщение