> For the complete documentation index, see [llms.txt](https://wiki.reezonly.ru/space/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.reezonly.ru/space/obuchenie/produkty/vkladka-stranica-produkta.md). # Вкладка Страница продукта *Время чтения: 15 минут* {% hint style="info" %} 📢 Страница продукта – это страница сайта или продукта (курса), где отображается важная информация об образовательно продукте. В разделе **Страница продукта** вы можете редактировать контент страницы, который будут видеть пользователи. {% endhint %} Страница является важной часть вашего образовательного продукта, она подробно рассказывается пользователю о курсе: описание, содержание, авторы и другую важную информацию, которая простимулирует пользователя приобрести продукт. ## Как открыть Страницу продукта Чтобы открыть страницу продукта и добавить на неё контент, перейдите в раздел **Страницы продуктов** и создайте новую страницу или выберите уже существующую.

1. В разделе **Страницы Продуктов** выберите нужный вам курс 2. В открывшейся карточке продукта нажмите на **Страница продукта** в верхней части экрана. ## Работа с блоками **Страница продукта** создается из блоков. Порядок расположения блоков задается вами и повторяется на странице, которую видят пользователи.

1. Кликните на кнопку + 2. Выберите нужный тип блока ### Настройка блоков В каждом блоке есть кнопки, с помощью которых вы можете выполнить базовую настройку блока. Кнопки для настройки блока:

1. Настройка видимости блока на различных устройствах. С помощью этой настройки вы можете скрыть отображения блока на телефоне или компьютере. {% hint style="success" %} Таким образом вы можете разделять блоки и информацию, показывая расширенный блок с подробной информацией только на компьютерах, а сокращённую версию — для мобильных устройств. Например, **Скрыть на смартфоне** для ПК версии и **Скрыть на ПК** для мобильной версии. Достаточно клика на кнопку: * Отображение блока только на телефоне

* Отображение блока только на ПК:

{% endhint %} **2. Видимость** - настройка пользователей, которые могут видеть блок * Все пользователи – блок доступен для просмотра всем пользователям:

* Только выбранные группы – доступ есть у пользователей из конкретных групп.

* Никто – блок будет скрыт для всех пользователей:

3. **Перемещение блока.** С помощью этих двух кнопок вы можете перемещать блок по структуре страницы вверх или вниз, тем самым настраивая нужный вам порядок контента на странице 4. **Настройки блока.** Кнопка Н**астройки блока** открывает интерфейс с двумя основными вкладками: **Настройки** и **Сегментация:** {% tabs %} {% tab title="Настройки" %} Вкладка **«Настройки»** предназначена для управления визуальным отображением блока на странице. Здесь доступны следующие параметры:

1. **Отображение на устройствах** — можно настроить, как блок будет показываться на разных устройствах: отдельно для компьютеров (ПК) и мобильных устройств. Это позволяет оптимизировать контент под особенности разных экранов. 2. **Отступы** — можно задать верхний и нижний отступы блока, чтобы контролировать расстояние между элементами на странице и создать аккуратный визуальный вид. 3. **Стиль блока** — выбор визуального оформления текста внутри блока. Доступны три варианта: * *Текст без фона* — простой текст на прозрачном фоне. * *Текст на подложке* — текст размещается поверх полупрозрачной или цветной подложки, которая выделяет его фоном. * *Текст на фоне во всю ширину* — текст располагается на фоне, который занимает всю ширину экрана, создавая эффект широкого баннера или выделенного раздела. {% endtab %} {% tab title="Сегментация" %} Вкладка **«Сегментация»** позволяет настроить условия показа блока, например, для каких групп пользователей или на каких устройствах он будет доступен, помогая показывать релевантный контент в нужном контексте. **А как мне настроить сегментацию по группам на блок?** 1. Для настройки сегментации кликните на кнопку настроек на блоке:

2. В открывшемся окне перейдите на вкладку сегментация:

На данной вкладке вы можете настроить: * **Кто видит этот блок:** * Все пользователи * Только выбранные группы * никто * **Группы** - выбор групп доступен, только при выборе настройки **Только выбранные группы.** 3. Выберите необходимую вам настройку {% hint style="success" %} Вы отлично настроили сегментацию на блок! {% endhint %} {% endtab %} {% endtabs %} 5. **Удаление блока.** Данный параметр полностью удаляет блок. {% hint style="warning" %} После внесения изменений на странцие продукта, не забудьте сохранить изменения с помощью кнопки в нижней части экрана! {% endhint %} ## Типы блоков При построении **Страницы продукта** используются различные блоки (всего их 11), каждый из которых служит для выполнения своей задачи, придает странице индивидуальный стиль и функциональность. У некоторых блоков есть индивидуальные настройки. Далее мы расскажем о каждом блоке и его предназначение: ### Блок Обложка

	Cover image
Отображение блока в редакторе страницы	Снимок экрана 2025-08-21 в 15.57.56.png
Отображение блока на пользовательской части	Снимок экрана 2025-08-21 в 16.16.11.png

Мощный визуальный блок страницы, который занимает всю ширину экрана и служит "лицом" вашего контента. Его главная задача — сразу привлечь внимание посетите. В этом блоке размещается: * **Заголовок** - ясно и конкретно сообщает о теме продукта (курса). * **Подзаголовок** - предоставляет дополнительную информацию, уточняет контекст, меньше по размеру. * **Кнопка записи на курс (CTA)** - стимулирует пользователей к действию, например, записи на курс. Как только пользователь нажимает на кнопку CTA, он совершает[ действие](https://wiki.reezonly.com/space/obuchenie/stranicy-produktov/produkt), которое заранее настроено вами. Эффективно настроенный блок **Обложка** не только подчеркивает ваш дизайн и презентации продукта, но и является ключевым инструментом для увеличения заинтересованности целевой аудитории и стимулирования её к следующим шагам в путешествии по вашему курсу. ### Блок Текст Фундаментальный блок страницы, который отвечает за предоставление и организацию контента. Это может включать описательный текст, изображения, списки и другие материалы. Данный блок предоставляет гибкие возможности для вставки элементов и форматирования текста, позволяя создавать четко структурированные и легко усваиваемые разделы информации. Отображение блока текст на подложке, со стороны администратора и со стороны пользователя:

	Cover image
Отображение блока в редакторе страниц	Снимок экрана 2025-08-21 в 16.21.32.png
Отображение блока на пользовательской части	Снимок экрана 2025-08-21 в 16.21.43.png

Для обеспечения читабельности и эстетики внешнего вида, блок предусматривает настройку отступов по всем четырем направлениям. В зависимости от выбранного стиля и цели, блок может быть реализован в одном из следующих форматов: * **Текст без фона** - содержимое располагается на прозрачном фоне с соблюдением общих отступов от краев страницы. * **Текст на подложке** - заключен в контейнер с цветовым фоном, который выделяет блок на общем фоне страницы. * **Текст на фоне во всю ширину** - Текстовый блок растягивается на всю ширину страницы. ### Блок Преимущества Динамичный и визуально привлекательный блок страницы, предназначенный для подробного описания ключевых особенностей, уникальных предложений или преимуществ продукта (курса), представляемых компанией.

	Cover image
Отображение блока в редакторе страниц	Снимок экрана 2025-09-03 в 12.49.00.png
Отображение блока на пользовательской части	Снимок экрана 2025-09-03 в 12.49.14.png

Он состоит из набора карточек, каждая из которых фокусирует внимание на отдельном аспекте предложения, что позволяет потенциальному клиенту быстро оценить все преимущества. Также вы можете включить функцию **Карточки с фоном**, она переключает режим отображения карточки, добавляя или убирая фон/подложку в выбранном цвете. ### Блок Авторы Специализированный блок страницы, который отображает информацию об авторах контента, таких как создатели контента, эксперты отрасли, команда проекта или инструкторы курсов. Он представлен в форме карточек, оформленных единообразно для каждого автора, что позволяет посетителям сайта быстро ознакомиться с представленными экспертами и их ролями в контексте продукта (курса).

	Cover image
Отображение блока в редакторе страниц	Снимок экрана 2025-09-03 в 12.51.17.png
Отображение блока на пользовательской части	Снимок экрана 2025-09-03 в 12.51.29.png

### Блок Каталог {% hint style="info" %} Блок Каталог — это блок, который пользователь может настроить под нужды Академии. Он служит для отображения карточек с определённой тематикой — например, каталог по курсам или по страницам сайта определённого типа (например, новости или блог). Выбор карточек для отображения происходит на основе заданных тегов, что позволяет гибко формировать содержимое каталога по интересующим параметрам и тематикам. Таким образом, каталог предоставляет удобный и структурированный способ представления и навигации по контенту с похожими характеристиками. {% endhint %}

1. Настройки отображения внешнего вида каталога и фильтров 2. Настройка фильтров для отображения продуктов, которые войдут в каталог, с помощью тегов #### Как настроить отображение карточек продуктов Для настройки отображения продуктов, вам необходимо выполнить несколько простых действий:

1. Кликните на кнопку **Добавить фильтр**

2. В открывшимся окне введите **Название фильтра** 3. Далее **Выберите тип фильтра: Все теги** или **Любой из тегов**

В чем различие фильтров Все теги и Любой из тегов?

**Все теги** - это настройка, которая позволяет в каталоге отображать карточки с выбранной **комбинацией тегов**. Т.е. В каталоге отобразятся только те карточки, которым присвоены все выбранные теги в каталоге. **Любой из тегов** - это настройка, которая позволяет отображать карточки, в которых есть **хотя б 1 из выбранных вами тегов** {% hint style="info" %} Если у вас все еще остались вопросы, то ниже можете ознакомиться с наиболее распространенными **кейсами** создания каталогов и другими частыми вопросами. {% endhint %}

4. Кликните на **Добавьте теги** 5. Выберите необходимые вам **Теги** 6. Кликните на **Добавить** и еще раз **Добавить**

А что будет если я выберу несколько фильтров в каталоге?

{% hint style="success" %} Каждый фильтр содержит в себе свой набор карточек со своими настройками (**Все теги** и **Любой из тегов**). Поэтому создавая 2 фильтра вы настраиваете 2 независимых набора карточек, в каталоге будет отображаться и 1 фильтр с карточками и 2 фильтр с карточками. {% endhint %}

{% hint style="success" %} Более подробно как создать теги и категории вы можете узнать в [этой ](https://wiki.reezonly.com/space/nastroiki/upravlenie-tegami)статье. {% endhint %} #### Живые кейсы, как можно настроить каталог и теги:

Кейс 1: Как настроить каталоги используя настройку Все теги?

Представим, что у вас есть задача сделать 3 каталога: 1. Каталог с преподавателями направления Разработки 2. Каталог с новостями направления Менеджмент 3. Каталог с курсами направления Тестирование Шаг 1. Подготовьте теги Для этого в разделе **Теги** вам необходимо создать: 1. Категория общие: 1. тег Новости 2. тег Преподаватели 3. тег Курс 2. Категория Направления обучения: 1. Тег Разработка 2. Тег Тестирование 3. Тег менеджмент Шаг 2. Тегируйте страницы Для этого переходим на **страницу сайта/курса**, в раздел **Отображение в каталоге** и: 1. Для страниц с преподавателями направления Разработки выставляем теги: Преподаватель (категория Общие) и Разработка (категория Направления обучения) 2. Для страниц с новостями направления Менеджмент выставляем теги: Новости ( категория Общие) и Менеджмент (категория Направления обучения) 3. Для страниц с курсами направления Тестирование выставляем теги: Курс (категория Общие) и Тестирование (Направления обучения) Шаг 3. Настройте каталог 1. в Каталог с преподавателями направления Разработки, выбираем настройку **Все теги** и теги **Преподаватель** (категория Общие) и **Разработка** (категория Направления обучения) 2. в Каталог с новостями направления Менеджмент, выбираем настройку **Все теги** и теги **Новости** ( категория Общие) и **Менеджмент** (категория Направления обучения) 3. в Каталог с курсами направления Тестирование, выбираем настройку **Все теги** и теги **Курс** (категория Общие) и **Тестирование** (Направления обучения) {% hint style="success" %} Таким образом у нас получилось 3 разных каталога. {% endhint %}

Кейс 2: Как настроить каталог используя настройку Любой из тегов

Представим, что у вас есть задача настроить каталог с курсами, преподавателями и новостями Шаг 1. Подготовьте теги. Для этого в разделе **Теги** вам необходимо создать: Категория Общие: 1. тег Новости 2. тег Преподаватели 3. тег Курс Шаг 2: Тегируйте страницы (каждой странице присвойте 2 тега) Для этого переходим на **страницу сайта/курса**, в раздел **Отображение в каталоге** и для каждого типа страницы присваиваем соответствующий тег (для страницы с новостью присваиваем тег новости, для страницы преподавателя присваиваем тег Преподаватели и т.д.) Шаг 3: Настройте основной каталог. Переходим в **каталог**, выбираем настройку **Любой из тегов** и теги **Новости**, **Преподаватели и Курс** {% hint style="success" %} Таким образом в каталоге будут отображаться все карточки, которые содержать в себе хотя б 1 тег из выбранных (**Новости**, **Преподаватели** или **Курс)** {% endhint %}

#### Работа с фильтрами в каталоге В каталоге есть возможность настройки фильтров для отображаемых продуктов:

Фильтры над каталогом: 1. **Календарь** - отображение календаря старта продуктов 2. **Поиск** - в каталоге появлется строка с возможностью поиска по названию продукта 3. **Фильтр по основной категории** - фильтр, в котором выбираются категории продуктов, используемых в каталоге. Пользователю будут отражены **теги** выбранных **Категорий.** Фильтры слева от каталога: 1. Стоимость - стоимость оплаты прохождения продукта 2. Период обучения 3. Создать фильтр - возможность создать пользовательский фильтр Отображение каталога с дополнительными фильтрами, а также строкой поиска:

	Cover image
Отображение блока в редакторе страниц	Снимок экрана 2025-09-08 в 08.27.20.png
Отображение блока на пользовательской части	Снимок экрана 2025-09-08 в 08.27.04.png

#### Живые кейсы, как можно настроить фильтры:

Кейс: Как настроить фильтрацию и поиск в каталоге?

Представим, что у вас есть задача настроить общий каталог со всеми типами контента (курсы, новости, преподаватели), с фильтрами по типам контента (Курсы/Новости/Преподаватели) и по направлениям обучения (Разработка/Тестирование/Менеджмент). Шаг 1: Подготовьте теги Категория “Общие” (для типов контента): 1. Тег Курс 2. Тег Новости 3. Тег Преподаватели Категория “Направления обучения” (для фильтрации): 1. Тег Разработка 2. Тег Тестирование 3. Тег Менеджмент Шаг 2: Тегируйте страницы (каждой странице присвойте 2 тега) | Тип страницы | Категория Общие | Категория Направления обучения | | ------------- | ----------------- | -------------------------------------------------------------------- | | Курсы | Тег курс | в зависимости от направления Тег Разработка/Тестирование/ Менеджмент | | Новости | Тег новости | в зависимости от направления Тег Разработка/Тестирование/ Менеджмент | | Преподаватели | Тег преподаватели | в зависимости от направления Тег Разработка/Тестирование/ Менеджмент | Шаг 3: Настройте основной каталог (как в кейсе 2) Перейдите в каталог, выберите настройку фильтра **Любой из тегов**, выберите теги из категории Общие (Курс, Новости, Преподаватели). В каталоге отображаются все карточки, которые имеют хотя б из выбранных (Курс, Новости, Преподаватели) тегов. Шаг 4: Добавьте **Пользовательские фильтры** Перейдите в настройки, кликните на вкладку **Пользовательские фильтры**: * выберите **По основной категории - категория Общие** * выберите **Создать фильтр** - Категория **Направления обучения** - затем придумайте заголовок для фильтра {% hint style="success" %} Таким образом **над каталогом** у вас будут отображаться **фильтры** (По основной категории) **Курсы, Новости, Преподаватели**, а слева фильтры по направлениям: Разработка, Тестирование, Менеджмент. {% endhint %}

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

1. **+ Добавить** - кнопка, создающая новую карточку. 2. **Слайдер** - переключает режим отображения карточек: * **Выключен** - карточки будут отображаться друг под другом. * **Включен** - карточки будут отображаться друг за другом, при переключении с помощью стрелок. 3. **Добавление изображения** - изображение добавится для выбранной карточки. 4. **Удаление выбранной карточки** **Пример блока Баннеры** Отображение блока в редакторе страниц: