Размер шрифта
Цвет фона и шрифта
Изображения
Озвучивание текста
Обычная версия сайта
hrustalev.com
Готовое решение для создания
корпоративного сайта
+7 (925) 247-20-24
+7 (925) 247-20-24
Заказать звонок
E-mail
info@hrustalev.com
Адрес
Москва, м. Тимирязевская ул. Яблочкова 31, 3
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Подать заявку
+7 (925) 247-20-24
+7 (925) 247-20-24
Заказать звонок
E-mail
info@hrustalev.com
Адрес
Москва, м. Тимирязевская ул. Яблочкова 31, 3
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Заказать звонок
hrustalev.com
Подать заявку
Готовые сайты
  • Сайты для бизнеса
  • Готовые интернет магазины
  • Посадочные страницы
  • Купить 1С-Битрикс
Услуги
  • Дизайн для сайта
  • Наполнение сайта
  • Настройка готового сайта
  • Оптимизация сайта для SEO
  • Продвижение и маркетинг
  • Комплексные услуги для сайта
Наши работы
  • Проекты сайтов: 2022
  • Проекты сайтов: 2021
  • Проекты сайтов: 2020
  • Проекты сайтов: 2019
  • Проекты сайтов: 2018
  • Проекты сайтов: 2017
  • Проекты сайтов: 2016
  • Проекты сайтов: 2015
  • Проекты сайтов: 2014
  • Проекты сайтов: 2013
  • Проекты сайтов: 2012
Компания
  • О компании
  • Вопрос - Ответ
  • Лицензии и сертификаты
  • Партнеры
  • Разработчики
  • Вакансии
  • Отзывы
  • Реквизиты
Пресс центр
Контакты
    hrustalev.com
    +7 (925) 247-20-24
    Заказать звонок
    E-mail
    info@hrustalev.com
    Адрес
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    Подать заявку
    hrustalev.com
    Телефоны
    +7 (925) 247-20-24
    Заказать звонок
    hrustalev.com
    Подать заявку
    • +7 (925) 247-20-24
      • Телефоны
      • +7 (925) 247-20-24
      • Заказать звонок
    • Москва, м. Тимирязевская ул. Яблочкова 31, 3
    • info@hrustalev.com
    • Пн. – Пт.: с 9:00 до 18:00
    Главная
    —
    Новости
    —Уроки 1с-Битрикс Как настроить баннер на сайте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     

    Назад к списку
    • Личная эффективность 1
    • Новости 14
    • Обучение 1с-Битрикс 33
    • Пресс-релиз 46
    • Развитие бизнеса 80
    1с-Битрикс 1с-битрикс cms google adwords landing seo SEO seo специалисты SMM smm администрирование администрирование сайта аспро аудит сайта бесплатные сайты бизнес бизнес в интернете бизнес процессы бизнес с нуля битрикс быстрое продвижение виды сайтов готовые сайты дешевые сайты дешевый сайт диагностика сайта дизайн дизайн сайта доставка еды заказать сайт запуск магазина продуктов заработок индивидуализация сайта интернет магазин интернет магазин на битрикс интернет магазин продуктов питания интернет маркетинг интернет реклама интернет-магазины Интерфейс 1с-Битрикс исправление ошибок как добавить товар как избежать конфликта как сделать сайт какие бываю сайты какой выбрать сайт клиенты контекстная реклама контент контент маркетинг корпоративный сайт купить сайт лендиниги логика маркетинг настройка сайта новинки сайтов новый сайт обслуживание сайта обучение общение с клиентами одностраничники оптимизация сайта открытие бизнеса открытие компании открыть ИП ошибки ошибки мышления панель управления планирование поисковая оптимизация поисковое продвижение поисковое продвижение сайта поисковые системы посещаемость предпринимательство принятие решений продажи продвижение по словам продвижение сайт продвижение сайта продвижение сайтов продвижение. прокачка сайта прокрастинация психология выбора развитие бизнеса развитие бизнеса. развитие бренда развитие компании развитие сайта регистрация бизнеса режим правки реклама в интернет реклама сайта ресторанный бизнеса с чего начать сайт сайт для бизнеса сайт для услуг сайт на битрикс сайт под ключ сайта для автосервиса сайты сайты на битрикс свой бизнес скорость сайта советы. создание сайта создание сайтов соц сети социальные сети специфика стоимость сайта техподдержка сайта торговые предложения увеличение продаж удобство сайта управление сайтом уроки Уроки 1с-Битрикс уроки 1с-битрикс ускорение сайта успех факторы хороший сайт цены на сайты что такое битрикс шаблоны сайтов экономить на сайте юзабили яндекс директ
    Готовый интернет-магазин Готовый интернет-магазин
    +7 (925) 247-20-24
    +7 (925) 247-20-24
    Заказать звонок
    E-mail
    info@hrustalev.com
    Адрес
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    Заказать звонок
    info@hrustalev.com
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    © 2023 hrustalev.com - Готовые сайты для бизнеса
    Политика конфиденциальности
    0 Корзина

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

    Исправить это просто: выберите в каталоге интересующий товар и нажмите кнопку «В корзину»
    Перейти в каталог
    +79252472024
    hrustalev.k@mail.ru
    Whatsapp
    Whatsapp
    Viber
    Viber
    Telegram
    Skype