> 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/stranicy-saita/sozdanie-stranicy-saita/konstruktor-stranicy-saita.md).

# Конструктор страницы сайта

*Время чтения: 15 минут*

{% hint style="info" %}
Страница сайта служат для представления общей или тематической информации, могут содержать навигационные элементы, контактные данные и другие блоки для взаимодействия с пользователем. 

В отличии от страницы продукта, страница сайта не синхронизируется с продуктом. 
{% endhint %}

Редактор блоков страниц сайта не отличается от редактора блоков страницы продуктов. 

## Работа с блоками <a href="#h_efa9dc7113" id="h_efa9dc7113"></a>

**Страница сайта** создается из блоков. Порядок расположения блоков задается вами и повторяется на странице, которую видят пользователи.

<figure><img src="/files/cRzmYn3mWltZg21Tua84" alt=""><figcaption><p>№2. Добавление блока</p></figcaption></figure>

1. Кликните на кнопку +
2. Выберите нужный тип блока

### Настройка блоков <a href="#h_6f4f8c2f82" id="h_6f4f8c2f82"></a>

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

<figure><img src="/files/HAAHe1ZIHrzcZqtGR7vH" alt=""><figcaption><p>№3. Кнопки настройки блока</p></figcaption></figure>

1. Настройка видимости блока на различных устройствах. С помощью этой настройки вы можете скрыть отображения блока на телефоне или компьютере.&#x20;

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

Достаточно клика на кнопку:

* Отображение блока только на телефоне

<p align="center"><img src="/files/vKnX2jyBy5XPFRGsU6sx" alt="" data-size="original"></p>

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

<p align="center"><img src="/files/xju7rQR4rqPzJWJQ2zvM" alt=""></p>
{% endhint %}

**2. Видимость** - настройка пользователей, которые могут видеть блок

* Все пользователи – блок доступен для просмотра всем пользователям:

<figure><img src="/files/2fy5ltq5ZZ9z4LhgNZfe" alt="" width="295"><figcaption></figcaption></figure>

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

<figure><img src="/files/rPsWJulSpOcHcsOgwYGz" alt="" width="334"><figcaption></figcaption></figure>

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

<figure><img src="/files/b70jwXDukvx2fS4NQAB3" alt="" width="563"><figcaption></figcaption></figure>

3. &#x20;**Перемещение блока.** С помощью этих двух кнопок вы можете перемещать блок по структуре страницы вверх или вниз, тем самым настраивая нужный вам порядок контента на странице
4. **Настройки блока.** Кнопка Н**астройки блока** открывает интерфейс с двумя основными вкладками: **Настройки** и **Сегментация:**

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

<figure><img src="/files/EpJd7mrwIoJHQpyPvxCA" alt="" width="351"><figcaption></figcaption></figure>

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

* *Текст без фона* — простой текст на прозрачном фоне.
* *Текст на подложке* — текст размещается поверх полупрозрачной или цветной подложки, которая выделяет его фоном.
* *Текст на фоне во всю ширину* — текст располагается на фоне, который занимает всю ширину экрана, создавая эффект широкого баннера или выделенного раздела.
  {% endtab %}

{% tab title="Сегментация" %}
Вкладка **«Сегментация»** позволяет настроить условия показа блока, например, для каких групп пользователей или на каких устройствах он будет доступен, помогая показывать релевантный контент в нужном контексте.

**А как мне настроить сегментацию по группам на блок?**

1. Для настройки сегментации кликните на кнопку настроек на блоке:

<figure><img src="/files/ZsvWIOodOjhdYOavwPbx" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/GRAW77NrWke4lhBQGKNs" alt=""><figcaption></figcaption></figure>

На данной вкладке вы можете настроить:

* **Кто видит этот блок:**
  * Все пользователи
  * Только выбранные группы
  * никто
* **Группы** - выбор групп доступен, только при выборе настройки **Только выбранные группы.**&#x20;

3. Выберите необходимую вам настройку&#x20;

{% hint style="success" %}
Вы отлично настроили сегментацию на блок!
{% endhint %}
{% endtab %}
{% endtabs %}

5. **Удаление блока.** Данный параметр полностью удаляет блок.&#x20;

{% hint style="warning" %}
После внесения изменений на странцие продукта, не забудьте сохранить изменения с помощью кнопки в нижней части экрана!
{% endhint %}

## Типы блоков <a href="#h_3bf01e8dc0" id="h_3bf01e8dc0"></a>

При построении **Страницы сайта** используются различные блоки (всего их 10), каждый из которых служит для выполнения своей задачи, придает странице индивидуальный стиль и функциональность. У некоторых блоков есть индивидуальные настройки.

Далее мы расскажем о каждом блоке и его предназначение:

### Блок Обложка <a href="#h_5a9cde1e7b" id="h_5a9cde1e7b"></a>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Отображение блока в редакторе страницы</td><td><a href="/files/Bp7ILGez5YDe6S4JNjjT">/files/Bp7ILGez5YDe6S4JNjjT</a></td></tr><tr><td>Отображение блока на пользовательской части</td><td><a href="/files/4wSAJozEa44QuNanIWHW">/files/4wSAJozEa44QuNanIWHW</a></td></tr></tbody></table>

Мощный визуальный блок страницы, который занимает всю ширину экрана и служит "лицом" вашего контента. Его главная задача — сразу привлечь внимание посетите. В этом блоке размещается:

* **Заголовок** - ясно и конкретно сообщает о теме продукта (курса).
* **Подзаголовок** - предоставляет дополнительную информацию, уточняет контекст, меньше по размеру.
* **Кнопка записи на курс (CTA)** - стимулирует пользователей к действию, например, записи на курс.

Как только пользователь нажимает на кнопку CTA, он совершает[ действие](https://wiki.reezonly.com/space/obuchenie/stranicy-produktov/produkt), которое заранее настроено вами.

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

### Блок Текст <a href="#h_740312c49b" id="h_740312c49b"></a>

Фундаментальный блок страницы, который отвечает за предоставление и организацию контента. Это может включать описательный текст, изображения, списки и другие материалы. Данный блок предоставляет гибкие возможности для вставки элементов и форматирования текста, позволяя создавать четко структурированные и легко усваиваемые разделы информации.&#x20;

Отображение блока текст на подложке, со стороны администратора и со стороны пользователя:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Отображение блока в редакторе страниц</td><td><a href="/files/2c687Ngctzx1bntQ6Lzg">/files/2c687Ngctzx1bntQ6Lzg</a></td></tr><tr><td>Отображение блока на пользовательской части</td><td><a href="/files/mJomwqzDCEWE5VIYfEe6">/files/mJomwqzDCEWE5VIYfEe6</a></td></tr></tbody></table>

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

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

### Блок Преимущества <a href="#h_7b53cda50f" id="h_7b53cda50f"></a>

{% tabs %}
{% tab title="Отображение блока в редакторе страниц" %}

<figure><img src="/files/DOtfjy0eFMyDKXGWsRdE" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Отображение блока на пользовательской части" %}

<figure><img src="/files/WRzyqqhiEAL77WeyaK24" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Отображение блока в редакторе страниц" %}

<figure><img src="/files/BqivQhusLjYvXiY1MQAC" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Отображение блока на пользовательской части" %}

<figure><img src="/files/0uaPrrZYq6sadAzGA3up" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

Также вы можете включить функцию **Карточки с фоном**, она переключает режим отображения карточки, добавляя или убирая фон/подложку в выбранном цвете.

### Блок Авторы <a href="#h_77e2d735a5" id="h_77e2d735a5"></a>

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

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

{% tabs %}
{% tab title="Отображение блока в редакторе страниц" %}

<figure><img src="/files/DOtfjy0eFMyDKXGWsRdE" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Отображение блока в редакторе страниц" %}

<figure><img src="/files/WRzyqqhiEAL77WeyaK24" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Блок Каталог <a href="#h_31a951792b" id="h_31a951792b"></a>

{% hint style="info" %}
Блок Каталог  — это блок, который пользователь может настроить под нужды Академии.

Он служит для отображения карточек с определённой тематикой — например, каталог по курсам или по страницам сайта определённого типа (например, новости или блог).&#x20;

Выбор карточек для отображения происходит на основе заданных тегов и меток, что позволяет гибко формировать содержимое каталога по интересующим параметрам и тематикам. Таким образом, каталог предоставляет удобный и структурированный способ представления и навигации по контенту с похожими характеристиками.
{% endhint %}

<figure><img src="/files/r8JnMwK7QNkpXsTPtkK0" alt="" width="563"><figcaption></figcaption></figure>

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

#### Как настроить отображение карточек продуктов

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

<figure><img src="/files/nRmRFZKn0f5wdHM0VACd" alt="" width="563"><figcaption></figcaption></figure>

1. Кликните на кнопку **Добавить фильтр**
2. В открывшимся окне выберите **теги** и/или **метки**
3. Кликните на **Добавьте**

<details>

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

<figure><img src="/files/mrVDs3mAd1Ku30ehP5CI" alt="" width="260"><figcaption></figcaption></figure>

{% hint style="success" %}
Каждый фильтр содержит в себе свой набор карточек со своими настройками (**Все теги** и **Любой из тегов**).&#x20;

Поэтому создавая 2 фильтра вы настраиваете 2 независимых набора карточек, в каталоге будет отображаться и 1 фильтр с карточками и 2 фильтр с карточками.&#x20;
{% endhint %}

</details>

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

#### Работа с фильтрами в каталоге

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

<figure><img src="/files/jGknJdoOz9GUlSvbUYUx" alt=""><figcaption></figcaption></figure>

Фильтры над каталогом:&#x20;

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

Фильтры слева от каталога:

1. Стоимость - стоимость оплаты прохождения продукта
2. Период обучения&#x20;
3. Создать фильтр - возможность создать пользовательский фильтр

Отображение каталога с дополнительными фильтрами, а также строкой поиска:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Отображение блока в редакторе страниц</td><td><a href="/files/jobyTKxXldjfsAb6sbcs">/files/jobyTKxXldjfsAb6sbcs</a></td></tr><tr><td>Отображение блока на пользовательской части</td><td><a href="/files/HmDLx4h7kVltOIiMK5wU">/files/HmDLx4h7kVltOIiMK5wU</a></td></tr></tbody></table>

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

<details>

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

Представим, что у вас есть задача настроить общий каталог со всеми типами контента (курсы, новости, преподаватели), с фильтрами по типам контента (Курсы/Новости/Преподаватели) и по направлениям обучения (Разработка/Тестирование/Менеджмент).

Шаг 1: Подготовьте теги

Категория “Общие” (для типов контента):

1. Тег Курс
2. Тег Новости
3. Тег Преподаватели

Категория “Направления обучения” (для фильтрации):

1. Тег Разработка
2. Тег Тестирование
3. Тег Менеджмент

Шаг 2: Тегируйте страницы (каждой странице присвойте 2 тега)

| Тип страницы  | Категория Общие   | Категория Направления обучения                                       |
| ------------- | ----------------- | -------------------------------------------------------------------- |
| Курсы         | Тег курс          | в зависимости от направления Тег Разработка/Тестирование/ Менеджмент |
| Новости       | Тег новости       | в зависимости от направления Тег Разработка/Тестирование/ Менеджмент |
| Преподаватели | Тег преподаватели | в зависимости от направления Тег Разработка/Тестирование/ Менеджмент |

Шаг 3: Настройте основной каталог (как в кейсе 2)

Перейдите в каталог, выберите настройку фильтра **Любой из тегов**, выберите теги из категории Общие (Курс, Новости, Преподаватели). В каталоге отображаются все карточки, которые имеют хотя б из выбранных (Курс, Новости, Преподаватели) тегов.&#x20;

Шаг 4: Добавьте **Пользовательские фильтры**

Перейдите в настройки, кликните на вкладку **Пользовательские фильтры**:

* выберите **По основной категории - категория Общие**&#x20;
* выберите **Создать фильтр** - Категория **Направления обучения** - затем придумайте заголовок для фильтра

{% hint style="success" %}
Таким образом **над каталогом** у вас будут отображаться **фильтры** (По основной категории) **Курсы, Новости, Преподаватели**, а слева фильтры по направлениям: Разработка, Тестирование, Менеджмент.&#x20;
{% endhint %}

</details>

### Блок Баннер <a href="#h_31a951792b" id="h_31a951792b"></a>

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

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

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

<figure><img src="/files/2XwpUgebQVqZAbREPCY2" alt=""><figcaption></figcaption></figure>

1. Заголовок блока - будет отображаться над баннером
2. **Настройки блока -** возможность сегментировать блок по типу устройства (ПК, Мобильные устройства),  Настройка отступов и Слайдера
3. **Подпись под заголовком**
4. **Описание баннера**
5. Заголовок баннера
6. Ссылка - при заполнении этого поля, на пользовательской части появится кнопка, при нажатии на которую будет осуществляться переход на указанную страницу.

**Пример блока Баннеры**

Отображение блока в редакторе страниц:

<figure><img src="/files/ejWa0WORAJGteZw0ktvN" alt=""><figcaption></figcaption></figure>

Отображение блока на пользовательской части:

<figure><img src="/files/qN36xm4QXnii8F4aaheT" alt=""><figcaption></figcaption></figure>

### Блок FAQ <a href="#h_c8a7a003cc" id="h_c8a7a003cc"></a>

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

У вас есть возможность создать неограниченное число карточек. По умолчанию, раскрывающаяся часть блока (ответ) свернута для пользователя.

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

**Пример блока FAQ**

Отображение блока в редакторе страниц:

<figure><img src="/files/11OIC5SWHTCwwt9kr74K" alt="" width="563"><figcaption></figcaption></figure>

Отображение блока на пользовательской части:

<figure><img src="/files/895EP5NvqkG1A0zRMGXB" alt="" width="563"><figcaption></figcaption></figure>

### Блок Баннер с вложением <a href="#h_3fb5653757" id="h_3fb5653757"></a>

Блок позволяет разместить до 2 карточек-баннеров в разделе Стиль баннеров, каждый из которых станет визуальной точкой притяжения и может содержать разнообразные вложения, например PDF-файлы, изображения или другие документы с Заголовком и Описанием.

{% hint style="success" %}
🚀 Интегрируйте креативные баннеры, чтобы сделать вашу страницу более динамичной и информативной.
{% endhint %}

​

При клике **+ Вложения** открывается меню вложений карточки. Вложения добавляются с помощью кнопки **+ Добавить** в открывшемся меню. Можно создать неограниченное число вложений.

**Пример блока Баннер с вложением**

Отображение блока в редакторе страниц:

<figure><img src="/files/lVCejVETPB74wjMKAdWh" alt="" width="563"><figcaption></figcaption></figure>

Отображение блока на пользовательской части:

<figure><img src="/files/QaLCoc2iDnd5gXUbwb4c" alt="" width="563"><figcaption></figcaption></figure>

### Блок Контакты <a href="#h_3c034278f5" id="h_3c034278f5"></a>

Блок Контакты - Данный блок обеспечивает пользователям удобный доступ к каналам коммуникации для связи, поддержки или получения дополнительной информации.

Отображение блока в редакторе страниц:

<figure><img src="/files/yxPzOCcNkGLd9ihfw8rM" alt=""><figcaption></figcaption></figure>

Отображение блока на пользовательской части:

<figure><img src="/files/6VXjHBhjyPvjpPPcwgHN" alt=""><figcaption></figcaption></figure>

### Блок HTML код <a href="#h_3c034278f5" id="h_3c034278f5"></a>

**Блок HTML** – прекрасный способ расширить функциональность ваших веб-страниц. Этот блок может использоваться для создания страниц с информацией или с медиаконтентом, а так же для технических и аналитических целей. Вы можете использовать любой HTML-код для вставки в блок.

{% hint style="info" %}
⌨️ Вы можете использовать блок HTML для добавления собственных скриптов на ваш сайт. Но для этого понадобится немного больше знаний HTML. Кроме того, с HTML блоком можно легко выводить информацию из других источников, например, RSS-ленту или данные из облачных сервисов.
{% endhint %}

**Пример блока HTML код**

Отображение блока в редакторе страниц:

<figure><img src="/files/yiOk1Zc7rrZRbufEIEsX" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/YCo0iqMki9kAuVIRBXnz" alt=""><figcaption></figcaption></figure>

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

Отображение блока на пользовательской части:

<figure><img src="/files/JthT6cjoysWpYvX713v5" alt=""><figcaption></figcaption></figure>

### Блок Медиа

**Блок Медиа** - это элемент страницы, предназначенный для размещения мультимедийного контента, чаще всего видео. В блок обычно вставляют ссылки на видеоролики с внешних платформ или непосредственно встроенные видео с помощью Reezonly Cloud.&#x20;

{% hint style="info" %}
Подробнее про Reezonly Cloud Вы можете прочитать здесь - <https://wiki.reezonly.com/space/nastroiki/reezonly-cloud>
{% endhint %}

Отображение блока в редакторе страниц:

<figure><img src="/files/jAWmsldjcKJNx85ddJ8z" alt=""><figcaption></figcaption></figure>

Отображение блока на пользовательской части:

<figure><img src="/files/1yOCs6mbpPXCLuyR1jT6" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://wiki.reezonly.ru/space/stranicy-saita/sozdanie-stranicy-saita/konstruktor-stranicy-saita.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.