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

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

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

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

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

Работа с блоками

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

№2. Добавление блока

1. Кликните на кнопку +

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

Настройка блоков

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

№3. Кнопки настройки блока

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

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

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

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

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

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

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

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

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

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

2. Настройки блока. Кнопка Настройки блока открывает интерфейс с двумя основными вкладками: Настройки и Сегментация:

Настройки

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

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

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

3. Стиль блока — выбор визуального оформления текста внутри блока. Доступны три варианта:

• Текст без фона — простой текст на прозрачном фоне.

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

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

Сегментация

1. Удаление блока. Данный параметр полностью удаляет блок.

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

Типы блоков

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

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

Блок Обложка

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

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

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

• Заголовок - ясно и конкретно сообщает о теме продукта (курса).

• Подзаголовок - предоставляет дополнительную информацию, уточняет контекст, меньше по размеру.

• Кнопка записи на курс (CTA) - стимулирует пользователей к действию, например, записи на курс.

Как только пользователь нажимает на кнопку CTA, он совершает действие, которое заранее настроено вами.

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

Блок Текст

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

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

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

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

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

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

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

• Текст на фоне во всю ширину - Текстовый блок растягивается на всю ширину страницы.

Блок Преимущества

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

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

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

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

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

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

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

Блок Авторы

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

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

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

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

Блок Каталог

Блок Каталог — это блок, который пользователь может настроить под нужды Академии.

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

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

1. Настройки отображения внешнего вида каталога и фильтров

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

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

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

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

1. В открывшимся окне введите Название фильтра

2. Далее Выберите тип фильтра: Все теги или Любой из тегов

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

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

Любой из тегов - это настройка, которая позволяет отображать карточки, в которых есть хотя б 1 из выбранных вами тегов

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

1. Кликните на Добавьте теги

2. Выберите необходимые вам Теги

3. Кликните на Добавить и еще раз Добавить

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

Каждый фильтр содержит в себе свой набор карточек со своими настройками (Все теги и Любой из тегов).

Поэтому создавая 2 фильтра вы настраиваете 2 независимых набора карточек, в каталоге будет отображаться и 1 фильтр с карточками и 2 фильтр с карточками.

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

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

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

Представим, что у вас есть задача сделать 3 каталога:

1. Каталог с преподавателями направления Разработки

2. Каталог с новостями направления Менеджмент

3. Каталог с курсами направления Тестирование

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

Для этого в разделе Теги вам необходимо создать:

1. Категория общие:

   1. тег Новости

   2. тег Преподаватели

   3. тег Курс

2. Категория Направления обучения:

   1. Тег Разработка

   2. Тег Тестирование

   3. Тег менеджмент

Шаг 2. Тегируйте страницы

Для этого переходим на страницу сайта/курса, в раздел Отображение в каталоге и:

1. Для страниц с преподавателями направления Разработки выставляем теги: Преподаватель (категория Общие) и Разработка (категория Направления обучения)

2. Для страниц с новостями направления Менеджмент выставляем теги: Новости ( категория Общие) и Менеджмент (категория Направления обучения)

3. Для страниц с курсами направления Тестирование выставляем теги: Курс (категория Общие) и Тестирование (Направления обучения)

Шаг 3. Настройте каталог

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

2. в Каталог с новостями направления Менеджмент, выбираем настройку Все теги и теги Новости ( категория Общие) и Менеджмент (категория Направления обучения)

3. в Каталог с курсами направления Тестирование, выбираем настройку Все теги и теги Курс (категория Общие) и Тестирование (Направления обучения)

Таким образом у нас получилось 3 разных каталога.

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

Представим, что у вас есть задача настроить каталог с курсами, преподавателями и новостями

Шаг 1. Подготовьте теги. Для этого в разделе Теги вам необходимо создать:

Категория Общие:

1. тег Новости

2. тег Преподаватели

3. тег Курс

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

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

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

Переходим в каталог, выбираем настройку Любой из тегов и теги Новости, Преподаватели и Курс

Таким образом в каталоге будут отображаться все карточки, которые содержать в себе хотя б 1 тег из выбранных (Новости, Преподаватели или Курс)

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

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

Фильтры над каталогом:

1. Календарь - отображение календаря старта продуктов

2. Поиск - в каталоге появлется строка с возможностью поиска по названию продукта

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

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

1. Стоимость - стоимость оплаты прохождения продукта

2. Период обучения

3. Создать фильтр - возможность создать пользовательский фильтр

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

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

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

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

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

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

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

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

1. Тег Курс

2. Тег Новости

3. Тег Преподаватели

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

1. Тег Разработка

2. Тег Тестирование

3. Тег Менеджмент

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

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

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

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

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

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

• выберите По основной категории - категория Общие

• выберите Создать фильтр - Категория Направления обучения - затем придумайте заголовок для фильтра

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

Блок Баннер

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

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

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

1. Заголовок блока - будет отображаться над баннером

2. Настройки блока - возможность сегментировать блок по типу устройства (ПК, Мобильные устройства), Настройка отступов и Слайдера

3. Подпись под заголовком

4. Описание баннера

5. Заголовок баннера

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

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

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

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

Блок FAQ

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

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

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

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

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

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

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

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

🚀 Интегрируйте креативные баннеры, чтобы сделать вашу страницу более динамичной и информативной.

​

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

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

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

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

Блок Контакты

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

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

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

Блок HTML код

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

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

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

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

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

Блок Медиа

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

Подробнее про Reezonly Cloud Вы можете прочитать здесь - https://wiki.reezonly.com/space/nastroiki/reezonly-cloud

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

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

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