Визуальный редактор 1С-Битрикс позволяет форматировать текст без знания HTML: применять начертания, оформлять заголовки и списки, а также выбирать готовые стили из шаблона сайта. Разберём панель форматирования и покажем, как не «замусорить» код страницы.
Панель форматирования: что где находится
Верхняя панель визуального редактора собрана из логических групп кнопок. Наведите курсор на любую кнопку, чтобы увидеть всплывающую подсказку с названием и горячей клавишей.
- Начертание — полужирный (
Ctrl+B), курсив (Ctrl+I), подчёркнутый (Ctrl+U), зачёркнутый. - Абзац и стили — выпадающий список форматов (Абзац, Заголовок 1–6) и список стилевых классов шаблона.
- Шрифт — семейство и размер (кегль), а также цвет текста и цвет фона.
- Выравнивание — по левому краю, по центру, по правому краю, по ширине.
- Списки и отступы — маркированный и нумерованный список, увеличение/уменьшение отступа.
- Служебные — очистить формат, вставить как обычный текст, переключение Редактор ↔ Код ↔ Предпросмотр.
Внизу окна расположена строка навигации по тегам (breadcrumbs) — она показывает, внутри какого элемента (например, p → strong) сейчас находится курсор. Это удобно для точного выделения нужного фрагмента.
Начертания, заголовки и абзацы
Базовое оформление выполняется в два шага: выделите фрагмент и нажмите нужную кнопку.
- Выделите слово или абзац.
- Для акцента примените полужирный (
strong) или курсив (em). - Для смысловых заголовков выберите в списке форматов Заголовок 1…6 — редактор обернёт строку в теги
h1–h6. - Чтобы вернуть обычный текст, выберите в том же списке значение Абзац (
p).
Важно различать смысловые заголовки и простое увеличение размера шрифта. Заголовки h1–h6 формируют структуру документа и учитываются поисковыми системами, тогда как ручное увеличение кегля влияет только на внешний вид. Для заголовков всегда используйте список форматов, а не кнопку размера шрифта.
Перенос строки и новый абзац
Клавиша Enter создаёт новый абзац (p), а Shift+Enter — мягкий перенос строки (br) внутри текущего абзаца. Учитывайте это при вёрстке адресов и подписей, где нужен именно перенос, а не новый абзац.
Стили из шаблона сайта
Главное преимущество редактора 1С-Битрикс — возможность применять не «жёсткие» inline-стили, а готовые CSS-классы шаблона. Такой текст выглядит единообразно и автоматически меняется при обновлении дизайна сайта.
- Установите курсор в абзац или выделите фрагмент.
- Откройте выпадающий список Стиль (обычно рядом со списком форматов).
- Выберите класс, например
Врезка,ЦитатаилиВажно— редактор добавит соответствующийclassв тег.
Перечень классов берётся из файла /bitrix/templates/ШАБЛОН/styles.css (для контента) и template_styles.css (для служебных областей). Разработчик или интегратор описывает в них правила и человекочитаемые названия через специальный синтаксис комментариев, после чего эти стили появляются в списке редактора.
Если нужного стиля в списке нет, его добавляют в styles.css шаблона — тогда контент-менеджеру не придётся каждый раз задавать цвет и отступы вручную.
Списки, отступы и выравнивание
Списки оформляются кнопками Маркированный список (ul) и Нумерованный список (ol).
- Чтобы создать вложенный подпункт, встаньте на строку списка и нажмите Увеличить отступ (или
Tab). - Обратное действие — Уменьшить отступ (
Shift+Tab). - Повторное нажатие кнопки списка на выделенных строках убирает списочное оформление.
Выравнивание применяется к абзацу целиком. Для основного текста рекомендуется выравнивание по левому краю: выравнивание «по ширине» на узких колонках даёт неровные пробелы между словами.
Кнопки увеличения/уменьшения отступа для обычных абзацев добавляют структурный отступ, а не «пробелы». Не используйте для отступов множественные пробелы или пустые абзацы — это ломает вёрстку на мобильных устройствах.
Очистка формата и вставка из Word
Самый частый источник «грязного» кода — копирование текста из Microsoft Word или из другого сайта. Вместе с текстом переносятся лишние теги, inline-стили и служебные атрибуты.
- Копируйте текст и вставляйте его кнопкой Вставить как текст (иконка с буквой T) — редактор уберёт всё оформление.
- Если текст уже вставлен с мусором, выделите его и нажмите Очистить формат (ластик) — снимутся начертания и inline-стили.
- Для полной проверки переключитесь в режим Код и просмотрите итоговый HTML.
В настройках модуля «Управление структурой» можно включить автоматическую очистку HTML при вставке из офисных приложений, чтобы контент-менеджеры не забывали делать это вручную.
Частые ошибки
Типичные проблемы при форматировании и способы их избежать:
| Ошибка | Как правильно |
|---|---|
| Заголовок сделан жирным текстом крупного кегля | Использовать список форматов и теги h2–h3 |
Несколько h1 на странице | Один h1 на страницу, остальное — h2 и ниже |
| Цвет и размер заданы inline через панель шрифта | Применять стилевые классы шаблона |
| Пустые абзацы для вертикальных отступов | Отступы через стили/классы, а не пустые p |
| Прямая вставка из Word | «Вставить как текст» или очистка формата |
Ещё одна распространённая проблема — «прилипшее» форматирование: курсив или цвет продолжают применяться к новому тексту после ранее оформленного фрагмента. Проверяйте строку тегов внизу редактора и при необходимости нажимайте «Очистить формат».
Итог
Форматирование в визуальном редакторе 1С-Битрикс строится вокруг простого правила: смысл задаётся тегами, а внешний вид — стилями шаблона.
- Для структуры используйте заголовки
h2–h3и абзацы, а не размер шрифта. - Для оформления применяйте классы из
styles.css, а не inline-стили. - Текст из внешних источников вставляйте как обычный текст и проверяйте результат в режиме «Код».
Такой подход держит HTML страницы чистым, ускоряет поддержку сайта и сохраняет единый стиль всех материалов.