Инструкция по работе с визуальным редактором Битрикс: пошаговое руководство по настройке и редактированию контента

12.02.2026

1. Введение в визуальный редактор

Визуальный редактор Битрикс — это инструмент для форматирования текстового контента без знания HTML. Он используется преимущественно для редактирования элементов инфоблоков: новостей, статей, описаний товаров и других текстовых материалов.

2. Основные элементы интерфейса

2.1 Панель инструментов

Содержит кнопки для базового форматирования:

Стили текста (жирный, курсив, подчеркнутый)
Форматирование абзацев (заголовки H1-H6, обычный текст)
Списки (нумерованные и маркированные)
Выравнивание текста
Вставка ссылок и изображений

2.2 Режимы редактирования

Визуальный режим — WYSIWYG-редактирование
Режим HTML — прямое редактирование кода
Режим редактирования текста — простое редактирование текста

3. Правила безопасного редактирования

Критически важно: Что нельзя делать

3.1 Запрещено копирование из Word и других текстовых редакторов

Проблема: При копировании из Word в редактор переносятся скрытые стили, классы и нестандартные теги, которые:

Конфликтуют со стилями сайта
Ломают адаптивную верстку
Увеличивают вес страницы
Приводят к визуальным артефактам

Правильный подход:

1. Текст из Word сначала вставьте в Блокнот или Notepad++

2. Из Блокнота скопируйте в визуальный редактор

3. Отформатируйте текст средствами редактора

3.2 Альтернативные методы вставки

Используйте комбинацию Ctrl+Shift+V (вставка без форматирования)

4.1 Типичная структура элемента

Заголовок (отдельное поле)

Анонс (отдельное поле)

Детальное описание (визуальный редактор)

Изображения (отдельные поля)

4.2 Рекомендации по форматированию новостей/статей

Используйте стили заголовков из выпадающего списка (не ручное изменение размера)

Изображения в статьях

1. Нажмите «Вставить изображение»

2. Загрузите или выберите из библиотеки

3. Укажите альтернативный текст

4. Выберите выравнивание

5. Не изменяйте размеры в редакторе — используйте подготовленные изображения

Ссылки

1. Выделите текст

2. Нажмите «Вставить ссылку»

3. Укажите URL

4. Выберите «Открывать в новом окне» для внешних ссылок

5. Чистка кода

5.1 Кнопка «Очистить формат»

Используйте при появлении:

Нестандартных шрифтов
Неправильных цветов
Лишних отступов и интервалов

5.2 Режим HTML для очистки

1. Перейдите в режим HTML

2. Удалите лишние теги: <span style="...">, <font>, <o:p>

3. Вернитесь в визуальный режим

6. Контрольный список перед сохранением

Нет лишних стилей из Word
Изображения имеют alt-текст
Ссылки работают корректно
Заголовки оформлены через стили
Таблицы только для данных
Код чистый (проверено в HTML-режиме)

7. Дополнительные рекомендации

Запомните: Качество контента зависит не только от текста, но и от чистоты его оформления. Правильное использование визуального редактора — залог корректного отображения ваших новостей и статей на всех устройствах.

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