Creating Components with HTML and CSS

Components for Setka Editor are made two ways:

• In the Editor itself. To do this, build up the element and save it using the Component button in the right-hand panel. More on it in this article.

• In the CDSM. It can be used to turn any HTML code into a component. This is useful if the standard features of the Editor are not enough. E.g. additional decoration or some specific structure is needed.

Any valid HTML code can be used as a component. The code also utilizes the standard Setka Editor elements: grids, columns, paragraphs, galleries, and images. They must contain the appropriate CSS classes. You can use your own classes in addition to the standard ones.

Follow the guidelines below to create valid components that will be accepted by the Editor.

A component can consist of the following elements:

Post

The main container of any Setka Editor publication.

HTML Structure

<div class="stk-post">
<!-- post content -->
</div>

Usage example

<div class="stk-post">
 <p>First paragraph</p>
 <p>Second paragraph</p>
</div>

Compatibility

Post can contain	Post cannot contain
Paragraphs and headers Decoration tags: <strong>, <i>, <em>, <a>, <u>, <del>, <sup>/<sub>, <span>, <br> Images, <img> tag Galleries Dividers Grids Containers	Columns

The post cannot contain pure columns. Each column must be wrapped in a grid.

Paragraphs and headings

A paragraph is a basic content unit in Setka Editor. Any text should be placed inside a paragraph. Along with the paragraphs, there are also headings. Heading tags are: <h1> – <h6>.

HTML Structure

<p><!-- paragraph content --></p>

<h2 class="stk-theme_XXXX__style_large_header">
 <!-- heading H2 -->
</h2>
    
<h4 class="stk-theme_XXXX__style_small_header">
 <!-- heading H4 -->
</h4>

Replace stk-theme_XXXX__style_large_header and stk-theme_XXXX__style_small_header with header classes from your style.

Compatibility

A paragraph can be inside	A paragraph can contain
Post Column Container	Text Decoration tags: <strong>, <i>, <em>, <a>, <u>, <del>, <sup>/<sub>, <span>, <br> Images, <img> tag

A paragraph cannot be placed inside	A paragraph cannot contain
Grid	Anything besides text, decoration, and images.

A paragraph cannot be placed inside a grid. Before placing a paragraph into a grid, you need to divide this grid into columns or create one column for the entire width of this grid.

Usage example

<p>Text</p>

<p>Text with <a href="https://setka.io">link</a> to the website</p>

<p>Text with <strong>strong</strong> weight<br> with line break</p>

<p><img src="icon.png" alt="icon"> text</p>

<h2 class="stk-theme_XXXX__style_small_header">
 Large header
</h2>

Replace stk-theme_XXXX__style_large_header with the header class from your style.

Grid

Layout Grid is used as a framework for a multi-column layout. Each grid consists of a container (stk-grid) and column (stk-grid-col). Images, paragraphs, and all other content types are placed within the columns.

HTML Structure

<div class="stk-grid" data-ce-tag="grid">
 <!-- column 1 -->
 <!-- column 2 -->
 <!-- column N -->
</div>

Compatibility

A grid can be placed inside	A grid can contain
Post Column Container	Column

A grid cannot be placed inside	A grid cannot contain
Paragraph	Nothing but columns. All grid content must be arranged in columns.

Usage example

<div class="stk-grid" data-ce-tag="grid">
 <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
   <p>Text in the left column</p>
 </div>
 <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
   <p>Text in the right column</p>
 </div>
</div>

Column

HTML Structure

<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width=”{N}”>
 <!-- column content -->
</div>

You need to set the data-col-width attribute for a column that determines its width. This attribute can be an integer from 1 to the maximum number of columns in a given grid. For example, in a 6-column grid, the data-col-width attribute can take values from 1 to 6.

Compatibility

A column can be placed inside	A column can contain
Grid	Paragraph Grid Image Embed Divider Gallery Container

Usage example

<div class="stk-grid" data-ce-tag="grid">
  <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
    <p>narrow left column</p>
  </div>
  <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
    <p>central column content</p>
  </div>
  <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
    <p>narrow right column</p>
  </div>
</div>

Image

An image consists of:

• An image container —image-figure.

• A mask — mask.

• The image itself — <img>.

• An image caption — <figcaption>.

All these elements are mandatory except for the caption.

HTML Structure

<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">
   <!-- Image caption -->
 </figcaption>
</figure>

An image placeholder can also contain a link:

<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">
   <!-- Image caption -->
 </figcaption>
</figure>

Compatibility

An image can be placed inside	An image can contain
Post Column Gallery Container	The image cannot contain any additional elements.

Image placeholder

Image placeholder — a place to insert an image into a post. When clicked, it opens the image selection menu on the right toolbar.

An image placeholder consists of:

• An image container —image-figure.

• A mask — mask.

• An image caption — <figcaption>.

All these elements are mandatory except for the caption. The placeholder should not contain the image itself (the <img> tag).

HTML Structure

<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">
   <!-- Image caption -->
 </figcaption>
</figure>

Compatibility

An image placeholder can be placed inside	An image placeholder can contain
Post Column Gallery Container	The placeholder cannot contain any additional elements.

Embed

An embed code structure is similar to an image and can contain any HTML code inside the <code> element, including <style> or <script>.

HTML Structure

<figure class="stk-embed-figure" data-ce-tag="embed-figure">
 <code class="stk-code">
   <!-- HTML-code -->
 </div>
 <figcaption class="stk-description" data-ce-tag="description">
   <!-- Embed code caption -->
 </figcaption>
</figure>

Compatibility

An embed can be placed inside	An embed can contain
Post Column Container	Some HTML code.

Divider

HTML Structure

<hr class="{Divider CSS-class}">

Compatibility

A divider can be placed inside	A divider can contain
Post Column Container	The divider is an independent element. It cannot contain other elements within itself.

Usage example

<hr class="stk-theme_XXXX__separator_basic_divider">

Replace tk-theme_XXXX__separator_basic_divider with the divider class from your style.

Gallery

A gallery is a container for images. Gallery's JavaScript makes an animated slideshow in the preview mode and on the page where a post is published. The images are placed inside the gallery.

HTML Structure

<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>

Compatibility

A gallery can be placed inside	A gallery can contain
Post Column Container	Images

Container

A container is a universal entity for any block type that can not be formed through the standard Setka Editor elements. Any class or attribute can be assigned for a container, ad for any other elements.

HTML Structure

<div class="stk-container" data-ce-tag="container">
  <!-- Content -->
</div>

Containers can also be used to form block links:

<a class="stk-container stk-container-link"
 data-ce-tag="container"
 href="https://setka.io">
 <!-- Content -->
</a>

Compatibility

A container can be placed inside	A container can contain
Post Column Container	Paragraph Grid Image Embed Divider Gallery Container

Deleting components

The component in an article is presented as static HTML code. In most cases, deleting a component from the style wouldn't affect the pages it was used on.

Components with custom CSS

Delete components with custom CSS carefully. Make sure other components and style elements do not rely on this component's CSS rules defined in the Custom CSS for component field.

If you need to delete the component that contains custom CSS, copy the content of the Custom CSS for component field and add it into your style's custom CSS.