В Setka Editor можно составлять компоненты разных типов. Вы можете превратить пост, параграф, заголовок, сетку, колонку, картинку, эмбед, разделитель, галерею или контейнер в шаблон и затем использовать его во время верстки новых постов.
Примечание: о том, как добавить компонент во время редактирования поста в Setka Post Editor, вы можете узнать из этой статьи.
Содержание
|
|
|
Компоненты для Setka Editor создаются двумя способами:
- В качестве компонента может выступать любой валидный HTML-код. В коде также используются стандартные элементы Setka Editor: сетки, колонки, параграфы, галереи и изображения. Они должны содержать соответствующие CSS-классы. Помимо стандартных классов, можно использовать и ваши собственные.
- Создавая компонент с нуля, соблюдайте правила, описанные ниже, чтобы получить HTML-код, принимаемый редактором.
Компонент может состоять из следующих элементов:
Структура HTML
<div class="stk-post">
<!-- содержимое поста -->
</div>
Пример использования
<div class="stk-post">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
Совместимость
|
Пост может содержать |
Пост не может содержать |
|
— Параграфы и заголовки — Теги оформления: <strong>, <i>, <em>, <a>, <u>, <del>, <sup>/<sub>, <span>, <br>
— Изображения, тег <img>
— Галереи — Разделители — Сетки — Контейнеры |
— Колонки |
Обратите внимание: пост не может содержать колонки в чистом виде. Каждая колонка обязательно должна быть обёрнута в сетку.
Параграфы и заголовки
Структура HTML
<p><!-- текст параграфа --></p>
<h2 class="stk-theme_XXXX__style_large_header">
<!-- текст заголовка H2 -->
</h2>
<h4 class="stk-theme_XXXX__style_small_header">
<!-- текст заголовка H4 -->
</h4>
Пример использования
<p>Просто текст</p>
<p>Текст со <a href="https://setka.io">ссылкой</a> на сайт</p>
<p>Текст с <strong>полужирным</strong> выделением<br>
и переносом строки</p>
<p><img src="icon.png" alt="иконка"> текст</p>
<h2 class="stk-theme_3883__style_large_header">Большой заголовок раздела</h2>
Совместимость
|
Параграф может находиться внутри |
Параграф может содержать |
|
— Поста — Колонки — Контейнера |
— Текст — Теги оформления: <strong>, <i>, <em>, <a>, <u>, <del>, <sup>/<sub>, <span>, <br> — Изображения, тег <img> |
|
Параграф не может находиться внутри |
Параграф не может содержать |
|
— Сетки |
— Галереи — Разделители — Эмбеды — Сетки — Колонки |
Обратите внимание: параграф не может находиться внутри сетки. Прежде чем помещать параграф в сетку, её нужно поделить на колонки, или создать внутри сетки одну колонку, на всю ширину этой сетки.
Сетка
Сетки используются для многоколоночной верстки контента. Каждая сетка состоит из контейнера (stk-grid) и самих колонок (stk-grid-col). Контент располагается внутри колонок.
Структура HTML
<div class="stk-grid" data-ce-tag="grid">
<!-- колонка 1 -->
<!-- колонка 2 -->
<!-- колонка N -->
</div>
Пример использования
<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
<p>Текст в левой колонке</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
<p>Текст в правой колонке</p>
</div>
</div>
Совместимость
| Сетка может находиться внутри | Сетка может содержать |
|
— Поста
— Колонки
— Контейнера
|
— Колонку |
|
Сетка не может находиться внутри |
Сетка не может содержать |
|
— Параграфа |
Ничего кроме колонок. Весь контент сетки размещается в колонках. |
Колонка
Любая сетка делится на колонки. Если речь идёт об одной колонке, она всё равно должна находиться внутри сетки.
Структура HTML
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width=”{N}”>
<!-- содержимое колонки -->
</div>
Для колонки необходимо задать атрибут data-col-width, определяющий ее ширину. Это может быть целое число от 1 до максимального количества колонок в данной модульной сетке. Например, в 6-колоночной сетке атрибут data-col-width может принимать значения от 1 до 6.
Пример использования
<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>Узкая левая колонка</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>Центральная колонка с контентом</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>Узкая правая колонка</p>
</div>
</div>
Совместимость
|
Колонка должна находиться внутри |
Колонка может содержать |
|
— Сетки |
— Параграф — Сетку — Картинку — Эмбед — Разделитель — Галерею — Контейнер |
Изображение
-
Контейнера картинки — image-figure.
-
Маски — mask.
-
Самого изображения — <img>.
-
Подписи к изображению — <figcaption>.
Обратите внимание: все элементы кроме подписи — обязательны.
Структура HTML
<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
<img src="path/to/image.jpg" alt="">
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к картинке -->
</figcaption>
</figure>
Изображение может содержать ссылку:
<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
<a class="stk-link" href="https://setka.io">
<img src="path/to/image.jpg" alt="">
</a>
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к изображению -->
</figcaption>
</figure>
Совместимость
|
Изображение может находиться внутри |
Изображение может содержать |
|
— Поста — Колонки — Галереи — Контейнера |
Изображения не может содержать в себе дополнительные компоненты. |
Плейсхолдер изображения
Код плейсхолдера состоит из:
- Контейнера картинки — image-figure.
- Маски — mask.
- Подписи к изображению — <figcaption>.
Обратите внимание: все элементы кроме подписи — обязательны. Внутри плейсхолдера не должно быть самого изображения с тегом <img>.
Структура HTML
<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к картинке -->
</figcaption>
</figure>
Совместимость
|
Прейсхолдер изображения может находиться внутри |
Плейсхолдер изображения может содержать |
|
— Поста — Колонки — Галереи — Контейнера |
Плейсхолдер не может содержать в себе дополнительные компоненты. |
Эмбед
Эмбеды по структуре похожи на картинки и могут содержать произвольный HTML-код внутри тега <code>. В том числе — теги <style> и <script>.
Структура HTML
<figure class="stk-embed-figure" data-ce-tag="embed-figure">
<code class="stk-code">
<!-- Произвольный HTML-код -->
</code>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к эмбеду -->
</figcaption>
</figure>
Совместимость
|
Эмбед может находиться внутри |
Эмбед может содержать внутри |
|
— Поста — Колонки — Контейнера |
Произвольный HTML-код. |
Разделитель
Структура HTML
<hr class="stk-theme_3883__separator_basic_divider">
Пример использования
<hr class="stk-theme_3883__separator_basic_divider">
Совместимость
|
Разделитель может находиться внутри |
Разделитель может содержать |
|
— Поста — Колонки — Контейнера |
Разделитель — самостоятельный элемент. Он не может содержать другие элементы внутри себя. |
Галерея
Галерея — это контейнер для картинок. На странице поста и в режиме превью она превращается в работающее слайдшоу при помощи JS-скрипта галереи. Внутри галереи находятся изображения.
Структура HTML
<div class="stk-gallery" data-ce-tag="gallery">
<figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
<!-- Image 1 -->
</figure>
<figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
<!-- Image 2 -->
</figure>
<figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
<!-- Image 3 -->
</figure>
</div>
Совместимость
|
Галерея может находиться внутри |
Галерея может содержать |
|
— Поста — Колонки — Контейнера |
— Изображение |
Контейнер
Структура HTML
<div class="stk-container" data-ce-tag="container">
<!-- Cодержимое контейнера -->
</div>
Также контейнеры могут использоваться для создания блочной ссылки:
<a class="stk-container stk-container-link" data-ce-tag="container" href="https://setka.io">
<!-- Cодержимое контейнера -->
</a>
Совместимость
| Контейнер может находиться внутри | Контейнер может содержать |
|
— Поста — Колонки — Контейнера |
— Параграф — Сетку — Картинку — Эмбед — Разделитель — Галерею — Контейнер |
CSS в компонентах
Каждый компонент использует либо собственные CSS-классы, либо внутренние классы, определяемые стилем Setka.
Custom CSS
Компонент может содержать собственные уникальные классы. Чтобы добавить CSS, активируйте пункт Custom CSS for component на странице компонента. В нижней части экрана откроется поле ввода для CSS-кода:
Внутренние классы Setka
CDSM автоматически генерирует классы для заданных в стиле текстовых форматов, разделителей, кнопок и других элементов. Чтобы получить стандартные классы элементов, воспользуйтесь этой инструкцией.
Использование внутренних классов позволяет добавить в компонент текст определённого формата, разделитель или кнопку. Например, если нужно использовать определённый заголовок, задайте его класс в коде компонента:
<h2 class="stk-theme_3883__style_large_header">
Удаление компонентов
Компонент в посте представлен фрагментом статического HTML-кода. В большинстве случаев, удаление компонентов никак не влияет на уже опубликованные посты.
Компоненты с custom CSS
Удаляйте компоненты, имеющие custom CSS, с осторожностью. Убедитесь в том, что другие компоненты и элементы стиля не опираются на классы и правила, описанные в Custom CSS удаляемого компонента.
Если нужно удалить компонент с custom CSS, скопируйте содержимое поля Custom CSS for component и перенесите его в custom CSS вашего стиля.
Примеры компонентов
Цитата между разделителями
<hr class="stk-theme_3883__separator_basic_divider">
<p class="my-large-quote">
Текст цитаты
</p>
<hr class="stk-theme_3883__separator_basic_divider">
Вложенные контейнеры
<div class="stk-container my-outer-block" data-ce-tag="container">
<div class="stk-container my-inner-block" data-ce-tag="container">
<p>Текст внутри контейнера</p>
</div>
</div>
Сетка с боковой и основной колонками
<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="2">
<p class="stk-theme_3883__style_small_text">
Мелкий текст в боковой колонке
</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="4">
<p>
Колонка с основным текстом
</p>
</div>
</div>
Пост
Главный контейнер любой публикации, созданной в Setka Editor.