Три уровня редактирования
| Уровень | Что это | Что настраивается |
|---|---|---|
| Блок/секция | Самостоятельный фрагмент КП: шапка, CTA, новость, подвал | фон, ширина, высота, отступы, рамка и положение самого блока |
| Элемент | Текст, изображение, кнопка, таблица, ссылка внутри блока | содержимое и параметры конкретного типа элемента |
| Слой | Элемент внутри композиции/подписи с абсолютным позиционированием | позиция, масштаб, порядок наложения, прозрачность |
Панель настроек должна работать именно по выбранному уровню. Выбранный блок не должен внезапно менять шрифт дочернего текста; для этого выбирается сам текстовый элемент.
Библиотека шаблонов секций
В каталоге есть готовые композиции, сгруппированные как:
- Шапки.
- Контент.
- Новости и статьи.
- Call-to-Action.
- E-commerce.
- Подвал.
У одной бизнес-секции допускаются разные визуальные варианты. Они отличаются композицией: наличие изображения, распределение текста, карточки, акцентная панель, кнопка или фон. Замена только текста не считается новым вариантом.
Группы в панели раскрываются по одной: при открытии новой предыдущая сворачивается. При загрузке все закрыты. Это удерживает панель компактной при большой библиотеке.
Одиночные элементы
Ниже библиотеки секций располагаются базовые строительные элементы: заголовок, текстовый блок, таблица, изображение, кнопки, разделитель, сетка колонок, отступ, подпись и композиция.
Одиночный элемент нужен, когда готовой секции нет или её нужно собрать вручную. Для повторяемого бизнес-сценария предпочтительнее создать библиотечный шаблон секции, а не заставлять пользователя каждый раз собирать одинаковую композицию из div и колонок.
Композиция и подпись
Композиция — контейнер для слоёв. Он нужен для случаев, где текст, изображение или подпись должны накладываться друг на друга: героический блок с фоном, печать и подпись, текст поверх изображения.
Подпись использует тот же принцип, но даёт готовую стартовую структуру для делового блока подписи. Слои внутри композиции можно перемещать, менять порядок, масштаб и прозрачность.
Стандарт создания новой секции
Новая секция добавляется только после проверки по стандарту шаблона элемента:
- зафиксировать бизнес-смысл;
- описать визуальные варианты;
- собрать устойчивую DOM-структуру с префиксными CSS-классами;
- подготовить preview для левой панели;
- зарегистрировать блок в GrapesJS-каталоге;
- проверить вставку, выделение, редактирование, сохранение и мобильную ширину.
Важная техническая проверка: внешняя секция должна быть одним нормальным компонентом GrapesJS. Случайные вложенные секции или конфликтующие CSS-селекторы приводят к смещённой hover-подсветке и непредсказуемому выделению.