Что такое компонент?
Компоненты — это шаблоны с элементами вёрстки, регулярно повторяющиеся в постах. Например, в стиле Newspaper есть несколько предустановленных компонентов для разного оформления цитат в тексте. Они ускоряют процесс верстки, когда, например, вам нужно создать пост с прямой речью.
Компонент — это любой регулярный формат: "фото дня", “цифра недели”, “место недели”, цитата, блок с представлением автора (аватар, имя и описание), карточка, выносы.
Из чего состоит компонент?
Компонент — любое сочетание элементов в редакторе: текстов, заголовков, подзаголовков, изображений, подписей, разделителей и иконок. Вместе они могут составлять часть статьи с особым оформлением — например, прямую речь спикера.
Компонент и стиль поста
Каждый компонент закреплен за определенным стилем, так как создается из его элементов. Для стиля можно создать разные наборы компонентов.
Где и как создается компонент?
Создайте макет компонента, который отвечает вашей задаче (например, цитата эксперта). Выберите шрифт и стили для текста и заголовка, определитесь с фоном. Если нужно, добавьте иконку, разделитель или любой другой элемент. Сохраните пост – компонент закрепится за стилем.
Во всех постах этого стиля вы сможете добавить созданный компонент.
Компоненты также добавляются из Управления дизайн системой, но их HTML-код нужно будет написать с нуля.
Как изменить компонент?
Спиппет редактируется через Управление дизайн системой. Чтобы изменить компонент, зайдите в раздел Styles на Setka и выберите вкладку Components. Выберите компонент из списка и отредактируйте его HTML-код:
При удалении компонента в меню, он исчезает из списка, но сам текст и верстка в посте остаются.
Если компонент был создан в редакторе, то контент, вставленный в качестве компонента, не потеряет оформление. Но если компонент был создан в Управлении дизайн системой с CSS-кодом, эти кастомные стили пропадут из постов. Останется только текст и отдельные элементы.
Можно ли скопировать компонент из одного стиля в другой?
Компонент состоит из элементов конкретного стиля (цвета, шрифты, разделители), поэтому не будет работать в другом стиле. Копировать компонент в другой стиль не имеет смысла.