> 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 %}