Аккаунт Setka Создание компонентов (HTML, CSS)

Создание компонентов (HTML, CSS)

В 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, вы можете узнать из этой статьи.

 

Похожие статьи