В Setka Editor можно составлять компоненты разных типов. Вы можете превратить пост, параграф, заголовок, сетку, колонку, картинку, эмбед, разделитель, галерею или контейнер в шаблон и затем использовать его во время верстки новых постов.
Содержание
Сетка с боковой и основной колонками
Пост
Главный контейнер любой публикации, созданной в Setka Editor.
Структура HTML:
<div class="stk-post"> <!-- содержимое поста -->
</div>
Пример:
<div class="stk-post">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
Параграфы и заголовки
Параграфы — минимальная единица контента в Setka Editor. Любой текст должен располагаться внутри параграфа. Наряду с параграфами существуют и заголовки (теги <h1-h6>)
Структура HTML:
<p><!-- текст параграфа --></p>
<h2 class="stk-theme_3883__style_large_header">
<!-- текст заголовка H2 -->
</h2>
<h4 class="stk-theme_3883__style_small_header">
<!-- текст заголовка H4 -->
</h4>
Параграф может находиться внутри:
- Поста
- Колонки
- Контейнера
Параграф может содержать:
- текст
- теги <b>, <strong>, <i>, <em>, <a>, <u>, <del>, <sup>, <span>, <br>
- инлайн-картинки <img>
Пример:
<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>
Сетка
Сетки используются для многоколоночной верстки контента. Каждая сетка состоит из контейнера (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>
Плейсхолдер картинки может находиться внутри:
- Поста
- Колонки
- Галереи
- Контейнера
Плейсхолдер картинки может содержать: ничего
Эмбед
Эмбеды по структуре похожи на картинки и могут содержать произвольный HTML-код (в том числе <style> и <script>) внутри элемента <code>.
Структура HTML:
<figure class="stk-embed-figure" data-ce-tag="embed-figure">
<code class="stk-code">
<!-- Произвольный HTML-код -->
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к эмбеду -->
</figcaption>
</figure>
Эмбед может находиться внутри:
- Поста
- Колонки
- Контейнера
Эмбед может содержать внутри: ничего
Разделитель
Структура HTML:
<hr class="{CSS-класс разделителя}">
Пример:
<hr class="stk-theme_3883__separator_basic_divider">
Разделитель может находиться внутри:
- Поста
- Колонки
- Контейнера
Разделитель может содержать внутри: ничего
Галерея
Галерея — это контейнер для картинок. На странице поста и в режиме превью она превращается в работающее слайдшоу при помощи JS-скрипта галереи.
Структура HTML:
<div class="stk-gallery" data-ce-tag="gallery">
<code class="stk-code">
<!-- Произвольный HTML-код -->
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Подпись к эмбеду -->
</figcaption>
</div>
Галерея может находиться внутри:
- Поста
- Колонки
- Контейнера
Галерея может содержать:
- Картинку
Контейнер
Контейнер — универсальная сущность для любых блоков, которые нельзя сформировать при помощи стандартных элементов редактора. К контейнерам, как и к другим элементам, можно добавлять любые классы и атрибуты.
Структура HTML:
<div class="stk-container" data-ce-tag="container">
<!-- содержимое контейнера -->
</div>
Также контейнеры могут использоваться для создания блочной ссылки:
<a class="stk-container stk-container-link"
data-ce-tag="container"
href="https://setka.io">
; <!-- содержимое контейнера -->
</a>
Контейнер может находиться внутри:
- Поста
- Колонки
- Контейнера
Контейнер может содержать:
- Параграф
- Сетку
- Картинку
- Эмбед
- Разделитель
- Галерею
- Контейнер
Примеры компонентов
Цитата между разделителями
<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 Post Editor, вы можете узнать из этой статьи.