Размер шрифта
Цвет фона и шрифта
Изображения
Озвучивание текста
Обычная версия сайта
hrustalev.com
Готовые решения сайтов
и шаблоны на 1с-Битрикс
+7 (925) 247-20-24
+7 (925) 247-20-24
Заказать звонок
E-mail
info@hrustalev.com
Адрес
Москва, м. Тимирязевская ул. Яблочкова 31, 3
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Подать заявку
0
+7 (925) 247-20-24
+7 (925) 247-20-24
Заказать звонок
E-mail
info@hrustalev.com
Адрес
Москва, м. Тимирязевская ул. Яблочкова 31, 3
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Заказать звонок
hrustalev.com
0
Подать заявку
🧩 Готовые сайты
  • Сайты для бизнеса
  • Готовые интернет магазины
  • Посадочные страницы
  • Купить 1С-Битрикс
Услуги
  • Дизайн для сайта
  • Наполнение сайта
  • Настройка готового сайта
  • Оптимизация сайта для SEO
  • Продвижение и маркетинг
  • Комплексные услуги для сайта
Наши работы
  • Проекты сайтов: 2024
  • Проекты сайтов: 2023
  • Проекты сайтов: 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
    0
    Подать заявку
    hrustalev.com
    Телефоны
    +7 (925) 247-20-24
    E-mail
    info@hrustalev.com
    Адрес
    Москва, м. Тимирязевская ул. Яблочкова 31, 3
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    0
    hrustalev.com
    Подать заявку
    • 0 Корзина
    • +7 (925) 247-20-24
      • Телефоны
      • +7 (925) 247-20-24
    • Москва, м. Тимирязевская ул. Яблочкова 31, 3
    • info@hrustalev.com
    • Пн. – Пт.: с 9:00 до 18:00
    Главная
    —
    Новости
    —Уроки 1с-Битрикс: как добавить баннер картинку в каталог товаров на Аспро Лайтшоп

    Уроки 1с-Битрикс: как добавить баннер картинку в каталог товаров на Аспро Лайтшоп

    Обучение 1с-Битрикс
    23 мая 2023
    ⏳ Время на прочтение 5 минут  
    👁
    1260

    Уроки 1с-Битрикс: как добавить баннер картинку в каталог товаров на Аспро Лайтшоп

    Приветствую, друзья!

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

    У нас есть «Каталог». В «Каталоге» есть определённые категории и как вот в этих категориях выводить дополнительную информацию.

    Вот, например, как сейчас вы видите на экране:

    1.jpg

    Мы перешли в Каталог «Строительство и ремонт» и здесь, над каталогом товаров можно вывести текст. Либо же можно вывести картинку.

    Вот как в данном примере:

    2.jpg

    Итак, первое – мы заходим в админку, находим наш «Каталог товаров»:

    3.jpg

    И выбираем нужный нам каталог.

    В данном случае, нам нужно будет поставить картинку в каталог под названием «Гуляй-город».

    Для этого мы нажимаем здесь «Изменить»:

    4.jpg

    И переходим в настройки каталога. Здесь есть несколько вкладок:

    • Раздел;
    • SEO;
    • Дополнительно;
    • Дополнительные поля

    И вот именно сюда, во вкладке «Доп. поля» нам нужно вставить путь к картинке. А для того, чтобы вставить путь к картинке, предварительно нам нужно эту картинку загрузить на наш хостинг, на наш сервер.

    И желательно создать какой-то каталог.

    В нашем случае это выглядит вот так:

    5.jpg

    Вот он наш сайт на сервере. Мы подключились в данном случае через iftp-менеджер под названием FileZilla. По работе с ним есть отдельное видео. Перешли в папку с нашим сайтом. И здесь есть папка под названием «images» (картинки).

    Если у вас такой папки нет, то вы можете её с лёгкостью создать.

    Нажимаем правой кнопкой мышки в любом месте и нажимаем «Создать каталог»:

    6.jpg

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

    Размер картинки в нашем случае: 1348 на 415

    То есть, 1348 – это ширина, 415 – это высота.

    Всё это для того, чтобы здесь у нас вот эта картиночка встала вровень с контентом:

    8.jpg

    Итак, мы переходим в папку 1348. Здесь у нас уже есть какие-то картинки. Выбираем с левой части экрана нашу картинку. И нажимаем кнопку «Закачать на сервер». Всё, картинка у нас с вами загружена на сайт.

    Также существует и альтернативный способ загрузки картинок на сайт.

    В разделе Контент выбираем «Структура сайта», Файлы и папки. Находим каталог «images» (картинки). Там есть папка 1348. И там лежат эти картинки.

    Нажимаем «Добавить файл» или «Загрузить файл»:

    9.jpg

    Выбираем также файл.

    Вот здесь «Добавить файл»: и закачиваем его куда нужно.

    10.jpg

    Вы можете столкнуться с тем, что файл ужмётся до определённого размера. Если мы допустим, делаем это в обход админки (то есть, через iftp-клиент), то у нас файл передаётся на сервер в оригинальном размере. Вот в нашем случае 1348 х 415.

    А если мы загрузим через админку, то Битрикс может его сжать и вы получите файл размера допустим, 1024 пикселя. Это уже будет не совсем то, что нужно. Тогда нужно проводить определённую настройку в админке, чтобы Битрикс не сжимал эти картинки самостоятельно.

    Но в нашем случае мы загрузили через iftp-клиент.

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

    И теперь нам сюда надо вставить путь к картинке:

    11.jpg

    Но это не просто путь, а это путь с http разметкой:

    12.jpg

    Мы открываем скобочку:

    Тег.jpg

    Пишем src– это тег для всех картинок. То есть, на любом сайте используется этот тег для вывода картинок.

    Дальше =, открываем кавычки и в кавычках мы указываем путь к картинке на сервере:

    Указываем путь к картинке.jpg

    В нашем случае  /imaes/ – это  - пака с картинками. Потом следующая папка /1348/. И дальше название самого файла.

    В нашем случае файл называется gg1348.jpg

    Мы можем с вами просто скопировать название в буфер и здесь подставить

    16.jpg

    Дальше мы добавляем к картинке дополнительный атрибут:

    17.jpg

    Добавляем class «img – responsive». Что он даёт?

    Он нам даёт опцию такую, что на разных форматах экранов у нас будет картинка ужиматься под формат экрана, то есть, чтоб она была адаптивной.

    Итак, мы с вами всё это прописали:

    Прописали.jpg

    Скопировали в буфер, вернулись на сайт и вставили сюда:

    18.jpg

    И нажали «Сохранить».

    При желании мы внизу, вот здесь:

    19.jpg

    Можем добавить ещё какой-то текст или что-то ещё, что мы захотим. То есть, сюда мы можем вставить любой intimal-объект, любую intimal-вёрстку.

    В нашем случае сейчас – это только картинка.

    Итак, мы с вами возвращаемся на сайт и проверяем:

    Картинка встала.jpg

    Всё. Наша картинка встала.

    Я достаточно долго это всё объяснял. Но по факту, операция достаточно простая. То есть, достаточно один раз (или два раза) вам её повторить и дальше у вас не составит труда подставлять нужные материалы в какие-то разделы каталога на сайте.

    На этом у меня всё. Благодарю за внимание.

    Характеристики
    Рейтинг
    3.19
    Новости
    29 ноября 2023
    Уроки Битрикс: Новый блок на главной для любого типа контента
    В данном уроке, я расскажу вам про классную опцию в линейке корпоративных сайтов от Аспро, среди которых: Корпоративный 3.0, Стройка, Клиника, Курорт, Диджитал, Автосервис, Ландшафт и другие. Мы научимся редактировать а так же создавать новый блок для главной страницы к который вы сможете разместить любой контент, что сделает ваш сайт более гибким в плане настроек и индивидуализации.
    11 мая 2023
    Уроки 1с-Битрикс: как настроить баннеры с текстом в Аспро Лайтшоп
    В данном уроке по 1с-Битрикс мы разберем как настроить баннеры с текстом на главной странице в готового решения Аспро Лайтшоп
    14 февраля 2022
    Уроки 1с-Битрикс Как настроить баннер на сайте
    Назад к списку
    • Бизнес и психология 16
    • Личная эффективность 2
    • Новости 11
    • Обучение 1с-Битрикс 47
    • Пресс-релиз 48
    • Развитие бизнеса 218
    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
    © 2025 hrustalev.com - Готовые сайты для бизнеса
    Политика конфиденциальности | Политика использования cookie
    0 Корзина

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

    Исправить это просто: выберите в каталоге интересующий товар и нажмите кнопку «В корзину»
    Перейти в каталог
    Главная 0 Корзина Поиск Каталог Контакты Услуги Новости Компания Проекты
    Мобильный телефон
    Email
    Whatsapp
    Whatsapp
    Telegram