Аспро: Лайтшоп — документация, часть 2 из 5: Главная страница
Источник: официальный курс «Аспро: Лайтшоп» из базы знаний Аспро. Решение: Аспро: Лайтшоп. Справочная выгрузка сертифицированного партнёра Аспро, обновлено 19.09.2026.
Части курса: 1 · 2 · 3 · 4 · 5
Содержание
- Главная страница
- Управление расположением блоков на главной
- Большие баннеры на главной странице
- Тизеры преимуществ на главной
- Разделы каталога
- Элементы каталога на главной
- Баннеры с текстом на главной
- Блок «Услуги» на главной
- Блок «Акции» на главной
- Баннеры картинками на главной
- Блок «Статьи» на главной странице
- Блок «О компании» на главной странице
- Блок «Бренды» на главной странице
- Блок «ВКонтакте» на главной
- Блок «Видеоотзывы» на главной странице
- Дополнительные блоки на главной
- Настройки шапки и меню
Главная страница
назадЗащита подписки на рассылку от спама Управление расположением блоков на главнойвперед
Управление расположением блоков на главной
Главная страница сайта состоит из блоков. К примеру, есть блок «Картинки с текстом» (1), блок «Акции» (2) и блок «Статьи» (3).

Все блоки вашего сайта — это единый организм, где каждая часть дополняет друг друга. Чтобы структура сайта выглядела органично, продумайте стратегию расположения блоков. Покажем на примере.
Как управлять расположением блоков
- Открыть виджет настроек.
- Перейти на вкладку «Главная».
- Ухватить левой кнопкой мыши вертикальные стрелки рядом с ползунком, который отключает отображение блока, и переместить строку вверх или вниз.

Элементы сместятся в сторону освободившегося пространства — вверх или вниз, в зависимости от того, откуда вы перетащили строку.
Например, при перемещении блока акции (1) под блок «Баннеры с картинками» (2), баннеры текстом (3) и новости (4) переместятся на одну позицию вверх.

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

Управлять блоками можно в административной части. Для этого зайдите административную часть сайта: Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3).

Откройте список настроек и найдите блок «Главная» (1). В блоке есть параметры Порядок блоков на главной (2). Возле полей, активирующих отображение блоков, располагаются вертикальные стрелки (3). С их помощью можно менять блоки местами (так же, как в виджете).

Чтобы не отображать определенный блок на главной странице, снимите галку рядом с его названием. Для сохранения изменений нажмите «Применить».

назадГлавная страница Большие баннеры на главной страницевперед
Большие баннеры на главной странице
На главной странице вы можете отобразить большие баннеры. Добавляйте блок с большими баннерами, чтобы посетители сайта могли подробно рассмотреть широкие изображения с вашей продукцией и выгодными предложениями. Выводите баннеры с информацией о предстоящий акций и тизеры через заголовок и описание к каждому баннеру.
Всего доступно 2 типа отображения больших баннеров на главной. Рассмотрим подробнее каждый из них.
- С наездом на шапку.

- Без наезда на шапку.

Выбрать подходящий тип можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Большие баннеры» (1). Раскройте пункт и выберите необходимый тип отображения блока (2).

Административная панель
Для выбора подходящего типа блока необходимо перейти в Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3) и кликнуть вкладку «Главная».

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

Далее прокрутите бегунок до «Вид отображения больших баннеров». Выберите нужное и нажмите «Применить».

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

Вот так выглядит блок с разделителем и серым фоном.

Настройки по типам блока
Всем типам отображения можно назначить высоту баннеров (1) и настроить ширину текста (2). Второму типу можно задать отступы (3) и узкий баннер (4).

Рассмотрим, чем отличается широкий и неширокий текст у больших баннеров:
- неширокий текст;

- широкий текст.

Любому типу отображения можно назначить высокую, обычную или низкую высоту баннеров.
- высокий по высоте баннер;

- обычный по высоте баннер;

- низкий по высоте баннер.

Настройка отступов позволяет оставлять свободное место в правом и левом крае от баннеров и определить, насколько блок будет отдален от шапки сайта и соседних блоков.
- баннер с отступами;

- баннер без отступов.

Также второму типу отображения можно задать узкий баннер. Рассмотрим наглядно настройку.
- узкий баннер;

- обычный баннер.

назадБольшие баннеры на главной странице Создание и редактирование больших баннероввперед
Создание и редактирование больших баннеров
Создавать и редактировать большие баннеры на главной странице можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Включите режим правки, переведите курсор на область баннера. Для создания нового баннера нажмите кнопку «Добавить баннер» (1). Чтобы отредактировать уже существующий баннер, нажмите «Изменить баннер» (2).

Административная панель
В административной панели для создания и редактирования баннеров необходимо перейти в Контент (1) → Реклама (aspro.lite) (2) → Большие баннеры (3).

Для создания нового баннера нажмите кнопку «Добавить баннер» (1). Чтобы отредактировать уже существующий баннер, нажмите на «Гамбургер» рядом с ним и выберите «Изменить» (2).

Рассмотрим подробнее настройки баннера. На вкладке «Баннер» доступны поля:

- Активность (1), чтобы баннер отображался.
- Название (2) — обязательное для заполнения поле. Его содержимое отображается на сайте как заголовок баннера.
- Ссылка с баннера (3) — можно прописать url (абсолютный или относительный) страницы. Это сделает баннер кликабельным — при нажатии на него пользователь перейдет на заданную страницу.
- Заголовок баннера h1 (4) — назначить заголовку баннера мета-тег h1 для использования в SEO.
На вкладке «Картинки» можно загрузить активную картинку (1) и фоновую (2). Если фоновая картинка будет не загружена, то баннер будет располагаться на сером фоне. Картинки загружаются отдельно для высоких, обычных и низких баннеров.

На этой же вкладке в разделе «Низкий баннер» можно загрузить изображение в поле «Картинка для <768px». Эта картинка предназначена для мобильных устройств и не предусматривает вывод заголовка и текста баннера. Подробнее об этом читайте в статье про мобильные баннеры.

На вкладке «Текст» доступны следующие поля:

- Текст баннера (1) — можно назначить расположение текста относительно картинки.
- Центрировать текст (2) — выравнивание текста по центру.
- Цвет шапки и текста (3) — установить светлый или темный цвет текста.
- Затемнение/засветление (4) — включить затемнение или засветление для текста на баннере.
- Описание (5) — можно написать текст для баннера, который будет отображаться под заголовком.
На вкладке «Кнопки» доступны следующие поля:

- Кнопка 1 текст (1) — подпись для кнопки на баннере.
- Кнопка 1 класс (2) — кнопка может быть залитая, полупрозрачная и прозрачная с бордером.
- Кнопка 1 цвет (3) — назначить цвет для кнопки. Это может быть цвет темы или любой другой цвет на выбор.
- Кнопка 1 ссылка (4) — установить ссылку перехода на заданную страницу при нажатии на кнопку.
- Код формы для первой кнопки (5) — используется, если нет ссылки. При нажатии на кнопку открывается определенная форма. Например, задать вопрос или зарегистрироваться на сайте.
- Точно такие же функции, как у первой кнопки, вы можете настроить и для второй кнопки (6).
На вкладке «Видео» доступны следующие поля:

- Показывать видео (1), чтобы видеоролик можно было воспроизводить на баннере.
- Текст кнопки воспроизведения видео (2) — подпись кнопки для запуска видео.
- Класс кнопки воспроизведения видео (3) — кнопка может быть залитая и прозрачная с бордером.
- Цвет кнопки воспроизведения видео (4) — назначить цвет для кнопки. Это может быть цвет темы или любой другой цвет на выбор.
- Настройки видео (5) — есть возможность включить автовоспроизведение, повтор, заполнение по размеру и отключение звука у видео.
- Источник видео (6) — выбрать способ привязки видео: из файла или по HTML-коду.
- Ссылка на видео (7) — HTML-код с ссылкой на видеоролик. Можно привязать ролик с YouTube.
- Файл видео (8) — загрузить файл с видео в систему.
На вкладке «Связи» можно назначить регион показа баннера.

На вкладке «Разделы» отнесите баннер к одному из разделов, чтобы упорядочить баннеры по типам отображения.

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

Чтобы настраивать скорость автоматической прокрутки и управлять скоростью при переключении, необходимо в административной панели перейти в Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3) и кликнуть вкладку «Главная».

Прокрутите бегунок в самую нижнюю часть до блока «Большой баннер». Задайте тип анимации большого баннера (1). Можно назначить горизонтальное скольжение баннеров или выцветание.
Чтобы баннеры перелистывались быстрее или медленнее, задайте скорость слайд-шоу большого баннера (2). Чем выше значение в миллисекундах, тем быстрее баннеры будут переключаться.
Установите скорость анимации большого баннера (3), чтобы задать параметр перехода, который влияет на быстроту переключения одного баннера к другому. Чем ниже значение, тем плавней произойдет переход. Выберите необходимые параметры и нажмите «Применить».

назадСоздание и редактирование больших баннеров Скрывать большой баннер на узких экранахвперед
Скрывать большой баннер на узких экранах
Большие баннеры на главной странице можно скрывать на узких экранах. Это используется, например, для мобильных устройств, на которых большие баннеры занимают слишком много места. Скрывайте громоздкие баннеры на узких экранах для обеспечения аккуратности в оформлении главной страницы.
Чтобы скрывать большой баннер на узких экранах, необходимо в административной панели перейти в Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3) и кликнуть вкладку «Главная».

Прокрутите бегунок в самую нижнюю часть до блока «Большой баннер», поставьте галку напротив пункта «Скрывать на узких экранах» и нажмите «Применить».

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

Отобразить тизеры преимуществ на главной можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Тизеры» (1). Вы можете активировать и деактивировать этот блок через переключатель (2).

Административная панель
Для выбора подходящего типа отображения тизера необходимо перейти в Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3) и кликнуть на вкладку «Главная».

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

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

Нужна помощь?
Доверьте создание изображений нашим дизайнерам. Учтем все технические нюансы и разработаем безупречный баннер. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
назадСкрывать большой баннер на узких экранах Настройки отображения тизероввперед
Настройки отображения тизеров
Настроить вид отображения блока с тизерами можно так, как этого требует ваш проект. Например, выбрать количество элементов в строке, позицию картинки и др. Рассмотрим настройки подробнее.
Для блока с тизерами можно установить разделитель для указания границы блока и назначить серый фон на весь блок вместо белого (1). А также задать верхние и нижние отступы, которые отделяют блок от соседних (2).

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

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

Дополнительно тизерам можно задать отображение только трех или четырех элементов в строке.

- 3 элемента в строке;

- 4 элемента в строке.

А ещё — задать отображение 1, 2, 3 или неограниченного числа строк.

- количество строк: 1;

- количество строк: 3.

Также можно установить картинки слева или сверху от текста.

- позиция картинки слева от текста;

- позиция картинки сверху от текста.

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

На вкладке «Источник данных» можно задать порядок отображения тизеров. Перейдите в раздел «Источник данных» → Задайте поле для первой сортировки (1) → Укажите направление первой сортировки (2). Нажмите «Сохранить».
Иногда значения элементов совпадают по первому полю. Тогда какой элемент отобразить раньше, будет решено по второму полю. Задайте поле для второй сортировки (3) → Укажите направление второй сортировки (4).

назадНастройки отображения тизеров Добавление и изменение тизероввперед
Добавление и изменение тизеров
Чтобы добавить или редактировать тизеры, переключитесь на административную часть сайта и перейдите в необходимый раздел: Контент → Контент (aspro.lite) → Тизеры. Чтобы добавить новый тизер, нажмите «Добавить элемент» (1) . Чтобы отредактировать уже существующий, нажмите кнопку «Гамбургер» рядом с ним и выберите «Изменить» (2).

Рассмотрим подробнее настройки тизера. На вкладке «Элемент» доступны поля:

- Активность (1) , чтобы тизер отображался.
- Название (2) — обязательное для заполнения поле. Его содержимое отображается на сайте как заголовок тизера.
- Ссылка (3) — можно прописать url (абсолютный или относительный) страницы. Это сделает тизер кликабельным — при нажатии на него пользователь перейдет на заданную страницу.
- Текст под заголовком (4) — дополнительный текст тизера.
На вкладке «Изображения» можно загрузить иконку (1) или картинку (2) для тизера. Рекомендуемый размер иконки — 40 х 40 px в формате SVG.

Также здесь вы можете активировать свойство «Не инлайновая svg». При активации свойства, иконка не будет окрашиваться в цвет темы.

назадНастройка сортировки тизеров Разделы каталогавперед
Разделы каталога
Разделы каталога на главной странице — специальный блок для быстрого доступа к необходимым товарам. Например, клиент при клике на картинку или заголовок «Одежда» может сразу попасть в соответствующий раздел каталога и не тратить время на поиски этого раздела на сайте.
В решении доступно 3 типа отображения списка разделов каталога на главной странице. Вы можете настроить обводку, задать количество элементов в строке, вид изображения. Рассмотрим подробнее типы отображения списка разделов каталога на главной.
- Компактно.

- Плиткой.

- Плиткой на фоне.

Выбрать подходящий тип можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Разделы каталога» (1). Раскройте пункт и выберите необходимый тип отображения списка разделов каталога (2).

Административная панель
Для выбора подходящего типа отображения разделов необходимо перейти в Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3) и кликнуть вкладку «Главная».

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

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

Содержание главы:
назадДобавление и изменение тизеров Настройки оформления блока «Разделы каталога»вперед
Настройки оформления блока «Разделы каталога»
Настроить вид отображения блока с разделами каталога можно так, как этого требует ваш проект. Например, выбрать количество элементов в строке, тип изображения, отступы и др. Рассмотрим настройки подробнее.
Общие настройки блока
При любом типе отображения для блока с разделами каталога можно установить разделитель для указания границы блока и назначить серый фон на весь блок вместо белого (1). А также задать верхние и нижние отступы, которые отделяют блок от соседних (2). По вашему усмотрению можно настроить заголовок всего блока или полностью его убрать (3).

Вот так выглядит блок с разделителем и серым фоном.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

Заголовок можно добавлять/убирать через галку.

- заголовка нет;

- заголовок есть.

Настройки по типам блока
Каждому типу можно настроить вид изображения (1). Для первого и второго типа можно выбрать обводку (2). Для второго типа также можно выбрать количество элементов в строке (3) и количество строк (4). Для третьего типа также можно выбрать отображение с картинкой на фоне (5).

- вид изображения «иконки»;

- вид изображения «картинки»;

* с обводкой;

* без обводки;

Второму типу можно задать количество элементов в строке 4 ,5, 6 или 8.
- Количество элементов в строке: 4;

- Количество элементов в строке: 8.

Также второму типу можно задать отображение 1, 2, 3 или неограниченного числа строк.
- количество строк: 1;

- количество строк: 3.

Для третьего типа можно задать задний фон при отображении элементов.
- без фона;

- с фоном.

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

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

Максимальная глубина позволяет определить, какого уровня вложенности отобразить подраздел. Например, у раздела «Товары для дома и дачи» есть подраздел «Текстиль» 3 уровня вложенности.

На вкладке «Дополнительные настройки» можно изменить заголовок блока (1), настроить название ссылки при наведении (2) и саму ссылку на все элементы (3).

Сохраните изменения.
назадНастройки оформления блока «Разделы каталога» Активация разделов каталога на главной страницевперед
Активация разделов каталога на главной странице
Чтобы отобразить раздел каталога на главной странице, в административной панели проделайте путь: Контент (1) → Каталог (aspro.lite) (2) → Каталог товаров (3).

В поле раздела каталога кликните на «Гамбургер» и нажмите «Изменить».

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

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

Отобразить блок с товарами на главной можно двумя способами:
- через виджет в публичной части,
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Элементы каталога» (1). Чтобы активировать блок, нажмите на переключатель (2).

Административная панель
Для активации блока с товарами на главной необходимо перейти в Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3) и кликнуть вкладку «Главная».

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

Далее прокрутите бегунок до «Вид отображения элементов каталога». Выберите нужное и нажмите «Применить».

Содержание главы:
назадАктивация разделов каталога на главной странице Настройки оформления блока «Элементы каталога»вперед
Настройки оформления блока «Элементы каталога»
Настроить вид отображения блока можно так, как этого требует ваш проект. Например, выбрать количество товаров в строке и др. Рассмотрим настройки подробнее.
Для блока с товарами можно установить разделитель для указания границы блока и назначить серый фон на весь блок (1). Также задайте верхние и нижние отступы, которые отделяют блок от соседних (2) и включите отображение заголовка блока (3).

Вот так выглядит блок с разделителем и серым фоном.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

Рассмотрим отображение заголовка блока. При выключенном параметре исчезает не только заголовок, но и табы, а также ссылка на каталог.
- блок с заголовком;

- блок без заголовка.

В дополнительных настройках типа блока можно активировать обводку (1), картинку в края (2), задать количество элементов в строке (3) и количество строк (4).

Рассмотрим, чем отличается отображение с обводкой или без обводки:
- с обводкой;

- без обводки;

Так для элементов можно активировать настройку «Картинка в края».
- с «Картинкой в края»;

- без «Картинки в края».

Также можно выбрать количество строк (1,2,3, неограничено), которые будут выводиться на главной.
- количество строк: 2;

- количество строк: 3;

Еще вы можете установить 4 или 5 элемента в одной строке.
- количество элементов в строке: 4;

- количество элементов в строке: 5.

назадЭлементы каталога на главной Активация товаров на главной страницевперед
Активация товаров на главной странице
Чтобы отобразить товары каталога на главной странице, в административной панели проделайте путь: Контент (1) → Каталог (aspro.lite) (2) → Каталог товаров (3).

В поле товара кликните на «Гамбургер» и нажмите «Изменить».

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

назадНастройки оформления блока «Элементы каталога» Дополнительные настройки блока «Элементы каталога»вперед
Дополнительные настройки блока «Элементы каталога»
Блоку «Элементы каталога» на главной странице можно указать дополнительные настройки. Для этого в режиме правки наведите на область блока с элементами каталога и нажмите на шестеренку.

На вкладке «Источник данных» можно задать порядок отображения товаров каталога. Перейдите в раздел «Источник данных» → Задайте поле для первой сортировки (1) → Укажите направление первой сортировки (2).
Иногда значения элементов совпадают по первому полю. Тогда какой элемент отобразить раньше, будет решено по второму полю. Задайте поле для второй сортировки (3) → Укажите направление второй сортировки (4).

На вкладке «Дополнительные настройки» можно назначить заголовок блока (1). Также можно подписать название ссылки на все элементы (2) и указать саму ссылку (3).

назадАктивация товаров на главной странице Изменение порядка табов в блоке «Лучшие предложения» на главнойвперед
Изменение порядка табов в блоке «Лучшие предложения» на главной
В блоке «Лучшие предложения» на главной странице вы можете изменить порядок табов «Хит», «Советуем», «Новинка» и «Акция». Акцентируйте внимание посетителей на важных товарах и стимулируйте продажи.

Чтобы изменить порядок табов, в административной части сайта перейдите в Контент (1) → Инфоблоки (2) → Типы инфоблоков (3) → Каталог (aspro.lite) (4) → Каталог товаров (5).

На вкладке «Свойства» найдите поле «Наши предложения» и нажмите на три точки напротив него для перехода к детальному редактированию.

В блоке «Значение списка» для изменения порядка табов установите необходимую сортировку. Чем меньше число сортировки, тем раньше отобразится таб. Сохраните изменения.

Далее в настройках инфоблока еще раз сохраните изменения.
Теперь в блоке «Лучшие предложения» табы отображаются в том порядке, который вы установили.
назадДополнительные настройки блока «Элементы каталога» Баннеры с текстом на главнойвперед
Баннеры с текстом на главной
Баннеры с текстом на главной странице — небольшие кликабельные статичные изображения с текстом. Они выстраиваются в ровную плитку на любой ширине окна. Эти баннеры дают быстрый доступ к нужным страницам. Например, клиент при клике на баннер «Посуда для кухни» может сразу попасть в соответствующий раздел каталога и не тратить время на поиски этого раздела на сайте.

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

Настройка баннеров с текстом в административной части сайта
Перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и кликните на вкладку «Главная».

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

На этой же странице ниже найдите пункт «Вид отображения блоков на главной» и задайте вид отображения блока баннеров с текстом. После изменения нажмите «Применить».

Нужна помощь?
Доверьте создание изображений нашим дизайнерам. Учтем все технические нюансы и разработаем безупречный баннер. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
назадИзменение порядка табов в блоке «Лучшие предложения» на главной Настройки оформления блока «Баннеры с текстом»вперед
Настройки оформления блока «Баннеры с текстом»
Настроить вид отображения баннеров с текстом можно так, как этого требует ваш проект. Например, выбрать количество элементов в строке, ширину блока и др. Рассмотрим настройки подробнее.
Для блока баннеров с текстом можно установить разделитель для указания границы блока и назначить серый фон на весь блок вместо белого (1). Настроить ширину (2) , задать число баннеров в строке (3) и количество строк (4) , сделать текст по центру баннера или слева (5). А также задать верхние и нижние отступы, которые отделяют блок от соседних (6).

Вот так выглядит блок с разделителем и серым фоном.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

Рассмотрим, чем отличаются широкие и неширокие баннеры:
- неширокие баннеры;

- широкие баннеры.

Теперь рассмотрим разницу, как выглядит текст баннера по центру и слева:
- текст баннера по центру;

- текст баннера слева.

Вы можете установить 2, 3 или 4 баннера в одной строке:
- количество элементов в строке: 3;

- количество элементов в строке: 4.

Вы также можете задать 1, 2, 3 или неограниченное количество строк. Рассмотрим разницу между числом строк:
- количество строк: 1;

- количество строк: 2.

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

На вкладке «Источник данных» можно задать порядок отображения вопросов. Перейдите в раздел «Источник данных» → Задайте поле для первой сортировки (1) → Укажите направление первой сортировки (2). Нажмите «Сохранить».
Иногда значения элементов совпадают по первому полю. Тогда какой элемент отобразить раньше, будет решено по второму полю. Задайте поле для второй сортировки (3) → Укажите направление второй сортировки (4).

Сохраните изменения.
назадНастройки оформления блока «Баннеры с текстом» Создание и редактирование баннеров с текстомвперед
Создание и редактирование баннеров с текстом
Баннеры с текстом на главной странице — небольшие кликабельные статичные изображения с текстом. Они выстраиваются в ровную плитку на любой ширине окна. Эти баннеры дают быстрый доступ к нужным страницам. Например, клиент при клике на баннер «Посуда для кухни» может сразу попасть в соответствующий раздел каталога и не тратить время на поиски этого раздела на сайте.

Чтобы добавить или редактировать сами баннеры, переключитесь на административную часть сайта и перейдите в необходимый раздел: Контент (1) → Реклама (aspro.lite) (2) → Реклама — Баннеры с текстом (3).

Чтобы добавить новый баннер, нажмите «Добавить элемент» (1). Чтобы отредактировать уже существующий, нажмите кнопку «Гамбургер» рядом с ним и выберите «Изменить» (2).

Рассмотрим подробнее настройки баннера. На вкладке «Элемент» доступны поля.
- Активность (1), чтобы баннер отображался.
- Название (2) — обязательное для заполнения поле. Его содержимое отображается на сайте как заголовок баннера.
- Сортировка (3) — укажите нужную сортировку, чтобы задать порядок отображения баннеров. Чем ниже число сортировки, тем раньше отображается баннер.
- Ссылка (4) — можно прописать url (абсолютный или относительный) страницы. Это сделает баннер кликабельным — при нажатии на него пользователь перейдет на заданную страницу.
- Текст сверху (5) — дополнительный заголовок к баннеру, который располагается над основным заголовком.
- Теги для баннера (6) — укажите теги для баннера. Подробнее о настройке тегов читайте в отдельной статье.

На вкладке «Анонс» можно загрузить картинку для баннера с текстом.

На вкладке «Связи» можно назначить регион показа баннера.

На вкладке «Разделы» отнесите баннер к одному из разделов, чтобы упорядочить баннеры по типам отображения.

Чтобы добавить или отредактировать баннер в публичной части, включите режим правки, наведите на область блока, где располагаются баннеры с текстом. Нажмите на «Изменить элемент» (1), если хотите отредактировать баннер. Чтобы добавить новый баннер, выберите «Добавить элемент» (2). Откроются те же вкладки, что мы рассматривали ранее.

назадНастройка сортировки баннеров с текстом Создание тегов в баннере с текстомвперед
Создание тегов в баннере с текстом
Для баннеров с текстом на главной странице вы можете создавать теги. Функционал позволяет вести пользователей на разные страницы каталога и разделы сайта, поскольку каждому тегу можно задать индивидуальную ссылку. Благодаря настройке вы также информируете клиента о товарах магазина. Располагайте теги на баннерах с текстом и ведите пользователей на целевые страницы сайта.

Чтобы создать теги, в административной части сайта, перейдите в Контент (1) → Highload-блоки (2) → AsproLiteBannersTags (3).

Для создания нового тега нажмите «Добавить запись» (1). А для редактирования существующего нажмите на «Гамбургер» напротив поля с тегом и нажмите «Изменить» (2).

В окне редактирования баннера доступны следующие поля:
- Название тега, которое будет отображаться на баннере
- XML_ID — идентификатор тега.
- Ссылка — укажите относительную ссылку, по которой пользователь перейдет при клике по тегу.
- Сортировка — задайте сортировку, чтобы определить порядок отображения тегов для баннера. Чем ниже число сортировки, тем раньше располагается тег.

Сохраните изменения.
Чтобы добавить тег на баннер, перейдите в Контент (1) → Реклама (aspro.lite) (2) → Реклама — Баннеры с текстом (3) и зайдите в редактирование необходимого баннера.

На вкладке «Элемент» укажите необходимые теги в поле «Теги для баннера» и сохраните изменения.

назадСоздание и редактирование баннеров с текстом Блок «Услуги» на главнойвперед
Блок «Услуги» на главной
С версии Аспро: Лайтшоп 2.7.0 на главной странице вы можете отобразить услуги компании. Добавляйте блок с услугами, чтобы посетители сайта могли сразу понять сферу вашего бизнеса и то, чем вы занимаетесь.

Настроить блок можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Услуги» (1). Раскройте пункт и настройте отображение блока (2).

Административная часть сайта
Для выбора подходящего типа блока необходимо перейти в Аспро (1) → Аспро: Лайтшоп (2) → Настройки (3) → Главная (4).

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

Далее прокрутите бегунок до «Вид отображения услуг». Выберите нужное и нажмите «Применить».

Содержание главы:
назадСоздание тегов в баннере с текстом Настройки оформления блока «Услуги»вперед
Настройки оформления блока «Услуги»
Настроить вид отображения блока можно так, как этого требует ваш проект. Например, выбрать тип, ширину изображения и др. Рассмотрим настройки подробнее.
Вы можете установить разделитель для указания границы блока и назначить серый фон на весь блок (1). Ниже можно задать число элементов в строке и количество строк (2). Также можно задать верхние и нижние отступы, которые отделяют блок от соседних, и выбрать отображение заголовка блока (3).

Вот так выглядит блок с разделителем и серым фоном.

Вы можете установить 3 или 4 элемента в одной строке:
- количество элементов в строке: 3;

- количество элементов в строке: 4.

Помимо элементов, вы можете задать 1, 2, 3 или неограниченное количество строк. При последнем варианте появляется кнопка «Показать еще». Рассмотрим разницу между числом строк:
- количество строк: 2;

- количество строк: 3.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

Рассмотрим отображение заголовка блока.
- блок с заголовком;

- блок без заголовка.

назадБлок «Услуги» на главной Дополнительные настройки блока «Услуги»вперед
Дополнительные настройки блока «Услуги»
Блоку «Услуги» в публичной части можно указать дополнительные настройки. Для этого в режиме правки наведите на область блока с услугами и нажмите на шестеренку.

На вкладке «Источник данных» можно задать порядок отображения услуг. Перейдите в раздел «Источник данных» → Задайте поле для первой сортировки (1) → Укажите направление первой сортировки (2).
Иногда значения элементов совпадают по первому полю. Тогда какой элемент отобразить раньше, будет решено по второму полю. Задайте поле для второй сортировки (3) → Укажите направление второй сортировки (4).

На вкладке «Дополнительные настройки» можно назначить заголовок блока (1) и дополнительный заголовок над ним (2). Также можно подписать название ссылки на все элементы (3), указать саму ссылку (4), включить отображение текста под заголовком (5) и отображение раздела у элементов (6). Сохраните изменения.

назадНастройки оформления блока «Услуги» Активация услуг на главной страницевперед
Активация услуг на главной странице
Чтобы отобразить услуги на главной странице, в административной панели проделайте путь: Контент (1) → Контент (aspro.lite) (2) → Услуги (3) и откройте любую папку с услугами.

В поле услуги кликните на «Гамбургер» и нажмите «Изменить».

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

назадДополнительные настройки блока «Услуги» Блок «Акции» на главнойвперед
Блок «Акции» на главной
На главной странице вы можете отобразить акции и спецпредложения. Добавляйте акционный блок, чтобы пользователи узнавали о выгодных предложениях в вашем магазине.

Настроить блок можно двумя способами:
- через виджет в публичной части,
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Акции». Раскройте пункт и настройте отображение блока.

Административная панель
Для настройки отображения блока необходимо перейти в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) → Главная (4).

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

Далее прокрутите бегунок до «Вид отображения акций». Выберите нужное и нажмите «Применить».

Содержание главы:
назадАктивация услуг на главной странице Настройки оформления блока «Акции»вперед
Настройки оформления блока «Акции»
Настроить вид отображения блока можно так, как этого требует ваш проект. Например, задать отступы, выбрать количество элементов в строке и др. Рассмотрим настройки подробнее.
Для блока с акциями можно установить разделитель для указания границы блока и назначить серый фон на весь блок вместо белого (1). Задать число баннеров в строке (2) и количество строк (3). А также задать верхние и нижние отступы (4), которые отделяют блок от соседних (4). Выбрать отображение заголовка блока (5).

Вот так выглядит блок с разделителем и серым фоном.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

Рассмотрим отображение заголовка блока.
- блок с заголовком;

- блок без заголовка.

В блоке можно установить 3 или 4 элемента в одной строке:
- количество элементов в строке: 3;

- количество элементов в строке: 4.

Вы также можете задать отображение 1-3 строк или установить под акциями кнопку «Загрузить еще» для загрузки акций.
- количество строк: 1;

- количество строк: 2;

- кнопка «Загрузить еще».

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

На вкладке «Источник данных» можно задать порядок отображения акций. Перейдите в раздел «Источник данных» → Задайте поле для первой сортировки (1) → Укажите направление первой сортировки (2). Нажмите «Сохранить».
Иногда значения элементов совпадают по первому полю. Тогда какой элемент отобразить раньше, будет решено по второму полю. Задайте поле для второй сортировки (3) → Укажите направление второй сортировки (4).

На вкладке «Дополнительные настройки» можно назначить заголовок блока (1). Также можно подписать название ссылки на все элементы (2), указать саму ссылку (3), задать количество элементов в строке (4) и ограничить блок по контенту (5).

Сохраните изменения.
назадНастройки оформления блока «Акции» Активация акций на главной страницевперед
Активация акций на главной странице
Чтобы отобразить акции на главной странице, в административной части сайта перейдите в Контент (1) → Контент (aspro.lite) (2) → Акции (3) и откройте любую папку с акциями.

В поле акции кликните на «Гамбургер» и нажмите «Изменить».

Для вывода определенной акции на главной странице необходимо установить галку в поле «Показывать на главной». Не забудьте сохранить изменения.

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

В решении для баннеров картинками на главной странице вы можете задавать отступы и делать баннеры на всю ширину.
Настроить отображения баннеров картинками можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Баннеры картинками». Раскройте пункт и настройте отображение блока.

Административная панель
Для настройки отображения баннеров с картинками необходимо перейти в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) → Главная (4).

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

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

Нужна помощь?
Доверьте создание изображений нашим дизайнерам. Учтем все технические нюансы и разработаем безупречный баннер. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
назадАктивация акций на главной странице Настройки оформления блока «Баннеры картинками»вперед
Настройки оформления блока «Баннеры картинками»
Настроить вид отображения блока баннеров с картинками можно так, как этого требует ваш проект. Рассмотрим настройки подробнее.
Для блока можно установить разделитель для указания границы блока и назначить специальный фон на весь блок (1). Настроить ширину баннеров и отступы при широком баннере (2). А также отдельно задать верхние и нижние отступы (3).

Вот так выглядит блок с разделителем и серым фоном.

Рассмотрим, чем отличаются широкие и неширокие баннеры, с отступами и без отступов:
- Неширокий баннер;

- Широкий баннер;

- Баннер с отступами (при широком отображении);

- Баннер без отступов (при широком отображении).

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

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

Чтобы добавить или редактировать сами баннеры, переключитесь в административную часть сайта и перейдите в необходимый раздел: Контент → Реклама (aspro.lite) → Реклама — Баннеры картинками. Чтобы добавить новый баннер, нажмите «Добавить элемент» (1). Чтобы отредактировать уже существующий, нажмите кнопку «Гамбургер» рядом с ним и выберите «Изменить» (2).

Рассмотрим подробнее настройки баннера. На вкладке «Элемент» доступны поля:
- Активность (1), чтобы баннер отображался.
- Название (2) — обязательное для заполнения поле.
- Картинка (3) — можно загрузить необходимую картинку для баннера.
- Ссылка (4) — можно прописать url (абсолютный или относительный) страницы. Это сделает баннер кликабельным — при нажатии на него пользователь перейдет на заданную страницу.

На вкладке «Связи» можно назначить регион показа баннера.

Чтобы добавить или отредактировать баннер в публичной части, включите режим правки, наведите на область блока, где располагаются баннеры картинками. Нажмите на «Изменить элемент» (1), если хотите отредактировать баннер. Чтобы добавить новый баннер, выберите «Добавить элемент» (2). Откроются те же вкладки, что мы рассматривали ранее.

назадНастройки оформления блока «Баннеры картинками» Блок «Статьи» на главной страницевперед
Блок «Статьи» на главной странице
На главной странице вы можете отобразить интересные статьи компании. Это могут быть обзоры, инструкции и события. Добавьте статьи на главную страницу, чтобы посетители сайта могли быстро перейти и ознакомиться с полезным материалом.

Настройка блока в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Статьи». Раскройте пункт и настройте отображение блока. Сохраните изменения.

Настройка блока в административной части сайта
Для настройки отображения блока необходимо перейти в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и кликнуть вкладку «Главная».

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

Далее прокрутите бегунок до «Вид отображения статей». Выберите нужное и нажмите «Применить».

Содержание главы:
назадБаннеры картинками, создание и настройка Настройки оформления блока «Статьи» на главной страницевперед
Настройки оформления блока «Статьи» на главной странице
Настроить вид отображения блока можно так, как этого требует ваш проект. Рассмотрим настройки подробнее.
Для блока вы можете установить разделитель для указания границы блока и назначить серый фон на весь блок (1). Настроить количество элементов в строке (2) и число строк (3). Также можно задать верхние и нижние отступы, которые отделяют блок от соседних (4), и выбрать отображение заголовка блока (5).

Вот так выглядит блок с разделителем и серым фоном.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

Рассмотрим отображение заголовка блока.
- блок с заголовком;

- блок без заголовка.

Для блока можно установить 4 или 5 элементов в одной строке:
- количество элементов в строке: 4;

- количество элементов в строке: 5.

Любому типу можно назначить отображение 1-3 строк или установить под статьями кнопку «Загрузить еще» для вызова строк вручную.
- количество строк: 1;

- количество строк: 2.

назадБлок «Статьи» на главной странице Дополнительные настройки блока «Статьи»вперед
Дополнительные настройки блока «Статьи»
Блоку «Статьи» в публичной части можно указать дополнительные настройки. Для этого в режиме правки наведите на область блока с блогом и нажмите на шестеренку.

На вкладке «Источник данных» можно задать порядок отображения статей из блога. Перейдите в раздел «Источник данных» → Задайте поле для первой сортировки (1) → Укажите направление первой сортировки (2).
Иногда значения элементов совпадают по первому полю. Тогда какой элемент отобразить раньше, будет решено по второму полю. Задайте поле для второй сортировки (3) → Укажите направление второй сортировки (4).

На вкладке «Дополнительные настройки» можно назначить заголовок блока (1). Подписать название ссылки на все элементы (2), указать саму ссылку (3) и ограничить блок по контенту (4).

Сохраните изменения.
назадНастройки оформления блока «Статьи» на главной странице Активация статей на главной страницевперед
Активация статей на главной странице
Чтобы отобразить статьи из блога на главной странице, в административной части сайта перейдите в Контент (1) → Контент (aspro.lite) (2) → Статьи (3) и откройте любой раздел со статьями.

В поле со статьей кликните на «Гамбургер» и нажмите «Изменить».

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

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

Настройка отображения блока в публичной части сайта
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Блок о компании». Раскройте пункт и настройте отображение блока.

Настройка отображения блока в административной части сайта
Перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и выберите вкладку «Главная».

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

Далее прокрутите бегунок до «Вид отображения о компании». Настройте отображение и нажмите «Применить».

Содержание главы:
назадАктивация статей на главной странице Настройки оформления блока «О компании»вперед
Настройки оформления блока «О компании»
Настроить вид отображения блока можно так, как этого требует ваш проект. Рассмотрим настройки подробнее.
В настройках вы можете установить разделитель для указания границы блока и назначить серый фон на весь блок (1). Активировать отображение картинки и применить обводку (2). А также задать верхние и нижние отступы, которые отделяют блок от соседних (3).

Вот так выглядит блок с разделителем и серым фоном.

Вы можете включить отображение картинки и задать обводку в блоке.
- С картинкой;

- Без картинки;

- С обводкой;

- Без обводки.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний блок: 0, нижний: 0;

- верхний блок: 130, нижний: 130.

назадБлок «О компании» на главной странице Редактирование блока «О компании» на главной страницевперед
Редактирование блока «О компании» на главной странице
Информация для блока «О компании» заполняется и редактируется в элементе инфоблока. Если вы используете региональность, заполнить текст и заголовок блока необходимо в инфоблоке регионов.
Редактирование блока в публичной части сайта
Включите «Режим правки», наведите курсор на область блока и нажмите кнопку «Изменить элемент».

В окне редактирования элемента вы можете заполнять и редактировать следующие поля:
- Активность, чтобы блок отображался.
- Название — обязательное для заполнения поле.
- Картинка — загрузите картинку для отображения в блоке.
- Заголовок — задайте заголовок для всего блока.
- Текст кнопки подробнее — подпишите кнопку, которая будет ссылаться на заданную вами страницу сайта.
- Ссылка — назначьте кнопке ссылку на определенную страницу.
- Описание — задайте текст блоку. Если картинка загружена, текст располагается под заголовком. А если изображение отсутствует, то текст отображается справа от заголовка.

Редактирование блока в административной части сайта
Перейдите в Контент (1) → Контент (aspro.lite) (2) → О компании (3).

В окне редактирования блока откроются те же вкладки, что мы рассматривали ранее.

назадНастройки оформления блока «О компании» Блок «Бренды» на главной страницевперед
Блок «Бренды» на главной странице
На главной странице вы можете добавить блок «Бренды». При клике на логотип вы попадаете в список товаров определенного бренда. Доступно 2 типа отображения блока «Бренды» на главной. Рассмотрим каждый из них.
- Плиткой.

- Каруселью.

Настройка в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «Бренды» (1). Раскройте пункт и выберите необходимый тип отображения блока (2).

Настройка в административной части
Для выбора подходящего типа блока перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и выберите вкладку «Главная».

В блоке «Порядок блоков на главной» поставьте галку в поле «Бренды», чтобы отображать блок. Здесь также доступны настройки отображения.

Прокрутите бегунок до «Вид отображения производителей». Выберите нужное и нажмите «Применить».

Содержание главы:
назадРедактирование блока «О компании» на главной странице Настройки оформления блока «Бренды»вперед
Настройки оформления блока «Бренды»
Настроить вид отображения блока можно исходя из ваших предпочтений. Рассмотрим настройки подробнее.
Общие настройки блока
При любом типе отображения можно установить разделитель для указания границы блока и назначить серый фон на весь блок (1). Установить обводку для брендов в блоке (2). А также задать верхние и нижние отступы, которые отделяют блок от соседних, и подключить заголовок (3).

Вот так выглядит блок с разделителем и серым фоном.

- бренды с обводкой;

- бренды без обводки.

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

- верхний отступ: 0, нижний: 0;

- верхний отступ: 130, нижний: 130.

Вы можете задать отображение заголовка для блока.

- блок с заголовком;

- блок без заголовка.

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

Вы можете задать 1-3 строк или установить под брендами кнопку «Загрузить еще» для вызова строк вручную.
- количество строк: 1;

- количество строк: 2;

- кнопка «Загрузить еще».

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

В параметрах компонента списка новостей перейдите в основные параметры. В поле «Количество новостей на странице» задайте нужное число и сохраните изменения.

В этом же окне можно задать сортировку для вывода элементов.
Перейдите в раздел «Источник данных» → Задайте поле для первой сортировки (1) → Укажите направление первой сортировки (2). Иногда значения элементов совпадают по первому полю. Тогда по второму полю будет решено, какой элемент отобразить раньше.
Задайте поле для второй сортировки (3) → Укажите направление второй сортировки (4).

Также в окне «Список новостей» можно изменить заголовок и ссылку блока.
Выберите «Дополнительные настройки» → Измените заголовок блока (1) → Измените заголовок на все бренды (2) → Отредактируйте ссылку на все бренды (3) → Сохраните изменения.

назадНастройки оформления блока «Бренды» Активация брендов на главнойвперед
Активация брендов на главной
Чтобы активировать бренды на главной странице, в административной части сайта перейдите в Контент (1) → Контент (aspro.lite) (2) → Бренды (3).

Перейдите в редактирование элемента. Для этого в строке кликните на «Гамбургер», затем на «Изменить».

В окне редактирования бренда поставьте галку в поле «Показывать на главной» и сохраните изменения.

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

Чтобы настраивать скорость автоматической прокрутки или управлять скоростью при переключении, в административной части сайта перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и выберите вкладку «Главная».

Пролистайте до блока «Бренды». Чтобы бренды перелистывались не так быстро либо не так медленно, задайте скорость слайдшоу баннеров (1). Чем выше значение в миллисекундах, тем быстрее баннеры будут переключаться.
Установите скорость анимации брендов (2), чтобы задать параметр перехода, который влияет на быстроту и медленность переключения одного бренда к другому. Чем ниже значение, тем плавней произойдет переход. После внесения изменений нажмите «Применить».

назадАктивация брендов на главной Блок «ВКонтакте» на главнойвперед
Блок «ВКонтакте» на главной
В решении доступен блок «ВКонтакте» на главной странице. Это специальный виджет, который автоматически подгружает посты из привязанного к сайту сообщества в VK.

Картинка для блока будет браться из ленты «ВКонтакте». Поле, в которое она будет вставляться, имеет соотношение сторон 16:9.
Чтобы виджет заработал, нужно получить токен API. Сделать это можно через создание своего приложения для «ВКонтакте».
Для начала зайдите на https://id.vk.com/about/business/go/ и нажмите «Добавить приложение».

Выберите, кем будет управляться приложение. Нажмите «Далее».

Затем заполните свои данные. Эта информация не будет отображаться публично. Согласитесь с офертой и обработкой персональных данных. Нажмите «Создать аккаунт».

Заполните название приложения (1) и выберите платформу: Web (2). Нажмите «Далее».

В поле «Базовый домен» напишите адрес вашего сайта без протокола (1). В поле «Доверенный Redirect URL» вставьте: https://oauth.vk.com/blank.html (2). Нажмите «Готово».
С начала 2025 года появился новый способ получения токена VK при создании нового приложения. Теперь нужно указывать другой доверенный Redirect URL: https://ДОМЕН/bitrix/tools/КОД_РЕШЕНИЯ/vk_oauth.php
Пример для демоверсии Аспро: Лайтшоп: https://lite-demo.ru/bitrix/tools/aspro.lite/vk_oauth.php
Для старого приложения, в котором уже есть работающий токен, ничего менять не нужно.

Введите код из push-уведомления для подтверждения.

После этого вы получите ID приложения. Оно будет доступно в соответствующем поле.

Далее переходим к нашему сайту, в его административную часть. Проходим следующий путь:
Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) → Социальные сети (4).

В пункте «VK» доступны следующие поля:
- Способ обращения к API — вы можете выбрать новый вариант через VK ID или устаревший через OAuth. Мы рекомендуем первый вариант — VK ID.
- ID приложения — введите ID вашего приложения ВКонтакте, который вы получили ранее. Если у вас есть API-токен, в предыдущем поле выберите вариант «OAuth (устаревший)» и вставьте имеющийся токен.
- ID сообщества ВКонтакте — для его получения достаточно открыть любую фотографию сообщества или скопировать ссылку на пост. Тогда в URL-адресе появится часть с ID сообщества. Например, ID сообщества Аспро — 26208053.
- Название для блока.
- Текст ссылки на все записи.
- Размер отображаемого текста — в символах.
- Заголовок блока с видео.
- Ссылки на все видео.

Поле «Размер отображаемого текста» позволяет задать количество символов, которое получит сайт для каждого поста. При этом количество отображаемых символов в блоке на главной будет отличаться от максимально доступного из-за ограничений по высоте. Например, у блока с 4 элементами в ряд помещается меньше символов, чем у 3 элементов в ряд. Количество символов может меняться и от разрешения экрана, но первые три строки всегда отображаются.
ID сообщества по умолчанию находится в ссылке. Если же у вашего сообщества VK уникальный URL, откройте любой пост на стене.

Затем скопируйте ID сообщества из URL-адреса поста.

Сайт подключен к API ВКонтакте. Теперь нужно включить блок. Находясь в настройках в административной части, переходим во вкладку «Главная».

Находим пункт «ВКонтакте» и ставим галку. Здесь же можно настроить отступы и позицию заголовка. Подробнее об этом расскажем в конце статьи.

Чуть ниже на этой же странице можно задать обводку и количество элементов в строке. После изменения настроек нажмите «Применить».

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

Включить блок можно не только через административную, но и публичную часть сайта. Для этого перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите пункт «ВКонтакте» (1). Раскройте пункт и настройте вид отображения блока (2).

Настройка отображения блока
Для блока «ВКонтакте» можно установить разделитель для указания границы блока и назначить серый фон на весь блок вместо белого (1). А также задать верхние и нижние отступы, которые отделяют блок от соседних (2). По вашему усмотрению можно настроить отображение заголовка (3).

Также вы можете задать обводку (1) и количество элементов в строке (2).

Рассмотрим, чем отличается отображение с обводкой и без, с 3 и 4 элементами.
- с обводкой;

- без обводки;

- количество элементов в строке: 3;

- количество элементов в строке: 4.

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

На вкладке «Настройки кеширования» включите кеширование с необходимым типом (1) и задайте период обновления в секундах (2). Сохраните изменения.

назадНастройки анимации и слайд-шоу в блоке «Бренды» Блок «Видеоотзывы» на главной страницевперед
Блок «Видеоотзывы» на главной странице
На главной странице можно отобразить блок «Видеоотзывы». Это надежный способ наглядно продемонстрировать счастливых клиентов и результаты собственной работы. Улучшайте имидж компании и повышайте лояльность посетителей.

Ролики подгружаются из YouTube, а с обновлением Аспро: Лайтшоп 2.4.1 с сервисов VK Видео и Rutube из плейлиста или с главной страницы канала. Также вы можете переименовать блок и выводить туда любые видео на ваше усмотрение. Например, обзоры своих проектов.

Чтобы настроить блок с видео, в административной части сайта перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и выберите вкладку «Социальные сети», которая появилась в обновлении 2.4.1.

YouTube
Для подключения роликов с канала потребуется API Token YouTube.

Чтобы его получить, зайдите на специальный сервис от Google. Выберите пункт YouTube Data API v3.

Нажмите кнопку ENABLE.

После этого откроется новое окно, в котором нужно нажать на кнопку CREATE CREDENTIALS.

В поле Select an API выберите YouTube Data API v3.

На выбор появится два пункта. Отметьте Public data и нажмите NEXT.

Скопируйте ключ из поля API Key и нажмите Done.

Полученный ключ вставьте в соответствующее поле в административной части сайта.

После этого укажите ID канала (1), если хотите брать видео напрямую с YouTube-страницы. Укажите ID плейлиста (2), если хотите использовать видео из плейлиста. Также здесь вы можете выбрать сортировку видео (3), задать заголовок блока (4) и указать подсказку ссылки на все видео (5).

Сохраните изменения.
Для корректной работы блока «Видеоотзывы» в настройках хостинга необходимо включить модуль allow_url_fopen. На картинке ниже показали пример для хостинга Reddock.

VK Видео
Чтобы виджет заработал, нужно получить токен API. Сделать это можно через создание своего приложения для «ВКонтакте». Token API одинаковый для блоков с постами и видео.

Обратите внимание! Чтобы видеозаписи отображались на сайте, создатель приложения и API токена должен обязательно быть администратором сообщества во Вконтакте, из которого будут подгружаться ролики.
Для начала зайдите на https://id.vk.com/about/business/go/ и нажмите «Добавить приложение».

Выберите, кем будет управляться приложение. Нажмите «Далее».

Затем заполните свои данные. Эта информация не будет отображаться публично. Согласитесь с офертой и обработкой персональных данных. Нажмите «Создать аккаунт».

Заполните название приложения (1) и выберите платформу: Web (2). Нажмите «Далее».

В поле «Базовый домен» напишите адрес вашего сайта без протокола (1). В поле «Доверенный Redirect URL» вставьте: https://oauth.vk.com/blank.html (2). Нажмите «Готово».

Введите код из push-уведомления для подтверждения.

После этого вы получите ID приложения. Оно будет доступно в соответствующем поле.

После создания приложения настройте расширенные доступы. Перейдите на вкладку «Доступы» и нажмите кнопку «Заполнить» в блоке «Расширенные доступы».

В строке «Паспортные данные» нажмите на кнопку «Добавить». Заполните поля и нажмите «Добавить данные»

После заполнения паспортных данных нажмите на кнопку «Отправить на проверку».

Перед вами появится сообщение, что данные проверяются. Проверка занимает около 2 часов.

Если проверка пройдена успешно, сообщение изменится на «Аккаунт подтвержден».

На данный момент выдача расширенных доступов со стороны ВКонтакте приостановлена.
Теперь вам понадобится следующая ссылка. Скопируйте ее в текстовый редактор и отредактируйте, заполнив своими данными: [code] https://oauth.vk.com/authorize?client_id=[ID нашего приложения]&scope=notify,photos,friends,audio,video,notes,pages,docs,status,questions,offers,wall,groups,messages,notifications,stats,ads,offline&redirect_uri=https://oauth.vk.com/blank.html&display=page&response_type=token
[/code]
-
Вместо [ID нашего приложения] подставляем полученный ID. Квадратные скобки также нужно убрать;
-
В атрибуте scope оставляем только тот контент, доступ к которому вам нужен. Как правило, достаточно оставить параметры video, wall и offline.
Получившуюся ссылку вставьте в адресную строку браузера и перейдите по ней. После этого вас попросят авторизоваться в VK. Нажмите «Продолжить как …».

В новом окне из ссылки скопируйте показатель атрибута все символы после «access_token=». Это и есть ваш API токен.

Далее в административной части сайта перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и выберите вкладку «Социальные сети».

Вставьте код полученного API токена (1) и ID сообщества, откуда вы хотите подтягивать видео (2). Укажите название для блока (3) и подсказку ссылки на все видео (4). Сохраните параметры.
Неотмеченные цифрами настройки относятся к блоку «Вконтакте» на главной, который подгружает посты со стены сообщества.

Для корректной работы блока «Видеоотзывы» в настройках хостинга необходимо включить модуль allow_url_fopen. На картинке ниже показали пример для хостинга Reddock.

Rutube
Для подключения интеграция с Rutube укажите ID канала (1). Также вы можете выбрать сортировку видео (2), указать заголовок блока с видео (3) и подсказку ссылки на все видео (4).

Сохраните изменения.
Для корректной работы блока «Видеоотзывы» в настройках хостинга необходимо включить модуль allow_url_fopen. На картинке ниже показали пример для хостинга Reddock.

Дополнительные настройки
Вы можете внести корректировки в настройки видео через параметры компонента. Для этого включите режим правки.

Наведите курсор на блок с видео и нажмите на шестеренку.

Здесь вы можете выбрать источник видео, ID канала, сортировку видео и другие опции.

назадБлок «ВКонтакте» на главной Дополнительные блоки на главнойвперед
Дополнительные блоки на главной
В Аспро: Лайтшоп доступно добавление дополнительных блоков на главную страницу. Если вы хотите отдельно вынести какую-либо важную информацию, например, о компании, событиях или услугах, создайте дополнительный блок и разместите необходимый текст и баннеры на нем.
Создавайте произвольные блоки на главной, чтобы показать все преимущества. Берите за основу любой из готовых блоков. Скопированный блок сохранит настройки, появится в виджете и будет получать улучшения из обновлений. Вы также можете использовать блок с главной для произвольной верстки. Он будет отображаться в виджете для управления: перемещения или отключения.
Добавить и редактировать дополнительные блоки можно в административной части сайта. Для этого перейдите в Контент (1) → Дополнительные блоки на главной (aspro.lite) (2) → Дополнительные блоки на главной (3).

В инфоблок «Дополнительные блоки на главной» можно добавлять разделы, которые будут соответствовать блоку главной страницы в виджете и админке. Здесь можно добавить новый раздел (1), а также редактировать (2) и удалять (3) существующие при нажатии на «Гамбургер».

В этих разделах можно создавать элементы, которые будут соответствовать типам отображения дополнительного блока. Здесь можно добавить новый элемент (1). Когда элементы уже созданы, их можно изменить (2), деактивировать (3) и удалить (4) при нажатии на «Гамбургер».

Рассмотрим процесс на примере создания дополнительного блока на основе «О компании». Сначала необходимо скопировать блок в структуре сайта. Для этого перейдите в Контент (1) → Структура сайта (2) → Файлы и папки (3) → include (4) → mainpage (5) → components (6).

Скопируем существующую папку с файлами блока «О компании». Для этого нажмите на «Гамбургер» напротив нее и выберите «Копировать». Папка скопируется со всеми содержимыми файлами.

Переименуйте папку, например, в custom_company. Для этого нажмите на «Гамбургер» напротив скопированной папки и выберите «Переименовать». Название папки будет нашим символьным кодом при создании раздела для дополнительных блоков. Скопируйте это название, оно нам понадобится в дальнейшем.
Для корректной работы дополнительного блока название файла должно содержать именно нижнее подчеркивание — без тире и пробелов.
Название обязательно должно начинаться с «custom_», иначе будут ошибки.

Обязательно переименуйте все файлы, которые содержатся в этой папке. Нажмите на «Гамбургер» напротив каждого файла и выберите «Переименовать».

Чтобы текст блока был всегда одинаковый, необходимо отключить зависимость от региональности. Для этого в параметре компонента дополнительного блока очистите значение в поле «Регион». Сохраните изменения.

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

На вкладке «Раздел» заполним следующие поля:
- Раздел активен (1) — включает активность раздела.
- Родительский раздел (2) — задает уровень вложенности раздела.
- Название (3) — устанавливает название для блока, которое будет отображаться в виджете и админке.

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

После добавления раздела создадим тип отображения дополнительного блока. Для этого перейдите в список элементов раздела и нажмите «Добавить элемент».

При добавлении типа отображения дополнительного блока вам потребуется заполнить следующие поля на вкладке «Элемент»:
- Активность (1) — включает отображение типа в настройках.
- Период активности (2) — задает время показа типа блока.
- Название (3) — устанавливает название для типа, которое будет отображаться в виджете и административной части сайта.
- Символьный код (4) — кодом для элемента выступает название определенного файла из скопированной ранее папки. Например, в папке custom_company мы переименовывали несколько файлов. Именно они нас интересуют. Все настройки блока будут взяты из указанного файла.
- Сортировка (5) — задайте сортировку для типа отображения дополнительного блока.

На вкладке «Анонс» укажите картинку для отображения блока в виджете «Точная настройка».

На вкладке «Разделы» присвойте тип отображения необходимому разделу и сохраните изменения.

Перейдите в публичную часть сайта. Теперь в виджете настроек на вкладке «Главная» появился наш дополнительный блок. Активируйте его, тогда он появится на главной странице.

На этом этапе созданный нами дополнительный блок — точная копия оригинального блока. Чтобы сделать его уникальным, то есть заполнить другой информацией, картинками и видео, необходимо в инфоблоке создать элемент с новым содержимым и привязать его к текущему блоку через код.
Например, чтобы изменить содержимое дополнительного блока «О компании», перейдите в Контент (1) → Контент (aspro.lite) (2) → О компании (3).

Скопируйте элемент с контентом оригинального блока. Для этого нажмите на «Гамбургер» и выберите «Копировать».

Поскольку выбрать вы можете любой блок, настройки в окне редактирования будут отличаться в зависимости от этого блока. Все настройки содержимого блоков вы можете подробно изучить по другим урокам в разделе «Главная страница».
В окне редактирования элемента измените название и символьный код, чтобы эти параметры не совпадали с оригинальным блоком. Скопируйте измененный символьный код, он понадобится для настройки связи между элементом и дополнительным блоком. Настройте содержимое блока, добавьте свой текст, картинки и видео.

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

На вкладке «Основные параметры» найдите пункт «Код новости» и вставьте в поле скопированный символьный код. Теперь весь контент из созданного элемента отображается в дополнительном блоке на главной странице. Сохраните изменения.

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

Содержание главы:
назадБлок «Видеоотзывы» на главной странице Настройки оформления дополнительного блокавперед
Настройки оформления дополнительного блока
Настроить дополнительный блок можно тремя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Главная». В списке блоков главной страницы найдите созданный вами блок. Он должен идти сразу после стандартных блоков, но его можно перетаскивать курсором в другие части главной страницы. В настройках также можно включить отображение блока, установить разделитель для указания границы блока и назначить серый фон на весь блок (1). Выберите необходимый тип отображения блока, которые вы ранее назначали (2). Задайте верхние и нижние отступы, которые отделяют блок от соседних (3).

Административная часть сайта
Для настройки дополнительного блока необходимо перейти в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и кликнуть вкладку «Главная».

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

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

Чтобы добавить пользовательские блоки с товарами, в административной части сайта перейдите в Контент (1) → Дополнительные блоки на главной (aspro.lite) (2) → Дополнительные блоки на главной (3). В разделе уже будут созданы три дополнительных блока с товарами. Вы можете воспользоваться готовыми или создать новые.

В инфоблок «Дополнительные блоки на главной» можно добавлять разделы, которые будут соответствовать блоку главной страницы в виджете и админке. Здесь можно добавить новый раздел (1), а также редактировать (2) и удалять (3) существующие при нажатии на «Гамбургер».

В этих разделах можно создавать элементы, которые будут соответствовать типам отображения дополнительного блока. Здесь можно добавить новый элемент (1). Когда элементы уже созданы, их можно изменить (2), деактивировать (3) и удалить (4) при нажатии на «Гамбургер».

Рассмотрим процесс на примере создания дополнительного блока на основе «Каталог». Сначала необходимо скопировать блок в структуре сайта. Для этого перейдите в Контент (1) → Структура сайта (2) → Файлы и папки (3) → include (4) → mainpage (5) → components (6).

Скопируем существующую папку с файлами блока «Каталог» — catalog_tab. Для этого нажмите на «Гамбургер» напротив нее и выберите «Копировать» (1). Папка скопируется со всеми содержимыми файлами. Если вы используете готовые пользовательские блоки, то они представлены в папках custom_catalog, custom_catalog_2, custom_catalog_3 (2).

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

Обязательно переименуйте все файлы, которые содержатся в этой папке. Нажмите на «Гамбургер» напротив каждого файла и выберите «Переименовать».

Теперь подготовим новый блок в виджете. Вернемся в раздел «Дополнительные блоки на главной» и выберем «Добавить раздел» при нажатии на стрелку (1). Если вы хотите хотите воспользоваться готовыми пользовательскими блоками, нажмите на «Гамбургер» напротив необходимого раздела и нажмите «Изменить» (2).

В окне редактирования задайте активность раздела (1), уровень вложенности (2) и название (3), которое будет отображаться в виджете «Точная настройка».

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

После добавления раздела создадим тип отображения дополнительного блока. Для этого перейдите в список элементов раздела и нажмите «Добавить элемент».

При добавлении типа отображения дополнительного блока вам потребуется заполнить следующие поля на вкладке «Элемент»:
- Активность (1) — включает отображение типа в настройках.
- Период активности (2) — задает время показа типа блока.
- Название (3) — устанавливает название для типа, которое будет отображаться в виджете и административной части сайта.
- Символьный код (4) — кодом для элемента выступает название определенного файла из скопированной ранее папки. Например, в папке custom_catalog_4 мы переименовывали несколько файлов. Именно они нас интересуют. Все настройки блока будут взяты из указанного файла.
- Сортировка (5) — задайте сортировку для типа отображения дополнительного блока.

На вкладке «Анонс» по желанию укажите картинку для отображения блока в виджете «Точная настройка».

На вкладке «Разделы» присвойте тип отображения необходимому разделу и сохраните изменения.

Перейдите в публичную часть сайта. Теперь в виджете настроек на вкладке «Главная» появился наш дополнительный блок. Активируйте его, тогда он появится на главной странице.

На этом этапе созданный нами дополнительный блок — точная копия оригинального блока. Чтобы заполнить его другими товарами, перейдите в режим правки, наведите курсор на область блока и нажмите на шестеренку.

В параметрах компонента «Табы на главной» перейдите на вкладку «Источник данных» и найдите поле «Отображать товары». В этом поле вы можете выбрать два варианта:
- Отмеченные к отображению на главной странице — в блоке будут отображаться стандартно все товары, у которых стоит галка «Показывать на главной».
- Соответствующие пользовательскому фильтру — при выборе этого варианта ниже появляется новое поле «Фильтр товаров» в виде конструктора фильтра. Так вы сможете выводить необходимые вам товары из каталога.

Чтобы настроить пользовательский блок товаров по фильтру, выберите вариант «Соответствующие пользовательскому фильтру». После этого в конструкторе «Фильтр товаров» выберите условие (1). Напротив условия нажмите на три точки и укажите необходимый раздел товаров, который необходимо отображать в блоке (2). В нашем случае — это телефоны и смарт-часы.

Далее перейдите на вкладку «Дополнительные настройки». Здесь представлены следующие параметры:
-
Группировать товары по табам — если настройка отмечена, то ниже появляется поле «Тип табов».
-
Тип табов — выберите тип, по которому хотите отображать табы в блоке:
-
По значениям свойства типа “список” — табы распределятся по выбранному свойству. При выборе этого параметра ниже появляется поле «Свойство со значениями для табов», в котором можно задать необходимое свойство. По умолчанию — это стикер.
-
По дочерним разделам — если указан параметр «Ограничивать разделом (ID) / Ограничивать разделом (символьный код)», то в блоке будут отображаться дочерние подразделы ограничивающего раздела. Если же этот параметр не указан — в блоке выведутся корневые разделы каталога.
-
Заголовок блока — укажите заголовок для блока.

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

назадНастройки оформления дополнительного блока Настройки шапки и менювперед
Настройки шапки и меню
назадНастройка пользовательского блока с товарами по фильтру Типы и состав шапкивперед
Типы и состав шапки
В решении вы можете детально настроить верхнюю часть сайта — шапку. Редактируйте внешний вид шапки в соответствии с требованиями вашего проекта.

На выбор вам предлагается 4 варианта шапок с различными настройками.
Настроить типы шапок можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Шапка». Здесь можно выбрать необходимый вариант шапки.

У каждого типа шапок есть свой набор настроек (1). Можно задать ширину, фон на главной, каталог и популярные разделы. Каждому варианту шапок можно определить состав (2).

Рассмотрим, чем отличаются варианты шапок по ширине контента.
- шапка по ширине контента:

- шапка не по ширине контента:

В шапке можно подключить или отключить:
- Каталог в кнопке.
- Популярные категории.
- Телефоны.
- Переключатель оформления.
- Личный кабинет.
- Сравнение товаров.
- Избранное.
- Корзину.
- Слоган (только в 4 типе шапки).

Административная панель
Для настройки оформления раздела в административной панели необходимо перейти в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3).

Во вкладке «Шапка» выберите необходимый тип шапки и настройте ее.

Сохраните изменения.
назадНастройки шапки и меню Фиксированная шапкавперед
Фиксированная шапка
Включайте фиксированную шапку сайта, чтобы пользователь видел меню, строку поиска по сайту и основную информацию, даже если он находится внизу страницы. Активировать ее можно как в публичной, так и в административной части сайта.

Чтобы включить фиксированную шапку в публичной части, перейдите в «Точную настройку», далее в разделе «Шапка» перетащите ползунок «Фиксированная шапка сайта» в нужную сторону. Ниже вы можете определить ее состав.

Для управления настройкой через административную панель перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и кликните вкладку «Шапка».

Поставьте галку напротив пункта «Фиксированная шапка сайта», настройте ее и нажмите «Применить».

назадТипы и состав шапки Загрузка мобильного меню и меню в фиксированной шапке только при первом отображениивперед
Загрузка мобильного меню и меню в фиксированной шапке только при первом отображении
В решении реализовано 3 типа меню: меню в шапке, фиксированное меню и мобильное меню. Это значит, что в коде дублируются эти элементы.
Существует опция, которая позволяет избежать тройного дублирования пунктов меню в исходном коде каждой страницы сайта. Поисковые системы не будут фиксировать дубли страниц. Это помогает уменьшить размер композитного кеша на проектах с большим количеством разделов каталога.
На мобильных устройствах содержимое мобильного меню подгрузится отдельным AJAX-запросом при первом его открытии. Для устройств с более широким экраном содержимое меню в фиксированной шапке также подгрузится при ее первом появлении.
Обратите внимание, что у пользователей с медленным Интернетом может быть задержка при этой первой загрузке.
Чтобы активировать настройку, в административной части сайта перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и кликните вкладку «Верхнее меню». Прокрутите вниз до раздела «Меню в шапке», поставьте галку в поле «Загружать мобильное меню и меню в фиксированной шапке только при первом отображении».

назадФиксированная шапка Меню в шапкевперед
Меню в шапке
назадЗагрузка мобильного меню и меню в фиксированной шапке только при первом отображении Настройки оформления выпадающего меню шапкивперед
Настройки оформления выпадающего меню шапки
Выпадающее меню выводится при клике на каталог или раздел в шапке сайта. В Аспро: Лайтшоп вы можете задать уровень вложенности и количество видимых пунктов в верхнем меню, а также настроить его оформление.

Настроить выпадающее меню можно двумя способами:
- через виджет в публичной части;
- в административном разделе.
Рассмотрим каждый вариант подробнее.
Виджет в публичной части
Перейдите в «Точную настройку», далее в раздел «Верхнее меню». Здесь можно выбрать тип меню (1),
включить большое меню (2) и рекламный блок (3).

Рассмотрим визуально разницу меню с рекламным блоком и без него.
- меню с рекламным блоком;

- меню без рекламного блока.

Ниже в настройке «Изображения в широком меню» можно выбрать способ показа изображений у разделов каталога и услуг (4). Далее есть возможность изменить положение этих изображений в меню (5), а также уровень вложенности меню (6).

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

- картинки

- иконки

Положение изображений можно установить сверху и слева от меню.
- положение изображений: сверху

- положение изображений: слева

Уровней вложенности меню в шапке может быть 2, 3, 4 или 5 (если не установлена настройка «Каталог в кнопке»).
- Второй уровень вложенности меню — видны только корневые категории.

- Третий уровень вложенности меню — появляются разделы категорий.

- Четвертый уровень вложенности меню — становятся видны подразделы разделов.

Чтобы предоставить пользователю возможность раскрывать 4 уровень вложенности меню по клику, необходимо во вкладке «Верхнее меню» включить соответствующую настройку.

Рассмотрим подробно, как работает эта настройка.
- Четвертый уровень вложенности не раскрывается по клику, а сразу выводится в выпадающем меню.

- Четвертый уровень вложенности меню раскрывается только по клику.

Административная панель
Для настройки оформления выпадающего меню в административной панели необходимо перейти в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и кликнуть вкладку «Верхнее меню». На вкладке «Верхнее меню» доступны те же настройки, что рассматривались ранее.

Здесь же вы сможете не только выбрать уровень вложенности меню, но и установить отображаемое количество подпунктов меню. Создайте наглядное и удобное меню для пользователей.

Выберите необходимые настройки и сохраните их.
назадМеню в шапке Редактирование пунктов меню в шапкевперед
Редактирование пунктов меню в шапке
Вы можете отредактировать пункты меню в шапке сайта.

Чтобы редактировать пункты меню в публичной части, перейдите в режим правки и наведите курсор на область с пунктами меню. Нажмите кнопку «Редактировать пункты меню».

В окне редактирования можно перетаскивать пункты меню (1), менять их название (2) и редактировать ссылку (3), на которые они ведут посетителя при клике по ним. Есть возможность открыть диалог выбора файла, перемещать вверх/вниз и удалять пункты меню (4).

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

Включить отображение рекламного блока можно в публичной части сайта. Перейдите в «Точную настройку», далее в раздел «Верхнее меню» и активируйте настройку «Отображать рекламный блок».

Для активации настройки в административной части сайта необходимо перейти в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) и кликнуть вкладку «Верхнее меню». Поставьте галку в поле «Отображать рекламный блок».

Добавление рекламного баннера в выпадающее меню шапки
Для добавления рекламного баннера в административной части сайта перейдите в Контент (1) → Реклама (aspro.lite) (2) → Баннеры в меню (3).

Добавьте новый рекламный баннер (1) или измените (2), деактивируйте (3), скопируйте (4) или удалите (5) существующий баннер.

Рассмотрим подробнее настройки баннера. На вкладке «Элемент» вы найдете следующие поля:
- Активность (1) — включает отображение баннера.
- Период активности (2) — задает время показа баннера.
- Название (3) — установить название для баннера, которое будет отображаться в административной части.
- Сортировка (4) — индекс сортировки.
- Ссылка с баннера (5) — назначить url страницы, куда пользователь будет переходить при клике на баннер.
- Показ в пункте меню (6) — указать пункт в большом меню для баннера.

На вкладке «Анонс» загрузите активную картинку для баннера и сохраните изменения.

назадРедактирование пунктов меню в шапке Популярные категории каталога в шапкевперед
Популярные категории каталога в шапке
В Аспро: Лайтшоп доступен вывод популярных категорий каталога в шапку сайта для удобной навигации.
Отображение популярных категорий предусмотрено в 1 и 3 варианте шапки.
Популярные категории в 1 варианте шапки сайта

Популярные категории в 3 варианте шапки сайта

Настройка вывода популярных категорий в публичной части сайта
Перейдите в виджет «Точная настройка» и выберите вкладку «Шапка». В пункте «Варианты шапок» для необходимого варианта активируйте настройку «Популярные категории в шапке». Сохраните изменения.

Настройка вывода популярных категорий в административной части сайта
Перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) → Шапка (4).

В блоке «Варианты шапок» для необходимого варианта поставьте галку напротив поля «Популярные категории в шапке» и нажмите «Применить».

Добавление и изменение разделов в популярных категориях
Чтобы добавить новые разделы в популярные категории в шапке или изменить ссылки у старых, в административной части сайта перейдите в Контент (1) → Каталог (aspro.lite) (2) → Мегаменю (3) → Категории в шапке (4).

Чтобы добавить новый раздел в шапку, нажмите на стрелку и выберите «Добавить раздел» (1). Для изменения ссылки у существующей категории нажмите на «Гамбургер» напротив необходимого поля и выберите «Изменить» (2).

В окне редактирования задайте активность раздела (1), пропишите название (2) и настройте порядок отображения раздела (3).

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

После внесения изменений сохраните настройку.
назадРекламный блок в выпадающем меню шапки Каталогвперед
Полная версия курса: Аспро: Лайтшоп в базе знаний Аспро. Вопросы по внедрению, настройке или обновлению решения — свяжитесь со мной.
Работаю удалённо — цены и условия для вашего города: