Аккаунт Setka Компоненты – заранее сверстанные шаблоны

Компоненты – заранее сверстанные шаблоны

Что такое компонент?

Компоненты — это шаблоны с элементами вёрстки, регулярно повторяющиеся в постах. Например, в стиле Newspaper есть несколько предустановленных компонентов для разного оформления цитат в тексте. Они ускоряют процесс верстки, когда, например, вам нужно создать пост с прямой речью.

Компонент — это любой регулярный формат: "фото дня", “цифра недели”, “место недели”, цитата, блок с представлением автора (аватар, имя и описание), карточка, выносы.

 

Из чего состоит компонент?

Компонент — любое сочетание элементов в редакторе: текстов, заголовков, подзаголовков, изображений, подписей, разделителей и иконок. Вместе они могут составлять часть статьи с особым оформлением — например, прямую речь спикера. 

 

Компонент и стиль поста

Каждый компонент закреплен за определенным стилем, так как создается из его элементов. Для стиля можно создать разные наборы компонентов.

 

Где и как создается компонент?

Создайте макет компонента, который отвечает вашей задаче (например, цитата эксперта). Выберите шрифт и стили для текста и заголовка, определитесь с фоном. Если нужно, добавьте иконку, разделитель или любой другой элемент. Сохраните пост – компонент закрепится за стилем.

Во всех постах этого стиля вы сможете добавить созданный компонент.

Компоненты также добавляются из Управления дизайн системой, но их HTML-код нужно будет написать с нуля.

  

Как изменить компонент?

Спиппет редактируется через Управление дизайн системой. Чтобы изменить компонент, зайдите в раздел Styles на Setka и выберите вкладку Snippets. Выберите компонент из списка и отредактируйте его HTML-код:

mceclip0.png

 

При удалении компонента в меню, он исчезает из списка, но сам текст и верстка в посте остаются. 

Если компонент был создан в редакторе, то контент, вставленный в качестве компонента, не потеряет оформление. Но если компонент был создан в Управлении дизайн системой с CSS-кодом, эти кастомные стили пропадут из постов. Останется только текст и отдельные элементы.

 

Можно ли скопировать компонент из одного стиля в другой?

Компонент состоит из элементов конкретного стиля (цвета, шрифты, разделители), поэтому не будет работать в другом стиле. Копировать компонент в другой стиль не имеет смысла.