Три самых востребованных действия при наполнении страницы — это таблица, ссылка и изображение. Разберём, как вставить каждый элемент через визуальный редактор 1С-Битрикс и корректно настроить его свойства.
Где находится визуальный редактор
Редактор доступен при правке статических страниц и текстовых полей инфоблоков. Чтобы открыть страницу на редактирование:
- Перейдите в Контент → Структура сайта → Файлы и папки.
- Найдите нужную страницу и нажмите Изменить страницу (или откройте её в публичной части и включите режим правки).
- Убедитесь, что под областью текста активна вкладка Визуальный редактор, а не Исходный код.
Если панель инструментов не отображается, значит визуальный редактор отключён в настройках модуля — включить его можно в настройках главного модуля.
Как вставить таблицу
За вставку таблицы отвечает кнопка Добавить таблицу на панели инструментов (иконка сетки).
- Поставьте курсор в то место текста, где должна появиться таблица.
- Нажмите кнопку Добавить таблицу.
- В диалоге задайте количество строк и столбцов, ширину (в пикселях или процентах), отступы ячеек (
cellpadding) и расстояние между ними (cellspacing). - При необходимости включите заголовочную строку и рамку, нажмите Сохранить.
Уже вставленную таблицу можно редактировать через контекстное меню (правый клик по ячейке): добавить или удалить строку и столбец, объединить ячейки, изменить свойства ячейки или всей таблицы.
Основные параметры таблицы:
| Параметр | Что задаёт |
|---|---|
| Ширина | Размер таблицы в px или %; для адаптивности предпочтительнее % |
| Границы (border) | Толщина рамки; 0 — таблица без видимых линий |
| Отступ в ячейках | Внутренний отступ содержимого (cellpadding) |
| Промежуток | Расстояние между ячейками (cellspacing) |
Как вставить ссылку
Гиперссылка добавляется кнопкой Добавить ссылку (иконка цепочки).
- Выделите текст или изображение, которое станет ссылкой.
- Нажмите Добавить ссылку.
- В поле URL укажите адрес. Для внутренних страниц используйте относительный путь вида
/catalog/, для внешних — полный адрес сhttps://. - При необходимости задайте всплывающую подсказку (атрибут
title) и выберите открытие в новом окне (target="_blank"). - Нажмите Сохранить.
Чтобы выбрать существующую страницу сайта, воспользуйтесь кнопкой обзора рядом с полем URL — откроется дерево файлов и папок. Для удаления ссылки поставьте курсор внутрь неё и нажмите Удалить ссылку.
Как вставить изображение
Изображение вставляется кнопкой Добавить изображение (иконка с картинкой).
- Поставьте курсор в нужное место и нажмите Добавить изображение.
- Выберите файл из медиабиблиотеки, загрузите новый с компьютера или укажите путь к уже загруженному файлу на сервере.
- Задайте альтернативный текст (
alt) — он важен для SEO и доступности. - Укажите размеры (
widthиheight), выравнивание и отступы, при необходимости — рамку. - Нажмите Сохранить.
Рекомендуется загружать картинки через медиабиблиотеку (Сервисы → Медиабиблиотека) — так изображения хранятся упорядоченно и их проще переиспользовать на других страницах.
Проверка через исходный код
Любой вставленный элемент можно проверить и поправить в режиме Исходный код — переключатель находится под областью редактирования.
- Таблица описывается тегом
<table>с вложенными<tr>и<td>. - Ссылка — тегом
<a href="...">. - Изображение — тегом
<img src="..." alt="...">.
Правьте код аккуратно: незакрытый тег может «сломать» вёрстку страницы. После правки вернитесь в визуальный режим и убедитесь, что элемент отображается корректно.
Частые ошибки
- Пустой alt у изображения. Без альтернативного текста страдают SEO и доступность — всегда заполняйте поле alt.
- Абсолютные пути к внутренним ссылкам. Для страниц своего сайта используйте относительные пути, иначе ссылки сломаются при смене домена.
- Фиксированная ширина таблицы в пикселях. На мобильных такая таблица выходит за пределы экрана; задавайте ширину в процентах.
- Загрузка тяжёлых изображений. Оптимизируйте картинки перед загрузкой — большие файлы замедляют страницу.
- Вставка из Word. При копировании из Word тянется «мусорный» HTML; используйте кнопку Вставить как текст и оформляйте стили средствами редактора.
Итог
Таблица, ссылка и изображение вставляются одноимёнными кнопками панели визуального редактора и настраиваются в диалогах свойств. Ключевые правила: относительные пути для внутренних ссылок, заполненный alt у картинок, ширина таблиц в процентах и загрузка изображений через медиабиблиотеку. Для тонкой правки всегда доступен режим исходного кода.