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

Версионируемый документ. Модуль 0.133.0, редакция 1.7, сверка 05.10.2026. Интерфейс 0.103.0. О версии руководства.

Соберите учебную страницу «Встреча команды»: добавьте программу, ссылки, изображение, расписание и ответы на вопросы. Последнее упражнение покажет, как менять дополнительные блоки и возвращать один из них из истории. Инструкции сверены с выпуском 0.133.0; результат каждого упражнения нужно проверить на своём сайте.

Подготовка и сохранение

Попросите администратора выделить отдельную учебную карточку инфоблока с HTML-полем или HTML-свойством, подключённым к редактору. Карточка должна быть доступна вам для изменения, а её содержимое — выводиться на отдельной странице для проверки. Согласуйте место публикации и убедитесь, что одновременно эту карточку никто не редактирует.

Для упражнений понадобятся стандартные блоки, история версий и разрешённое изображение учебного помещения размером 1200 × 800 пикселей. Для упражнения 6 администратор также подключает примеры Starter notice и Native starter к этой карточке. Названия режимов экрана и доступные блоки зависят от настроек сайта: если нужного инструмента нет, сначала уточните его доступность.

Перед началом откройте редактор кнопкой «Открыть в GLIT», затем «История → Создать версию». Дождитесь сообщения «Версия сохранена» и запишите номер исходной версии. Для упражнений используйте вымышленные сведения; не меняйте рабочие материалы.

В этой главе «сохранить и открыть заново» означает полный цикл:

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

Надпись «Сохранено» внутри редактора не заменяет сохранение формы Битрикс. Для редактора в параметрах компонента порядок отличается: нажмите «Готово» и сохраните параметры компонента. Остальные варианты описаны в главе о сохранении.

1. Текст, заголовок и список

Исходные условия

Учебное поле пустое. Название карточки — «Встреча команды». Нужно создать внутри материала раздел программы, поясняющий абзац и список из трёх пунктов.

Шаги

Во вкладке «Элементы» добавьте «Заголовок 2» и введите «Программа встречи». Название всей страницы обычно выводит шаблон сайта; здесь создаётся заголовок раздела.
Под заголовком добавьте «Абзац» с текстом: «Учебная встреча состоится 15 октября в 10:00. Мы обсудим задачи команды и договоримся о следующих шагах».
Выделите только «15 октября в 10:00» и нажмите «Жирный текст» в верхней панели. Если кнопка спрятана, откройте «Ещё инструменты».
Добавьте «Маркированный список». Введите три отдельных пункта: «Обзор задач», «Обсуждение вопросов», «План следующей недели». Нажимайте Enter между пунктами.
Откройте «Структуру» и убедитесь, что заголовок, абзац и список стоят в этом порядке. Если нужно, перетащите строку блока.
Сохраните материал и откройте его заново по полному циклу.

Ожидаемый результат

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

Проверка

Выберите заголовок: в панели формата он остаётся «Заголовок 2», а не обычным текстом увеличенного размера.
Каждый пункт списка занимает собственную строку; перед ним нет вручную набранного символа маркера.
На странице сайта сохранились текст, порядок блоков и выделение даты.

Если оформление применяется не к тому тексту, заново выделите нужный фрагмент. Разницу между выбором текста и выбором блока объясняет глава об интерфейсе; инструменты — глава о содержимом.

2. Ссылка и кнопка к разделу страницы

Исходные условия

На странице уже есть программа из упражнения 1. Добавьте отдельный раздел контактов и два способа перехода к нему. Уникальный якорь этого упражнения — training-contacts.

Шаги

В конце материала добавьте «Заголовок 2» с текстом «Контакты организатора» и абзац «По вопросам учебной встречи обратитесь к организатору команды».
Выберите этот заголовок в «Структуре», откройте «Правка → Параметры» и заполните «Якорь заголовка» значением training-contacts.
Вернитесь к началу программы и добавьте абзац «Перейти к контактам организатора».
Выделите этот текст, нажмите «Вставить ссылку», укажите адрес #training-contacts, выберите «В текущем окне» и примените ссылку.
Рядом с программой добавьте «Кнопку». Выберите её в «Структуре» и откройте «Правка → Параметры».
Задайте «Текст кнопки» — «Контакты организатора», «Адрес ссылки» — #training-contacts, «Где открыть» — «В текущем окне», «Размер» — «Средняя». Для «Варианта» выберите «Основная», если этот вариант подключён на сайте.
Сохраните и откройте материал заново. Проверьте оба перехода на странице сайта, а не только на холсте редактора.

Ожидаемый результат

Текстовая ссылка и кнопка переводят к заголовку «Контакты организатора». В адресе страницы появляется #training-contacts, новая вкладка не открывается.

Проверка

После повторного открытия адрес обеих ссылок и якорь заголовка сохранились.
На странице нет второго блока с таким же якорем. Если редактор добавил числовой суффикс, проверьте совпадение якоря с адресом ссылок.
Нажимайте Tab до ссылки и кнопки, затем Enter: обе доступны с клавиатуры и выполняют переход.

Если переход не работает, сначала сравните адрес #training-contacts с сохранённым якорем. Настройки подробно описаны в главе о ссылках и кнопках.

3. Изображение и макет для компьютера и телефона

Исходные условия

Доступен учебный файл 1200 × 800 пикселей с изображением помещения для встречи. Нужно разместить его слева от описания на широком экране и над описанием на телефоне.

Шаги

Поставьте курсор в отдельный раздел страницы и добавьте «Макет» из вкладки «Элементы».
В диалоге «Вставить макет» выберите «Шаблон → 2 колонки». В области «Ячейки макета» оставьте 2 ячейки: количество колонок и количество дочерних ячеек настраиваются отдельно.
Укажите «Расстояние между столбцами» и «Расстояние между строками» — 24 px.
Выберите «Поведение на узких экранах → Расположить элементы последовательно», «Порог адаптива → На телефонах и планшетах — до 768 px». Нажмите «Вставить макет».
В первую ячейку вставьте «Изображение» и выберите подготовленный файл. В «Структуре» убедитесь, что изображение вложено в первую ячейку, а не стоит перед всем макетом.
В параметрах изображения задайте «Alt-текст» — «Учебное помещение со столом и стульями для встречи команды», «Ширина» — 100 %, «Режим вписывания» — «Вместить», «Положение изображения» — «По центру».
В разделе «Дополнительно: пропорции и галерея» включите «Включить устойчивый AspectRatio» и задайте «Соотношение ширины к высоте» — 1.5: это пропорция файла 1200 × 800. Высота будет определяться этим соотношением, поэтому отдельно её задавать не нужно.
Во вторую ячейку добавьте заголовок «Место встречи» и абзац «Здесь команда обсудит текущие задачи и план следующей недели».
Выберите весь макет и откройте «Правка → Внешний вид». Установите «Внутренний отступ» со всех сторон 16 px. Проверьте заголовок панели, чтобы отступ получил макет, а не изображение или абзац.
Переключитесь между режимами «Компьютер», «Планшет» и «Телефон». Затем сохраните и откройте материал заново.

Ожидаемый результат

На широком экране изображение и текст расположены в двух равных колонках с промежутком 24 px. Ниже выбранного порога ячейки идут друг за другом: сначала изображение, затем описание. Изображение сохраняет пропорции 3:2 и помещается в свою ячейку.

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

Проверка

В «Структуре» у одного макета есть две ячейки; изображение и текст принадлежат разным ячейкам.
После повторного открытия сохранились настройки макета, Alt-текст и пропорции изображения.
Откройте страницу сайта при ширине примерно 1024 px, затем 360 px. На телефоне вся страница не уходит в горизонтальную прокрутку, текст не накладывается на картинку.

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

4. Таблица расписания и новая строка

Исходные условия

Нужно добавить расписание с тремя столбцами и тремя событиями. Затем потребуется включить четвёртое событие, сохранив первые строки.

Шаги

Добавьте «Таблицу». В диалоге укажите «Строки» — 4, «Столбцы» — 3 и оставьте включённым «Добавить строку и столбец заголовков». Нажмите «Вставить таблицу».

Заполните таблицу по образцу. Первая строка содержит заголовки, следующие три — события.

Время	Тема	Ответственный
10:00	Обзор задач	Анна
10:20	Обсуждение вопросов	Борис
10:40	План следующей недели	Вера

Наведите указатель на последнюю строку и нажмите появившийся слева плюс «Добавить строку». Заполните новую строку: 11:00 / Итоги встречи / Анна. Если строка вставилась в другое место, нажмите «Отменить» и повторите добавление у нужной строки.
Выберите таблицу в «Структуре», откройте её настройки и задайте «Ширина таблицы → На всю ширину».
Проверьте, что каждый ответственный остался напротив своей темы, а пустых строк нет.
Сохраните и откройте материал заново, затем проверьте расписание на странице сайта.

Ожидаемый результат

Таблица содержит 5 строк и 3 столбца: строку заголовков и четыре события. Добавление строки не изменило первые три события.

Проверка

Сравните каждую строку с образцом и проверьте отдельную строку «11:00 / Итоги встречи / Анна».
После повторного открытия все 15 ячеек содержат ожидаемые значения.
На телефоне можно прочитать все столбцы. Если таблица шире экрана, проверьте её прокрутку; широкая таблица не должна растягивать всю страницу.

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

5. Вкладки и ответ на вопрос

Исходные условия

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

Шаги

Добавьте «Вкладки», выберите весь блок в «Структуре» и откройте «Правка → Параметры».
Установите «Количество вкладок» — 3, «Расположение переключателей» — «В строку». Стабильные ID оставьте созданными редактором.

В «Структуре» по очереди выберите каждое «Содержимое вкладки». В его параметрах заполните «Название вкладки», а в рабочей области — текст:

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

Под вкладками добавьте «Сворачиваемый блок». В его заголовке напишите «Что подготовить к встрече?», в содержимом — «Запишите свои вопросы и краткий список текущих задач».
Выберите сворачиваемый блок, откройте «Правка → Параметры» и включите «Свёрнут по умолчанию» и «Показывать стрелку».
Сохраните и откройте материал заново. Переключения проверяйте в предпросмотре и на странице сайта: на холсте щелчок может выбирать блок для редактирования.

Ожидаемый результат

Посетитель видит три осмысленных названия вкладок и соответствующее содержимое. Ответ на вопрос сначала свёрнут; нажатие на заголовок раскрывает его, повторное нажатие закрывает.

Проверка

Поочерёдно откройте все три вкладки: текст не перепутан, пустых панелей и исходных названий «Вкладка» нет.
С клавиатуры перейдите к переключателям. В горизонтальном наборе проверьте стрелки влево и вправо; Tab должен позволять перейти дальше по странице.
Перейдите Tab к заголовку вопроса и проверьте раскрытие клавишей Enter или пробелом.
Повторите переключения на телефоне после обычной загрузки страницы.

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

6. Параметры дополнительного блока и восстановление

Исходные условия

Администратор подключил Starter notice и Native starter из примеров расширений и разрешил их использование в учебном документе. Доступны «История», «Создать версию», «Сравнить» и восстановление отдельного блока. Оформление таких блоков может отличаться от примера, но поля и действия должны соответствовать выбранному расширению.

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

Шаги

Добавьте Starter notice. На странице нажмите «Свойства блока», задайте title — «Подготовка к встрече», text — «Подготовьте список вопросов», showText — включён. Нажмите «Применить».
Добавьте Native starter, выберите его в «Структуре» и откройте «Правка → Параметры». В поле Notice text введите «Проверено организатором» и нажмите Apply notice text.
Проверьте оба сообщения. Сохраните материал и откройте заново, затем нажмите «История → Создать версию». Дождитесь «Версия сохранена» и запишите номер: это версия A.
В свойствах Starter notice выключите showText и примените изменения. Заголовок останется, а «Подготовьте список вопросов» исчезнет из вывода.
Вернитесь в свойства того же блока и убедитесь, что значение text осталось «Подготовьте список вопросов». Скрытие текста не удаляет его данные.
У Native starter замените Notice text на «Проверено редактором» и нажмите Apply notice text.
Сохраните и откройте материал заново. Создайте ещё одну версию через «История → Создать версию» и запишите номер: это версия B.
В истории выберите версии A и B в полях «Было» и «Стало», затем нажмите «Сравнить». Найдите изменения обоих дополнительных блоков.
Для Starter notice откройте «История этого блока». Снимите флажок «Только версии с изменениями блока»: контрольная версия A может повторять предыдущее сохранение и не попадать в этот фильтр. При необходимости нажмите «Загрузить более ранние версии», выберите записанный номер версии A и нажмите «Восстановить блок». Проверьте выбранный блок и подтвердите восстановление.
Проверьте материал: основной текст Starter notice снова виден, а Native starter по-прежнему показывает «Проверено редактором» из версии B.
Сохраните и откройте материал заново, завершите публикацию, если она предусмотрена, и проверьте страницу сайта.

Ожидаемый результат

Блок	После восстановления и повторного открытия
Starter notice	`title`: «Подготовка к встрече»; `text`: «Подготовьте список вопросов»; `showText`: включён; оба текста видны
Native starter	Notice text: «Проверено редактором»; более новая правка сохранилась
Остальная страница	Программа, ссылки, изображение, таблица и вкладки сохранились

Проверка

Скрытие showText и возврат из версии A не уничтожили исходный текст.
После закрытия и повторного открытия у Starter notice нет копии-дубликата; восстановлен выбранный блок.
Восстановление одного блока не вернуло Native starter к тексту «Проверено организатором».
На странице сайта видны те же два сообщения, что и в редакторе.

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

Итоговая проверка

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