Что такое компонент?
Компонент (component) — это микрошаблон. Компонентом может быть любое сочетание элементов в редакторе: текстов, заголовков, подзаголовков, изображений, подписей, разделителей, иконок, emoji. Компонент обычно используют для часто повторяющихся регулярных форматов: "фото дня", “цифра недели”, “место недели”, цитата, блок с представлением автора (юзерпик, имя и небольшое описание), карточка, выносы.
Сохранить в качестве регулярно повторяющегося элемента можно и весь пост.
Как добавить компонент?
В посте есть набор предустановленных компонентов. Чтобы добавить один из них в пост, нажмите Добавить компонент на панели инструментов справа.
Группировка компонентов
При работе в Setka Editor вы можете группировать однородные по смыслу компоненты. Это особенно удобно, когда компонентов много. При сохранении компонента выберите в какую группу вы хотите его сохранить или создайте для него новую. Группы могут быть различны: «Quotes», «Photo blocks», «Author portrait» и т.д., в зависимости от стиля вашего поста и особенностей оформления.
Перейти к редактированию HTML-кода компонента в Управлении дизайн системой можно во вкладке Components в вашем Setka аккаунте на editor.setka.io.
Почему некоторые компоненты неактивны?
Можно добавить компонент только в пост с такой же системой сеток и количеством колонок.
Поскольку компоненты создаются и закрепляются за стилями постов, они наследуют их структуру – верстку и сетку (layout grid). Если при попытке вставить компонент вы видите, что он не активен – это значит, что система сеток или количество колонок текущего поста и компонента не совпадают, и Setka Editor заранее предотвращает конфликт стилей.
Создать свой компонент
Собственный кастомный компонент можно создать во время верстки поста в Setka Editor. В таком случае компонент закрепляется за стилем, в котором был создан пост.
Определитесь с задачей компонента, добавьте необходимые элементы (например, в "цифра дня" - это сама цифра и описание к ней), задайте им стиль. Затем выделите все элементы компонента, зажав CMD (CTRL), появится режим мультивыбора. В боковом меню справа нажмите Создать компонент, придумайте укажите имя компонента, после чего, нажмите Сохранить.
В Управлении дизайн системой можно затем кастомизировать созданный вами компонент в CSS редакторе (вкладка Components), применив к нему нужные стили оформления.
Подробнее о создании компонентов в Управлении дизайн системой можно узнать в этой статье.
Каким может быть компонент?
Таким, каким вы сами захотите. Его можно собрать как из присутствующих по-умолчанию графических элементов в библиотеке редактора, так и из ранее нарисованных вами и добавленных в хранилище изображений, а также кастомизированных с помощью CSS.
Так выглядит создание компонента “цитаты” как наиболее частого элемента, используемого при написании статей:
А так — выноса с цифрой, другого регулярно повторяющегося блока статьи:
Полезные советы о том как сэкономить время при верстке сложных материалов с примерами создания компонентов редакторами интернет-издания The Village доступны в статье нашего блога.